<?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>Clientes</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 -->

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

    .submenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }

    .submenu.open {
      max-height: none;
    }

    /* Ajuste adicional para hacer el modal más amplio si es necesario */
    @media (min-width: 992px) {
      .modal-lg {
        max-width: 70%;
        /* Ajusta el ancho del modal según tus necesidades */
      }
    }

    /* General styles for the wizard */
    .vertical-wizard {
      margin: 30px;
    }

    .vertical-wizard .bs-stepper {
      display: block;
      /* Cambiar a 'block' para que las pestañas se apilen horizontalmente */
    }

    .vertical-wizard .nav {
      border-right: none;
      /* Elimina el borde derecho para las pestañas */
      border-bottom: 1px solid #e4e6ef;
      /* Agrega un borde inferior para separar las pestañas del contenido */
      width: 100%;
      /* Asegúrate de que las pestañas ocupen todo el ancho */
      justify-content: flex-start;
      /* Alinea las pestañas a la izquierda */
      display: flex;
      /* Cambia a flex para una disposición horizontal */
      gap: 10px;
      /* Espacio entre las pestañas */
      margin-bottom: 20px;
      /* Espacio entre las pestañas y el contenido */
    }

    .vertical-wizard .nav-item {
      flex: 1;
      /* Permite que cada pestaña tenga un ancho proporcional */
      border-bottom: none;
      /* Elimina el borde inferior individual */
    }

    .vertical-wizard .nav-link {
      padding: 15px 20px;
      display: flex;
      flex-direction: row;
      /* Cambia la disposición de los iconos y el texto a una fila */
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #6c757d;
      background: #f8f9fc;
      border-radius: 5px;
      text-align: center;
      border-bottom: 4px solid transparent;
      /* Indica la pestaña activa con un borde inferior */
      transition: background-color 0.3s, border-color 0.3s;
    }

    .vertical-wizard .nav-link.active {
      background: #fff;
      color: #009DFF;
      border-bottom-color: #009DFF;
      /* Indica la pestaña activa con un borde inferior azul */
    }

    .vertical-wizard .nav-link i {
      font-size: 20px;
      margin-right: 10px;
      /* Espacio entre el icono y el texto */
      background: none;
      /* Elimina el fondo del icono */
      color: #009dff;
    }

    .vertical-wizard .nav-link span {
      font-size: 14px;
      font-weight: 600;
      color: #37465A;
    }

    .tab-content {
      background: #fff;
      padding: 30px;
      border-radius: 0 6px 6px 6px;
      width: 100%;
      height: auto;
      /* Ajusta la altura según el contenido */
    }


    /* Limitar la altura del modal */
    .modal-body {
      max-height: 500px;
      /* Ajusta la altura del modal */
      overflow-y: auto;
      /* Habilita el scroll vertical */
    }

    /* Mejora la apariencia de las pestañas */
    .nav-link {
      color: #495057;
      /* Color del texto */
      font-weight: bold;
      /* Texto en negrita */
      padding: 20px 25px;
      /* Aumenta el padding para hacerlas más grandes */
      border-radius: 0.25rem;
      /* Bordes redondeados */
      transition: background-color 0.3s;
      /* Transición suave al cambiar de color */
    }

    .nav-link.active {
      background-color: #e9ecef;
      /* Fondo de la pestaña activa */
      border-bottom: 2px solid #007bff;
      /* Borde inferior para la pestaña activa */
    }

    .nav-modal .nav-link {
      padding: 10px 15px;
      color: #333;
      text-align: center;
      white-space: nowrap;
    }
  </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 active">
                <a href="clientes.php" class="menu-link">
                  <div data-i18n="Basic">Clientes</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="cuentasxcobrar.php" class="menu-link">
                  <div data-i18n="Basic">Cuentas X Cobrar</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="clientespoliza.php" class="menu-link">
                  <div data-i18n="Basic">Clientes con Póliza</div>
                </a>
              </li>

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

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


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


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


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


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

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

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

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

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

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

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

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

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

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

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

              </li>
            </ul>
          </li>
        </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="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  <span class="position-relative">
                    <i class="icon-base bx bx-bell icon-md"></i>
                    <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
                  </span>
                </a>

                <!--empiezan las notificaciones -->
                <ul class="dropdown-menu dropdown-menu-end p-0">
                  <li class="dropdown-menu-header border-bottom">
                    <div class="dropdown-header d-flex align-items-center py-3">
                      <h6 class="mb-0 me-auto">Notification</h6>
                      <div class="d-flex align-items-center h6 mb-0">
                        <span class="badge bg-label-primary me-2">8 New</span>
                        <a href="javascript:void(0)" class="dropdown-notifications-all p-2" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Mark all as read" data-bs-original-title="Mark all as read"><i class="icon-base bx bx-envelope-open text-heading"></i></a>
                      </div>
                    </div>
                  </li>


                  <li class="dropdown-notifications-list scrollable-container ps">
                    <ul class="list-group list-group-flush">
                      <li class="list-group-item list-group-item-action dropdown-notifications-item">
                        <div class="d-flex">
                          <div class="flex-shrink-0 me-3">
                            <div class="avatar">
                              <img src="../../assets/img/avatars/1.png" alt="" class="rounded-circle">
                            </div>
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
                            <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
                            <small class="text-body-secondary">1h ago</small>
                          </div>
                          <div class="flex-shrink-0 dropdown-notifications-actions">
                            <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                            <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                          </div>
                        </div>
                      </li>
                      <li class="list-group-item list-group-item-action dropdown-notifications-item">
                        <div class="d-flex">
                          <div class="flex-shrink-0 me-3">
                            <div class="avatar">
                              <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
                            </div>
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="small mb-0">Charles Franklin</h6>
                            <small class="mb-1 d-block text-body">Accepted your connection</small>
                            <small class="text-body-secondary">12hr ago</small>
                          </div>
                          <div class="flex-shrink-0 dropdown-notifications-actions">
                            <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                            <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                          </div>
                        </div>
                      </li>
                      <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
                        <div class="d-flex">
                          <div class="flex-shrink-0 me-3">
                            <div class="avatar">
                              <img src="../../assets/img/avatars/2.png" alt="" class="rounded-circle">
                            </div>
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="small mb-0">New Message ✉️</h6>
                            <small class="mb-1 d-block text-body">You have new message from Natalie</small>
                            <small class="text-body-secondary">1h ago</small>
                          </div>
                          <div class="flex-shrink-0 dropdown-notifications-actions">
                            <a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
                            <a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base bx bx-x"></span></a>
                          </div>
                        </div>
                      </li>
                    </ul>

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

                  <li class="border-top">
                    <div class="d-grid p-4">
                      <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
                        <small class="align-middle">View all notifications</small>
                      </a>
                    </div>
                  </li>
                </ul> <!-- termina submenu de notificaciones -->
              </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> -->

            <?php
            session_start();

            $host = 'localhost';
            'C:\Program Files (x86)\Common Files\Aspel\Sistemas Aspel\SAE7.00\Ejemplos\Ejemplos.fdb';
            $username = 'SYSDBA';
            $password = 'masterkey';

            $clientes = [];

            try {
              $dbh = new PDO("firebird:host=$host;dbname=$database;charset=UTF8", $username, $password);
              $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

              $sql = "SELECT CLAVE, NOMBRE, EMAILPRED FROM CLIE01 WHERE TRIM(EMAILPRED) <> '' AND EMAILPRED IS NOT NULL";
              $stmt = $dbh->query($sql);

              while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                $clientes[] = $row;
              }
            } catch (PDOException $e) {
              die("Error BD: " . $e->getMessage());
            }
            ?>

            <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);" 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);" 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="draft">
                          <a href="javascript:void(0);" class="d-flex align-items-center">
                            <i class="icon-base bx bx-edit"></i>
                            <span class="ms-2">Borrador</span>
                          </a>
                        </li>
                        <li class="mb-3" data-target="starred">
                          <a href="javascript:void(0);" class="d-flex align-items-center">
                            <i class="icon-base bx bx-star"></i>
                            <span class="ms-2">Archivo</span>
                          </a>
                        </li>
                        <li class="mb-3" data-target="spam">
                          <a href="javascript:void(0);" class="d-flex align-items-center">
                            <i class="icon-base bx bx-error-alt"></i>
                            <span class="ms-2">Spam</span>
                          </a>
                        </li>
                        <li class="mb-3" data-target="trash">
                          <a href="javascript:void(0);" class="d-flex align-items-center">
                            <i class="icon-base bx bx-trash"></i>
                            <span class="ms-2">Borrado</span>
                          </a>
                        </li>
                      </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="Search mail" aria-label="Search 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="btn btn-icon me-1"><i class="icon-base bx bx-trash icon-md email-list-delete cursor-pointer"></i></div>
                          <div class="btn btn-icon me-1"><i class="icon-base bx bx-envelope-open icon-md email-list-read cursor-pointer"></i></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-folder icon-md"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuFolderOne">
                              <a class="dropdown-item" href="javascript:void(0)">
                                <i class="icon-base bx bx-error-alt icon-sm me-1"></i>
                                <span class="align-middle">Spam</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)">
                                <i class="icon-base bx bx-edit icon-sm me-1"></i>
                                <span class="align-middle">Draft</span>
                              </a>
                              <a class="dropdown-item" href="javascript:void(0)">
                                <i class="icon-base bx bx-trash icon-sm me-1"></i>
                                <span class="align-middle">Trash</span>
                              </a>
                            </div>
                          </div>

                        </div>
                        <div class="d-flex align-items-center">
                          <span class="btn btn-icon me-1">
                            <i class="icon-base bx bx-refresh icon-md scaleX-n1-rtl cursor-pointer email-refresh"></i>
                          </span>
                          <div class="dropdown">
                            <button class="btn btn-icon p-0" type="button" id="emailsActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <i class="icon-base bx bx-dots-vertical-rounded icon-md"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="emailsActions">
                              <a class="dropdown-item" href="javascript:void(0)">Mark as read</a>
                              <a class="dropdown-item" href="javascript:void(0)">Mark as unread</a>
                              <a class="dropdown-item" href="javascript:void(0)">Delete</a>
                              <a class="dropdown-item" href="javascript:void(0)">Archive</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <hr class="container-m-nx m-0" />
                    <!-- Email List: Items -->
                    <div class="email-list pt-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>
                            <img src="../../assets/img/avatars/1.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <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>
                        <li class="email-list-item email-marked-read d-flex align-items-center" data-sent="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-2" />
                              <label class="form-check-label" for="email-2"></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>
                            <img src="../../assets/img/avatars/2.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Ross Geller</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Dessert soufflé tootsie roll soufflé carrot cake halvah jelly.</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-primary d-none d-md-inline-block me-2" data-label="important"></span>
                              <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">10:12 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>
                        <li class="email-list-item email-marked-read d-flex align-items-center" data-draft="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-3" />
                              <label class="form-check-label" for="email-3"></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="avatar avatar-sm d-block flex-shrink-0 me-sm-2 me-0">
                              <span class="avatar-initial rounded-circle bg-label-success">BS</span>
                            </div>
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Barney Stinson</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Soufflé apple pie caramels soufflé tiramisu bear claw.</small>
                            </div>
                            <div class="email-list-item-meta ms-auto d-flex align-items-center">
                              <span class="email-list-item-attachment icon-base bx bx-paperclip icon-md cursor-pointer me-2 float-end float-sm-none"></span>
                              <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="company"></span>
                              <small class="email-list-item-time text-body-secondary">12:44 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>
                        <li class="email-list-item 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-4" />
                              <label class="form-check-label" for="email-4"></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>
                            <img src="../../assets/img/avatars/3.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Pheobe Buffay</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Tart croissant jujubes gummies macaroon Icing sweet.</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-success d-none d-md-inline-block me-2" data-label="work"></span>
                              <small class="email-list-item-time text-body-secondary">Yesterday</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-read btn btn-icon"><i class="icon-base bx bx-envelope-open 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>
                        <li class="email-list-item email-marked-read d-flex align-items-center" data-spam="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-5" />
                              <label class="form-check-label" for="email-5"></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>
                            <img src="../../assets/img/avatars/4.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Ted Mosby</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love Pudding cookie chocolate sweet tiramisu jujubes I love danish.</small>
                            </div>
                            <div class="email-list-item-meta ms-auto d-flex align-items-center">
                              <span class="email-list-item-label ribadge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="company"></span>
                              <small class="email-list-item-time text-body-secondary">Yesterday</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>
                        <li class="email-list-item d-flex align-items-center" data-trash="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-6" />
                              <label class="form-check-label" for="email-6"></label>
                            </div>

                          </div>
                        </li>
                        <li class="email-list-item email-marked-read d-flex align-items-center" data-draft="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-7" />
                              <label class="form-check-label" for="email-7"></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>
                            <img src="../../assets/img/avatars/5.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Rachel Green</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Chocolate cake pudding chocolate bar ice cream bonbon lollipop.</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-warning d-none d-md-inline-block me-2" data-label="company"></span>
                              <small class="email-list-item-time text-body-secondary">15 May</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>
                        <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-8" />
                              <label class="form-check-label" for="email-8"></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>
                            <img src="../../assets/img/avatars/6.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Grace Shelby</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Icing gummi bears ice cream croissant dessert wafer.</small>
                            </div>
                            <div class="email-list-item-meta ms-auto d-flex align-items-center">
                              <span class="email-list-item-attachment icon-base bx bx-paperclip icon-md cursor-pointer me-2 float-end float-sm-none"></span>
                              <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">20 Apr</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>
                        <li class="email-list-item email-marked-read d-flex align-items-center" data-spam="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-9" />
                              <label class="form-check-label" for="email-9"></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="avatar avatar-sm d-block flex-shrink-0 me-sm-2 me-0">
                              <span class="avatar-initial rounded-circle bg-label-danger">JF</span>
                            </div>
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Jacob Frye</span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Chocolate cake pudding chocolate bar ice cream Sweet.</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-primary d-none d-md-inline-block me-2" data-label="important"></span>
                              <small class="email-list-item-time text-body-secondary">25 Mar</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>
                        <li class="email-list-item email-marked-read d-flex align-items-center" data-trash="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-10" />
                              <label class="form-check-label" for="email-10"></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>
                            <img src="../../assets/img/avatars/9.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                            <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                              <span class="email-list-item-username me-2 h6">Alistair Crowley </span>
                              <small class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love danish. Cupcake I love carrot cake sugar plum I love.</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-success d-none d-md-inline-block me-2" data-label="company"></span>
                              <small class="email-list-item-time text-body-secondary">25 Feb</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>
                      <ul class="list-unstyled m-0">
                        <li class="email-list-empty text-center d-none">No items found.</li>
                      </ul>
                    </div>
                  </div>
                  <div class="app-overlay"></div>
                </div>

                <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">
                        <div class="row">


                          <!-- 📝 FORMULARIO DE REDACCIÓN -->
                          <div class="col-md-9">
                            <form class="email-compose-form">
                              <!-- A -->
                              <div class="d-flex align-items-center mb-3">
                                <label for="email-to" class="fw-medium text-body-secondary me-2" style="width: 50px;">A:</label>
                                <input type="text" class="form-control form-control-sm flex-grow-1" id="email-to" placeholder="Ej. Juan Pérez <juan@email.com>" />
                              </div>

                              <!-- Sujeto -->
                              <div class="d-flex align-items-center mb-3">
                                <label for="email-subject" class="fw-medium text-body-secondary me-2" style="width: 50px;">Sujeto:</label>
                                <input type="text" class="form-control form-control-sm flex-grow-1" id="email-subject" placeholder="Asunto del correo" />
                              </div>

                              <!-- Editor -->
                              <div class="mb-3">
                                <label for="email-message" class="fw-medium text-body-secondary mb-1 d-block">Mensaje:</label>
                                <div id="quill-toolbar">
                                  <button class="ql-bold"></button>
                                  <button class="ql-italic"></button>
                                  <button class="ql-underline"></button>
                                  <button class="ql-list" value="ordered"></button>
                                  <button class="ql-list" value="bullet"></button>
                                  <button class="ql-link"></button>
                                  <button class="ql-image"></button>
                                </div>
                                <div id="email-message" class="email-editor border rounded mt-2" style="height: 250px;"></div>
                              </div>

                              <!-- Acciones -->
                              <div class="d-flex justify-content-between align-items-center">
                                <button type="submit" class="btn btn-primary btn-sm">
                                  Enviar <i class="bx bx-paper-plane ms-1"></i>
                                </button>
                                <div class="d-flex gap-2 align-items-center">
                                  <label for="attach-file" class="btn btn-light btn-sm btn-icon"><i class="bx bx-paperclip"></i></label>
                                  <input type="file" id="attach-file" class="d-none" />
                                  <button type="reset" class="btn btn-light btn-sm btn-icon" data-bs-dismiss="modal"><i class="bx bx-trash"></i></button>
                                </div>
                              </div>
                            </form>
                          </div> <!-- fin col-9 -->
                        </div> <!-- fin row -->
                      </div> <!-- fin modal-body -->
                    </div>
                  </div>
                </div>

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

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

          <!-- Page JS -->
          <script src="../assets/js/dashboards-analytics.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://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.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.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Bootstrap Bundle (incluye Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></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>
  const correos = {
    recibidos: [{
        asunto: "Factura Julio",
        de: "ventas@empresa.com",
        fecha: "09/07/2025"
      },
      {
        asunto: "Confirmación de reunión",
        de: "cliente@ejemplo.com",
        fecha: "08/07/2025"
      }
    ],
    destacados: [{
      asunto: "Contrato firmado",
      de: "legal@firma.com",
      fecha: "07/07/2025"
    }],
    enviados: [{
      asunto: "Cotización urgente",
      de: "yo@miempresa.com",
      fecha: "06/07/2025"
    }],
    archivados: [{
      asunto: "Informe mensual",
      de: "reportes@miempresa.com",
      fecha: "01/07/2025"
    }],
    borrados: [{
      asunto: "Spam sospechoso",
      de: "no-reply@spam.com",
      fecha: "30/06/2025"
    }]
  };

  function mostrarCorreos(folder) {
    const lista = document.getElementById("correo-lista");
    const items = correos[folder] || [];
    lista.innerHTML = items.length ?
      items.map(c => `
        <div class="border-bottom py-2">
          <strong>${c.asunto}</strong><br>
          <small>De: ${c.de} — ${c.fecha}</small>
        </div>
      `).join('') :
      `<p class="text-muted">No hay correos en esta carpeta.</p>`;
  }

  document.querySelectorAll("[data-folder]").forEach(item => {
    item.addEventListener("click", (e) => {
      e.preventDefault();
      document.querySelectorAll(".email-filter-folders li").forEach(li => li.classList.remove("active"));
      item.classList.add("active");
      const carpeta = item.getAttribute("data-folder");
      mostrarCorreos(carpeta);
    });
  });

  // Mostrar por defecto los recibidos
  document.addEventListener("DOMContentLoaded", () => {
    mostrarCorreos("recibidos");
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    new Quill('#email-message', {
      theme: 'snow',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline'],
          [{
            'list': 'ordered'
          }, {
            'list': 'bullet'
          }],
          ['link', 'image']
        ]
      }
    });
  });
</script>

<script>
  document.querySelectorAll('.custom-filter').forEach(button => {
    button.addEventListener('click', function() {
      document.querySelectorAll('.custom-filter').forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
    });
  });

  document.querySelector('.apply-date-filter').addEventListener('click', function() {
    document.querySelector('.custom-date-filter').classList.add('active');
  });
</script>
<script>
  $(document).ready(function() {
    $('#emailContacts').select2({
      placeholder: "Add recipients",
      width: '100%'
    });

    var quill = new Quill('.email-editor', {
      theme: 'snow'
    });

    // Mostrar Cc/Bcc
    $('.email-compose-toggle-cc').click(() => $('.email-compose-cc').toggleClass('d-none'));
    $('.email-compose-toggle-bcc').click(() => $('.email-compose-bcc').toggleClass('d-none'));
  });
</script>


<script>
  document.getElementById("modalSearchInput").addEventListener("input", function() {
    const query = this.value.trim();
    const results = document.getElementById("modalSearchResults");
    const modulos = document.getElementById("modulosEstaticos");

    results.innerHTML = "";

    if (query.length < 2) {
      // Mostrar módulos estáticos y ocultar resultados
      modulos.style.display = "flex"; // o "block" si prefieres
      results.style.display = "none";
      return;
    }

    // Ocultar módulos estáticos y mostrar resultados
    modulos.style.display = "none";
    results.style.display = "block";

    fetch("buscar_archivos.php?q=" + encodeURIComponent(query))
      .then(response => response.json())
      .then(data => {
        if (data.length === 0) {
          results.innerHTML = `<li class="list-group-item text-muted">No se encontraron resultados</li>`;
          return;
        }

        data.forEach(item => {
          const li = document.createElement("li");
          li.className = "list-group-item list-group-item-action";
          li.innerHTML = `<i class="bx bx-link-alt me-2"></i> ${item.titulo}`;
          li.addEventListener("click", () => {
            window.location.href = item.archivo;
          });
          results.appendChild(li);
        });
      })
      .catch(error => {
        console.error("Error al buscar:", error);
      });
  });
</script>

</html>