<?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>Correos</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>
    .campanita-nueva {
      animation: campanitaShake 0.5s ease-in-out 3;
      color: #00c3ffff !important;
      /* azul de notificación */
    }

    @keyframes campanitaShake {

      0%,
      100% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(-15deg);
      }

      75% {
        transform: rotate(15deg);
      }
    }


    /* Scroll personalizado del historial */
    #listaNotificaciones {
      max-height: 300px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #999 #f1f1f1;
    }

    #listaNotificaciones::-webkit-scrollbar {
      width: 8px;
    }

    #listaNotificaciones::-webkit-scrollbar-thumb {
      background: #999;
      border-radius: 10px;
    }

    #listaNotificaciones::-webkit-scrollbar-thumb:hover {
      background: #666;
    }

    .correo-nuevo .email-list-item-username,
    .correo-nuevo .email-list-item-subject {
      font-weight: 700;
      /* Negritas fuertes */
      color: #111 !important;
      /* Texto más oscuro */
    }

    #alertBellContainer .alert {
      width: 220px;
      /* estrecho */
      min-height: auto;
      padding: 10px 12px;
      /* menos relleno */
      border-radius: 10px;
      /* esquinas suaves */
      font-size: 13px;
      /* más compacto */
      line-height: 1.3;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* Encabezado compacto */
    #alertBellContainer .alert h5 {
      font-size: 14px;
      margin: 0;
      font-weight: 600;
    }

    /* Texto del correo: truncado en una línea */
    #alertBellContainer .alert p {
      margin: 0;
      font-size: 12px;
      color: #444;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }



    #alertBellContainer .alert.show {
      transform: translateY(0);
      opacity: 1;
    }

    /* Submenú en dropdown */
    .dropdown-submenu {
      position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
      top: 0;
      left: 100%;
      margin-left: .1rem;
      margin-right: .1rem;
    }

    .bg-contabilidad {
      background-color: #009DFF;
    }

    .bg-ventas {
      background-color: #6BFA9F;
    }

    .bg-administracion {
      background-color: #F1B91E;
    }

    .bg-soporte {
      background-color: #EB248B;
    }

    .bg-programacion {
      background-color: #54BBB2;
    }

    .bg-diseño {
      background-color: #3BFF0F;
    }

    .bg-marketing {
      background-color: #E925E6;
    }
  </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">
            <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>

          <!-- Correos -->
          <li class="menu-header small text-uppercase">
            <span class="menu-header-text">Procesos</span>
          </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="Form Elements">Correo</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item active">
                <a href="correos.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Correos</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="grafica.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Gráfica</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="Seguimiento.php" class="menu-link">
                  <div data-i18n="Basic Inputs">Seguimiento</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>
              <!-- 🔔 Campanita -->
              <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2" id="notiBell">
                <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>
                    <!-- Contador -->
                    <span id="badgeNotification"
                      class="badge rounded-pill bg-dark position-absolute top-0 start-100 translate-middle d-none"
                      style="font-size: 0.7rem; min-width: 18px;">
                    </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"
                    style="max-height: 300px; overflow-y: auto;">
                    <ul class="list-group list-group-flush" id="listaNotificaciones"></ul>
                  </li>
                </ul>
              </li>


              <!--  Contenedor para la alerta flotante justo debajo -->
              <div id="alertBellContainer"
                style="position:absolute; top:60px; right:80px; z-index:1200; width:220px;">
              </div>

              <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">
            <div class="row">
              <!--/ Total Revenue -->
              <div class="col-12 col-md-12 col-lg-12 order-3 order-md-2">
                <div class="row">

                  <!-- </div>
                    <div class="row"> -->
                </div>
              </div>
            </div>
            <!-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Tables /</span> Basic Tables</h4> -->



            <div class="app-email card">
              <div class="row g-0">
                <!-- Email Sidebar -->
                <div class="col app-email-sidebar border-end flex-grow-0" id="app-email-sidebar">
                  <div class="btn-compost-wrapper d-grid">
                    <button class="btn btn-primary btn-compose"
                      data-bs-toggle="modal"
                      data-bs-target="#emailComposeSidebar"
                      id="emailComposeSidebarLabel">
                      Redactar
                    </button>

                  </div>
                  <div class="btn-compost-wrapper d-grid">
                    <!-- Botón para abrir la modal de Envío Automático -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalEnvioAutomatico">
                      Abrir Envío Automático
                    </button>

                  </div>


                  <div class="email-filters pt-4 pb-2">
                    <div class="email-filters pt-2 pb-2 px-3">
                      <ul class="email-filter-folders list-unstyled">
                        <li class="active mb-3" data-target="inbox">
                          <a href="javascript:void(0);" id="btnInbox" class="d-flex align-items-center">
                            <i class="icon-base bx bx-envelope"></i>
                            <span class="ms-2">Bandeja</span>
                          </a>
                        </li>
                        <li class="mb-3" data-target="sent">
                          <a href="javascript:void(0);" id="btnSent" class="d-flex align-items-center">
                            <i class="icon-base bx bx-send"></i>
                            <span class="ms-2">Enviado</span>
                          </a>
                        </li>
                        <li class="mb-3" data-target="archived">
                          <a href="javascript:void(0);" id="btnArchived" class="d-flex align-items-center">
                            <i class="icon-base bx bx-archive"></i>
                            <span class="ms-2">Archivados</span>
                          </a>
                        </li>
                        <li class="mb-3" data-target="starred">
                          <a href="javascript:void(0);" id="btnStarred" class="d-flex align-items-center">
                            <i class="icon-base bx bx-star"></i>
                            <span class="ms-2">Destacados</span>
                          </a>
                        </li>


                        <li class="mb-3" data-target="trash">
                          <a href="javascript:void(0);" id="btnTrash" class="d-flex align-items-center">
                            <i class="icon-base bx bx-trash"></i>
                            <span class="ms-2">papeleria</span>
                          </a>
                        </li>

                        <div class="email-filter-labels pt-4">
                          <p class="small mx-3 text-body-secondary text-uppercase fw-bold">Areas</p>
                          <ul class="list-unstyled email-labels-list mb-2">
                            <li data-target="contabilidad">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-contabilidad"></i>
                                <span class="align-middle ms-2">Contabilidad</span>
                              </a>
                            </li>

                            <li>
                              <a href="#submenuVentas" class="d-flex align-items-center" data-bs-toggle="collapse" aria-expanded="false">
                                <i class="badge badge-dot bg-ventas me-2"></i> Ventas
                                <i class="ms-auto bx bx-chevron-down"></i>
                              </a>
                              <ul class="collapse list-unstyled ps-3" id="submenuVentas">
                                <li data-target="ventas-aspel">
                                  <a href="javascript:void(0);" class="email-label">
                                    <span>Ventas Aspel</span>
                                  </a>
                                </li>
                                <li data-target="ventas-soft">
                                  <a href="javascript:void(0);" class="email-label">
                                    <span>Ventas Soft</span>
                                  </a>
                                </li>
                              </ul>
                            </li>

                            <!-- Administración con sub-áreas -->
                            <li>
                              <a href="#submenuAdministracion" class="d-flex align-items-center" data-bs-toggle="collapse" aria-expanded="false">
                                <i class="badge badge-dot bg-administracion me-2"></i> Administración
                                <i class="ms-auto bx bx-chevron-down"></i>
                              </a>
                              <ul class="collapse list-unstyled ps-3" id="submenuAdministracion">
                                <li data-target="administracion-general">
                                  <a href="javascript:void(0);" class="email-label">
                                    <span>Administración General</span>
                                  </a>
                                </li>
                                <li data-target="rh">
                                  <a href="javascript:void(0);" class="email-label">
                                    <span>RH</span>
                                  </a>
                                </li>
                              </ul>
                            </li>

                            <!-- Soporte con sub-áreas -->
                            <li>
                              <a href="#submenuSoporte" class="d-flex align-items-center" data-bs-toggle="collapse" aria-expanded="false">
                                <i class="badge badge-dot bg-soporte me-2"></i> Soporte
                                <i class="ms-auto bx bx-chevron-down"></i>
                              </a>
                              <ul class="collapse list-unstyled ps-3" id="submenuSoporte">
                                <li data-target="soporte-aspel">
                                  <a href="javascript:void(0);" class="email-label">
                                    <span>Soporte Aspel</span>
                                  </a>
                                </li>
                                <li data-target="soporte-soft">
                                  <a href="javascript:void(0);" class="email-label">
                                    <span>Soporte Soft</span>
                                  </a>
                                </li>
                              </ul>
                            </li>

                            <li data-target="programcacion">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-programacion"></i>
                                <span class="align-middle ms-2">Programacion</span>
                              </a>
                            </li>
                            <li data-target="diseno">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-diseño"></i>
                                <span class="align-middle ms-2">Diseño</span>
                              </a>
                            </li>
                            <li data-target="marketing">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-marketing"></i>
                                <span class="align-middle ms-2">Marketing</span>
                              </a>
                            </li>
                          </ul>
                        </div>


                      </ul>
                    </div>
                  </div>
                </div>
                <!--/ Email Sidebar -->

                <!-- Emails List -->
                <div class="col app-emails-list">
                  <div class="card shadow-none border-0 rounded-0">
                    <div class="">
                      <!-- Email List: Search -->
                      <div class="d-flex justify-content-between align-items-center px-3 mt-2">
                        <div class="d-flex align-items-center w-100">
                          <i class="icon-base bx bx-menu icon-lg cursor-pointer d-block d-lg-none me-4 mb-4" data-bs-toggle="sidebar" data-target="#app-email-sidebar" data-overlay></i>
                          <div class="mb-4 w-100">
                            <div class="input-group input-group-merge shadow-none">
                              <span class="input-group-text border-0 p-0 pe-4" id="email-search">
                                <i class="icon-base bx bx-search icon-md text-body"></i>
                              </span>
                              <input type="text" class="form-control email-search-input border-0 py-0" placeholder="Buscar por destinatario" aria-label="Buscar mail" aria-describedby="email-search" />
                            </div>
                          </div>
                        </div>
                      </div>

                      <hr class="container-m-nx m-0 mx-n3 emails-list-header-hr mb-2" />
                      <!-- Email List: Actions -->
                      <div class="d-flex justify-content-between align-items-center ps-1">
                        <div class="d-flex align-items-center">
                          <div class="form-check mb-0 ms-2">
                            <input class="form-check-input" type="checkbox" id="email-select-all" />
                            <label class="form-check-label" for="email-select-all"></label>
                          </div>
                          <div class="dropdown me-1">
                            <button class="btn btn-icon p-0" type="button" id="dropdownMenuFolderOne" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <i class="icon-base bx bx-label icon-md"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuFolderOne">
                              <a class="dropdown-item" href="javascript:void(0)" data-action="inbox">
                                <i class="icon-base bx bx-envelope"></i>
                                <span class="align-middle">bandeja</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-action="archived">
                                <i class="icon-base bx bx-folder "></i>
                                <span class="align-middle">archivado</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-action="trash">
                                <i class="icon-base bx bx-trash icon-sm me-1"></i>
                                <span class="align-middle">papelería</span>
                              </a>
                            </div>
                          </div>
                          <div class="dropdown me-1">
                            <button class="btn btn-icon p-0" type="button" id="dropdownOrdenarPor" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <i class="icon-base bx bx-sort icon-md"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownOrdenarPor">
                              <a class="dropdown-item" href="javascript:void(0)" data-sort="fecha-desc">
                                <i class="icon-base bx bx-sort-down"></i>
                                <span class="align-middle">Más recientes</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-sort="fecha-asc">
                                <i class="icon-base bx bx-sort-up"></i>
                                <span class="align-middle">Más antiguos</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-sort="asunto-asc">
                                <i class="icon-base bx bx-sort-a-z"></i>
                                <span class="align-middle">Asunto A-Z</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-sort="asunto-desc">
                                <i class="icon-base bx bx-sort-z-a"></i>
                                <span class="align-middle">Asunto Z-A</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-sort="nombre-asc">
                                <i class="icon-base bx bx-user"></i>
                                <span class="align-middle">Nombre A-Z</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)" data-sort="nombre-desc">
                                <i class="icon-base bx bx-user-voice"></i>
                                <span class="align-middle">Nombre Z-A</span>
                              </a>
                            </div>
                          </div>
                        </div>

                        <div class="d-flex align-items-center">
                          <div class="dropdown me-1">
                            <button class="btn btn-icon p-0" type="button" id="dropdownMoverA" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <i class="icon-base bx bx-share icon-md"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMoverA">
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="contabilidad">
                                <i class="badge badge-dot bg-contabilidad me-2"></i> Contabilidad
                              </label>

                              <!-- Ventas -->
                              <li class="dropdown-submenu">
                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#submenuVentasAction" data-bs-toggle="collapse" aria-expanded="false">
                                  <i class="badge badge-dot bg-ventas me-2"></i> Ventas
                                  <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="collapse list-unstyled ps-3" id="submenuVentasAction">
                                  <li>
                                    <label class="dropdown-item">
                                      <input type="checkbox" class="me-2 area-checkbox" value="ventas-aspel">
                                      Ventas Aspel
                                    </label>
                                  </li>
                                  <li>
                                    <label class="dropdown-item">
                                      <input type="checkbox" class="me-2 area-checkbox" value="ventas-soft">
                                      Ventas Soft
                                    </label>
                                  </li>
                                </ul>
                              </li>

                              <!-- Administración -->
                              <li class="dropdown-submenu">
                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#submenuAdministracionAction" data-bs-toggle="collapse" aria-expanded="false">
                                  <i class="badge badge-dot bg-administracion me-2"></i> Administración
                                  <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="collapse list-unstyled ps-3" id="submenuAdministracionAction">
                                  <li>
                                    <label class="dropdown-item">
                                      <input type="checkbox" class="me-2 area-checkbox" value="administracion-general">
                                      Administración General
                                    </label>
                                  </li>
                                  <li>
                                    <label class="dropdown-item">
                                      <input type="checkbox" class="me-2 area-checkbox" value="rh">
                                      RH
                                    </label>
                                  </li>
                                </ul>
                              </li>

                              <!-- Soporte -->
                              <li class="dropdown-submenu">
                                <a class="dropdown-item d-flex justify-content-between align-items-center" href="#submenuSoporteAction" data-bs-toggle="collapse" aria-expanded="false">
                                  <i class="badge badge-dot bg-soporte me-2"></i> Soporte
                                  <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="collapse list-unstyled ps-3" id="submenuSoporteAction">
                                  <li>
                                    <label class="dropdown-item">
                                      <input type="checkbox" class="me-2 area-checkbox" value="soporte-aspel">
                                      Soporte Aspel
                                    </label>
                                  </li>
                                  <li>
                                    <label class="dropdown-item">
                                      <input type="checkbox" class="me-2 area-checkbox" value="soporte-soft">
                                      Soporte Soft
                                    </label>
                                  </li>
                                </ul>
                              </li>
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="programacion">
                                <i class="badge badge-dot bg-programacion me-2"></i> Programacion
                              </label>
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="diseno">
                                <i class="badge badge-dot bg-diseño me-2"></i> Diseño
                              </label>
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="marketing">
                                <i class="badge badge-dot bg-marketing me-2"></i> Marketing
                              </label>

                              <button type="button" class="dropdown-item text-primary fw-bold" id="btnAsignarAreas">
                                Asignar
                              </button>

                            </div>


                            <span class="btn btn-icon me-1">
                              <i id="emailRefreshBtn" class="icon-base bx bx-refresh icon-md scaleX-n1-rtl cursor-pointer email-refresh"></i>
                            </span>

                          </div>
                        </div>

                      </div>
                      <hr class="container-m-nx m-0" />
                      <!-- Email List: Items -->


                      <!-- Contenedor de listas -->
                      <div>

                        <!-- Bandeja: Entrada -->
                        <div class="email-list pt-0" id="emailListInbox">
                          <ul class="list-unstyled m-0" id="inboxList">
                            <li class="email-list-item email-marked-read"></li>
                          </ul>
                        </div>

                        <!-- Bandeja: Enviados -->
                        <div class="email-list pt-0" id="emailListSent">
                          <ul class="list-unstyled m-0" id="sentList">
                            <li class="text-muted text-center email-list-item email-marked-read">
                            </li>
                          </ul>
                        </div>

                        <!-- Bandeja: Archivados -->
                        <div class="email-list pt-0" id="emailListArchived">
                          <ul class="list-unstyled m-0" id="archivedList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los archivados</li>
                          </ul>
                        </div>

                        <!-- Bandeja: Destacados -->
                        <div class="email-list pt-0 d-none" id="emailListDestacado">
                          <ul class="list-unstyled m-0" id="starredList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los destacados</li>
                          </ul>
                        </div>

                        <!-- Bandeja: Papelera -->
                        <div class="email-list pt-0 d-none" id="emailListTrash">
                          <ul class="list-unstyled m-0" id="trashList">
                            <li id="trashEmptyMsg" class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los borrados</li>
                          </ul>
                        </div>

                        <!-- Área: Contabilidad -->
                        <div class="email-list pt-0 d-none" id="emailListContabilidad">
                          <ul class="list-unstyled m-0" id="contabilidadList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de contabilidad</li>
                          </ul>
                        </div>


                        <!-- Área: Ventas -->
                        <div class="email-list pt-0 d-none" id="emailListVentas">
                          <ul class="list-unstyled m-0" id="ventas-aspelList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de Ventas Aspel</li>
                          </ul>
                          <ul class="list-unstyled m-0" id="ventas-softList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de Ventas Soft</li>
                          </ul>
                        </div>

                        <!-- Área: Administración -->
                        <div class="email-list pt-0 d-none" id="emailListAdministracion">
                          <ul class="list-unstyled m-0" id="administracion-generalList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de Administración General</li>
                          </ul>
                          <ul class="list-unstyled m-0" id="rhList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de RH</li>
                          </ul>
                        </div>

                        <!-- Área: Soporte -->
                        <div class="email-list pt-0 d-none" id="emailListSoporte">
                          <ul class="list-unstyled m-0" id="soporte-aspelList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de Soporte Aspel</li>
                          </ul>
                          <ul class="list-unstyled m-0" id="soporte-softList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de Soporte Soft</li>
                          </ul>
                        </div>


                        <!-- Área: Programacion -->
                        <div class="email-list pt-0 d-none" id="emailListProgramacion">
                          <ul class="list-unstyled m-0" id="programacionList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de programacion</li>
                          </ul>
                        </div>

                        <!-- Área: Diseno -->
                        <div class="email-list pt-0 d-none" id="emailListDiseno">
                          <ul class="list-unstyled m-0" id="disenoList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de diseño</li>
                          </ul>
                        </div>

                        <!-- Área: Marketing -->
                        <div class="email-list pt-0 d-none" id="emailListMarketing">
                          <ul class="list-unstyled m-0" id="marketingList">
                            <li class="text-muted text-center email-list-item email-marked-read">Aquí aparecerán los correos de marketing</li>
                          </ul>
                        </div>

                      </div>

                    </div>
                    <div class="app-overlay"></div>
                  </div>
                  <!-- /Emails List -->

                  <!-- /Compose Email -->
                  <!-- / Content -->
                  <div class="content-backdrop fade"></div>
                </div>
                <!-- Content wrapper -->
              </div>

              <!-- Overlay -->
              <div class="layout-overlay layout-menu-toggle"></div>
            </div>

            <!-- MODAL REDACTAR CORREO -->
            <div class="modal fade" id="emailComposeSidebar" tabindex="-1" aria-labelledby="emailComposeSidebarLabel" aria-hidden="true">
              <div class="modal-dialog" style="position: fixed; bottom: 20px; right: 20px; width: 900px; max-width: 95%; max-height: 90vh;">
                <div class="modal-content shadow-lg" style="max-height: 90vh; display: flex; flex-direction: column;">

                  <!-- HEADER -->
                  <div class="modal-header py-2 px-3">
                    <h5 class="modal-title text-body fs-6">Redactar Correo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                  </div>

                  <!-- BODY SCROLLABLE -->
                  <div class="modal-body p-3" style="overflow-y: auto; flex: 1 1 auto;">
                    <form id="formEnviarCorreo" enctype="multipart/form-data">
                      <div class="row">

                        <!-- DE (Remitente) -->
                        <div class="d-flex align-items-center mb-3">
                          <label for="correo-de" class="fw-medium text-body-secondary me-2" style="width: 50px;">De:</label>
                          <select id="correo-de" name="correo_de" class="form-select form-select-sm flex-grow-1" required>
                            <option value="" disabled selected>Selecciona un remitente</option>
                            <option value="ventas@armandosoluciones.com.mx">ventas@armandosoluciones.com.mx</option>
                            <option value="ventas@traxsistemas.com.mx">ventas@traxsistemas.com.mx</option>

                          </select>
                        </div>

                        <!-- PARA (Destinatario) -->
                        <div class="d-flex align-items-center mb-3">
                          <label for="email-to" class="fw-medium text-body-secondary me-2" style="width: 50px;">Para:</label>
                          <div class="input-group flex-grow-1">
                            <input type="text" id="email-to" name="correo_para" class="form-control form-control-sm" placeholder="cliente@ejemplo.com, otro@ejemplo.com" required>
                            <button type="button" class="btn btn-outline-archive btn-sm" id="btnBuscarCliente" data-bs-toggle="modal" data-bs-target="#modalBuscarCliente">
                              <i class="bx bx-search"></i>
                            </button>
                          </div>
                          <input type="hidden" id="cliente-nombre" name="cliente_nombre" />
                        </div>

                        <!-- ASESOR -->
                        <div class="mb-3">
                          <label for="email-subject" class="fw-medium text-body-secondary mb-1 d-block">Por :</label>
                          <input id="email-subject" name="asesor" class="form-control" placeholder="Asesor del correo" required />
                        </div>

                        <!-- ASUNTO -->
                        <div class="mb-3">
                          <label for="email-subject" class="fw-medium text-body-secondary mb-1 d-block">Asunto :</label>
                          <input id="email-subject" name="asunto" class="form-control" placeholder="Asunto del correo" required />
                        </div>

                        <!-- MENSAJE -->
                        <div class="mb-3">
                          <label for="mensaje" class="fw-medium text-body-secondary mb-1 d-block">Mensaje:</label>
                          <textarea id="mensaje" name="mensaje" class="form-control" rows="6" placeholder="Escribe tu mensaje aquí..." required></textarea>
                        </div>

                        <!-- FIRMA -->
                        <div class="mb-3">
                          <label class="fw-medium mb-1 d-block">Firma:</label>
                          <select id="firma" name="firma" class="form-select">
                            <option value="" selected>Sin firma</option>
                            <option value="../img/firmaAS.png">Firma Ventas AS</option>
                            <option value="../img/firma2.png">Firma Ventas TRAX</option>

                          </select>
                          <div id="firmaPreview" style="margin-top:10px; display:none;">
                            <img id="firmaImg" src="" alt="Firma" style="max-width: 300px; max-height: 150px; border:1px solid #ccc; padding:5px;">
                          </div>
                        </div>

                        <!-- ADJUNTAR ARCHIVO -->
                        <div class="d-flex gap-2 align-items-center mb-3">
                          <label for="attach-file" class="btn btn-light btn-sm btn-icon mb-0" title="Adjuntar archivos">
                            <i class="bx bx-paperclip"></i>
                          </label>
                          <!-- Se agregó "multiple" -->
                          <input type="file" name="archivo[]" id="attach-file" class="d-none" multiple />
                          <span id="archivo-nombre" class="text-muted small">Ningún archivSo seleccionado</span>
                        </div>

                        <div id="archivoPreview" style="margin-top:10px; display:flex; flex-wrap:wrap; gap:10px;">
                          <!-- Las imágenes se agregarán aquí -->
                        </div>



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

                  <!-- FOOTER FIJO -->
                  <div class="modal-footer py-2 px-3 border-0">
                    <button type="submit" form="formEnviarCorreo" id="btnEnviarCorreo" class="btn btn-primary">
                      Enviar
                      <span id="spinnerEnviar" class="spinner-border spinner-border-sm ms-2 d-none"></span>
                    </button>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="toast align-items-center text-bg-success border-0 position-fixed bottom-0 end-0 m-3" id="toastCorreo" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              Correo enviado con éxito.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Cerrar"></button>
          </div>
        </div>
      </div>

      <!-- Modal Envío Automático -->
      <div class="modal fade" id="modalEnvioAutomatico" tabindex="-1" aria-labelledby="modalEnvioAutomaticoLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width:600px;">
          <div class="modal-content shadow-lg">

            <div class="modal-header py-2 px-3">
              <h5 class="modal-title fs-6" id="modalEnvioAutomaticoLabel">Envío Automático de Correos</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>

            <div class="modal-body p-3">
              <form id="formEnvioAutomatico" enctype="multipart/form-data">

                <div class="mb-3">
                  <label for="correoRemitente" class="form-label fw-medium">Correo remitente</label>
                  <select id="correoRemitente" name="correoRemitente" class="form-select" required>
                    <option value="" disabled selected>Selecciona una cuenta</option>
                    <option value="ventas@armandosoluciones.com.mx">ventas@armandosoluciones.com.mx</option>
                    <option value="ventas@traxsistemas.com.mx">ventas@traxsistemas.com.mx</option>
                  </select>
                </div>

                <div class="mb-3">
                  <label for="asunto" class="form-label fw-medium">Asunto</label>
                  <input type="text" id="asunto" name="asunto" class="form-control" required placeholder="Ej. Promoción mensual">
                </div>

                <div class="mb-3">
                  <label for="mensaje" class="form-label fw-medium">Mensaje</label>
                  <textarea id="mensaje" name="mensaje" class="form-control" rows="4" required placeholder="Escribe el contenido del correo"></textarea>
                </div>

                <div class="mb-3">
                  <label for="archivo" class="form-label fw-medium">Adjuntar archivo / imagen</label>
                  <input type="file" id="archivo" name="archivo[]" class="form-control" multiple>
                </div>

                <hr>

                <div class="mb-3">
                  <label for="claveInicio" class="form-label fw-medium">Clave de inicio</label>
                  <input type="number" id="claveInicio" name="claveInicio" class="form-control" placeholder="Ej. 1" required>
                </div>

                <div class="mb-3">
                  <label for="intervalo" class="form-label fw-medium">Intervalo entre correos (segundos)</label>
                  <input type="number" id="intervalo" name="intervalo" class="form-control" placeholder="Ej. 15" required>
                </div>

                <div class="mb-3">
                  <label for="cantidadLote" class="form-label fw-medium">Correos por lote</label>
                  <input type="number" id="cantidadLote" name="cantidadLote" class="form-control" placeholder="Ej. 10" required>
                </div>

                <div class="mb-3">
                  <label for="descanso" class="form-label fw-medium">Descanso entre lotes (segundos)</label>
                  <input type="number" id="descanso" name="descanso" class="form-control" placeholder="Ej. 60" required>
                </div>

                <div class="mb-3">
                  <label for="totalCorreos" class="form-label fw-medium">Total de correos a enviar</label>
                  <input type="number" id="totalCorreos" name="totalCorreos" class="form-control" placeholder="Ej. 100" required>
                </div>

                <div class="d-flex justify-content-between">
                  <button type="submit" class="btn btn-success" id="btnIniciarAutomatico">
                    Iniciar Envío
                    <span id="spinnerAutomatico" class="spinner-border spinner-border-sm d-none"></span>
                  </button>
                  <button type="button" class="btn btn-danger" id="btnDetenerAutomatico">Detener</button>
                </div>

              </form>
            </div>

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


      <div class="modal fade" id="modalEnvioAutomatico" tabindex="-1" aria-labelledby="modalEnvioAutomaticoLabel" aria-hidden="true">
        <div class="modal-dialog" style="max-width:600px;">
          <div class="modal-content shadow-lg">

            <div class="modal-header py-2 px-3">
              <h5 class="modal-title fs-6" id="modalEnvioAutomaticoLabel">Envío Automático de Correos</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>

            <div class="modal-body p-3">
              <form id="formEnvioAutomatico" enctype="multipart/form-data">

                <div class="mb-3">
                  <label for="correoRemitente" class="form-label fw-medium">Correo remitente</label>
                  <select id="correoRemitente" name="correoRemitente" class="form-select" required>
                    <option value="" disabled selected>Selecciona una cuenta</option>
                    <option value="ventas@armandosoluciones.com.mx">ventas@armandosoluciones.com.mx</option>
                    <option value="ventas@traxsistemas.com.mx">ventas@traxsistemas.com.mx</option>
                  </select>
                </div>

                <div class="mb-3">
                  <label for="asunto" class="form-label fw-medium">Asunto</label>
                  <input type="text" id="asunto" name="asunto" class="form-control" required placeholder="Ej. Promoción mensual">
                </div>

                <div class="mb-3">
                  <label for="mensaje" class="form-label fw-medium">Mensaje</label>
                  <textarea id="mensaje" name="mensaje" class="form-control" rows="4" required placeholder="Escribe el contenido del correo"></textarea>
                </div>

                <div class="mb-3">
                  <label for="archivo" class="form-label fw-medium">Adjuntar archivo / imagen</label>
                  <input type="file" id="archivo" name="archivo[]" class="form-control" multiple>
                </div>

                <hr>

                <div class="mb-3">
                  <label for="claveInicio" class="form-label fw-medium">Clave de inicio</label>
                  <input type="number" id="claveInicio" name="claveInicio" class="form-control" placeholder="Ej. 1" required>
                </div>

                <div class="mb-3">
                  <label for="intervalo" class="form-label fw-medium">Intervalo entre correos (segundos)</label>
                  <input type="number" id="intervalo" name="intervalo" class="form-control" placeholder="Ej. 15" required>
                </div>

                <div class="mb-3">
                  <label for="cantidadLote" class="form-label fw-medium">Correos por lote</label>
                  <input type="number" id="cantidadLote" name="cantidadLote" class="form-control" placeholder="Ej. 10" required>
                </div>

                <div class="mb-3">
                  <label for="descanso" class="form-label fw-medium">Descanso entre lotes (segundos)</label>
                  <input type="number" id="descanso" name="descanso" class="form-control" placeholder="Ej. 60" required>
                </div>

                <div class="mb-3">
                  <label for="totalCorreos" class="form-label fw-medium">Total de correos a enviar</label>
                  <input type="number" id="totalCorreos" name="totalCorreos" class="form-control" placeholder="Ej. 100" required>
                </div>

                <div class="d-flex justify-content-between">
                  <button type="submit" class="btn btn-success" id="btnIniciarAutomatico">
                    Iniciar Envío
                    <span id="spinnerAutomatico" class="spinner-border spinner-border-sm d-none"></span>
                  </button>
                  <button type="button" class="btn btn-danger" id="btnDetenerAutomatico">Detener</button>
                </div>

              </form>
            </div>

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



      <div class="modal fade" id="modalBuscarCliente" tabindex="-1" aria-labelledby="modalBuscarClienteLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="modalBuscarClienteLabel">Buscar Cliente</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>

            <div class="modal-body">

              <input type="text" id="busquedaCliente" class="form-control mb-3" placeholder="Buscar por nombre o correo...">

              <div class="d-flex justify-content-between align-items-center mb-2">

                <!-- Sistema -->
                <div class="d-flex align-items-center mb-3">
                  <label class="me-2">Sistema</label>
                  <select id="selectSistema" class="form-select form-select-sm" style="width: auto;">
                    <option value="TODOS">TODOS</option>
                    <option value="SAE">SAE</option>
                    <option value="COI">COI</option>
                    <option value="NOI">NOI</option>
                    <option value="BANCO">BANCO</option>
                    <option value="PROD">PROD</option>
                    <option value="CAJA">CAJA</option>
                    <option value="FACTURE">FACTURE</option>
                  </select>
                </div>

                <!-- Cantidad -->
                <div class="d-flex align-items-center mb-3">
                  <label class="me-2">Mostrar:</label>
                  <select id="numResultados" class="form-select form-select-sm" style="width: auto;">
                    <option value="50">50</option>
                    <option value="100" selected>100</option>
                    <option value="200">200</option>
                  </select>
                </div>

                <!-- Seleccionar todos -->
                <div class="form-check d-flex align-items-center">
                  <input type="checkbox" id="email-select-all-lista2" class="form-check-input me-2">
                  <label class="form-check-label mb-0">Seleccionar todos</label>
                </div>

              </div>

              <ul id="listaCorreos2" class="list-group"></ul>

            </div>

            <div class="modal-footer">
              <button type="button" id="btnSeleccionarClientesLista2" class="btn btn-primary">Agregar seleccionados</button>
            </div>

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


      <!--  Modal detalle correo -->
      <div class="modal fade" id="emailDetailModal" tabindex="-1" aria-labelledby="emailDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <div class="modal-content">

            <div class="modal-header border-0">
              <h5 class="modal-title fw-bold" id="emailDetailModalLabel">Detalle del correo</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>

            <div id="emailDetailContent"></div> <!-- Aquí se inyecta el contenido -->

            <div class="modal-footer border-0">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
              <button type="button" class="btn btn-success" id="btnGuardarTerminado">Guardar cambios</button>
            </div>
          </div>
        </div>
      </div>

      <!-- MODAL DE SEGUIMIENTO -->
      <div class="modal fade" id="seguimientoModal" tabindex="-1" aria-labelledby="seguimientoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Agregar seguimiento</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
              <div class="mb-3">
                <label for="notaSeguimiento" class="form-label">Nota / Mensaje</label>
                <textarea class="form-control" id="notaSeguimiento" rows="3"></textarea>
              </div>
              <div class="mb-3">
                <label for="estadoSeguimiento" class="form-label">Estado</label>
                <select class="form-select" id="estadoSeguimiento">
                  <option value="SEGUIMIENTO">En seguimiento</option>
                  <option value="TERMINADO">Terminado</option>
                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
              <button type="button" class="btn btn-primary" id="btnGuardarSeguimiento">Guardar</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Toast de éxito -->
      <div class="toast align-items-center text-bg-success border-0 position-fixed bottom-0 end-0 m-3" id="toastCorreo" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
          <div class="toast-body">
            Nota guardada con éxito
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Cerrar"></button>
        </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>
  document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('formEnvioAutomatico');
  const btn = document.getElementById('btnIniciarAutomatico');
  const spinner = document.getElementById('spinnerAutomatico');

  let detenerEnvioAutomatico = false;

  document.getElementById('btnDetenerAutomatico').addEventListener('click', () => {
    detenerEnvioAutomatico = true;
    alert('Se detendrá el envío después del correo actual.');
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    btn.disabled = true;
    spinner.classList.remove('d-none');
    detenerEnvioAutomatico = false;

    const formData = new FormData(form);

    try {
      // Obtener lista de correos desde PHP
      const res = await fetch("obtener_correos.php");
      const data = await res.json();
      if (!data.success) throw new Error('No se pudieron obtener los correos');
      let correos = data.data;

      let claveInicio = parseInt(formData.get('claveInicio')) - 1;
      let totalCorreos = parseInt(formData.get('totalCorreos'));
      let intervalo = parseInt(formData.get('intervalo')) * 1000;
      let cantidadLote = parseInt(formData.get('cantidadLote'));
      let descanso = parseInt(formData.get('descanso')) * 1000;

      correos = correos.slice(claveInicio, claveInicio + totalCorreos);

      let lote = 0;
      for (let i = 0; i < correos.length; i++) {
        if (detenerEnvioAutomatico) break;

        const correo = correos[i].CORREO;

        const envioData = new FormData(form);
        envioData.set('correo_para', correo);
        envioData.set('cliente_nombre', correo);

        const envioRes = await fetch("envio_automatico.php", {
          method: "POST",
          body: envioData
        });
        const envioJson = await envioRes.json();
        console.log(envioJson);

        lote++;
        if (lote % cantidadLote === 0) {
          await new Promise(r => setTimeout(r, descanso));
        } else {
          await new Promise(r => setTimeout(r, intervalo));
        }
      }

      alert('Proceso de envío automático finalizado.');
    } catch (err) {
      console.error(err);
      alert('Error: ' + err.message);
    } finally {
      btn.disabled = false;
      spinner.classList.add('d-none');
    }
  });
});

</script>

<script>
  let enviados = 0;
  const limite = 100;
  let bloqueado = false;
  let intervalo;
  const btnRedactar = document.getElementById("emailComposeSidebarLabel");

  function registrarEnvio() {
    enviados++;

    if (enviados >= limite) {
      iniciarBloqueo(3600); // 🔒 1 hora = 3600 segundos
      enviados = 0;
    }
  }

  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 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);
  }

  function actualizarBoton(segundos) {
    btnRedactar.textContent = `Espera ${segundos}s`;
  }

  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";
  }

  document
    .getElementById("formEnviarCorreo")
    .addEventListener("submit", function(e) {
      e.preventDefault();

      if (bloqueado) {
        alert("⚠️ Has alcanzado el límite de 100 correos por hora.");
        return;
      }

      console.log("Correo enviado...");
      registrarEnvio();

      const modal = bootstrap.Modal.getInstance(
        document.getElementById("emailComposeSidebar")
      );
      modal.hide();
    });

  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>
  async function revisarNotificaciones() {
    try {
      const res = await fetch('notificaciones.php'); // Tu endpoint que devuelve NOTIFICACION + CORREO
      const data = await res.json();
      if (!data.success) return;

      const nuevos = data.notificaciones || [];
      let historial = JSON.parse(localStorage.getItem('historialNotificaciones')) || [];
      let hayNuevas = false;

      nuevos.forEach(correo => {
        // Solo agregamos si no está en el historial
        if (!historial.find(c => c.ID_NOTIFICACION === correo.ID_NOTIFICACION)) {
          historial.unshift(correo);

          // Lanzar alerta solo si LEIDO = 'N'
          if (correo.ES_NUEVO === 'N') {
            mostrarAlertaCorreo(correo);
            hayNuevas = true;
          }
        }
      });

      // Limitar historial a 100 elementos
      historial = historial.slice(0, 100);
      localStorage.setItem('historialNotificaciones', JSON.stringify(historial));

      // Actualizar campanita y lista
      renderHistorial();

      // Reproducir sonido si hay nuevas
      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."));
          }
        }
      }

    } catch (err) {
      console.error('Error revisando notificaciones:', err);
    }
  }

  // Ejecutar al cargar la página
  document.addEventListener('DOMContentLoaded', () => {
    revisarNotificaciones();
    setInterval(revisarNotificaciones, 60000); // Revisar cada 60 segundos
  });
</script>

<script>
  document.addEventListener('click', () => {
    const audio = document.getElementById("notifSound");
    audio.play().then(() => audio.pause()).catch(() => {});
  }, {
    once: true
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", () => {

    // ---------- Helpers ----------
    const normalizeTarget = target => {
      if (!target && target !== "") return "inbox";
      let t = String(target || "").toLowerCase().trim();
      t = t.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
      // alias comunes
      if (t === "bandeja") return "inbox";
      if (t === "papeleria" || t === "papeleria") return "trash";
      if (t === "enviado" || t === "enviados") return "sent";
      if (t === "archivado" || t === "archivados") return "archived";
      if (t === "destacados") return "starred";
      if (t === "programcacion" || t === "programacion") return "programacion";
      if (t === "ventas-aspel") return "ventas-aspel";
      if (t === "ventas-soft") return "ventas-soft";
      if (t === "rh") return "rh";
      if (t === "soporte-aspel") return "soporte-aspel";
      if (t === "soporte-soft") return "soporte-soft";
      if (t === "diseno") return "diseno";

      return t; // devolver tal cual para sub-áreas
    };

    // Mapeo key -> ID del <ul> en el DOM (si tu DOM usa otro id, cámbialo aquí)
    const areaToUlId = {
      inbox: "inboxList",
      sent: "sentList",
      archived: "archivedList",
      starred: "starredList",
      trash: "trashList",
      contabilidad: "contabilidadList",

      // Ventas sub-áreas
      "ventas-aspel": "ventas-aspelList",
      "ventas-soft": "ventas-softList",

      // Administración sub-áreas
      "administracion-general": "administracion-generalList",
      rh: "rhList",

      // Soporte sub-áreas
      "soporte-aspel": "soporte-aspelList",
      "soporte-soft": "soporte-softList",

      programacion: "programacionList",
      diseno: "disenoList",
      marketing: "marketingList"
    };

    const lists = {};
    Object.keys(areaToUlId).forEach(k => {
      lists[k] = document.getElementById(areaToUlId[k]) || null;
    });
    // Mapear áreas principales a sub-áreas si aplica
    const areaPrincipalASubarea = {
      ventas: "ventas-aspel", // puedes poner la sub-area por defecto
      administracion: "administracion-general",
      soporte: "soporte-aspel"
    };



    const emailDetailModal = new bootstrap.Modal(document.getElementById("emailDetailModal"));
    const emailDetailContent = document.getElementById("emailDetailContent");
    const searchInput = document.querySelector(".email-search-input");
    const refreshBtn = document.getElementById("emailRefreshBtn");
    const btnAsignarAreas = document.getElementById("btnAsignarAreas");
    const areaCheckboxes = document.querySelectorAll(".area-checkbox");
    let correosCompletos = [];


    function reproducirNotificacion() {
      const audio = document.getElementById("notifSound");
      audio.currentTime = 0; // reinicia por si se estaba reproduciendo
      audio.play().catch(err => {
        console.log("Error al reproducir el audio:", err);
      });
    }

    // FUNCIONES DE NOTIFICACIONES
    function mostrarNotificacion(correo, areas) {
      const lista = document.getElementById("listaNotificaciones");
      const badge = document.getElementById("badgeNotification");

      if (!lista || !badge) return;

      const li = document.createElement("li");
      li.className = "list-group-item";
      li.innerHTML = `
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <strong>${correo.ASUNTO || "(Sin asunto)"}</strong><br/>
                Asignado a: ${areas.join(", ")}
            </div>
            <small class="text-muted">${new Date().toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit" })}</small>
        </div>
    `;

      // Reproducir sonido solo después de que el audio esté desbloqueado
      reproducirNotificacion();

      // Al hacer click, eliminar la notificación
      li.addEventListener("click", () => {
        li.remove();
        if (!lista.querySelector("li")) badge.classList.add("d-none");
      });

      lista.prepend(li); // Aparece arriba
      badge.classList.remove("d-none"); // Mostrar el puntito
    }

    // FUNCIONES AUXILIARES
    function separarRespuestaOriginal(mensaje) {
      const separador = mensaje.indexOf('> Dahs S.A de C.V.');
      if (separador === -1) return {
        respuesta: mensaje,
        original: ''
      };
      return {
        respuesta: mensaje.substring(0, separador).trim(),
        original: mensaje.substring(separador).trim()
      };
    }

    function crearItemCorreo(correo, bandeja = "inbox") {
      const li = document.createElement("li");
      li.className =
        "email-list-item list-group-item d-flex align-items-center justify-content-between cursor-pointer";
      li.dataset.bandeja = bandeja;
      li.dataset.destacado = correo.DESTACADO === "1" ? "1" : "0";
      li.dataset.mensaje = correo.MENSAJE || "";
      li.dataset.fecha = correo.FECHA_ENVIO || new Date().toISOString();
      li.dataset.destinatario = correo.DESTINATARIO || "";
      li.dataset.remitente = correo.REMITENTE || "";
      li.dataset.asunto = correo.ASUNTO || "";
      li.dataset.adjunto = correo.ADJUNTO || "";
      li.dataset.id = `${li.dataset.fecha}-${correo.REMITENTE || "noRemitente"}-${correo.ASUNTO || "sinAsunto"}`;
      li.dataset.esNuevo = correo.ES_NUEVO || "N";
      li.dataset.estado = correo.ESTADO || "";

      const hora = new Date(li.dataset.fecha).toLocaleTimeString("es-MX", {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
      });

      const mostrarNombre =
        correo.DESTINATARIO?.includes(",") || correo.NOMBRE?.includes(",") ?
        "Correo masivo" :
        correo.ESTADO === "RECIBIDO" ?
        correo.REMITENTE || "Remitente desconocido" :
        correo.NOMBRE || correo.DESTINATARIO || "Desconocido";

      const nuevoBadge =
        correo.ES_NUEVO === "S" ?
        `<span class="badge rounded-pill bg-success  me-2 badge-nuevo">Nuevo</span>` :
        "";

      // 👇 Badge dinámico según ESTADO
      let estadoBadge = "";
      switch (correo.ESTADO) {
        case "CANCELADO":
          estadoBadge = `<span class="badge bg-label-warning me-2">${correo.ESTADO}</span>`;
          break;
        case "TERMINADO":
          estadoBadge = `<span class="badge bg-label-success me-2">${correo.ESTADO}</span>`;
          break;
        case "SEGUIMIENTO":
          estadoBadge = `<span class="badge bg-label-danger me-2">${correo.ESTADO}</span>`;
          break;
        default:
          estadoBadge = "";
      }

      li.innerHTML = `
    <div class="d-flex align-items-center w-100 email-item">
      <div class="form-check me-3">
        <input type="checkbox" class="form-check-input email-list-item-input" />
      </div>
      <span class="email-list-item-bookmark me-3" title="Destacar">
        <i class="bx ${correo.DESTACADO === "1" ? "bxs-star text-warning" : "bx-star"}"></i>
      </span>
      <div class="email-list-item-content ms-2 ms-sm-0 me-2">
        <span class="email-list-item-username me-2 text-heading">${mostrarNombre}</span>
        <small class="email-list-item-subject d-xl-inline-block d-block">
          ${nuevoBadge} ${estadoBadge} ${correo.ASUNTO || "(Sin asunto)"}
        </small>
      </div>
      <div class="email-list-item email-marked-read d-flex align-items-center ms-auto">
        ${correo.ADJUNTO ? `<span class="text-secondary me-3"><i class="bx bx-paperclip"></i></span>` : ""}
        
        <div class="email-actions d-flex align-items-center">
          <button class="btn btn-icon btn-sm me-2 email-archive" title="Archivar">
            <i class="icon-base bx bx-envelope icon-md"></i>
          </button>
          <button class="btn btn-icon btn-sm email-delete" title="Eliminar">
            <i class="icon-base bx bx-trash icon-md"></i>
          </button>
        </div>

        <small class="ms-3">${hora}</small>
      </div>
    </div>
  `;

      // 👇 Resalta correos nuevos
      if (correo.ES_NUEVO === "S") {
        li.classList.add("correo-nuevo");
      }

      attachEventosCorreo(li, correo);
      return li;
    }

    // FUNCIONES PARA ARCHIVAR / ELIMINAR
    function moverCorreo(li, destino) {
      const id = li.dataset.id;
      const correoObj = correosCompletos.find(c => `${c.FECHA_ENVIO}-${c.REMITENTE}-${c.ASUNTO}` === id);

      if (correoObj) {
        correoObj.AREA = destino;

        // Guardar en DB
        const datos = new URLSearchParams();
        datos.append("id", correoObj.ID_CORREO);
        datos.append("area", destino);

        fetch("mover_correo.php", {
            method: "POST",
            body: datos
          })
          .then(res => res.json())
          .then(data => {
            if (!data.success) console.error("Error al mover:", data.message);
          })
          .catch(err => console.error("Error fetch:", err));
      }

      // Eliminar del DOM
      li.remove();

      // Re-render bandeja activa
      const bandejaActiva = document.querySelector(".email-list:not(.d-none)")?.id.replace("emailList", "").toLowerCase();
      if (bandejaActiva) renderBandeja(bandejaActiva);
    }

    // ADAPTACIÓN: EVENTOS DE LOS BOTONES EN LISTA
    function attachEventosCorreo(li, correo = null) {
      // ⭐ Destacar
      li.querySelector(".email-list-item-bookmark")?.addEventListener("click", e => {
        e.stopPropagation();
        toggleDestacado(li);
      });

      // 📄 Ver detalle
      li.querySelector(".email-list-item-content")?.addEventListener("click", () => mostrarDetalleCorreo(correo, li));

      // 📦 Archivar
      li.querySelector(".email-archive")?.addEventListener("click", e => {
        e.stopPropagation();
        moverCorreo(li, "archived");
      });

      // 🗑 Eliminar
      li.querySelector(".email-delete")?.addEventListener("click", e => {
        e.stopPropagation();
        moverCorreo(li, "trash");
      });
    }

    async function mostrarDetalleCorreo(correo, li) {
      if (!li)
        li = document.querySelector(`li[data-id="${correo.FECHA_ENVIO}-${correo.REMITENTE}-${correo.ASUNTO}"]`);
      if (li && li.dataset.esNuevo === 'S') marcarComoLeido(correo.ID_CORREO, li);

      // 🧹 Separar respuesta original
      const {
        respuesta,
        original
      } = separarRespuestaOriginal(correo.MENSAJE || "");

      // 💬 Limpiar mensaje y mostrar todas las imágenes embebidas
      let mensajeLimpio = (respuesta || "").replace(/\[image:[^\]]+\]/gi, "").trim();

      // Extraer todas las URLs de imágenes dentro del mensaje
      const imagenesEnMensaje = mensajeLimpio.match(/https?:\/\/[^\s'"]+\.(?:png|jpe?g|gif)/gi) || [];

      // Reemplazar cada URL de imagen por un div con <img>
      imagenesEnMensaje.forEach(url => {
        mensajeLimpio = mensajeLimpio.replace(url, `<div class="email-attachment mt-2 fade-in"><img src="${url}" alt="Imagen incluida" /></div>`);
      });

      const hora = new Date(correo.FECHA_ENVIO).toLocaleTimeString("es-MX", {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false
      });
      const fechaStr = new Date(correo.FECHA_ENVIO).toLocaleDateString("es-MX", {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric"
      });

      const mostrarNombre = correo.NOMBRE || correo.REMITENTE || "Desconocido";
      const paraMostrar = correo.DESTINATARIO || "(Sin destinatario)";
      const deMostrar = correo.REMITENTE || "(Sin remitente)";
      const mostrarAsesorHTML = correo.ASESOR ? `<small class="text-body">Asesor: ${correo.ASESOR}</small><br/>` : "";
      const destacadoClass = correo.DESTACADO === "1" ? "bxs-star text-warning" : "bx-star";

      // ✅ Adjuntos múltiples (imágenes, PDF, otros)
      let adjuntoHTML = "";
      if (correo.ADJUNTO) {
        let adjuntos = Array.isArray(correo.ADJUNTO) ?
          correo.ADJUNTO :
          correo.ADJUNTO.split(/[\n,;]+/); // Separar por coma, punto y coma o salto de línea

        adjuntos = adjuntos.map(a => a.trim()).filter(a => a);

        adjuntoHTML = adjuntos.map(url => {
          const esImagen = /\.(png|jpe?g|gif)$/i.test(url);
          const esPDF = /\.pdf$/i.test(url);

          if (esImagen) {
            return `<div class="email-attachment mt-2 fade-in">
                  <img src="${url}" alt="Imagen adjunta" />
                </div>`;
          } else if (esPDF) {
            return `<div class="email-attachment mt-2 fade-in">
                  <a href="${url}" target="_blank" class="btn btn-sm btn-outline-primary">
                    <i class="bx bx-file"></i> Ver PDF
                  </a>
                </div>`;
          } else {
            return `<div class="email-attachment mt-2 fade-in">
                  <a href="${url}" target="_blank" class="btn btn-sm btn-outline-secondary">
                    <i class="bx bx-paperclip"></i> Ver archivo
                  </a>
                </div>`;
          }
        }).join("");
      }

      // 📌 Nota
      const mostrarNotaHTML = correo.NOTA ? `
    <div class="mt-3 p-2 bg-light border rounded">
      <strong>Nota:</strong><br/>
      <span style="white-space: pre-wrap;">${correo.NOTA}</span>
    </div>` : "";

      // ⚙️ Estado
      const bandejasSinEstado = ["enviados", "archivados", "destacados", "papeleria"];
      const esBloqueado = bandejasSinEstado.includes(getBandejaActiva()) ? "disabled" : "";
      const mostrarEstadoHTML = (correo.AREA && correo.AREA.trim() !== "") ? `
    <div class="mt-3" id="estadoContainer">
      <label class="form-label"><strong>Estado:</strong></label><br/>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="checkSeguimiento"
               ${correo.ESTADO === "SEGUIMIENTO" ? "checked" : ""} ${esBloqueado}>
        <label class="form-check-label" for="checkSeguimiento">Seguimiento</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="checkTerminado"
               ${correo.ESTADO === "TERMINADO" ? "checked" : ""} ${esBloqueado}>
        <label class="form-check-label" for="checkTerminado">Terminado</label>
      </div>
    </div>` : "";

      // 💡 HTML final
      emailDetailContent.innerHTML = `
    <div class="card email-card-prev mx-sm-6 mx-3">
      <div class="card-header d-flex justify-content-between align-items-center flex-wrap border-bottom">
        <div class="d-flex align-items-center mb-sm-0 mb-3">
          <div class="flex-grow-1 ms-1">
            <h6 class="m-0 fw-normal">${mostrarNombre}</h6>
            <small class="text-body">Para: ${paraMostrar}</small><br/>
            <small class="text-body">De: ${deMostrar}</small><br/>
            ${mostrarAsesorHTML}
          </div>
        </div>
        <div class="d-flex align-items-center">
          <p class="mb-0 me-4 text-body-secondary">${fechaStr}</p>
          ${correo.ADJUNTO ? `<span class="text-secondary me-3"><i class="bx bx-paperclip"></i></span>` : ""}
          <button class="btn btn-icon btn-sm btn-outline-warning email-toggle-star"><i class="bx ${destacadoClass}"></i></button>
          <button class="btn btn-icon btn-sm btn-outline-secondary ms-2 email-archive"><i class="bx bx-archive"></i></button>
          <button class="btn btn-icon btn-sm btn-outline-danger ms-2 email-delete"><i class="bx bx-trash"></i></button>
        </div>
      </div>

      <div class="card-body pt-4" style="max-height: 70vh; overflow-y: auto;">
        <p class="fw-medium mb-1">${correo.ASUNTO || "(Sin asunto)"}</p>
        ${mostrarNotaHTML}
        ${mostrarEstadoHTML}
        <p class="fw-medium mb-3 email-message" style="white-space: pre-wrap;">
          ${mensajeLimpio || "(Mensaje vacío)"}
        </p>
        ${adjuntoHTML}
        ${original ? `<button class="btn btn-link p-0" id="btnMostrarOriginal">Mostrar mensaje original ↓</button>` : ""}
      </div>
    </div>
  `;

      // 🔧 Lógica de botones de estado
      if (correo.AREA) {
        const checkSeguimiento = emailDetailContent.querySelector("#checkSeguimiento");
        const checkTerminado = emailDetailContent.querySelector("#checkTerminado");
        const btnGuardarTerminado = document.getElementById("btnGuardarTerminado");

        function aplicarBloqueos() {
          const ningunoMarcado = !checkSeguimiento.checked && !checkTerminado.checked;
          if (correo.ESTADO === "TERMINADO" || ningunoMarcado) {
            checkSeguimiento.disabled = true;
            checkTerminado.disabled = true;
            btnGuardarTerminado.disabled = true;
          } else if (correo.ESTADO === "SEGUIMIENTO") {
            checkSeguimiento.disabled = false;
            checkTerminado.disabled = false;
            btnGuardarTerminado.disabled = true;
          } else {
            checkSeguimiento.disabled = true;
            checkTerminado.disabled = true;
            btnGuardarTerminado.disabled = true;
          }
        }
        aplicarBloqueos();

        checkSeguimiento.addEventListener("change", () => {
          if (checkSeguimiento.checked) {
            checkTerminado.checked = false;
            btnGuardarTerminado.disabled = true;
          }
        });
        checkTerminado.addEventListener("change", () => {
          if (checkTerminado.checked) {
            checkSeguimiento.checked = false;
            btnGuardarTerminado.disabled = false;
          }
        });

        btnGuardarTerminado.onclick = async () => {
          if (!(checkTerminado.checked && !checkSeguimiento.checked)) {
            alert("Solo puedes guardar si seleccionaste Terminado.");
            return;
          }
          btnGuardarTerminado.disabled = true;
          try {
            const res = await fetch("actualizar_estado.php", {
              method: "POST",
              body: new URLSearchParams({
                id: correo.ID_CORREO,
                area: correo.AREA,
                estado: "TERMINADO"
              })
            });
            const data = await res.json();
            if (!data.success) {
              console.error("Error al actualizar estado:", data.message);
              alert("No se pudo guardar el cambio: " + (data.message || "error desconocido"));
              checkTerminado.checked = false;
              checkSeguimiento.checked = true;
            } else {
              correo.ESTADO = "TERMINADO";
              aplicarBloqueos();
              const bandejaActiva = getBandejaActiva();
              if (bandejaActiva) renderBandeja(bandejaActiva);
            }
          } catch (err) {
            console.error("Error fetch:", err);
            alert("Error de red al guardar cambios.");
            checkTerminado.checked = false;
            checkSeguimiento.checked = true;
          }
        };
      }

      emailDetailModal.show();
    }

    // 🎨 Animación fade-in para imágenes
    const style = document.createElement("style");
    style.innerHTML = `
  .fade-in {
    animation: fadeIn 0.6s ease-in-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
  }
  .email-attachment img {
    max-width: 100%;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
`;
    document.head.appendChild(style);

    function getBandejaActiva() {
      return document.querySelector(".email-list:not(.d-none)")?.id
        .replace("emailList", "")
        .toLowerCase();
    }

    function toggleDestacado(item) {
      const icon = item.querySelector(".email-list-item-bookmark i");
      const isStarred = item.dataset.destacado === "1";
      const nuevo = isStarred ? "0" : "1";

      // Actualiza dataset
      item.dataset.destacado = nuevo;

      // Cambiar ícono
      if (nuevo === "1") {
        icon.classList.remove("bx-star");
        icon.classList.add("bxs-star", "text-warning");
      } else {
        icon.classList.remove("bxs-star", "text-warning");
        icon.classList.add("bx-star");
      }

      // Buscar el objeto correcto en correosCompletos
      const id = item.dataset.id;
      const obj = correosCompletos.find(c =>
        `${c.FECHA_ENVIO}-${c.REMITENTE || "noRemitente"}-${c.ASUNTO || "sinAsunto"}` === id
      );

      if (obj) obj.DESTACADO = nuevo;

      // Guardar en DB
      fetch("actualizar_destacado.php", {
          method: "POST",
          body: new URLSearchParams({
            id,
            destacado: nuevo
          })
        })
        .then(res => res.json())
        .then(data => {
          if (!data.success) console.error("Error DB:", data.message);
        })
        .catch(err => console.error(err));

      // Refrescar bandejas
      actualizarListaDestacados(item);
    }

    function actualizarListaDestacados(changedItem = null) {
      // Primero, mover los destacados a la lista de starred
      correosCompletos.forEach(c => {
        const li = document.querySelector(`li[data-id="${c.ID_CORREO}"]`);
        if (!li) return;
        if (c.DESTACADO === "1" && li.parentElement !== lists.starred) {
          lists.starred.appendChild(li);
        } else if (c.DESTACADO === "0" && li.parentElement === lists.starred) {
          const bandejaOriginal = li.dataset.bandeja || "inbox";
          lists[bandejaOriginal].appendChild(li);
        }
      });
    }

    // ---------- Normalización de áreas ----------
    function normalizeArea(area) {
      if (!area) return "";
      return area.toLowerCase().trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-");
    }

    // ---------- Render bandeja ----------
    function renderBandeja(target) {
      const t = normalizeTarget(target); // botón / bandeja
      const targetList = lists[t];
      if (!targetList) return;

      targetList.innerHTML = "";
      const correosFiltrados = correosCompletos.filter(c => {
        const area = normalizeArea(c.AREA);

        // Bandejas principales
        if (t === "inbox") return (!area || area === "") && c.ESTADO !== "ENVIADO";
        if (t === "sent") return c.ESTADO === "ENVIADO";
        if (t === "archived") return area === "archived";
        if (t === "starred") return c.DESTACADO === "1";
        if (t === "trash") return area === "trash";

        // Sub-áreas exactas
        return area === t;
      });

      if (!correosFiltrados.length) {
        const li = document.createElement("li");
        li.className = "text-muted text-center email-list-item email-marked-read";
        li.textContent = `Aquí aparecerán los correos de ${t}`;
        targetList.appendChild(li);
        return;
      }

      const fragment = document.createDocumentFragment();
      correosFiltrados.forEach(correo => {
        fragment.appendChild(crearItemCorreo(correo, t));
      });
      targetList.appendChild(fragment);
    }

    function mostrarBandeja(rawTarget) {
      let t = normalizeTarget(rawTarget);

      // Redirigir a sub-área principal si existe
      if (areaPrincipalASubarea[t]) {
        t = areaPrincipalASubarea[t]; // ej: "ventas" → "ventas-aspel"
      }

      // Ocultar todos los contenedores principales
      document.querySelectorAll(".email-list").forEach(div => div.classList.add("d-none"));

      const targetList = lists[t];
      if (!targetList) return;

      // Mostrar el contenedor padre
      const contenedorPadre = targetList.closest(".email-list");
      if (contenedorPadre) contenedorPadre.classList.remove("d-none");

      // Ocultar todas las sub-ULs dentro del contenedor padre
      contenedorPadre.querySelectorAll("ul").forEach(ul => ul.classList.add("d-none"));

      // Mostrar solo la sub-área correcta
      targetList.classList.remove("d-none");

      // Renderizar correos
      renderBandeja(t);

      // Desmarcar checks
      document.querySelectorAll(".email-list-item-input").forEach(chk => chk.checked = false);
      const selectAll = document.getElementById("email-select-all");
      if (selectAll) selectAll.checked = false;
    }

    // --- FUNCION AUXILIAR PARA CAPITALIZAR ---
    function capitalize(str) {
      if (!str) return "";
      return str.charAt(0).toUpperCase() + str.slice(1);
    }

    document.querySelectorAll("li[data-target]").forEach(item => {
      item.addEventListener("click", () => {
        let target = item.dataset.target;
        if (!target) return;

        // Redirigir automáticamente a sub-área si existe
        if (areaPrincipalASubarea[target]) {
          target = areaPrincipalASubarea[target];
        }

        mostrarBandeja(target);
      });
    });

    // CARGAR CORREOS
    async function cargarCorreos() {
      try {
        const res = await fetch("cargar_correos.php");
        const data = await res.json();
        if (!data.success) throw new Error(data.message || "Error al cargar correos");

        correosCompletos = data.correos.map(c => ({
          ...c,
          AREA: c.AREA ? c.AREA.trim().toLowerCase() : "",
          ESTADO: c.ESTADO ? c.ESTADO.trim().toUpperCase() : "",
          DESTACADO: c.DESTACADO == 1 ? "1" : "0", // 👈 usa == en lugar de ===
          ES_NUEVO: c.ES_NUEVO || 'N'
        }));

        // Mostrar inbox por defecto o la bandeja activa
        const bandejaActiva = document.querySelector(".email-list:not(.d-none)")?.id.replace("emailList", "").toLowerCase() || "inbox";
        renderBandeja(bandejaActiva);

      } catch (err) {
        console.error("Error al cargar correos:", err);
      }
    }

    function renderBandeja(target) {
      const targetList = lists[target];
      if (!targetList) return;
      targetList.innerHTML = "";

      let correosFiltrados;

      // 👈 Lógica de sub-bandejas de soporte
      if (["soporte-aspel", "soporte-soft", "diseno"].includes(target.toLowerCase())) {
        correosFiltrados = correosCompletos.filter(c =>
          c.AREA?.toLowerCase() === target.toLowerCase()
        );
      } else {
        correosFiltrados = correosCompletos.filter(c => {
          const area = c.AREA ? c.AREA.trim().toLowerCase() : "";
          const estado = c.ESTADO ? c.ESTADO.trim().toUpperCase() : "";

          if (target === "inbox") return (area === "" || area === "sin area") && (estado === "S" || estado === "RECIBIDO");
          if (target === "sent") return estado === "ENVIADO";
          if (target === "starred") return c.DESTACADO === "1";
          return area === target.toLowerCase();
        });
      }

      if (!correosFiltrados.length) {
        const li = document.createElement("li");
        li.className = "text-muted text-center email-list-item email-marked-read";
        li.textContent = target === "starred" ? "Aquí aparecerán los destacados" : `Aquí aparecerán los correos de ${target}`;
        targetList.appendChild(li);
        return;
      }

      // Ordenar por fecha descendente para que los más recientes estén arriba
      correosFiltrados.sort((a, b) => new Date(b.FECHA_ENVIO) - new Date(a.FECHA_ENVIO));

      const fragment = document.createDocumentFragment();
      correosFiltrados.forEach(correo => {
        const li = crearItemCorreo(correo, target);
        fragment.appendChild(li);
      });
      targetList.appendChild(fragment);
    }

    refreshBtn?.addEventListener("click", () => cargarCorreos());

    // FILTRO
    searchInput?.addEventListener("input", e => {
      const texto = e.target.value.toLowerCase();
      const targetBandeja = document.querySelector(".email-list:not(.d-none)")?.id.replace("emailList", "").toLowerCase();
      const targetList = lists[targetBandeja];
      if (!targetList) return;
      targetList.innerHTML = "";

      const correosFiltrados = correosCompletos.filter(c => {
        const busqueda = [c.ASUNTO, c.REMITENTE, c.NOMBRE, c.DESTINATARIO, c.MENSAJE].join(" ").toLowerCase();
        if (targetBandeja === "inbox") return !c.AREA && c.ESTADO !== "ENVIADO" && busqueda.includes(texto);
        if (targetBandeja === "sent") return c.ESTADO === "ENVIADO" && busqueda.includes(texto);
        return c.AREA?.toLowerCase() === targetBandeja && busqueda.includes(texto);
      });

      const fragment = document.createDocumentFragment();
      correosFiltrados.forEach(correo => {
        fragment.appendChild(crearItemCorreo(correo, targetBandeja));
      });
      targetList.appendChild(fragment);
    });

    const correosFiltrados = correosCompletos.filter(c => {
      const area = c.AREA ? c.AREA.trim().toLowerCase() : "";
      const estado = c.ESTADO ? c.ESTADO.trim().toUpperCase() : "";

      if (target === "inbox") {
        return (!area || area === "sin area") && (estado === "S" || estado === "RECIBIDO");
      }
      if (target === "sent") return estado === "ENVIADO";
      if (target === "starred") return c.DESTACADO === "1"; // 👈 Mostrar solo los destacados
      return area === target.toLowerCase();
    });

    const seguimientoModal = new bootstrap.Modal(document.getElementById("seguimientoModal"));
    const notaSeguimiento = document.getElementById("notaSeguimiento");
    const estadoSeguimiento = document.getElementById("estadoSeguimiento");
    let correosSeleccionados = [];
    let areasSeleccionadas = [];

    btnAsignarAreas?.addEventListener("click", e => {
      e.preventDefault();
      e.stopPropagation();

      // Selecciona correos y áreas
      correosSeleccionados = Array.from(document.querySelectorAll(".email-list-item-input:checked"))
        .map(chk => chk.closest("li.email-list-item"));
      areasSeleccionadas = Array.from(areaCheckboxes).filter(chk => chk.checked).map(chk => chk.value);

      if (!correosSeleccionados.length) return alert("Selecciona al menos un correo.");
      if (!areasSeleccionadas.length) return alert("Selecciona al menos un área.");

      // Abrir modal de seguimiento
      notaSeguimiento.value = ""; // limpiar
      estadoSeguimiento.value = "en seguimiento"; // valor por defecto
      seguimientoModal.show();
    });


    document.getElementById("btnGuardarSeguimiento").addEventListener("click", async () => {
      const idCorreo = document.getElementById("idCorreoHidden")?.value;
      const areaAttr = document.getElementById("estadoSeguimiento")?.dataset?.area || null;
      const estado = document.getElementById("estadoSeguimiento").value;
      const nota = document.getElementById("notaSeguimiento").value.trim();

      if (!nota) {
        alert("Escribe una nota o mensaje de seguimiento.");
        return;
      }

      const seguimientoModalEl = document.getElementById("seguimientoModal");
      const seguimientoModal = bootstrap.Modal.getOrCreateInstance(seguimientoModalEl);
      const btn = document.getElementById("btnGuardarSeguimiento");
      btn.disabled = true; // bloquear botón mientras guarda

      try {
        const fetchs = [];

        if (idCorreo && areaAttr) {
          // Caso 1: editar correo
          fetchs.push(
            fetch("mover_area.php", {
              method: "POST",
              body: new URLSearchParams({
                id_original: idCorreo,
                area: areaAttr,
                estado,
                nota
              })
            }).then(r => r.json())
          );
        } // 🚩 Caso 2: Asignar a nuevas áreas (varios correos seleccionados)
        else {
          correosSeleccionados.forEach(original => {
            const correoObj = correosCompletos.find(c =>
              `${c.FECHA_ENVIO}-${c.REMITENTE}-${c.ASUNTO}` === original.dataset.id
            );
            if (!correoObj) return;

            areasSeleccionadas.forEach(destino => {
              const copia = {
                ...correoObj,
                AREA: destino.toLowerCase(),
                SEGUIMIENTO: nota,
                ESTADO: estado,
                ES_NUEVO: "S",
                ID_CORREO_TEMP: `${correoObj.ID_CORREO}-${destino}`
              };

              correosCompletos.push(copia);
              // 🔔 Guardar la notificación en BD
              fetch("insertar_notificacion.php", {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  },
                  body: new URLSearchParams({
                    id_correo: correoObj.ID_CORREO,
                    remitente: correoObj.REMITENTE,
                    asunto: correoObj.ASUNTO,
                    mensaje: `Asignado al área ${destino}`,
                    area: destino // 👈 Se envía también el área al PHP
                  })
                })
                .then(r => r.json())
                .then(d => {
                  if (!d.success) {
                    console.error("Error insertando notificación:", d.error);
                  }
                })
                .catch(err => console.error("Error en la petición de notificación:", err));



              // 🔄 Guardar movimiento en BD
              const datos = new URLSearchParams();
              datos.append("id_original", correoObj.ID_CORREO);
              datos.append("area", destino.toLowerCase());
              datos.append("nota", nota);
              datos.append("estado", estado);

              fetch("mover_area.php", {
                  method: "POST",
                  body: datos
                })
                .then(res => res.json())
                .then(data => {
                  if (!data.success) console.error("Error al guardar:", data.message);
                })
                .catch(err => console.error("Error fetch:", err));
            });

            if (!correoObj.AREA) {
              const index = correosCompletos.indexOf(correoObj);
              if (index > -1) correosCompletos.splice(index, 1);
            }

            original.remove();
          });

          const bandejaActiva = document.querySelector(".email-list:not(.d-none)")?.id
            .replace("emailList", "")
            .toLowerCase();
          if (bandejaActiva) renderBandeja(bandejaActiva);

          const seguimientoModal = bootstrap.Modal.getInstance(document.getElementById("seguimientoModal"));
          seguimientoModal.hide();

          areaCheckboxes.forEach(chk => chk.checked = false);
          const selectAll = document.getElementById("email-select-all");
          if (selectAll) selectAll.checked = false;
        }


        // Esperar que todos los fetchs terminen
        await Promise.all(fetchs);

      } catch (err) {
        console.error("Error guardando seguimiento:", err);
      } finally {
        // Cerrar modal y reactivar botón
        seguimientoModal.hide();
        btn.disabled = false;

        // Limpiar inputs y checkboxes
        document.getElementById("notaSeguimiento").value = "";
        areaCheckboxes.forEach(chk => chk.checked = false);
        const selectAll = document.getElementById("email-select-all");
        if (selectAll) selectAll.checked = false;
      }
    });

    // --- Mostrar / ocultar secciones de gráficas ---
    const seccionesGraficas = document.querySelectorAll("#seccionesCorreo > div");

    document.querySelectorAll(".email-garfica-labels li").forEach(item => {
      item.addEventListener("click", () => {
        const target = item.dataset.target;

        // Ocultar todas las secciones
        seccionesGraficas.forEach(sec => sec.classList.add("d-none"));

        // Mostrar solo la sección correspondiente
        const targetDiv = document.getElementById(target);
        if (targetDiv) {
          targetDiv.classList.remove("d-none");
        }
      });
    });

    // ORDENAR CORREOS
    function ordenarCorreos(campo, direccion) {
      const bandeja = getBandejaActiva();
      const lista = lists[bandeja];
      if (!lista) return;

      const items = Array.from(lista.querySelectorAll("li.email-list-item"));
      items.sort((a, b) => {
        let valA, valB;
        switch (campo) {
          case "fecha":
            valA = new Date(a.dataset.fecha);
            valB = new Date(b.dataset.fecha);
            break;
          case "asunto":
            valA = (a.dataset.asunto || "").toLowerCase();
            valB = (b.dataset.asunto || "").toLowerCase();
            break;
          case "nombre":
            // el nombre lo guardaste en dataset? si no, uso username visible
            valA = (a.querySelector(".email-list-item-username")?.textContent || "").toLowerCase();
            valB = (b.querySelector(".email-list-item-username")?.textContent || "").toLowerCase();
            break;
          default:
            return 0;
        }
        if (direccion === "asc") return valA > valB ? 1 : valA < valB ? -1 : 0;
        return valA > valB ? -1 : valA < valB ? 1 : 0;
      });

      lista.innerHTML = "";
      items.forEach(item => lista.appendChild(item));
    }

    // EVENTOS PARA LOS BOTONES DEL DROPDOWN
    document.querySelectorAll('#dropdownOrdenarPor + .dropdown-menu .dropdown-item')
      .forEach(item => {
        item.addEventListener("click", e => {
          e.preventDefault();
          const sort = item.dataset.sort;
          let [campo, direccion] = sort.split("-");
          ordenarCorreos(campo, direccion);
        });
      });


    // MOVER ENTRE BANDEJAS
    document.querySelectorAll('.dropdown-menu a[data-action]').forEach(item => {
      item.addEventListener("click", e => {
        e.preventDefault();

        const accion = item.dataset.action;
        const seleccionados = Array.from(document.querySelectorAll(".email-list-item-input:checked"))
          .map(chk => chk.closest("li.email-list-item"));
        if (!seleccionados.length) return alert("Selecciona al menos un correo.");

        seleccionados.forEach(original => {
          const correoObj = correosCompletos.find(c => `${c.FECHA_ENVIO}-${c.REMITENTE}-${c.ASUNTO}` === original.dataset.id);

          if (correoObj) {
            correoObj.AREA = accion.toLowerCase();

            const datos = new URLSearchParams();
            datos.append("id", correoObj.ID_CORREO);
            datos.append("area", accion.toLowerCase());

            fetch('mover_correo.php', {
                method: 'POST',
                body: datos
              })
              .then(res => res.json())
              .then(data => {
                if (!data.success) console.error("Error al actualizar DB:", data.message);
              })
              .catch(err => console.error("Error fetch:", err));
          }

          original.remove();
        });

        const bandejaActiva = document.querySelector(".email-list:not(.d-none)")?.id.replace("emailList", "").toLowerCase();
        if (bandejaActiva) renderBandeja(bandejaActiva);
      });
    });

    // CARGA INICIAL
    cargarCorreos();
  });
</script>
<script>
  function mostrarAlertaCorreo(correo) {
    const container = document.getElementById("alertBellContainer");

    const div = document.createElement("div");
    div.className = "alert alert-primary alert-dismissible fade show shadow";
    div.setAttribute("role", "alert");

    div.innerHTML = `
    <h5 class="alert-heading d-flex align-items-center flex-wrap gap-1 mb-1">
      📧 Mensaje Nuevo
    </h5>
    <p class="mb-0">
      <strong>${correo.REMITENTE || "Remitente desconocido"}</strong><br>
      ${correo.ASUNTO || "(Sin asunto)"}<br>
      ${correo.AREA ? `<em>Área: ${correo.AREA}</em><br>` : ""}
      ${correo.MENSAJE ? `<small>${correo.MENSAJE}</small>` : ""}
    </p>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  `;

    container.appendChild(div);


  }
</script>


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

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

  // ----- Animación de la campanita -----
  function animarCampanita() {
    const campana = document.querySelector('.bx-bell');
    if (!campana) return;

    campana.classList.remove('campanita-nueva');
    void campana.offsetWidth; // reinicia animación
    campana.classList.add('campanita-nueva');
  }

  // ----- Actualizar estado visual de la campanita -----
  function actualizarCampanita() {
    const campana = document.querySelector('.bx-bell');
    const badge = document.getElementById('badgeNotification');
    const historial = getHistorial();

    const noLeidas = historial.filter(c => c.ES_NUEVO === 'N');
    const hayNoLeidas = noLeidas.length > 0;

    if (hayNoLeidas) {
      animarCampanita();
      campana.classList.add('text-warning'); // color dorado para resaltar
      badge.classList.remove('d-none');
      badge.textContent = noLeidas.length > 9 ? '9+' : noLeidas.length;
    } else {
      campana.classList.remove('campanita-nueva', 'text-warning');
      badge.classList.add('d-none');
      badge.textContent = '';
    }
  }

  // ----- Renderizar historial (AHORA CON AREA Y MENSAJE) -----
  function renderHistorial() {
    const lista = document.getElementById('listaNotificaciones');
    const historial = getHistorial();
    lista.innerHTML = '';

    historial.forEach(correo => {
      const li = document.createElement('li');
      li.className = 'list-group-item d-flex justify-content-between align-items-start';

      li.innerHTML = `
        <div>
          <strong ${correo.ES_NUEVO === 'N' ? '' : 'style="color:#777; font-weight:normal;"'}>
            ${correo.ASUNTO}
          </strong><br/>
          <small>${correo.REMITENTE}</small><br/>
          ${correo.AREA ? `<em>Área: ${correo.AREA}</em><br>` : ""}
          ${correo.MENSAJE ? `<small>${correo.MENSAJE}</small>` : ""}
        </div>
        <span class="badge ${correo.ES_NUEVO === 'N' ? 'bg-primary' : 'bg-secondary'}">
          ${correo.ES_NUEVO === 'N' ? 'Nuevo' : 'Leído'}
        </span>
      `;

      li.addEventListener('click', async () => {
        await marcarComoLeido(correo.ID_CORREO);
      });

      lista.appendChild(li);
    });

    actualizarCampanita();
  }

  // ----- Cargar notificaciones desde el servidor -----
  async function cargarNotificaciones() {
    try {
      const res = await fetch('notificaciones.php');
      const data = await res.json();
      const correos = data.notificaciones || [];

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

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

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

      if (hayNuevos) animarCampanita();

    } catch (err) {
      console.error("Error cargando notificaciones:", err);
    }
  }

  // ----- Marcar un correo como leído -----
  async function marcarComoLeido(idCorreo) {
    try {
      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 = 'S';
          return c;
        });
        saveHistorial(historial);
        renderHistorial();
      }
    } catch (err) {
      console.error("Error marcando como leído:", err);
    }
  }

  // ----- Inicialización -----
  document.addEventListener('DOMContentLoaded', () => {
    renderHistorial();
    cargarNotificaciones();
    setInterval(cargarNotificaciones, 30000); // cada 30s
  });
</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>
  document.getElementById('attach-file').addEventListener('change', function() {
    const archivos = Array.from(this.files);
    const archivoNombre = archivos.map(a => a.name).join(', ');
    document.getElementById('archivo-nombre').textContent = archivoNombre || 'Ningún archivo seleccionado';

    const previewDiv = document.getElementById('archivoPreview');
    previewDiv.innerHTML = ''; // Limpiar vista previa

    archivos.forEach((file, index) => {
      if (file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = document.createElement('img');
          img.src = e.target.result;
          img.style.maxWidth = '150px';
          img.style.maxHeight = '150px';
          img.style.border = '1px solid #ccc';
          img.style.padding = '5px';
          img.style.objectFit = 'cover';
          previewDiv.appendChild(img);

          // Propiedades temporales para PHPMailer
          file.base64 = e.target.result;
          file.cid = 'img' + index;
        }
        reader.readAsDataURL(file);
      }
    });
  });
</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(); // texto de búsqueda
      const per_page = parseInt(numResultados.value, 10);

      // Filtrar clientes por CLAVE (numérica) o CORREO
      const encontrados = clientes.filter(c =>
        (c.CLAVE?.toString().includes(filtro) || c.CORREO?.toLowerCase().includes(filtro))
      );

      listaClientes.innerHTML = "";
      if (!encontrados.length) {
        listaClientes.innerHTML = '<li class="list-group-item text-muted">No se encontraron resultados</li>';
        selectAll.checked = false;
        mostrarControlesPaginacion();
        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.CLAVE}">
      ${c.CLAVE} &lt;${c.CORREO}&gt;
    `;
        listaClientes.appendChild(li);
      });

      selectAll.checked = false;
      mostrarControlesPaginacion();
    }


    // 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);

    // 🧹 Evita el bug del "backdrop fantasma" cuando se cierra el modal de envío
    modalEl.addEventListener("hidden.bs.modal", () => {
      document.querySelectorAll(".modal-backdrop").forEach(el => el.remove());
      document.body.classList.remove("modal-open");
      document.body.style.removeProperty("padding-right");
    });

    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(); //  Aquí se cierra el modal

          form.reset();
          archivoImg.src = "";
          archivoPreview.style.display = "none";
          fileNameSpan.textContent = "";
          firmaImg.src = "";
          firmaPreview.style.display = "none";
        } else if (data.bloqueo) {
          iniciarBloqueo(data.tiempo_restante);
          alert(data.message);
        } else {
          alert("⚠️ Error: " + (data.message || data.errores?.join(", ") || "Desconocido"));
        }
      } catch (err) {
        console.error(err);

      } finally {
        spinner.classList.add("d-none");
        btnEnviar.disabled = false;
      }
    });
  });
</script>

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

    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");

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

    numResultados.addEventListener("change", () => {
      paginaActual = 1;
      cargarClientes();
    });

    busquedaCliente.addEventListener("input", () => {
      paginaActual = 1;
      cargarClientes();
    });

    async function cargarClientes() {
      const per_page = parseInt(numResultados.value, 10);

      try {
        const res = await fetch(`obtener_correos.php?page=${paginaActual}&per_page=${per_page}`);
        const data = await res.json();

        if (!data.success) {
          listaClientes.innerHTML = `<li class="list-group-item text-danger">${data.message}</li>`;
          return;
        }

        clientes = data.data;
        totalRegistros = data.total;
        mostrarClientes();
      } catch (err) {
        listaClientes.innerHTML = `<li class="list-group-item text-danger">Error al cargar clientes</li>`;
        console.error("Error al cargar clientes:", err);
      }
    }

    function mostrarClientes() {
      const filtro = busquedaCliente.value.toLowerCase(); // texto de búsqueda
      const per_page = parseInt(numResultados.value, 10);

      // Filtrar clientes por CLAVE (numérica) o CORREO
      const encontrados = clientes.filter(c =>
        String(c.CLAVE ?? "").includes(filtro) || // <-- CLAVE convertido a string
        String(c.CORREO ?? "").toLowerCase().includes(filtro)
      );

      listaClientes.innerHTML = "";
      if (!encontrados.length) {
        listaClientes.innerHTML = '<li class="list-group-item text-muted">No se encontraron resultados</li>';
        selectAll.checked = false;
        mostrarControlesPaginacion();
        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.CLAVE}">
      ${c.CLAVE} &lt;${c.CORREO}&gt;
    `;
        listaClientes.appendChild(li);
      });

      selectAll.checked = false;
      mostrarControlesPaginacion();
    }

    // ---------------- Paginación ----------------
    function mostrarControlesPaginacion() {
      const totalPaginas = Math.ceil(totalRegistros / parseInt(numResultados.value, 10));
      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--;
          cargarClientes();
        }
      });
      pagContainer.appendChild(btnPrev);

      // Rango de páginas
      const rango = 2;
      let inicio = Math.max(1, paginaActual - rango);
      let fin = Math.min(totalPaginas, paginaActual + rango);

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

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

      if (fin < totalPaginas) {
        if (fin < totalPaginas - 1) {
          const span = document.createElement("span");
          span.textContent = "...";
          pagContainer.appendChild(span);
        }
        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++;
          cargarClientes();
        }
      });
      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;
        cargarClientes();
      });
      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>