Responsividad dashboard importadores

2025-05-12 15:35:24 -06:00
parent 485e249dab
commit ea794dba15
18 changed files with 622 additions and 125 deletions
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
-DB_HOST=73C3E4C\SQL2022
+DB_HOST=DESKTOP-22T88B6
 DB_DATABASE=Importaciones_HC
 DB_USERNAME=sa
 DB_PASSWORD=Soluciones01
--- a/views/choferes/crear.php
+++ b/views/choferes/crear.php
@@ -22,26 +22,43 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
      padding: 12px 20px;
    }
-    .sidebar .nav-link:hover,
-    .sidebar .nav-link.active {
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #495057;
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
    }
    .card {
      border-radius: 12px;
--- a/views/choferes/editar.php
+++ b/views/choferes/editar.php
@@ -11,12 +11,54 @@
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
-    .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 60px; }
-    .sidebar .nav-link { color: #ccc; padding: 12px 20px; }
-    .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #495057; color: #fff; }
-    .content { margin-left: 220px; padding: 40px 20px; }
-    .navbar { position: fixed; top: 0; width: 100%; z-index: 1000; }
-    .card { border-radius: 12px; }
+    .sidebar {
+      width: 220px;
+      height: 100vh;
+      background-color: #343a40;
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
+    }
+    .sidebar .nav-link {
+      color: #ccc;
+      padding: 12px 20px;
+    }
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
+      background-color: #495057;
+      color: #fff;
+    }
+    .content {
+      margin-top: 56px; /* Ajusta debajo de navbar */
+      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
+    }
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
+    .card {
+      border-radius: 12px;
+    }
  </style>
 </head>

--- a/views/choferes/lista.php
+++ b/views/choferes/lista.php
@@ -24,26 +24,43 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
      padding: 12px 20px;
    }
-    .sidebar .nav-link:hover,
-    .sidebar .nav-link.active {
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #495057;
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
    }
    .card {
      border-radius: 12px;
--- a/views/importadores/dashboard_importador.php
+++ b/views/importadores/dashboard_importador.php
@@ -21,7 +21,8 @@ include __DIR__ . '/../partials/sidebar_importador.php';
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -32,14 +33,31 @@ include __DIR__ . '/../partials/sidebar_importador.php';
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
    }
    .card {
      border-radius: 12px;
--- a/views/partials/sidebar_importador.php
+++ b/views/partials/sidebar_importador.php
@@ -5,17 +5,24 @@ if (!isset($_SESSION['usuario_id']) || $_SESSION['tipo_usuario'] !== 'importador
    exit;
 }
 ?>
+
+<!-- NAVBAR -->
 <nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
+    <!-- Botón de menú para móviles -->
+    <button class="btn btn-outline-light d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
+      ☰
+    </button>
    <span class="navbar-brand">SIIH | Importador</span>
-    <div class="d-flex text-white">
-      Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?>&nbsp;&nbsp;
-      <a href="/IMPORTADORES/sistemas/logout" class="btn btn-outline-light btn-sm">Cerrar sesión</a>
+    <div class="d-none d-md-flex text-white">
+      Bienvenido, <?= htmlspecialchars($_SESSION['usuario_nombre']) ?>
+      <a href="/IMPORTADORES/sistemas/logout" class="btn btn-outline-light btn-sm ms-2">Cerrar sesión</a>
    </div>
  </div>
 </nav>

-<div class="sidebar bg-dark text-white pt-5">
+<!-- SIDEBAR FIJA (escritorio) -->
+<div class="d-none d-md-block bg-dark text-white position-fixed h-100 pt-5" style="width: 250px;">
  <nav class="nav flex-column">

    <!-- INICIO -->
@@ -91,40 +98,24 @@ if (!isset($_SESSION['usuario_id']) || $_SESSION['tipo_usuario'] !== 'importador
        </a>
      </nav>
    </div>
-<!-- Proveedores -->
-<a
-  class="nav-link px-3 py-2 d-flex justify-content-between align-items-center
-    <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'active' : '' ?>"
-  data-bs-toggle="collapse"
-  href="#submenuProveedores"
-  role="button"
-  aria-expanded="<?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'true' : 'false' ?>"
-  aria-controls="submenuProveedores"
->
-  🏭 Proveedores
-  <span class="badge bg-secondary">2</span>
-</a>
-<div
-  class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'show' : '' ?>"
-  id="submenuProveedores"
->
-  <nav class="nav flex-column ms-3">
-    <a
-      href="/IMPORTADORES/proveedores"
-      class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/proveedores' ? 'active' : '' ?>"
-    >
-      • Lista de Proveedores
+    
+    <!-- PROVEEDORES -->
+    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'active' : '' ?>"
+      data-bs-toggle="collapse" href="#submenuProveedores" role="button" aria-expanded="<?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'true' : 'false' ?>"
+      aria-controls="submenuProveedores">
+        🏭 Proveedores
+      <span class="badge bg-secondary">2</span>
    </a>
-    <a
-      href="/IMPORTADORES/proveedores/crear"
-      class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores/crear') ? 'active' : '' ?>"
-    >
-      • Registro de Proveedor
-    </a>
-  </nav>
-</div>
-
-
+    <div class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'show' : '' ?>" id="submenuProveedores">
+      <nav class="nav flex-column ms-3">
+        <a href="/IMPORTADORES/proveedores" class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/proveedores' ? 'active' : '' ?>">
+          • Lista de Proveedores
+        </a>
+        <a href="/IMPORTADORES/proveedores/crear" class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores/crear') ? 'active' : '' ?>">
+          • Registro de Proveedor
+        </a>
+      </nav>
+    </div>

    <!-- SOLICITUDES DE IMPORTACIÓN -->
    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center
@@ -154,3 +145,130 @@ if (!isset($_SESSION['usuario_id']) || $_SESSION['tipo_usuario'] !== 'importador

  </nav>
 </div>
+
+<!-- OFFCANVAS PARA MÓVILES -->
+<div class="offcanvas offcanvas-start d-md-none" tabindex="-1" id="sidebarMenu">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title">Menú</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
+  </div>
+  <div class="offcanvas-body">
+    <!-- INICIO -->
+    <a href="/IMPORTADORES/importadores/dashboard"
+       class="nav-link px-3 py-2 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/importadores/dashboard' ? 'active' : '' ?>">
+      🏠 Inicio
+    </a>
+
+    <!-- TRANSPORTISTAS -->
+    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center
+        <?= str_contains($_SERVER['REQUEST_URI'], '/transportistas') ? 'active' : '' ?>"
+       data-bs-toggle="collapse" href="#submenuTransportistas" role="button" aria-expanded="false">
+      👨‍✈️ Transportistas
+      <span class="badge bg-secondary">3</span>
+    </a>
+    <div class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/transportistas') ? 'show' : '' ?>" id="submenuTransportistas">
+      <nav class="nav flex-column ms-3">
+        <a href="/IMPORTADORES/transportistas/lista"
+           class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/transportistas/lista' ? 'active' : '' ?>">
+          • Mis transportistas
+        </a>
+        <a href="/IMPORTADORES/transportistas/alta"
+           class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/transportistas/alta') ? 'active' : '' ?>">
+          • Alta de transportista
+        </a>
+        <a href="/IMPORTADORES/transportistas/bulk_upload"
+           class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/transportistas/bulk_upload') ? 'active' : '' ?>">
+          • Carga masiva 
+        </a>
+      </nav>
+    </div>
+
+    <!-- TRANSPORTES -->
+    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center
+        <?= str_contains($_SERVER['REQUEST_URI'], '/transportes') ? 'active' : '' ?>"
+       data-bs-toggle="collapse" href="#submenuTransportes" role="button" aria-expanded="false">
+      🚚 Transportes
+      <span class="badge bg-secondary">3</span>
+    </a>
+    <div class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/transportes') ? 'show' : '' ?>" id="submenuTransportes">
+      <nav class="nav flex-column ms-3">
+        <a href="/IMPORTADORES/transportes/lista"
+           class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/transportes/lista' ? 'active' : '' ?>">
+          • Mis transportes
+        </a>
+        <a href="/IMPORTADORES/transportes/crear"
+           class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/transportes/crear') ? 'active' : '' ?>">
+          • Nuevo transporte
+        </a>
+        <a href="/IMPORTADORES/transportes/masivo"
+           class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/transportes/masivo') ? 'active' : '' ?>">
+          • Carga masiva
+        </a>
+      </nav>
+    </div>
+
+    <!-- CHOFERES -->
+    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center
+        <?= str_contains($_SERVER['REQUEST_URI'], '/choferes') ? 'active' : '' ?>"
+       data-bs-toggle="collapse" href="#submenuChoferes" role="button" aria-expanded="false">
+      🚛 Choferes
+      <span class="badge bg-secondary">2</span>
+    </a>
+    <div class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/choferes') ? 'show' : '' ?>" id="submenuChoferes">
+      <nav class="nav flex-column ms-3">
+        <a href="/IMPORTADORES/choferes/lista"
+           class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/choferes/lista' ? 'active' : '' ?>">
+          • Mis choferes
+        </a>
+        <a href="/IMPORTADORES/choferes/crear"
+           class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/choferes/crear') ? 'active' : '' ?>">
+          • Nuevo chofer
+        </a>
+      </nav>
+    </div>
+    
+    <!-- PROVEEDORES -->
+    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'active' : '' ?>"
+      data-bs-toggle="collapse" href="#submenuProveedores" role="button" aria-expanded="<?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'true' : 'false' ?>"
+      aria-controls="submenuProveedores">
+        🏭 Proveedores
+      <span class="badge bg-secondary">2</span>
+    </a>
+    <div class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores') ? 'show' : '' ?>" id="submenuProveedores">
+      <nav class="nav flex-column ms-3">
+        <a href="/IMPORTADORES/proveedores" class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/proveedores' ? 'active' : '' ?>">
+          • Lista de Proveedores
+        </a>
+        <a href="/IMPORTADORES/proveedores/crear" class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/IMPORTADORES/proveedores/crear') ? 'active' : '' ?>">
+          • Registro de Proveedor
+        </a>
+      </nav>
+    </div>
+
+    <!-- SOLICITUDES DE IMPORTACIÓN -->
+    <a class="nav-link px-3 py-2 d-flex justify-content-between align-items-center
+        <?= str_contains($_SERVER['REQUEST_URI'], '/solicitud_importacion') ? 'active' : '' ?>"
+       data-bs-toggle="collapse" href="#submenuSolicitudes" role="button" aria-expanded="false">
+      📄 Solicitudes Importación
+      <span class="badge bg-secondary">2</span>
+    </a>
+    <div class="collapse <?= str_contains($_SERVER['REQUEST_URI'], '/solicitud_importacion') ? 'show' : '' ?>" id="submenuSolicitudes">
+      <nav class="nav flex-column ms-3">
+        <a href="/IMPORTADORES/solicitud_importacion/lista"
+           class="nav-link px-3 py-1 <?= $_SERVER['REQUEST_URI'] === '/IMPORTADORES/solicitud_importacion/lista' ? 'active' : '' ?>">
+          • Mis solicitudes
+        </a>
+        <a href="/IMPORTADORES/solicitud_importacion/crear"
+           class="nav-link px-3 py-1 <?= str_contains($_SERVER['REQUEST_URI'], '/solicitud_importacion/crear') ? 'active' : '' ?>">
+          • Nueva solicitud
+        </a>
+      </nav>
+    </div>
+
+    <!-- CONFIGURACIÓN -->
+    <a href="/IMPORTADORES/configuracion"
+       class="nav-link px-3 py-2 <?= str_contains($_SERVER['REQUEST_URI'], '/configuracion') ? 'active' : '' ?>">
+      ⚙️ Configuración
+    </a>
+  </div>
+</div>
--- a/views/proveedores/lista.php
+++ b/views/proveedores/lista.php
@@ -9,13 +9,54 @@
  <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
  <style>
    body { background: #f4f6f9; font-family: 'Segoe UI', sans-serif; }
-    .sidebar { width: 220px; position: fixed; height: 100vh; background: #343a40; padding-top: 60px; }
-    .sidebar .nav-link { color: #ccc; padding: 12px 20px; }
-    .sidebar .nav-link.active,
-    .sidebar .nav-link:hover { background: #495057; color: #fff; }
-    .content { margin-left: 220px; padding: 40px 20px; }
-    .card { border-radius: 12px; }
-    table.dataTable thead th { background: #343a40; color: #fff; }
+    .sidebar {
+      width: 220px;
+      height: 100vh;
+      background-color: #343a40;
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
+    }
+    .sidebar .nav-link {
+      color: #ccc;
+      padding: 12px 20px;
+    }
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
+      background-color: #495057;
+      color: #fff;
+    }
+    .content {
+      margin-top: 56px; /* Ajusta debajo de navbar */
+      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
+    }
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
+    .card {
+      border-radius: 12px;
+    }
  </style>
 </head>
 <body>
--- a/views/solicitud_importacion/crear.php
+++ b/views/solicitud_importacion/crear.php
@@ -9,11 +9,54 @@
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
-    .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 60px; }
-    .sidebar .nav-link { color: #ccc; padding: 12px 20px; }
-    .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #495057; color: #fff; }
-    .content { margin-left: 220px; padding: 40px 20px; }
-    .card { border-radius: 12px; }
+    .sidebar {
+      width: 220px;
+      height: 100vh;
+      background-color: #343a40;
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
+    }
+    .sidebar .nav-link {
+      color: #ccc;
+      padding: 12px 20px;
+    }
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
+      background-color: #495057;
+      color: #fff;
+    }
+    .content {
+      margin-top: 56px; /* Ajusta debajo de navbar */
+      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
+    }
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
+    .card {
+      border-radius: 12px;
+    }
  </style>
 </head>
 <body>
--- a/views/solicitud_importacion/editar.php
+++ b/views/solicitud_importacion/editar.php
@@ -9,11 +9,54 @@
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
-    .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 60px; }
-    .sidebar .nav-link { color: #ccc; padding: 12px 20px; }
-    .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #495057; color: #fff; }
-    .content { margin-left: 220px; padding: 40px 20px; }
-    .card { border-radius: 12px; }
+    .sidebar {
+      width: 220px;
+      height: 100vh;
+      background-color: #343a40;
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
+    }
+    .sidebar .nav-link {
+      color: #ccc;
+      padding: 12px 20px;
+    }
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
+      background-color: #495057;
+      color: #fff;
+    }
+    .content {
+      margin-top: 56px; /* Ajusta debajo de navbar */
+      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
+    }
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
+    .card {
+      border-radius: 12px;
+    }
  </style>
 </head>
 <body>
--- a/views/solicitud_importacion/lista.php
+++ b/views/solicitud_importacion/lista.php
@@ -11,12 +11,54 @@
  <style>
    table.dataTable thead th { background: #343a40; color: #fff; }
    body { font-family: 'Segoe UI', sans-serif; background-color: #f4f6f9; }
-    .sidebar { width: 220px; height: 100vh; background-color: #343a40; position: fixed; top: 0; left: 0; padding-top: 60px; }
-    .sidebar .nav-link { color: #ccc; padding: 12px 20px; }
-    .sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #495057; color: #fff; }
-    .content { margin-left: 220px; padding: 40px 20px; }
-    .navbar { position: fixed; top: 0; width: 100%; z-index: 1000; }
-    .card { border-radius: 12px; }
+    .sidebar {
+      width: 220px;
+      height: 100vh;
+      background-color: #343a40;
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
+    }
+    .sidebar .nav-link {
+      color: #ccc;
+      padding: 12px 20px;
+    }
+    .sidebar .nav-link:hover, .sidebar .nav-link.active {
+      background-color: #495057;
+      color: #fff;
+    }
+    .content {
+      margin-top: 56px; /* Ajusta debajo de navbar */
+      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
+    }
+    .navbar {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
+    }
+
+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
+    .card {
+      border-radius: 12px;
+    }
  </style>
 </head>
 <body>
--- a/views/transportes/crear.php
+++ b/views/transportes/crear.php
@@ -22,16 +22,8 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
-    }
-    .sidebar .nav-link {
-      color: #ccc;
-      padding: 12px 20px;
-    }
-    .sidebar .nav-link:hover,
-    .sidebar .nav-link.active {
-      background-color: #495057;
-      color: #fff;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -42,20 +34,35 @@
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
-
  </style>
 </head>

--- a/views/transportes/editar.php
+++ b/views/transportes/editar.php
@@ -25,7 +25,8 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -36,16 +37,32 @@
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
--- a/views/transportes/importar_masivo.php
+++ b/views/transportes/importar_masivo.php
@@ -26,7 +26,8 @@ if (!($_SESSION['usuario_id'] ?? false)) {
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -37,16 +38,32 @@ if (!($_SESSION['usuario_id'] ?? false)) {
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
--- a/views/transportes/lista.php
+++ b/views/transportes/lista.php
@@ -24,7 +24,8 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -35,20 +36,35 @@
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
-
  </style>
 </head>

--- a/views/transportistas/alta.php
+++ b/views/transportistas/alta.php
@@ -16,7 +16,8 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -27,34 +28,43 @@
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
-
  </style>
 </head>

-
-
 <?php include __DIR__ . '/../partials/sidebar_importador.php'; ?>

-
-
-
 <body>
 <br><br><br>

-
 <div class="content">
    <h4 class="mb-4">🚛 Alta de Transportista</h4>
    <form action="/IMPORTADORES/transportistas/guardar" method="POST" class="card p-4 shadow-sm">
--- a/views/transportistas/bulk_upload.php
+++ b/views/transportistas/bulk_upload.php
@@ -20,7 +20,7 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
-  body {
+    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f6f9;
    }
@@ -31,7 +31,8 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -42,16 +43,32 @@ unset($_SESSION['import_errors'], $_SESSION['import_success']);
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
--- a/views/transportistas/editar.php
+++ b/views/transportistas/editar.php
@@ -22,7 +22,8 @@ session_start();
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -33,20 +34,35 @@ session_start();
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
-
  </style>
 </head>
 <body>
--- a/views/transportistas/lista.php
+++ b/views/transportistas/lista.php
@@ -25,7 +25,8 @@
      position: fixed;
      top: 0;
      left: 0;
-      padding-top: 60px;
+      padding-top: 56px; /* Alineado con la altura de la navbar */
+      z-index: 1040; /* Asegura que esté por encima del contenido */
    }
    .sidebar .nav-link {
      color: #ccc;
@@ -36,20 +37,35 @@
      color: #fff;
    }
    .content {
-      margin-left: 220px;
+      margin-top: 56px; /* Ajusta debajo de navbar */
      padding: 40px 20px;
+      position: relative;
+      z-index: 1;
+      background-color: #f4f6f9; /* Asegura fondo uniforme */
+      transition: margin-left 0.3s ease;
    }
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
-      z-index: 1000;
+      z-index: 1050;
+    }
+    /* A partir de dispositivos medianos (>=768px), deja espacio lateral */
+    @media (min-width: 768px) {
+      .content {
+        margin-left: 250px; /* Ancho del sidebar */
+      }
    }

+    /* En móviles, sin margen lateral */
+    @media (max-width: 767.98px) {
+      .content {
+        margin-left: 0;
+      }
+    }
    .card {
      border-radius: 12px;
    }
-
  </style>
 </head>