<?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;
    }
  </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 active open">
            <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 active">
                <a href="correos.php" class="menu-link">
                  <div data-i18n="Basic">Correos</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>

          <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>
        </ul>
      </aside>
      <!-- / Menu -->

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

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

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

              .search-dropdown li {
                cursor: pointer;
              }

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

            <!-- /Search -->

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



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


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


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

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

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

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


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

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

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

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


              <!-- 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="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-success"></i>
                                <span class="align-middle ms-2">Contabilidad</span>
                              </a>
                            </li>
                            <li data-target="ventas">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-primary"></i>
                                <span class="align-middle ms-2">Ventas</span>
                              </a>
                            </li>
                            <li data-target="administracion">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-warning"></i>
                                <span class="align-middle ms-2">Administracion</span>
                              </a>
                            </li>
                            <li data-target="soporte">
                              <a href="javascript:void(0);" class="email-label">
                                <i class="badge badge-dot bg-danger"></i>
                                <span class="align-middle ms-2">Soporte</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="card-body emails-list-header p-3 py-2">
                      <!-- 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="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-success me-2"></i> Contabilidad
                              </label>
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="ventas">
                                <i class="badge badge-dot bg-primary me-2"></i> Ventas
                              </label>
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="administracion">
                                <i class="badge badge-dot bg-warning me-2"></i> Administración
                              </label>
                              <label class="dropdown-item">
                                <input type="checkbox" class="me-2 area-checkbox" value="soporte">
                                <i class="badge badge-dot bg-danger me-2"></i> Soporte
                              </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 class="col app-emails-list">

                        <div class="card shadow-none border-0 rounded-0">
                          <ul class="list-unstyled m-0">
                            <li class="email-list-item email-marked-read d-flex align-items-center" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
                              <div class="d-flex align-items-center w-100">
                                <div class="form-check mb-0 ms-2">
                                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-1">
                                  <label class="form-check-label" for="email-1"></label>
                                </div>
                                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base bx bx-star icon-md cursor-pointer ms-1"></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">Chandler Bing</span>
                                  <small class="email-list-item-subject d-xl-inline-block d-block"> Focused impactful open issues from the project of GitHub</small>
                                </div>
                                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
                                  <small class="email-list-item-time text-body-secondary">08:40 AM</small>
                                  <ul class="list-inline email-list-item-actions">
                                    <li class="list-inline-item email-delete btn btn-icon"><i class="icon-base bx bx-trash icon-md"></i></li>
                                    <li class="list-inline-item email-unread btn btn-icon"><i class="icon-base bx bx-envelope icon-md"></i></li>
                                    <li class="list-inline-item btn btn-icon"><i class="icon-base bx bx-info-circle icon-md"></i></li>
                                  </ul>
                                </div>
                              </div>
                            </li>
                          </ul>

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

                            </ul>
                          </div>
                          <!-- Bandeja: Enviados -->
                          <div class="email-list pt-0 d-none" id="emailListSent">
                            <ul class="list-unstyled m-0" id="sentList">
                              <li class="text-muted text-center">Aquí aparecerán los correos enviados</li>
                            </ul>
                          </div>

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

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

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

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

                          <div class="email-list pt-0 d-none" id="emailListVentas">
                            <ul class="list-unstyled m-0" id="ventasList">
                              <li class="text-muted text-center">Aquí aparecerán los correos de ventas</li>
                            </ul>
                          </div>

                          <div class="email-list pt-0 d-none" id="emailListAdministracion">
                            <ul class="list-unstyled m-0" id="administracionList">
                              <li class="text-muted text-center">Aquí aparecerán los correos de administración</li>
                            </ul>
                          </div>

                          <div class="email-list pt-0 d-none" id="emailListSoporte">
                            <ul class="list-unstyled m-0" id="soporteList">
                              <li class="text-muted text-center">Aquí aparecerán los correos de soporte</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>
              <!-- / Layout wrapper -->


              <!-- MODAL <!-- MODAL CORREGIDO -->
              <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%;">
                  <div class="modal-content shadow-lg">
                    <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>

                    <div class="modal-body p-3">
                      <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@trxprogramas.com.mx">ventas@trxprogramas.com.mx</option>
                              <option value="ventas@traxsistemas.com.mx">ventas@traxsistemas.com.mx</option>

                            </select>
                          </div>

                          <!-- A (destinatario) con búsqueda -->
                          <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="email" id="email-to" name="correo_para" class="form-control form-control-sm" placeholder="cliente@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 oculto para el nombre del cliente -->
                            <input type="hidden" id="cliente-nombre" name="cliente_nombre" />
                          </div>

                          <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>

                          <!-- Botones de acción -->
                          <div class="d-flex justify-content-between align-items-center">
                            <button type="submit" id="btnEnviarCorreo" class="btn btn-primary">
                              Enviar
                              <span id="spinnerEnviar" class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
                            </button>

                            <div class="mb-3">
                              <label for="firma" class="fw-medium text-body-secondary mb-1 d-block">Firma:</label>
                              <select id="firma" name="firma" class="form-select">
                                <option value="" selected>Sin firma</option>
                                <option value="../img/firmatrx.png">Firma Ventas TRX</option>
                                <option value="../img/firma.png">Firma Ventas TRAX</option>
                              </select>

                              <!-- Contenedor para vista previa -->
                              <div id="firmaPreview" style="margin-top:10px; display:none;">
                                <img id="firmaImg" src="" alt="Vista previa firma" style="max-width: 300px; border:1px solid #ccc; padding:5px;" />
                              </div>
                            </div>


                            <!-- Adjuntar archivo -->
                            <div class="d-flex gap-2 align-items-center">
                              <label for="attach-file" class="btn btn-light btn-sm btn-icon mb-0" title="Adjuntar archivo">
                                <i class="bx bx-paperclip"></i>
                              </label>
                              <input type="file" name="archivo" id="attach-file" class="d-none" />
                              <span id="archivo-nombre" class="text-muted small"></span>
                            </div>
                          </div>

                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <div id="toastCorreo" class="toast-correo hidden">
                <div class="toast-content">
                  <i class="bx bx-check-circle me-2" style="font-size: 1.3rem; color: #28a745;"></i>
                  <span>Correo enviado con éxito.</span>
                </div>
              </div>

            </div>




            <!-- Modal Buscar Cliente -->
            <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...">

                    <ul class="list-group" id="listaClientes">
                      <!-- Aquí se llenan dinámicamente los clientes encontrados -->
                    </ul>
                  </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">

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                  </div>

                  <div id="emailDetailContent"></div> <!-- Aquí inyectamos el contenido HTML -->

                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                  </div>
                </div>
              </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>
  setInterval(() => {
    fetch('leer_respuesta.php')
      .then(response => response.json())
      .then(data => {
        console.log('Revisión automática de respuestas:', data);
        // Aquí puedes hacer algo si se insertaron nuevos correos
      })
      .catch(error => console.error('Error leyendo respuestas:', error));
  }, 60000); // cada 60 segundos
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const sidebarItems = document.querySelectorAll(".email-filter-folders li");
    const emailLists = document.querySelectorAll(".email-list");

    sidebarItems.forEach(item => {
      item.addEventListener("click", function() {
        // 1. Quitar clase 'active' de todos los elementos
        sidebarItems.forEach(el => el.classList.remove("active"));
        // 2. Agregar clase 'active' al clickeado
        this.classList.add("active");

        // 3. Ocultar todas las listas
        emailLists.forEach(list => list.classList.add("d-none"));

        // 4. Mostrar solo la lista correspondiente
        const target = this.getAttribute("data-target"); // Ej: 'inbox', 'sent', etc.
        const targetId = getTargetId(target); // Ej: emailListInbox

        const targetElement = document.getElementById(targetId);
        if (targetElement) {
          targetElement.classList.remove("d-none");
        }
      });
    });

    // Función para mapear nombres especiales (como "starred" a "Destacado")
    function getTargetId(target) {
      const map = {
        inbox: "emailListInbox",
        sent: "emailListSent",
        archived: "emailListArchived",
        starred: "emailListDestacado", // <- especial aquí
        trash: "emailListTrash"
      };
      return map[target];
    }
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const inboxList = document.getElementById("inboxList");
    const sentList = document.getElementById("sentList");
    const archivedList = document.getElementById("archivedList");
    const starredList = document.getElementById("starredList");
    const trashList = document.getElementById("trashList");

    const lists = {
      inbox: inboxList,
      sent: sentList,
      archived: archivedList,
      starred: starredList,
      trash: trashList
    };
    const emailDetailModalEl = document.getElementById("emailDetailModal");
    const emailDetailModal = new bootstrap.Modal(emailDetailModalEl);
    const emailDetailContent = document.getElementById("emailDetailContent");
    const searchInput = document.querySelector(".email-search-input");
    const refreshBtn = document.getElementById("emailRefreshBtn");

    let correosCompletos = [];

    function formatearFecha(fechaISO) {
      if (!fechaISO) return "";
      const fecha = new Date(fechaISO);
      return fecha.toLocaleString('es-MX', {
        dateStyle: 'medium',
        timeStyle: 'short'
      });
    }

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

    async function marcarComoLeido(idCorreo, li) {
      try {
        const res = await fetch('marcar_leido.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: `id=${encodeURIComponent(idCorreo)}`
        });
        const data = await res.json();
        if (data.success && li) {
          li.dataset.esNuevo = 'N';
          const badge = li.querySelector('.badge-nuevo');
          if (badge) badge.remove();
        }
      } catch (error) {
        console.error('Error al marcar como leído:', error);
      }
    }

    const selectAllCheckbox = document.getElementById("email-select-all");
    if (selectAllCheckbox) {
      selectAllCheckbox.addEventListener("change", function() {
        const checked = this.checked;
        document.querySelectorAll(".email-list-item-input").forEach(chk => chk.checked = checked);
      });
    }

    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.ESTADO === "RECIBIDO" ? correo.REMITENTE || "Remitente desconocido" : correo.NOMBRE || correo.DESTINATARIO || "Desconocido";
      const nuevoBadge = correo.ES_NUEVO === 'S' ? `<span class="badge bg-label-primary me-2 badge-nuevo">New</span>` : '';

      li.innerHTML = `
      
        <ul class="list-unstyled m-0">
          <li class="email-list-item email-marked-read d-flex align-items-center" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
            <div class="d-flex align-items-center w-100">
              <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} ${correo.ASUNTO || "(Sin asunto)"}</small>
              </div>

              <div class="email-list-item email-marked-read d-flex align-items-center" >
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <small class="email-list-item-time text-body-secondary">${hora}</small>
                </div>
              </div>

              <div class="d-flex align-items-center">
                <small class="text-muted me-3"></small>
                ${correo.ADJUNTO ? <span class="text-secondary me-3"><i class="bx bx-paperclip"></i></span> : ""}
                <button class="btn btn-icon btn-sm btn-outline-archive me-2 email-archive"><i class="bx bx-archive"></i></button>
                <button class="btn icon-base bx bx-trash email-list-delete cursor-pointer btn-icon btn-sm btn-outline-danger email-delete"></button>
              </div>
            </div>
          </li>
        </ul>`;

      li.querySelector(".email-list-item-bookmark").addEventListener("click", e => {
        e.stopPropagation();
        toggleDestacado(li);
      });

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

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

      li.querySelector(".email-list-item-content").addEventListener("click", () => {
        mostrarDetalleCorreo(correo, li);
      });

      return li;
    }

    // ======== Función para mostrar detalle ========
    function mostrarDetalleCorreo(correo, li = null) {
      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);
      }

      const fechaStr = formatearFecha(correo.FECHA_ENVIO);
      const adjuntoHTML = correo.ADJUNTO ? `
    <hr /><p class="text-body-secondary mb-2">Adjunto:</p>
    <div class="cursor-pointer">
      <i class="bx bx-file"></i>
      <a href="${correo.ADJUNTO}" target="_blank" class="align-middle ms-1">
        ${correo.ADJUNTO.split('/').pop()}
      </a>
    </div>` : "";

      const esRecibido = correo.ESTADO === "RECIBIDO";
      const destacadoClass = li.dataset.destacado === "1" ? "bxs-star text-warning" : "bx-star";

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

      const nombreMostrar = esRecibido ?
        (correo.REMITENTE || "Remitente desconocido") :
        (correo.NOMBRE || correo.DESTINATARIO || "Destinatario desconocido");

      const paraMostrar = esRecibido ?
        (correo.NOMBRE || correo.DESTINATARIO || "(sin destinatario)") :
        (correo.REMITENTE || "(sin remitente)");

      const deMostrar = esRecibido ?
        (correo.DESTINATARIO || "(sin destinatario)") :
        (correo.REMITENTE || "(sin remitente)");

      const mostrarAsesorHTML = correo.ESTADO === "ENVIADO" ?
        `<small class="text-body">Asesor: ${correo.ASESOR || "Sin asignar"}</small><br/>` :
        "";

      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">
          <img src="../../assets/img/avatars/2.png" class="flex-shrink-0 rounded-circle me-4" height="38" width="38" />
          <div class="flex-grow-1 ms-1">
            <h6 class="m-0 fw-normal">${nombreMostrar}</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-6" style="max-height: 70vh; overflow-y: auto;">
        <p class="fw-medium">${correo.ASUNTO || "(Sin asunto)"}</p>
        <p class="fw-medium mb-3" style="white-space: pre-wrap;">
          ${respuesta || "(Mensaje vacío)"}
          <br><br>
          <img src="http://localhost/responsiveaspel/img/firma.png" alt="Firma" width="700">
        </p>
        ${original ? `<button class="btn btn-link p-0" id="btnMostrarOriginal">Mostrar mensaje original ↓</button>` : ""}
        ${adjuntoHTML}
      </div>
    </div>
  `;

      emailDetailContent.querySelector(".email-toggle-star").addEventListener("click", () => {
        toggleDestacado(li);
        mostrarDetalleCorreo(correo, li);
      });
      emailDetailContent.querySelector(".email-archive").addEventListener("click", () => {
        moverCorreo(li, "archived");
        emailDetailModal.hide();
      });
      emailDetailContent.querySelector(".email-delete").addEventListener("click", () => {
        moverCorreo(li, "trash");
        emailDetailModal.hide();
      });

      if (original) {
        emailDetailContent.querySelector("#btnMostrarOriginal").addEventListener("click", () => {
          const originalModal = new bootstrap.Modal(document.getElementById("emailOriginalModal"));
          document.getElementById("emailOriginalContent").textContent = original.replace(/<[^>]*>?/gm, '');
          originalModal.show();
        });
      }

      emailDetailModal.show();
    }



    function actualizarListaDestacados() {
      lists.starred.innerHTML = "";
      Object.values(lists).forEach(list => {
        if (list === lists.starred) return;
        list.querySelectorAll("li.email-list-item").forEach(item => {
          if (item.dataset.destacado === "1") {
            const correo = {
              NOMBRE: item.querySelector("strong")?.textContent || "Desconocido",
              REMITENTE: item.dataset.remitente,
              ASUNTO: item.dataset.asunto,
              MENSAJE: item.dataset.mensaje,
              FECHA_ENVIO: item.dataset.fecha,
              DESTINATARIO: item.dataset.destinatario,
              DESTACADO: item.dataset.destacado,
              ADJUNTO: item.dataset.adjunto
            };
            lists.starred.appendChild(crearItemCorreo(correo, "starred"));
          }
        });
      });
      actualizarContadores();
    }

    function toggleDestacado(item) {
      const icon = item.querySelector(".email-list-item-bookmark i");
      const isStarred = item.dataset.destacado === "1";
      item.dataset.destacado = isStarred ? "0" : "1";
      icon.classList.toggle("bxs-star");
      icon.classList.toggle("text-warning");
      icon.classList.toggle("bx-star");
      actualizarListaDestacados();
      guardarEstado();
    }


    function moverCorreo(item, destino) {
      const origen = item.dataset.bandeja;
      if (!lists[origen] || !lists[destino]) return;

      // Actualizar dataset.bandejas
      let bandejas = item.dataset.bandejas ? item.dataset.bandejas.split(',') : [origen];
      if (!bandejas.includes(destino)) bandejas.push(destino);
      item.dataset.bandejas = bandejas.join(',');

      // Actualizar dataset.bandeja principal (última bandeja donde se mueve)
      item.dataset.bandeja = destino;

      // Mover el nodo al destino
      lists[destino].appendChild(item);

      actualizarListaDestacados();
      guardarEstado();
      agregarNotificacion(item, destino);
    }



    function copiarCorreo(item, destino) {
      if (!lists[destino]) return;

      const clon = item.cloneNode(true);
      clon.dataset.bandeja = destino;
      lists[destino].appendChild(clon);

      agregarNotificacion(clon, destino);
    }

    function agregarNotificacion(item, destino) {
      // Solo para áreas especiales
      const bandejasEspeciales = ['ventas', 'administracion', 'contabilidad', 'soporte'];
      if (!bandejasEspeciales.includes(destino)) return;

      const lista = document.getElementById('listaNotificaciones');
      const badge = document.getElementById('badgeNotification'); // si tienes un badge para mostrar cantidad
      if (badge) badge.classList.remove('d-none');

      const liNot = document.createElement('li');
      liNot.className = 'list-group-item dropdown-notifications-item cursor-pointer';
      liNot.dataset.idCorreo = item.dataset.id;
      liNot.textContent = `Un correo llegó para ${capitalizeFirstLetter(destino)}`;

      lista.prepend(liNot);

      // Al hacer click en la notificación, abrir detalle del correo
      liNot.addEventListener('click', () => {
        mostrarDetalleCorreo({
          ID_CORREO: item.dataset.id,
          REMITENTE: item.dataset.remitente,
          ASUNTO: item.dataset.asunto,
          MENSAJE: item.dataset.mensaje,
          FECHA_ENVIO: item.dataset.fecha,
          DESTINATARIO: item.dataset.destinatario,
          ADJUNTO: item.dataset.adjunto,
          DESTACADO: item.dataset.destacado,
          ES_NUEVO: item.dataset.esNuevo,
          ESTADO: item.dataset.estado
        });
        liNot.remove();
        if (lista.children.length === 0 && badge) badge.classList.add('d-none');
      });
    }

    // Función auxiliar para mayúscula inicial
    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }


    function moverCorreo(item, destino) {
      const origen = item.dataset.bandeja;
      if (!lists[origen] || !lists[destino]) return;

      // Mover el item
      lists[origen].removeChild(item);
      item.dataset.bandeja = destino;

      // Actualizar dataset.bandejas
      let bandejas = item.dataset.bandejas ? item.dataset.bandejas.split(',') : [origen];
      if (!bandejas.includes(destino)) bandejas.push(destino);
      item.dataset.bandejas = bandejas.join(',');

      lists[destino].appendChild(item);

      actualizarListaDestacados();
      guardarEstado();
      agregarNotificacion(item, destino);
    }


    function copiarCorreo(item, destino) {
      if (!lists[destino]) return;
      const clon = item.cloneNode(true);
      clon.dataset.bandeja = destino;
      lists[destino].appendChild(clon);
      agregarNotificacion(clon, destino);
    }

    function agregarNotificacion(item, destino) {
      const bandejasEspeciales = ['ventas', 'administracion', 'contabilidad', 'soporte'];
      if (!bandejasEspeciales.includes(destino)) return;

      const lista = document.getElementById('listaNotificaciones');
      const badge = document.getElementById('badgeNotification');
      badge.classList.remove('d-none');

      const liNot = document.createElement('li');
      liNot.className = 'list-group-item dropdown-notifications-item cursor-pointer';
      liNot.dataset.idCorreo = item.dataset.id;
      liNot.textContent = `Un correo llegó para ${capitalizeFirstLetter(destino)}`;

      lista.prepend(liNot);

      liNot.addEventListener('click', () => {
        mostrarDetalleCorreo({
          ID_CORREO: item.dataset.id,
          REMITENTE: item.dataset.remitente,
          ASUNTO: item.dataset.asunto,
          MENSAJE: item.dataset.mensaje,
          FECHA_ENVIO: item.dataset.fecha,
          DESTINATARIO: item.dataset.destinatario,
          ADJUNTO: item.dataset.adjunto,
          DESTACADO: item.dataset.destacado,
          ES_NUEVO: item.dataset.esNuevo,
          ESTADO: item.dataset.estado
        });
        liNot.remove();
        if (lista.children.length === 0) badge.classList.add('d-none');
      });
    }

    document.querySelectorAll("#dropdownMoverA .area-checkbox, #dropdownMoverA label").forEach(el => {
      el.addEventListener("click", e => e.stopPropagation());
    });


    document.getElementById("btnAsignarAreas").addEventListener("click", () => {
      const seleccionados = obtenerCorreosSeleccionados();
      if (seleccionados.length === 0) {
        alert("Selecciona al menos un correo para asignar.");
        return;
      }

      const areasSeleccionadas = Array.from(document.querySelectorAll(".area-checkbox:checked"))
        .map(chk => chk.value);

      if (areasSeleccionadas.length === 0) {
        alert("Selecciona al menos un área para asignar.");
        return;
      }

      seleccionados.forEach(originalItem => {
        areasSeleccionadas.forEach((destino, index) => {
          let item;
          if (index === 0) {
            item = originalItem;
          } else {
            item = originalItem.cloneNode(true);
            item.dataset.bandejas = originalItem.dataset.bandejas + ',' + destino;

            // Restaurar eventos
            item.querySelector(".email-list-item-bookmark").addEventListener("click", e => {
              e.stopPropagation();
              toggleDestacado(item);
            });
            item.querySelector(".email-archive").addEventListener("click", e => {
              e.stopPropagation();
              moverCorreo(item, "archived");
            });
            item.querySelector(".email-delete").addEventListener("click", e => {
              e.stopPropagation();
              moverCorreo(item, "trash");
            });
            item.querySelector(".email-list-item-content").addEventListener("click", () => {
              mostrarDetalleCorreo({
                ID_CORREO: item.dataset.id,
                REMITENTE: item.dataset.remitente,
                ASUNTO: item.dataset.asunto,
                MENSAJE: item.dataset.mensaje,
                FECHA_ENVIO: item.dataset.fecha,
                DESTINATARIO: item.dataset.destinatario,
                ADJUNTO: item.dataset.adjunto,
                DESTACADO: item.dataset.destacado,
                ES_NUEVO: item.dataset.esNuevo,
                ESTADO: item.dataset.estado
              }, item);
            });
          }

          // Asignar a la bandeja
          if (lists[destino] && !lists[destino].contains(item)) {
            lists[destino].appendChild(item);
            item.dataset.bandeja = destino;
            agregarNotificacion(item, destino);
          }
        });
      });


      // Limpiar checkboxes
      document.querySelectorAll(".area-checkbox").forEach(chk => chk.checked = false);

      // Cerrar dropdown
      const dropdownBtn = document.getElementById("dropdownMoverA");
      if (bootstrap?.Dropdown && dropdownBtn) {
        const dropdown = bootstrap.Dropdown.getInstance(dropdownBtn);
        dropdown?.hide();
      }

      actualizarListaDestacados();
      guardarEstado();
    });



    function obtenerCorreosSeleccionados() {
      return Array.from(document.querySelectorAll(".email-list-item-input:checked"))
        .map(chk => chk.closest("li.email-list-item"));
    }
    // Manejo de acciones de botones del sidebar para mostrar la bandeja correcta
    function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }

    function mostrarBandeja(target) {
      if (!target || !lists.hasOwnProperty(target)) return;
      // Oculta todos los email lists
      document.querySelectorAll('.email-list').forEach(div => div.classList.add('d-none'));
      // Muestra solo el correspondiente
      const divToShow = document.getElementById(`emailList${capitalizeFirstLetter(target)}`);
      if (divToShow) divToShow.classList.remove('d-none');
      // Cambiar active en el sidebar
      document.querySelectorAll('.email-filter-folders li, .email-labels-list li').forEach(li => li.classList.remove('active'));
      const activeLi = Array.from(document.querySelectorAll('.email-filter-folders li, .email-labels-list li')).find(li => li.dataset.target === target);
      if (activeLi) activeLi.classList.add('active');
    }
    // Listener para los botones del sidebar
    document.querySelectorAll('.email-filter-folders li, .email-labels-list li').forEach(li => {
      li.addEventListener('click', () => {
        const target = li.dataset.target;
        mostrarBandeja(target);
      });
    });

    document.body.addEventListener("click", e => {
      if (e.target.closest(".email-list-delete")) {
        e.preventDefault();
        const seleccionados = obtenerCorreosSeleccionados();
        if (seleccionados.length === 0) {
          alert("Selecciona al menos un correo para mover a papelería.");
          return;
        }
        seleccionados.forEach(li => moverCorreo(li, "trash"));
        const selectAll = document.getElementById("email-select-all");
        if (selectAll) selectAll.checked = false;
      }
    });

    document.body.addEventListener("click", e => {
      const item = e.target.closest(".dropdown-item");
      if (!item) return;
      const sortOption = item.getAttribute("data-sort");
      if (!sortOption) return;
      const [campo, direccion] = sortOption.split("-");
      ordenarCorreos(campo, direccion);
    });
    // Cargar correos desde servidor y estado guardado

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

        // Limpiar listas
        Object.values(lists).forEach(list => list.innerHTML = "");

        const estadoGuardado = JSON.parse(localStorage.getItem("estadoCorreos") || "{}");

        data.correos.forEach(correo => {
          const item = crearItemCorreo(correo);
          let bandejasAsignadas = [];

          // Revisar si existe en estado guardado
          for (const key in estadoGuardado) {
            const guardado = estadoGuardado[key].find(i => i.id === item.dataset.id);
            if (guardado) {
              bandejasAsignadas = guardado.bandejas || [key];
              correo.DESTACADO = guardado.destacado || "0";
              correo.ES_NUEVO = guardado.esNuevo || correo.ES_NUEVO || 'N';
              break;
            }
          }

          // Si no hay estado guardado, asignar default
          if (bandejasAsignadas.length === 0) {
            bandejasAsignadas = [correo.ESTADO === "ENVIADO" ? "sent" : "inbox"];
          }

          // Agregar a todas las bandejas asignadas
          bandejasAsignadas.forEach((bandeja, index) => {
            if (!lists[bandeja]) return;

            let itemAAgregar = (index === 0) ? item : item.cloneNode(true);

            // Restaurar eventos si es clon
            if (itemAAgregar !== item) {
              itemAAgregar.querySelector(".email-list-item-bookmark").addEventListener("click", e => {
                e.stopPropagation();
                toggleDestacado(itemAAgregar);
              });
              itemAAgregar.querySelector(".email-archive").addEventListener("click", e => {
                e.stopPropagation();
                moverCorreo(itemAAgregar, "archived");
              });
              itemAAgregar.querySelector(".email-delete").addEventListener("click", e => {
                e.stopPropagation();
                moverCorreo(itemAAgregar, "trash");
              });
              itemAAgregar.querySelector(".email-list-item-content").addEventListener("click", () => {
                mostrarDetalleCorreo({
                  ID_CORREO: itemAAgregar.dataset.id,
                  REMITENTE: itemAAgregar.dataset.remitente,
                  ASUNTO: itemAAgregar.dataset.asunto,
                  MENSAJE: itemAAgregar.dataset.mensaje,
                  FECHA_ENVIO: itemAAgregar.dataset.fecha,
                  DESTINATARIO: itemAAgregar.dataset.destinatario,
                  ADJUNTO: itemAAgregar.dataset.adjunto,
                  DESTACADO: itemAAgregar.dataset.destacado,
                  ES_NUEVO: itemAAgregar.dataset.esNuevo,
                  ESTADO: itemAAgregar.dataset.estado
                }, itemAAgregar);
              });
            }

            lists[bandeja].appendChild(itemAAgregar);
            itemAAgregar.dataset.bandejas = bandejasAsignadas.join(',');
            itemAAgregar.dataset.bandeja = bandeja; // asegurar que la bandeja principal sea la correcta
          });
        });

        actualizarListaDestacados();
        actualizarContadores();

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

    function ordenarCorreos(campo, direccion) {
      const bandeja = "inbox";
      const lista = lists[bandeja];
      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":
            valA = (a.querySelector("strong")?.textContent || "").toLowerCase();
            valB = (b.querySelector("strong")?.textContent || "").toLowerCase();
            break;
          default:
            return 0;
        }
        return direccion === "asc" ? valA > valB ? 1 : valA < valB ? -1 : 0 : valA > valB ? -1 : valA < valB ? 1 : 0;
      });
      lista.innerHTML = "";
      items.forEach(item => lista.appendChild(item));
    }

    function filtrarCorreos(texto) {
      texto = texto.toLowerCase();
      lists.inbox.innerHTML = "";
      correosCompletos.forEach(correo => {
        const busqueda = [correo.ASUNTO, correo.REMITENTE, correo.NOMBRE, correo.DESTINATARIO, correo.MENSAJE].join(" ").toLowerCase();
        if (busqueda.includes(texto)) {
          lists.inbox.appendChild(crearItemCorreo(correo));
        }
      });
    }

    searchInput?.addEventListener("input", e => filtrarCorreos(e.target.value));
    refreshBtn?.addEventListener("click", () => cargarCorreos());

    document.querySelectorAll('.dropdown-menu a[data-action]').forEach(item => {
      item.addEventListener('click', e => {
        e.preventDefault();
        const accion = item.dataset.action;
        const seleccionados = obtenerCorreosSeleccionados();
        if (seleccionados.length === 0) return alert("Selecciona al menos un correo para mover.");

        const mapa = {
          inbox: "inbox",
          archived: "archived",
          trash: "trash",
          contabilidad: "contabilidad",
          ventas: "ventas",
          administracion: "administracion",
          soporte: "soporte"
        };
        const destino = mapa[accion];

        seleccionados.forEach(li => {
          // Detecta la bandeja actual a partir del dataset o del padre
          const origenReal = li.closest("ul")?.id.replace("List", "").toLowerCase() || li.dataset.bandeja || "inbox";
          moverCorreo(li, destino, origenReal);
        });

        // Desmarca el select-all si existe
        const selectAllCheckbox = document.getElementById("email-select-all");
        if (selectAllCheckbox) selectAllCheckbox.checked = false;
      });
    });

    document.querySelectorAll('.dropdown-menu a[data-sort]').forEach(item => {
      item.addEventListener('click', e => {
        e.preventDefault();
        const [campo, dir] = item.dataset.sort.split("-");
        ordenarCorreos(campo, dir);
      });
    });

    cargarCorreos();
  });
</script>

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

    const badge = document.getElementById('badgeNotification');
    const lista = document.getElementById('listaNotificaciones');
    lista.innerHTML = '';

    if (correos.length > 0) {
      badge.classList.remove('d-none');
      correos.forEach(correo => {
        const li = document.createElement('li');
        li.className = 'list-group-item dropdown-notifications-item cursor-pointer';
        li.innerHTML = `
          <strong>${correo.ASUNTO}</strong><br/>
          <small>${correo.REMITENTE} - ${new Date(correo.FECHA_ENVIO).toLocaleString()}</small>
        `;
        li.addEventListener('click', async () => {
          await marcarComoLeido(correo.ID_CORREO);
          window.location.href = `correos.php?id=${correo.ID_CORREO}`;
        });
        lista.appendChild(li);
      });
    } else {
      badge.classList.add('d-none');
    }
  }

  async function marcarComoLeido(idCorreo) {
    const res = await fetch('marcar_leido.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `id=${idCorreo}`
    });
    const data = await res.json();
    if (data.success) {
      cargarNotificaciones(); // actualiza el badge
    }
  }

  async function mostrarDetalleDesdeNotificacion(idCorreo) {
    const res = await fetch(`mostrar_correo.php?id=${idCorreo}`);
    const data = await res.json();
    if (data.success) {
      mostrarDetalleCorreo(data.correo); // esta función ya existe en tu código
    } else {
      alert("No se pudo cargar el correo: " + data.message);
    }
  }

  document.addEventListener('DOMContentLoaded', cargarNotificaciones);
</script>

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

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

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

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

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


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

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const bandejas = {
      inbox: document.getElementById('emailListInbox'),
      archived: document.getElementById('emailListArchived'),
      starred: document.getElementById('emailListDestacado'),
      trash: document.getElementById('emailListTrash'),
      sent: document.getElementById('emailListSent'),
    };

    function mostrarBandeja(activa) {
      Object.keys(bandejas).forEach(key => {
        if (key === activa) {
          bandejas[key].classList.remove('d-none');
        } else {
          bandejas[key].classList.add('d-none');
        }
      });
    }

    // Validamos que existan los botones antes de agregar eventos
    const botones = ['btnInbox', 'btnArchived', 'btnStarred', 'btnTrash', 'btnSent'];
    botones.forEach(id => {
      const btn = document.getElementById(id);
      if (btn) {
        btn.addEventListener('click', () => mostrarBandeja(id.replace('btn', '').toLowerCase()));
      } else {
        console.warn(`Botón con id "${id}" no encontrado.`);
      }
    });

    // Mostrar bandeja por defecto
    mostrarBandeja('inbox');
  });
</script>

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

    // ---- BUSCAR CLIENTE ----
    const modalBuscarCliente = document.getElementById('modalBuscarCliente');
    const listaClientes = document.getElementById('listaClientes');
    const busquedaCliente = document.getElementById('busquedaCliente');

    // Cargar clientes al abrir modal
    modalBuscarCliente.addEventListener('shown.bs.modal', function() {
      const filtro = busquedaCliente.value;
      if (clientes.length === 0) {
        fetch('obtener_correos.php')
          .then(r => r.json())
          .then(data => {
            clientes = data;
            mostrarClientes(filtro);
          })
          .catch(e => console.error('Error al obtener clientes:', e));
      } else {
        mostrarClientes(filtro);
      }
    });

    // Filtrar clientes
    busquedaCliente.addEventListener('input', function() {
      mostrarClientes(this.value);
    });

    function mostrarClientes(filtro) {
      listaClientes.innerHTML = '';
      const encontrados = clientes.filter(c =>
        c.nombre.toLowerCase().includes(filtro.toLowerCase()) ||
        c.correo.toLowerCase().includes(filtro.toLowerCase())
      );

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

      encontrados.forEach(cliente => {
        const li = document.createElement('li');
        li.className = 'list-group-item list-group-item-action';
        li.dataset.correo = cliente.correo;
        li.dataset.nombre = cliente.nombre;
        li.textContent = `${cliente.nombre} <${cliente.correo}>`;
        listaClientes.appendChild(li);
      });
    }

    // Seleccionar cliente
    listaClientes.addEventListener('click', function(e) {
      const li = e.target.closest('li');
      if (li && li.dataset.correo) {
        seleccionarCliente(li.dataset.correo, li.dataset.nombre);
      }
    });

    function seleccionarCliente(correo, nombre) {
      document.getElementById('email-to').value = correo;
      document.getElementById('cliente-nombre').value = nombre;

      // Cerrar modal de búsqueda de cliente
      const modalBuscar = bootstrap.Modal.getInstance(modalBuscarCliente);
      modalBuscar.hide();

      // Abrir modal de redacción al terminar de cerrarse el primero
      modalBuscarCliente.addEventListener('hidden.bs.modal', () => {
        const modalRedaccionEl = document.getElementById('emailComposeSidebar');
        const modalRedaccion = new bootstrap.Modal(modalRedaccionEl);
        modalRedaccion.show();
      }, {
        once: true
      });
    }

    // ---- ENVÍO DEL CORREO ----
    const formCorreo = document.getElementById('formEnviarCorreo');
    const archivoInput = document.getElementById('attach-file');
    const archivoNombre = document.getElementById('archivo-nombre');
    const btnEnviar = document.getElementById('btnEnviarCorreo');
    const spinner = document.getElementById('spinnerEnviar');

    archivoInput.addEventListener('change', function() {
      archivoNombre.textContent = this.files.length ? this.files[0].name : '';
    });

    function mostrarToast() {
      const toast = document.getElementById('toastCorreo');
      toast.classList.remove('hidden');
      setTimeout(() => toast.classList.add('show'), 50); // pequeño delay para animar

      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.classList.add('hidden'), 300);
      }, 3000);
    }

    formCorreo.addEventListener('submit', async function(e) {
      e.preventDefault();

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

      const formData = new FormData(this);

      try {
        const response = await fetch('enviar_correo.php', {
          method: 'POST',
          body: formData
        });
        const result = await response.json();

        if (result.success) {
          mostrarToast();

          // Cerrar modal de redacción
          const modal = bootstrap.Modal.getInstance(document.getElementById('emailComposeSidebar'));
          modal.hide();

          // Limpiar backdrop y scroll
          document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
          document.body.classList.remove('modal-open');
          document.body.style.removeProperty('padding-right');

          // Limpiar formulario y texto de archivo
          formCorreo.reset();
          archivoNombre.textContent = '';
        } else {
          alert('Error: ' + (result.message || 'No se pudo enviar el correo.'));
        }
      } catch (error) {
        console.error('Error en la petición:', error);
        alert('Hubo un error al enviar el correo.');
      } finally {
        spinner.classList.add('d-none');
        btnEnviar.disabled = false;
      }
    });


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