<?php
session_start();
$host = 'localhost';
$db = 'trabajadores';
$username = 'root';
$password = 'root';

if (!isset($_SESSION['usuario'])) {
    header("Location: index.html");
    exit;
}

try {
    $conn = new mysqli($host, $username, $password, $db);

    if ($conn->connect_error) {
        die("Conexión fallida: " . $conn->connect_error);
    }

    $usuario = $_SESSION['usuario'];

    $sql = "SELECT NOMBRE, ROL FROM personal WHERE USUARIO = '$usuario'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $nombre = $row['NOMBRE'];
        $rol = $row['ROL'];

        // 👉 Agregamos la función para sacar iniciales
        function obtenerIniciales($nombreCompleto)
        {
            $partes = explode(' ', $nombreCompleto);
            $iniciales = '';

            foreach ($partes as $parte) {
                if (!empty($parte)) {
                    $iniciales .= strtoupper($parte[0]);
                }
            }
            return $iniciales;
        }

        // 👉 Ahora creamos las iniciales
        $inicialesUsuario = obtenerIniciales($nombre);
    } else {
        $nombre = "Usuario";
        $rol = "Usuario";
        $inicialesUsuario = "US"; // Algo por defecto
    }

    $conn->close();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="es" class="layout-navbar-fixed layout-compact layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="../assets/" data-template="vertical-menu-template">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Grafica</title>
    <meta name="description" content="" />
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../assets/img/favicon/favicon.ico" />
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Public+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" />

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="../assets/vendor/fonts/boxicons.css" />

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/estilosdetablas.css">
    <link rel="stylesheet" href="../css/botonesfiltros.css">
    <link rel="stylesheet" href="../css/botonexportar.css">

    <!-- Bootstrap (si no lo tienes) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Boxicons -->
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <!-- QuillJS (para el editor) -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <!-- Core CSS -->
    <link rel="stylesheet" href="../assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="../assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

    <link rel="stylesheet" href="../assets/vendor/libs/apex-charts/apex-charts.css" />

    <!-- Page CSS -->
    <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/vendor/css/pages/app-email.css" />
    <!-- Helpers -->
    <script src="../assets/vendor/js/helpers.js"></script>
    <script src="../assets/js/config.js"></script>

    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">


    <style>
        .wow {
            visibility: hidden;
        }

        /* Scroll para listas de correos */
        .email-list {
            max-height: 500px;
            /* Ajusta la altura visible */
            overflow-y: auto;
        }

        /* Estilo del scroll */
        .email-list::-webkit-scrollbar {
            width: 8px;
        }

        .email-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .email-actions {
            opacity: 0;
            /* Ocultos por defecto */
            pointer-events: none;
            /* No clickeables cuando están ocultos */
            transition: opacity 0.3s ease;
        }

        .email-item:hover .email-actions {
            opacity: 1;
            /* Aparecen con hover */
            pointer-events: auto;
            /* Ahora sí clickeables */
        }

        /* Estilo para el item activo */
        .email-filter-folders li.active a,
        .email-labels-list li.active a {
            background-color: rgba(255, 250, 250, 0.1);
            /* Azul clarito */
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease-in-out;
        }

        /* Animación de subrayado suave */
        .email-filter-folders li a,
        .email-labels-list li a {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .email-filter-folders li a::after,
        .email-labels-list li a::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 2px;

            transition: left 0.3s ease-in-out;
        }

        .email-filter-folders li.active a::after,
        .email-labels-list li.active a::after {
            left: 0;
        }

        .notificacion {
            color: #384551;
            block-size: 1.375rem !important;
            font-size: 1.375rem !important;
            inline-size: 1.375rem !important;
        }
    </style>
    <style>
        /* Animación de la campanita cuando hay notificaciones nuevas */
        @keyframes campanitaBrillo {

            0%,
            100% {
                color: #009DFF;
                /* color principal azul */
                text-shadow: 0 0 0 #009DFF;
                transform: scale(1);
            }

            50% {
                color: #33bfff;
                /* azul más brillante */
                text-shadow: 0 0 8px #33bfff, 0 0 12px #33bfff;
                transform: scale(1.2);
            }
        }

        .campanita-nueva {
            animation: campanitaBrillo 1s infinite;
            -webkit-text-fill-color: #009DFF;
            /* rellena el interior de la fuente */
            text-fill-color: #009DFF;
        }
    </style>
</head>

<body>
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <!-- Menu -->

            <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
                <div class="app-brand demo">
                    <a href="index.html" class="app-brand-link">
                        <span class="app-brand-logo demo">
                            <svg
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                x="0px"
                                y="0px"
                                viewBox="0 0 2000 2000"
                                style="enable-background:new 0 0 2000 2000;"
                                xml:space="preserve"
                                width="100"
                                height="100">
                                <style type="text/css">
                                    .st0 {
                                        display: none;
                                    }

                                    .st1 {
                                        fill: #009DFF;
                                    }
                                </style>
                                <g id="Capa_1" class="st0">
                                    <image style="display:inline;overflow:visible;" width="2550" height="1558" transform="matrix(1 0 0 1 494.3726 289.1373)"></image>
                                </g>
                                <g id="Capa_2">
                                    <g>
                                        <rect x="183.89" y="18.31" class="st1" width="1632.23" height="526.02" />
                                        <polygon class="st1" points="1031.3,1629.99 1031.3,1711.86 1308.44,1711.86 1308.44,1825.3 1031.3,1825.3 1031.3,1907.13 1308.44,1907.13 1308.44,1981.69 691.56,1981.69 691.56,682.4 1308.44,682.4 1308.44,1629.99" />
                                    </g>
                                </g>
                                <g id="Capa_3" class="st0"></g>
                            </svg>
                        </span>
                        <span class="app-brand-text demo menu-text fw-bolder ms-2">Trax</span>
                    </a>

                    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                        <i class="bx bx-chevron-left bx-sm align-middle"></i>
                    </a>

                    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                        <i class="bx bx-chevron-left bx-sm align-middle"></i>
                    </a>
                </div>

                <div class="menu-inner-shadow"></div>

                <ul class="menu-inner py-1">
                    <!-- Dashboard
            <li class="menu-item active">
              <a href="index.html" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                <div data-i18n="Analytics">Dashboard</div>
              </a>
            </li> -->

                    <!-- Layouts -->
                    <li class="menu-item ">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-layout"></i>
                            <div data-i18n="Layouts">Inicio</div>
                        </a>

                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="tablero.php" class="menu-link">
                                    <div data-i18n="Without menu">Tablero</div>
                                </a>
                            </li>
                            <!--
              <li class="menu-item">
                <a href="nuevo_cliente.php" class="menu-link">
                  <div data-i18n="Without navbar">Agregar Cliente</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="nuevo_proveedor.php" class="menu-link">
                  <div data-i18n="Container">Agregar Proveedor</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="nueva_cotizacion.php" class="menu-link">
                  <div data-i18n="Fluid">Agregar Cotizacion</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="nuevo_producto.php" class="menu-link">
                  <div data-i18n="Blank">Agregar Producto</div>
                </a>
              </li>

              <li class="menu-item">
                <a href="nueva_compra.php" class="menu-link">
                  <div data-i18n="Blank">Agregar Compra</div>
                </a>
              </li>

              <li class="menu-item">
                <a href="nueva_factura.php" class="menu-link">
                  <div data-i18n="Blank">Agregar Factura</div>
                </a>
              </li>
                -->
                        </ul>
                    </li>

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Aspel SAE</span>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-line-chart"></i>
                            <div data-i18n="Account Settings">Ventas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="facturas.php" class="menu-link">
                                    <div data-i18n="Account">Facturas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdeventa.php" class="menu-link">
                                    <div data-i18n="Notifications">Notas de Venta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="trasladoscartaporte.php" class="menu-link">
                                    <div data-i18n="Connections">Carta Porte</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="remisiones.php" class="menu-link">
                                    <div data-i18n="Connections">Remisiones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="pedidos.php" class="menu-link">
                                    <div data-i18n="Connections">Pedidos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cotizaciones.php" class="menu-link">
                                    <div data-i18n="Connections">Cotizaciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devoluciones.php" class="menu-link">
                                    <div data-i18n="Connections">Devoluciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="notasdecredito.php" class="menu-link">
                                    <div data-i18n="Connections">Notas de Crédito</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="parcialidades.php" class="menu-link">
                                    <div data-i18n="Connections">Parcialidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="comprobantesdepago.php" class="menu-link">
                                    <div data-i18n="Connections">Comprobantes</div>
                                </a>
                            <li class="menu-item">
                                <a href="estadisticas.php" class="menu-link">
                                    <div data-i18n="Connections">Estadisticas</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item  ">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-user"></i>
                            <div data-i18n="Authentications">Clientes</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item ">
                                <a href="clientes.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="cuentasxcobrar.php" class="menu-link">
                                    <div data-i18n="Basic">Cuentas X Cobrar</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="clientespoliza.php" class="menu-link">
                                    <div data-i18n="Basic">Clientes con Póliza</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="clientestimbres.php" class="menu-link">
                                    <div data-i18n="ClientStamps">Clientes Timbres</div>
                                </a>
                            </li>

                            <li class="menu-item">
                                <a href="clientesistemas.php" class="menu-link">
                                    <div data-i18n="ClientSystems">Clientes Sistemas</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-item active open">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-envelope"></i>
                            <div data-i18n="Authentications">Correo</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item  ">
                                <a href="correos.php" class="menu-link">
                                    <div data-i18n="Basic">Correos</div>
                                </a>
                            </li>
                            <li class="menu-item active">
                                <a href="grafica.php" class="menu-link">
                                    <div data-i18n="Basic">grafica</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="Seguimiento.php" class="menu-link">
                                    <div data-i18n="Basic">Seguimiento</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-package"></i>
                            <div data-i18n="Misc">Inventarios</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="productos.php" class="menu-link">
                                    <div data-i18n="Error">Productos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="existencias.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Existencias</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-shopping-bag"></i>
                            <div data-i18n="Misc">Compras</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="compras.php" class="menu-link">
                                    <div data-i18n="Error">Compras</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="recepciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Recepciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ordenes.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Ordenes</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="requisiciones.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Requisiciones</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="devolucionescom.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Devoluciones</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-group"></i>
                            <div data-i18n="Misc">Proveedores</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="proveedores.php" class="menu-link">
                                    <div data-i18n="Error">Proveedores</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="cuentasxpagar.php" class="menu-link">
                                    <div data-i18n="Under Maintenance">Cuentas X Pagar</div>
                                </a>
                            </li>
                        </ul>
                    </li>


                    <!-- Aspel COI -->
                    <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel COI</span></li>

                    <!-- Extended components -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-copy"></i>
                            <div data-i18n="Extended UI">Cuentas y Pólizas</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="cuentas.php" class="menu-link">
                                    <div data-i18n="Perfect Scrollbar">Cuentas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="polizas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="activos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="auxiliares.php" class="menu-link">
                                    <div data-i18n="Text Divider">Auxiliares</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="presupuestosPD.php" class="menu-link">
                                    <div data-i18n="Text Divider">Presupuestos DP</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="monedas.php" class="menu-link">
                                    <div data-i18n="Text Divider">Monedas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="departamentos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Departamentos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="otrosimpuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Otros Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="activosgenerales.php" class="menu-link">
                                    <div data-i18n="Text Divider">Activos Generales</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="saldosDP.php" class="menu-link">
                                    <div data-i18n="Text Divider">Saldos DP</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="rubros.php" class="menu-link">
                                    <div data-i18n="Text Divider">Rubros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="ccostos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Centro de Costos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="concepto.php" class="menu-link">
                                    <div data-i18n="Text Divider">Conceptos</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="regpol.php" class="menu-link">
                                    <div data-i18n="Text Divider">Registro de Pólizas</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="impuestos.php" class="menu-link">
                                    <div data-i18n="Text Divider">Impuestos</div>
                                </a>
                            </li>
                            <li class="menu-item ">
                                <a href="timbres.php" class="menu-link">
                                    <div data-i18n="Text Divider">Timbres</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- Aspel BANCO -->
                    <li class="menu-header small text-uppercase"><span class="menu-header-text">Aspel BANCO</span></li>
                    <!-- Forms -->
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-credit-card"></i>
                            <div data-i18n="Form Elements">Movimientos</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item ">
                                <a href="movimientos.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="moneda.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Moneda</div>
                                </a>

                            </li>
                            <li class="menu-item ">
                                <a href="beneficiosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Beneficios</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="cuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Cuentas ban</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="formadepagoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Forma de pago</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="parametrosxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Partidas de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="comprobantedeldocumentoxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Comprobante del documento</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="centrodecuentasxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Conceptos de movimientos</div>
                                </a>

                            </li>
                            <li class="menu-item">
                                <a href="historialxban.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Historial</div>
                                </a>

                            </li>
                        </ul>
                    </li>

                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Mantenimiento y Soporte</span>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-credit-card"></i>
                            <div data-i18n="Form Elements">Mantenimiento</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="ordenservicio.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Ordenes de Servicio</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="registrossemana.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Registros</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="estadisticasord.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Estadisticas</div>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- Logistica -->
                    <li class="menu-header small text-uppercase">
                        <span class="menu-header-text">Logística</span>
                    </li>

                    <li class="menu-item">
                        <a href="#" class="menu-link menu-toggle">
                            <i class="menu-icon tf-icons bx bx-car"></i>
                            <div data-i18n="Form Elements">Logística</div>
                        </a>
                        <ul class="menu-sub">
                            <li class="menu-item">
                                <a href="logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Nueva Ruta</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="datos_logistica.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Seguimiento</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="unidades.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Unidades</div>
                                </a>
                            </li>
                            <li class="menu-item">
                                <a href="repartidores.php" class="menu-link">
                                    <div data-i18n="Basic Inputs">Repartidores</div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </aside>
            <!-- / Menu -->

            <div class="layout-page">
                <!-- Navbar -->
                <nav class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
                    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                        <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                            <i class="bx bx-menu bx-sm"></i>
                        </a>
                    </div>

                    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                        <!-- Search -->
                        <div class="navbar-nav align-items-center">
                            <div class="nav-item d-flex align-items-center">
                                <i class="bx bx-search fs-4 lh-0"></i>
                                <input
                                    type="text"
                                    class="form-control border-0 shadow-none"
                                    placeholder="Buscar..."
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalBusqueda" />

                                <!-- Resultados -->
                                <ul id="searchResults" class="list-group search-dropdown"></ul>
                            </div>
                        </div>
                        <style>
                            /* Estilos para el desplegable */
                            .search-dropdown {
                                position: absolute;
                                top: 100%;
                                left: 0;
                                right: 0;
                                z-index: 9999;
                                margin-top: 0.2rem;
                                background: white;
                                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                                border-radius: 0.25rem;
                                overflow-y: auto;
                                max-height: 300px;
                            }

                            .search-dropdown li {
                                cursor: pointer;
                            }

                            .search-dropdown li:hover {
                                background-color: #f0f0f0;
                            }
                        </style>

                        <!-- /Search -->

                        <ul class="navbar-nav flex-row align-items-center ms-auto">



                            <!-- icono de idioma  -->
                            <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="icon-base bx bx-globe icon-md"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                    <li>
                                        <a class="dropdown-item active" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
                                            <span>French</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
                                            <span>Arabic</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
                                            <span>German</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <!-- Icono de modo oscuro -->
                            <li class="nav-item dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" id="nav-theme" href="javascript:void(0);" data-bs-toggle="dropdown" aria-label="Toggle theme (light)">
                                    <i class="bx-sun icon-base bx icon-md theme-icon-active"></i>
                                    <span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
                                </a>


                                <!-- Submenu de modo oscuro -->
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text" data-bs-popper="static">
                                    <li>
                                        <button type="button" class="dropdown-item align-items-center active" data-bs-theme-value="light" aria-pressed="true">
                                            <span>
                                                <i class="icon-base bx bx-sun icon-md me-3" data-icon="sun"></i>Light
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-moon icon-md me-3" data-icon="moon"></i>Dark
                                            </span>
                                        </button>
                                    </li>

                                    <li>
                                        <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="system" aria-pressed="false">
                                            <span>
                                                <i class="icon-base bx bx-desktop icon-md me-3" data-icon="desktop"></i>System
                                            </span>
                                        </button>
                                    </li>

                                </ul>
                                <!-- Aquí termina submenu -->
                            </li>


                            <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                    <i class="icon-base bx bx-grid-alt icon-md"></i>
                                </a>
                                <!-- submenu -->
                                <div class="dropdown-menu dropdown-menu-end p-0">
                                    <div class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Shortcuts</h6>
                                            <a href="javascript:void(0)" class="dropdown-shortcuts-add py-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Add shortcuts" data-bs-original-title="Add shortcuts"><i class="icon-base bx bx-plus-circle text-heading"></i></a>
                                        </div>
                                    </div>
                                    <div class="dropdown-shortcuts-list scrollable-container ps">
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-calendar icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-calendar.html" class="stretched-link">Calendar</a>
                                                <small>Appointments</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-food-menu icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
                                                <small>Manage Accounts</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-user icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-user-list.html" class="stretched-link">User App</a>
                                                <small>Manage Users</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-check-shield icon-26px text-heading"></i>
                                                </span>
                                                <a href="app-access-roles.html" class="stretched-link">Role Management</a>
                                                <small>Permission</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-pie-chart-alt-2 icon-26px text-heading"></i>
                                                </span>
                                                <a href="index.html" class="stretched-link">Dashboard</a>
                                                <small>User Dashboard</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-cog icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
                                                <small>Account Settings</small>
                                            </div>
                                        </div>
                                        <div class="row row-bordered overflow-visible g-0">
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-help-circle icon-26px text-heading"></i>
                                                </span>
                                                <a href="pages-faq.html" class="stretched-link">FAQs</a>
                                                <small>FAQs &amp; Articles</small>
                                            </div>
                                            <div class="dropdown-shortcuts-item col">
                                                <span class="dropdown-shortcuts-icon rounded-circle mb-3">
                                                    <i class="icon-base bx bx-window-open icon-26px text-heading"></i>
                                                </span>
                                                <a href="modal-examples.html" class="stretched-link">Modals</a>
                                                <small>Useful Popups</small>
                                            </div>
                                        </div>
                                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                                        </div>
                                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <!-- aqui termina submenu -->

                            </li>

                            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
                                <a class="nav-link dropdown-toggle hide-arrow" href="#" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="position-relative">
                                        <i class="bx notificacion bx-bell "></i>
                                        <span id="badgeNotification" class="badge rounded-pill bg-danger badge-dot badge-notifications border d-none"></span>
                                    </span>
                                </a>


                                <!-- Dropdown de notificaciones -->
                                <ul class="dropdown-menu dropdown-menu-end p-0">
                                    <li class="dropdown-menu-header border-bottom">
                                        <div class="dropdown-header d-flex align-items-center py-3">
                                            <h6 class="mb-0 me-auto">Notificaciones</h6>
                                            <a href="#" class="p-2" onclick="marcarTodoLeido()">
                                                <i class="bx bx-envelope-open text-heading"></i>
                                            </a>
                                        </div>
                                    </li>

                                    <li class="dropdown-notifications-list scrollable-container ps">
                                        <ul class="list-group list-group-flush" id="listaNotificaciones"></ul>
                                    </li>
                                </ul>

                            </li>
                            <audio id="notifSound" src="audio/mixkit-software-interface-start-2574.mp3" preload="auto"></audio>


                            <!-- User -->
                            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                                    <div class="avatar avatar-online">
                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <div class="d-flex">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="avatar avatar-online">
                                                        <span class="avatar-initial rounded-circle bg-label-primary"><?php echo htmlspecialchars($inicialesUsuario); ?></span>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <span class="fw-semibold d-block"><?php echo htmlspecialchars($nombre); ?></span>
                                                    <small class="text-muted"><?php echo htmlspecialchars($rol); ?></small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="dropdown-divider"></div>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="index.html">
                                            <i class="bx bx-power-off me-2"></i>
                                            <span class="align-middle">Cerrar Sesión</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!--/ User -->
                        </ul>
                    </div>
                </nav>
                <!-- / Navbar -->


                <!-- Content wrapper -->
                <div class="content-wrapper">
                    <!-- Content -->
                    <div class="container-xxl flex-grow-1 container-p-y">


                        <!-- <h2>Estadísticas de Ventas y Estados</h2> -->
                        <div class="row">
                            <div class="col-md-6 col-xxl-6 mb-6 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                                <div class="card h-100">
                                    <div class="card-header d-flex align-items-start justify-content-between">



                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-label-primary">
                                            </button>


                                        </div>
                                    </div>

                                    <div class="card-body pb-0">

                                        <!-- Gráfico -->
                                        <div class="position-relative">
                                            <div id="graficaImportes" class="position-relative"></div>
                                        </div>

                                    </div>
                                </div>
                            </div>


                            <!-- Estado de Ventas -->
                            <div class="col-md-6 mb-6">
                                <div class="card h-100">
                                    <div class="card-header d-flex align-items-center justify-content-between">
                                        <h5 class="card-title m-0">Detalle por Área</h5>
                                        <select id="areaSelect" class="form-select form-select-sm" style="width:auto;">
                                            <option value="">-- Selecciona un área --</option>
                                        </select>
                                    </div>
                                    <div class="card-body">
                                        <div id="graficaDonut"></div>
                                    </div>
                                </div>
                            </div>


                        </div>


                        <!-- / Layout wrapper -->
                        <?php
                        header('Content-Type: application/json; charset=UTF-8');
                        ini_set('display_errors', 1);
                        ini_set('display_startup_errors', 1);
                        error_reporting(E_ALL);

                        $host = 'localhost';
                        $dbname = 'CORREOS';
                        $user = 'root';
                        $pass = 'root';

                        // Áreas a mostrar
                        $areasPermitidas = ["ventas", "administracion", "contabilidad", "soporte"];

                        try {
                            $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $user, $pass);
                            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                            // Inicializar resultados
                            $resultados = [];
                            foreach ($areasPermitidas as $area) {
                                $resultados[$area] = [
                                    "SEGUIMIENTO" => 0,
                                    "TERMINADO" => 0
                                ];
                            }

                            // Consulta SQL
                            $sql = "
        SELECT AREA, UPPER(ESTADO) AS ESTADO, COUNT(*) AS TOTAL
        FROM correo_areas
        WHERE UPPER(ESTADO) IN ('SEGUIMIENTO','TERMINADO')
          AND AREA IN ('ventas','administracion','contabilidad','soporte')
        GROUP BY AREA, ESTADO
        ORDER BY AREA, ESTADO
    ";
                            $stmt = $pdo->query($sql);

                            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                $area = strtolower($row['AREA']); // forzar minúscula
                                $estado = strtoupper($row['ESTADO']);
                                $total = (int)$row['TOTAL'];

                                if (isset($resultados[$area][$estado])) {
                                    $resultados[$area][$estado] = $total;
                                }
                            }

                            // Arrays para JS
                            $etiquetasAreas = array_map('ucfirst', array_keys($resultados)); // para mostrar con mayúscula inicial
                            $seguimiento = array_column($resultados, 'SEGUIMIENTO');
                            $terminado = array_column($resultados, 'TERMINADO');
                            $datosPorArea = $resultados;
                        } catch (PDOException $e) {
                            echo json_encode([
                                "success" => false,
                                "message" => $e->getMessage()
                            ]);
                            exit;
                        }
                        ?>

                    </div>
                </div>


                <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
                <script>
                    new WOW().init();
                </script>


                <!-- Core JS -->
                <!-- build:js assets/vendor/js/core.js -->
                <script src="../assets/vendor/libs/jquery/jquery.js"></script>
                <script src="../assets/vendor/libs/popper/popper.js"></script>
                <script src="../assets/vendor/js/bootstrap.js"></script>
                <script src="../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

                <script src="../assets/vendor/js/menu.js"></script>
                <!-- endbuild -->

                <!-- Vendors JS -->
                <script src="../assets/vendor/libs/apex-charts/apexcharts.js"></script>

                <!-- Main JS -->
                <script src="../assets/js/main.js"></script>



                <!-- Place this tag in your head or just before your close body tag. -->
                <script async defer src="https://buttons.github.io/buttons.js"></script>




                <!-- MODAL DE BUSQUEDA -->
                <div class="modal fade" id="modalBusqueda" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Buscar módulo</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <div class="input-group mb-4">
                                    <span class="input-group-text"><i class="bx bx-search"></i></span>
                                    <input type="text" id="modalSearchInput" class="form-control" placeholder="Buscar módulo..." autocomplete="off">
                                </div>

                                <div class="row" id="modulosEstaticos">
                                    <!-- Columna 1 -->
                                    <div class="col-md-4 mb-4">
                                        <!-- Inicio -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-home me-1"></i> Inicio
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1">
                                                    <a href="tablero.php"><i class="bx bx-home-smile me-2"></i> Panel principal</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- Ventas -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-money me-1"></i> Ventas
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="facturas.php"><i class="bx bx-file me-2"></i> Facturas</a></li>
                                            </ul>
                                        </div>
                                        <!-- Clientes -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-user me-1"></i> Clientes
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="clientes.php"><i class="bx bx-user-pin me-2"></i> Clientes</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!-- Columna 2 -->
                                    <div class="col-md-4 mb-4">
                                        <!-- Inventario -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-package me-1"></i> Inventario
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="productos.php"><i class="bx bx-cube me-2"></i> Productos</a></li>
                                            </ul>
                                        </div>
                                        <!-- Compras -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-cart me-1"></i> Compras
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="compras.php"><i class="bx bx-purchase-tag me-2"></i> Compras</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!-- Columna 3 -->
                                    <div class="col-md-4 mb-4">
                                        <!-- Proveedores -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-building me-1"></i> Proveedores
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="proveedores.php"><i class="bx bx-user-voice me-2"></i> Proveedores</a></li>
                                            </ul>
                                        </div>
                                        <!-- Cuentas -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-wallet me-1"></i> Cuentas
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="cuentas.php"><i class="bx bx-credit-card me-2"></i> Cuentas</a></li>
                                            </ul>
                                        </div>
                                        <!-- Movimientos -->
                                        <div class="mb-3">
                                            <small class="text-uppercase text-muted fw-bold d-block mb-2">
                                                <i class="bx bx-transfer me-1"></i> Movimientos
                                            </small>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item px-0 py-1"><a href="movimientos.php"><i class="bx bx-transfer-alt me-2"></i> Movimientos</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Resultados de búsqueda -->
                                <ul id="modalSearchResults" class="list-group mb-3"></ul>

                            </div>
                        </div>
                    </div>
                </div>

                <style>
                    /* Ocultar resultados inicialmente */
                    #modalSearchResults {
                        display: none;
                        max-height: 300px;
                        overflow-y: auto;
                    }
                </style>
</body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/natural.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.8/countUp.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-material-ui/material-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- QuillJS -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<script>
    let enviados = 0;
    let limite = 200;
    let bloqueado = false;
    let intervalo;

    // Función que se ejecuta al enviar un correo
    function registrarEnvio() {
        enviados++;

        if (enviados >= limite) {
            iniciarBloqueo(3600); // 60 segundos de bloqueo
            enviados = 0; // Reinicia el contador después del bloqueo
        }
    }

    function iniciarBloqueo(segundosRestantes) {
        bloqueado = true;
        const desbloqueo = Date.now() + (segundosRestantes * 1000);
        localStorage.setItem("desbloqueoHasta", desbloqueo);

        btnRedactar.disabled = true;
        btnRedactar.removeAttribute("data-bs-toggle");
        btnRedactar.removeAttribute("data-bs-target");

        actualizarBoton(segundosRestantes);

        intervalo = setInterval(() => {
            const ahora = Date.now();
            const faltan = Math.max(0, Math.ceil((desbloqueo - ahora) / 1000));

            // Formato mm:ss
            const minutos = Math.floor(faltan / 60);
            const segundos = faltan % 60;
            btnRedactar.textContent = `Espera ${minutos}:${segundos.toString().padStart(2,'0')}`;

            if (faltan <= 0) {
                clearInterval(intervalo);
                restaurarBoton();
            }
        }, 1000);
    }



    //Actualiza el texto del botón
    function actualizarBoton(segundos) {
        const btn = document.getElementById("emailComposeSidebarLabel");
        btn.textContent = `Espera ${segundos}s`;
    }

    // Restaura el botón a estado normal
    function restaurarBoton() {
        bloqueado = false;
        localStorage.removeItem("desbloqueoHasta");
        const btn = document.getElementById("emailComposeSidebarLabel");
        btn.disabled = false;
        btn.setAttribute("data-bs-toggle", "modal");
        btn.setAttribute("data-bs-target", "#emailComposeSidebar");
        btn.textContent = "Redactar";
    }

    //Captura el evento del envío del formulario
    document.getElementById("formEnviarCorreo").addEventListener("submit", function(e) {
        e.preventDefault();

        if (bloqueado) {
            alert("Debes esperar 1 minuto antes.");
            return;
        }
        // Aquí va tu lógica AJAX o PHP real de envío
        console.log("Correo enviado...");
        registrarEnvio();

        // Cierra modal automáticamente tras enviar
        const modal = bootstrap.Modal.getInstance(document.getElementById("emailComposeSidebar"));
        modal.hide();
    });

    //Al cargar la página, revisa si hay un bloqueo guardado
    window.addEventListener("load", () => {
        const desbloqueoGuardado = localStorage.getItem("desbloqueoHasta");
        if (desbloqueoGuardado) {
            const ahora = Date.now();
            const faltan = Math.max(0, Math.ceil((desbloqueoGuardado - ahora) / 1000));
            if (faltan > 0) {
                iniciarBloqueo(faltan);
            } else {
                restaurarBoton();
            }
        }
    });
</script>


<script>
    document.querySelectorAll(
        ".email-filter-folders li, .email-labels-list li"
    ).forEach((item) => {
        item.addEventListener("click", () => {
            // Quita active de todos
            document
                .querySelectorAll(".email-filter-folders li, .email-labels-list li")
                .forEach((el) => el.classList.remove("active"));

            // Agrega active al seleccionado
            item.classList.add("active");
        });
    });
</script>
<script>
    const etiquetasAreas = <?= json_encode($etiquetasAreas ?? []) ?>;
    const seguimiento = <?= json_encode($seguimiento ?? []) ?>;
    const terminado = <?= json_encode($terminado ?? []) ?>;
    const datosPorArea = <?= json_encode($datosPorArea ?? []) ?>;

    // ===== BARRAS =====
    var optionsBar = {
        series: [{
                name: 'Seguimiento',
                data: seguimiento
            },
            {
                name: 'Terminado',
                data: terminado
            }
        ],
        chart: {
            type: 'bar',
            height: 400,
            stacked: true
        },
        xaxis: {
            categories: etiquetasAreas,
            title: {
                text: "Áreas"
            }
        },
        yaxis: {
            title: {
                text: "Cantidad de correos"
            }
        },
        colors: ['#009DFF', '#0063a0ff'],
        legend: {
            position: 'top'
        }
    };
    var chartBar = new ApexCharts(document.querySelector("#graficaImportes"), optionsBar);
    chartBar.render();

    // ===== DONUT =====
    const select = document.getElementById("areaSelect");
    etiquetasAreas.forEach(area => {
        const opt = document.createElement("option");
        opt.value = area.toLowerCase(); // coincidir con keys de datosPorArea
        opt.textContent = area;
        select.appendChild(opt);
    });

    let chartDonut;

    function renderDonut(area) {
        if (!area || !datosPorArea[area]) return;

        const valores = Object.values(datosPorArea[area]);
        const etiquetas = Object.keys(datosPorArea[area]);

        const optionsDonut = {
            chart: {
                type: 'donut',
                height: 350
            },
            labels: etiquetas,
            series: valores,
            colors: ['#009DFF', '#0063a0ff'],
            plotOptions: {
                pie: {
                    donut: {
                        size: "70%",
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: "Total",
                                formatter: () => valores.reduce((a, b) => a + b, 0)
                            }
                        }
                    }
                }
            },
            legend: {
                position: 'bottom'
            }
        };

        if (chartDonut) chartDonut.destroy();
        chartDonut = new ApexCharts(document.querySelector("#graficaDonut"), optionsDonut);
        chartDonut.render();
    }

    select.addEventListener("change", e => renderDonut(e.target.value));
</script>


<!-- Donut de Correos por Estado -->
<script>
    const etiquetasStatus = <?= json_encode($etiquetasStatus ?? []) ?>;
    const valoresStatus = <?= json_encode($valoresStatus ?? []) ?>;

    var options = {
        chart: {
            height: 396,
            parentHeightOffset: 0,
            type: "donut"
        },
        labels: etiquetasStatus,
        series: valoresStatus,
        colors: ['#9966FF', '#36A2EB', '#ff0000ff', '#08fa00ff', '#fcb400ff'],
        stroke: {
            width: 0
        },
        dataLabels: {
            enabled: false
        },
        legend: {
            show: true,
            position: "bottom",
            fontSize: "13px",
            fontFamily: 'Public Sans',
        },
        plotOptions: {
            pie: {
                donut: {
                    size: "77%",
                    labels: {
                        show: true,
                        value: {
                            fontSize: "24px",
                            fontFamily: 'Public Sans',
                            fontWeight: 500,
                            offsetY: -20
                        },
                        name: {
                            offsetY: 30,
                            fontFamily: 'Public Sans'
                        },
                        total: {
                            show: true,
                            label: "Total Correos",
                            fontSize: "16px",
                            fontWeight: 500,
                            formatter: function() {
                                const total = valoresStatus.reduce((a, b) => a + b, 0);
                                return total.toLocaleString('en-US');
                            }
                        }
                    }
                }
            }
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return val.toLocaleString('en-US');
                }
            }
        },
        responsive: [{
            breakpoint: 1025,
            options: {
                chart: {
                    height: 380
                }
            }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#graficaPastel"), options);
    chart.render();
</script>




<script>
    function getHistorial() {
        return JSON.parse(localStorage.getItem("historialNotificaciones")) || [];
    }

    function saveHistorial(historial) {
        localStorage.setItem("historialNotificaciones", JSON.stringify(historial));
    }

    function textoFecha(fechaStr) {
        const fecha = new Date(fechaStr);
        const hoy = new Date();
        const ayer = new Date();
        ayer.setDate(hoy.getDate() - 1);

        if (fecha.toDateString() === hoy.toDateString()) return "Hoy";
        if (fecha.toDateString() === ayer.toDateString()) return "Ayer";

        const diff = Math.floor((hoy - fecha) / (1000 * 60 * 60 * 24));
        return `Hace ${diff} días`;
    }

    function actualizarCampanita() {
        const badge = document.getElementById('badgeNotification');
        const campana = document.querySelector('.bx-bell');
        const noLeidos = getHistorial().filter(c => c.ES_NUEVO === 'S');

        badge.textContent = noLeidos.length;
        badge.classList.toggle('d-none', noLeidos.length === 0);

        if (noLeidos.length > 0) {
            campana.classList.add('campanita-nueva');
        } else {
            campana.classList.remove('campanita-nueva');
        }
    }

    function renderHistorial() {
        const lista = document.getElementById('listaNotificaciones');
        const historial = getHistorial();
        lista.innerHTML = '';

        const hoy = historial.filter(c => new Date(c.FECHA_ENVIO).toDateString() === new Date().toDateString());
        const otros = historial.filter(c => new Date(c.FECHA_ENVIO).toDateString() !== new Date().toDateString());

        function agregarLista(items) {
            let ultimaEtiqueta = '';
            items.forEach(correo => {
                const etiquetaFecha = textoFecha(correo.FECHA_ENVIO);
                if (etiquetaFecha !== ultimaEtiqueta) {
                    const liSep = document.createElement('li');
                    liSep.className = 'list-group-item text-center small text-muted';
                    liSep.textContent = etiquetaFecha;
                    lista.appendChild(liSep);
                    ultimaEtiqueta = etiquetaFecha;
                }

                const li = document.createElement('li');
                li.id = 'notif-' + correo.ID_CORREO;
                li.className = 'list-group-item dropdown-notifications-item cursor-pointer';
                li.innerHTML = `
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <strong ${correo.ES_NUEVO === 'S' ? '' : 'style="font-weight:normal;color:#777;"'}>
                ${correo.ASUNTO}
              </strong><br/>
              <small>${correo.REMITENTE} - ${new Date(correo.FECHA_ENVIO).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</small>
            </div>
            <span class="badge ${correo.ES_NUEVO === 'S' ? 'bg-primary' : 'bg-secondary'}">
              ${correo.ES_NUEVO === 'S' ? 'Nuevo' : 'Leído'}
            </span>
          </div>
        `;

                li.addEventListener('click', async () => {
                    await marcarComoLeido(correo.ID_CORREO);
                    window.location.href = `correos.php?id=${correo.ID_CORREO}`;
                });

                lista.appendChild(li);
            });
        }

        agregarLista(hoy);
        agregarLista(otros);

        if (historial.length > 0) {
            const noLeidos = historial.filter(c => c.ES_NUEVO === 'S');
            const resumen = document.createElement('li');
            resumen.className = 'list-group-item text-center small text-muted';
            resumen.textContent = `Total: ${historial.length} notificaciones (${noLeidos.length} sin leer)`;
            lista.appendChild(resumen);
        }

        lista.style.maxHeight = '400px';
        lista.style.overflowY = 'auto';

        actualizarCampanita();
    }

    async function cargarNotificaciones() {
        const res = await fetch('notificaciones.php');
        const correos = await res.json();

        let historial = getHistorial();
        let hayNuevas = false;

        correos.forEach(correo => {
            if (!historial.find(c => c.ID_CORREO === correo.ID_CORREO)) {
                historial.unshift(correo);
                if (correo.ES_NUEVO === 'S') hayNuevas = true;
            }
        });

        historial = historial.slice(0, 100);
        saveHistorial(historial);
        renderHistorial();

        if (hayNuevas) {
            const sonido = document.getElementById("notifSound");
            if (sonido) {
                const playPromise = sonido.play();
                if (playPromise !== undefined) {
                    playPromise.catch(() => console.log("Interacción requerida para reproducir audio."));
                }
            }
        }
    }

    async function marcarComoLeido(idCorreo) {
        const res = await fetch('marcar_leido.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: `id=${idCorreo}`
        });
        const data = await res.json();
        if (data.success) {
            let historial = getHistorial().map(c => {
                if (c.ID_CORREO === idCorreo) c.ES_NUEVO = 'N';
                return c;
            });
            saveHistorial(historial);
            renderHistorial();
        }
    }

    async function marcarTodoLeido() {
        const res = await fetch('marcar_todo_leido.php', {
            method: 'POST'
        });
        const data = await res.json();
        if (data.success) {
            let historial = getHistorial().map(c => ({
                ...c,
                ES_NUEVO: 'N'
            }));
            saveHistorial(historial);
            renderHistorial();
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        renderHistorial();
        cargarNotificaciones();
        setInterval(cargarNotificaciones, 30000);
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const selectAllCheckbox = document.getElementById("email-select-all");
        if (!selectAllCheckbox) return;

        // Función que actualiza el estado del checkbox 'select all'
        function actualizarSelectAll() {
            // Busca todos los checkboxes de correos visibles
            const correosVisibles = Array.from(document.querySelectorAll(".email-list-item-input"))
                .filter(chk => chk.offsetParent !== null); // Solo visibles en pantalla

            const todosSeleccionados = correosVisibles.length > 0 && correosVisibles.every(chk => chk.checked);
            selectAllCheckbox.checked = todosSeleccionados;
        }

        // Listener para el checkbox "Seleccionar todo"
        selectAllCheckbox.addEventListener("change", () => {
            const correosVisibles = Array.from(document.querySelectorAll(".email-list-item-input"))
                .filter(chk => chk.offsetParent !== null);
            correosVisibles.forEach(chk => {
                chk.checked = selectAllCheckbox.checked;
            });
        });

        // Delegación de evento para todos los checkboxes de correo (captura dinámica)
        document.body.addEventListener("change", e => {
            if (e.target.classList.contains("email-list-item-input")) {
                actualizarSelectAll();
            }
        });
    });
</script>

<script>
    // Mostrar nombre del archivo adjunto cuando se seleccione
    document.getElementById('attach-file').addEventListener('change', function() {
        const nombreArchivo = this.files[0]?.name || '';
        document.getElementById('archivo-nombre').textContent = nombreArchivo;
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        let clientes = [];

        const modalBuscar = new bootstrap.Modal(document.getElementById("modalBuscarCliente"));
        const listaClientes = document.getElementById("listaCorreos2");
        const busquedaCliente = document.getElementById("busquedaCliente");
        const btnSeleccionar = document.getElementById("btnSeleccionarClientesLista2");
        const inputEmail = document.getElementById("email-to");
        const nombreInput = document.getElementById("cliente-nombre");
        const btnBuscar = document.getElementById("btnBuscarCliente");
        const selectAll = document.getElementById("email-select-all-lista2");
        const numResultados = document.getElementById("numResultados");
        const selectSistema = document.getElementById("selectSistema");

        // Abrir modal búsqueda
        btnBuscar.addEventListener("click", cargarClientes);
        selectSistema.addEventListener("change", cargarClientes);
        numResultados.addEventListener("change", mostrarClientes);
        busquedaCliente.addEventListener("input", mostrarClientes);

        async function cargarClientes() {
            const sistema = selectSistema.value;
            try {
                const res = await fetch("obtener_correos.php?sistema=" + sistema);
                const data = await res.json();
                if (data.error) {
                    listaClientes.innerHTML = `<li class="list-group-item text-danger">${data.error}</li>`;
                    return;
                }
                clientes = data;
                mostrarClientes();
                modalBuscar.show();
            } catch {
                listaClientes.innerHTML = `<li class="list-group-item text-danger">Error al cargar clientes</li>`;
            }
        }

        function mostrarClientes() {
            const filtro = busquedaCliente.value.toLowerCase();
            const sistemaSeleccionado = selectSistema.value;
            listaClientes.innerHTML = "";
            const limite = parseInt(numResultados.value, 10);

            const encontrados = clientes
                .filter(c => {
                    const matchFiltro = c.nombre.toLowerCase().includes(filtro) || c.correo.toLowerCase().includes(filtro);
                    let matchSistema = true;
                    if (sistemaSeleccionado !== "TODOS") {
                        matchSistema = c['tiene_datos_' + sistemaSeleccionado];
                    }
                    return matchFiltro && matchSistema;
                })
                .slice(0, limite);

            if (!encontrados.length) {
                listaClientes.innerHTML = '<li class="list-group-item text-muted">No se encontraron resultados</li>';
                selectAll.checked = false;
                return;
            }

            encontrados.forEach(c => {
                const li = document.createElement("li");
                li.className = "list-group-item d-flex align-items-center";
                li.innerHTML = `
        <input type="checkbox" class="me-2 cliente-check" value="${c.correo}" data-nombre="${c.nombre}">
        ${c.nombre} &lt;${c.correo}&gt; 
        <span class="badge bg-success ms-2">${sistemaSeleccionado === "TODOS" ? "" : sistemaSeleccionado}</span>
      `;
                listaClientes.appendChild(li);
            });

            selectAll.checked = false;
        }

        // Seleccionar todos
        selectAll.addEventListener("change", () => {
            listaClientes.querySelectorAll(".cliente-check").forEach(chk => chk.checked = selectAll.checked);
        });

        // Agregar seleccionados y abrir modal redactar correo
        btnSeleccionar.addEventListener("click", () => {
            const seleccionados = Array.from(listaClientes.querySelectorAll(".cliente-check:checked"));
            inputEmail.value = seleccionados.map(chk => chk.value).join(",");
            nombreInput.value = seleccionados.map(chk => chk.dataset.nombre).join(", ");

            modalBuscar.hide();

            const emailComposeModal = new bootstrap.Modal(document.getElementById("emailComposeSidebar"));
            emailComposeModal.show();
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const form = document.getElementById("formEnviarCorreo");
        const btnEnviar = document.getElementById("btnEnviarCorreo");
        const spinner = document.getElementById("spinnerEnviar");
        const btnRedactar = document.getElementById("emailComposeSidebarLabel");

        const fileInput = document.getElementById("attach-file");
        const fileNameSpan = document.getElementById("archivo-nombre");
        const archivoPreview = document.getElementById("archivoPreview");
        const archivoImg = document.getElementById("archivoImg");

        const firmaSelect = document.getElementById("firma");
        const firmaPreview = document.getElementById("firmaPreview");
        const firmaImg = document.getElementById("firmaImg");

        const toastEl = document.getElementById("toastCorreo");
        const toastBootstrap = new bootstrap.Toast(toastEl, {
            delay: 3000
        });

        const modalEl = document.getElementById("emailComposeSidebar");
        let modalBootstrap = bootstrap.Modal.getInstance(modalEl);
        if (!modalBootstrap) modalBootstrap = new bootstrap.Modal(modalEl);

        let intervalo;
        let bloqueado = false;

        // ⏱️ Bloqueo con cronómetro hh:mm:ss
        function iniciarBloqueo(segundosRestantes) {
            bloqueado = true;
            const desbloqueo = Date.now() + (segundosRestantes * 1000);
            localStorage.setItem("desbloqueoHasta", desbloqueo);

            btnRedactar.disabled = true;
            btnRedactar.removeAttribute("data-bs-toggle");
            btnRedactar.removeAttribute("data-bs-target");

            actualizarBoton(segundosRestantes);

            intervalo = setInterval(() => {
                const ahora = Date.now();
                const faltan = Math.max(0, Math.ceil((desbloqueo - ahora) / 1000));

                const horas = Math.floor(faltan / 3600);
                const minutos = Math.floor((faltan % 3600) / 60);
                const segundos = faltan % 60;

                btnRedactar.textContent = `Espera ${horas}:${minutos.toString().padStart(2,'0')}:${segundos.toString().padStart(2,'0')}`;

                if (faltan <= 0) {
                    clearInterval(intervalo);
                    restaurarBoton();
                }
            }, 1000);
        }

        function restaurarBoton() {
            bloqueado = false;
            localStorage.removeItem("desbloqueoHasta");
            btnRedactar.disabled = false;
            btnRedactar.setAttribute("data-bs-toggle", "modal");
            btnRedactar.setAttribute("data-bs-target", "#emailComposeSidebar");
            btnRedactar.textContent = "Redactar";
        }

        // 🔁 Revisar bloqueo al recargar
        window.addEventListener("load", () => {
            const desbloqueoGuardado = localStorage.getItem("desbloqueoHasta");
            if (desbloqueoGuardado) {
                const ahora = Date.now();
                const faltan = Math.max(0, Math.ceil((desbloqueoGuardado - ahora) / 1000));
                if (faltan > 0) {
                    iniciarBloqueo(faltan);
                } else {
                    restaurarBoton();
                }
            }
        });

        // Vista previa archivo
        fileInput.addEventListener("change", () => {
            const file = fileInput.files[0];
            if (!file) {
                archivoImg.src = "";
                archivoPreview.style.display = "none";
                fileNameSpan.textContent = "";
                return;
            }
            fileNameSpan.textContent = file.name;
            if (file.type.startsWith("image/")) {
                const reader = new FileReader();
                reader.onload = e => {
                    archivoImg.src = e.target.result;
                    archivoPreview.style.display = "block";
                };
                reader.readAsDataURL(file);
            } else {
                archivoImg.src = "";
                archivoPreview.style.display = "none";
            }
        });

        // Vista previa firma
        firmaSelect.addEventListener("change", () => {
            const path = firmaSelect.value;
            if (!path) {
                firmaImg.src = "";
                firmaPreview.style.display = "none";
                return;
            }
            firmaImg.src = path;
            firmaPreview.style.display = "block";
        });

        // 🚀 Enviar correo
        form.addEventListener("submit", async (e) => {
            e.preventDefault();
            if (bloqueado) {
                alert("⏳ Debes esperar hasta que termine el cronómetro antes de enviar más correos.");
                return;
            }

            spinner.classList.remove("d-none");
            btnEnviar.disabled = true;

            const formData = new FormData(form);

            try {
                const res = await fetch("enviar_correo.php", {
                    method: "POST",
                    body: formData
                });
                const data = await res.json();

                if (data.success) {
                    toastBootstrap.show();
                    modalBootstrap.hide();
                    form.reset();
                    archivoImg.src = "";
                    archivoPreview.style.display = "none";
                    fileNameSpan.textContent = "";
                    firmaImg.src = "";
                    firmaPreview.style.display = "none";
                } else if (data.bloqueo) {
                    // 🚨 Activar bloqueo desde backend con tiempo real
                    iniciarBloqueo(data.tiempo_restante);
                    alert(data.message);
                } else {
                    alert("⚠️ Error: " + (data.message || data.errores?.join(", ") || "Desconocido"));
                }
            } catch (err) {
                console.error(err);
                alert("No se pudo conectar al servidor.");
            } finally {
                spinner.classList.add("d-none");
                btnEnviar.disabled = false;
            }
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        let clientes = [];
        let paginaActual = 1;

        const modal = new bootstrap.Modal(document.getElementById("modalBuscarCliente"));
        const listaClientes = document.getElementById("listaCorreos2");
        const busquedaCliente = document.getElementById("busquedaCliente");
        const btnSeleccionar = document.getElementById("btnSeleccionarClientesLista2");
        const inputEmail = document.getElementById("email-to");
        const btnBuscar = document.getElementById("btnBuscarCliente");
        const selectAll = document.getElementById("email-select-all-lista2");
        const numResultados = document.getElementById("numResultados");
        const selectSistema = document.getElementById("selectSistema");

        // Abrir modal y cargar clientes
        btnBuscar.addEventListener("click", async () => {
            paginaActual = 1;
            await cargarClientes();
            modal.show();
        });

        // Cambiar sistema recarga clientes
        selectSistema.addEventListener("change", () => {
            paginaActual = 1;
            cargarClientes();
        });
        numResultados.addEventListener("change", () => {
            paginaActual = 1;
            mostrarClientes();
        });
        busquedaCliente.addEventListener("input", () => {
            paginaActual = 1;
            mostrarClientes();
        });

        async function cargarClientes() {
            const sistema = selectSistema.value;

            try {
                const res = await fetch("obtener_correos.php?sistema=" + sistema);
                const data = await res.json();
                if (data.error) {
                    listaClientes.innerHTML = `<li class="list-group-item text-danger">${data.error}</li>`;
                    return;
                }
                clientes = data;
                mostrarClientes();
            } catch (err) {
                listaClientes.innerHTML = `<li class="list-group-item text-danger">Error al cargar clientes</li>`;
            }
        }

        function mostrarClientes() {
            const filtro = busquedaCliente.value.toLowerCase();
            const sistemaSeleccionado = selectSistema.value;
            const limite = parseInt(numResultados.value, 10);

            // Filtrar clientes
            const encontrados = clientes.filter(c => {
                const matchFiltro = c.nombre.toLowerCase().includes(filtro) || c.correo.toLowerCase().includes(filtro);
                let matchSistema = true;
                if (sistemaSeleccionado !== "TODOS") {
                    matchSistema = c['tiene_datos_' + sistemaSeleccionado];
                }
                return matchFiltro && matchSistema;
            });

            const totalPaginas = Math.ceil(encontrados.length / limite);
            if (paginaActual > totalPaginas) paginaActual = totalPaginas || 1;

            const resultadosPagina = encontrados.slice((paginaActual - 1) * limite, paginaActual * limite);

            listaClientes.innerHTML = "";
            if (!resultadosPagina.length) {
                listaClientes.innerHTML = '<li class="list-group-item text-muted">No se encontraron resultados</li>';
                selectAll.checked = false;
                mostrarControlesPaginacion(totalPaginas);
                return;
            }

            resultadosPagina.forEach(c => {
                const li = document.createElement("li");
                li.className = "list-group-item d-flex align-items-center";
                li.innerHTML = `
        <input type="checkbox" class="me-2 cliente-check" value="${c.correo}" data-nombre="${c.nombre}">
        ${c.nombre} &lt;${c.correo}&gt; 
        <span class="badge bg-success ms-2">${sistemaSeleccionado === "TODOS" ? "" : sistemaSeleccionado}</span>
      `;
                listaClientes.appendChild(li);
            });

            selectAll.checked = false;
            mostrarControlesPaginacion(totalPaginas);
        }

        // Controles de paginación estilo DataTables
        function mostrarControlesPaginacion(totalPaginas) {
            let pagContainer = document.getElementById("paginacionClientes");
            if (!pagContainer) {
                pagContainer = document.createElement("div");
                pagContainer.id = "paginacionClientes";
                pagContainer.className = "mt-2 d-flex justify-content-center align-items-center gap-1 flex-wrap";
                listaClientes.parentElement.appendChild(pagContainer);
            }
            pagContainer.innerHTML = "";

            // Botón "Anterior"
            const btnPrev = document.createElement("button");
            btnPrev.className = "btn btn-sm btn-outline-secondary";
            btnPrev.textContent = "« Anterior";
            btnPrev.disabled = (paginaActual === 1);
            btnPrev.addEventListener("click", () => {
                if (paginaActual > 1) {
                    paginaActual--;
                    mostrarClientes();
                }
            });
            pagContainer.appendChild(btnPrev);

            // Botones de páginas (con rango)
            const rango = 2; // mostrar 2 antes y 2 después
            let inicio = Math.max(1, paginaActual - rango);
            let fin = Math.min(totalPaginas, paginaActual + rango);

            if (inicio > 1) {
                agregarBotonPagina(pagContainer, 1);
                if (inicio > 2) {
                    const puntos = document.createElement("span");
                    puntos.textContent = "...";
                    pagContainer.appendChild(puntos);
                }
            }

            for (let i = inicio; i <= fin; i++) {
                agregarBotonPagina(pagContainer, i);
            }

            if (fin < totalPaginas) {
                if (fin < totalPaginas - 1) {
                    const puntos = document.createElement("span");
                    puntos.textContent = "...";
                    pagContainer.appendChild(puntos);
                }
                agregarBotonPagina(pagContainer, totalPaginas);
            }

            // Botón "Siguiente"
            const btnNext = document.createElement("button");
            btnNext.className = "btn btn-sm btn-outline-secondary";
            btnNext.textContent = "Siguiente »";
            btnNext.disabled = (paginaActual === totalPaginas);
            btnNext.addEventListener("click", () => {
                if (paginaActual < totalPaginas) {
                    paginaActual++;
                    mostrarClientes();
                }
            });
            pagContainer.appendChild(btnNext);
        }

        function agregarBotonPagina(container, num) {
            const btn = document.createElement("button");
            btn.className = "btn btn-sm " + (num === paginaActual ? "btn-primary" : "btn-outline-primary");
            btn.textContent = num;
            btn.addEventListener("click", () => {
                paginaActual = num;
                mostrarClientes();
            });
            container.appendChild(btn);
        }

        // Seleccionar todos
        selectAll.addEventListener("change", () => {
            listaClientes.querySelectorAll(".cliente-check").forEach(chk => {
                chk.checked = selectAll.checked;
            });
        });

        // Pasar seleccionados al input
        btnSeleccionar.addEventListener("click", () => {
            const seleccionados = Array.from(listaClientes.querySelectorAll(".cliente-check:checked"));
            inputEmail.value = seleccionados.map(chk => chk.value).join(",");
            modal.hide();
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const modalBuscarEl = document.getElementById("modalBuscarCliente");
        const modalRedactarEl = document.getElementById("emailComposeSidebar");

        const modalBuscar = new bootstrap.Modal(modalBuscarEl);
        const modalRedactar = new bootstrap.Modal(modalRedactarEl);

        const btnCerrarBuscar = modalBuscarEl.querySelector(".btn-close");

        btnCerrarBuscar.addEventListener("click", () => {
            // Cerrar modal Buscar
            modalBuscar.hide();

            // Cuando termine de cerrarse
            modalBuscarEl.addEventListener("hidden.bs.modal", () => {
                // 🔹 Elimina cualquier backdrop residual
                document.querySelectorAll(".modal-backdrop").forEach(b => b.remove());

                // Abrir modal Redactar
                modalRedactar.show();
            }, {
                once: true
            });
        });
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const firmaSelect = document.getElementById('firma');
        const firmaPreview = document.getElementById('firmaPreview');
        const firmaImg = document.getElementById('firmaImg');

        firmaSelect.addEventListener('change', () => {
            if (firmaSelect.value) {
                firmaImg.src = firmaSelect.value;
                firmaPreview.style.display = 'block';
            } else {
                firmaImg.src = '';
                firmaPreview.style.display = 'none';
            }
        });
    });
</script>

</html>