/* =========================================================
   Sistema de Acarreo y Mudanzas - Estilos
   Paleta: Azul Marino (confianza/logística) + Naranja (acción/carga)
   ========================================================= */
:root{
  --navy-950:#0f1b30;
  --navy-900:#16223d;
  --navy-800:#1c2c4c;
  --navy-700:#243863;
  --orange-600:#e8734a;
  --orange-500:#f0895f;
  --orange-100:#fdece3;
  --cream:#f7f5f0;
  --gray-600:#6b7280;
  --success:#2f9e6f;
  --danger:#d9534f;
}

body{
  background:var(--cream);
  font-family:'Inter', 'Segoe UI', system-ui, sans-serif;
  color:var(--navy-950);
}

.navbar-brand-app{
  font-family:'Poppins', 'Inter', sans-serif;
  font-weight:700;
  letter-spacing:.3px;
  color:#fff !important;
}

.app-sidebar{
  background:var(--navy-900);
  min-height:100vh;
  color:#fff;
}
.app-sidebar a{
  color:#c9d3e8;
  text-decoration:none;
  display:block;
  padding:.65rem 1.1rem;
  border-radius:8px;
  margin:2px 8px;
  font-size:.93rem;
}
.app-sidebar a:hover, .app-sidebar a.active{
  background:var(--orange-600);
  color:#fff;
}
.app-sidebar .sidebar-heading{
  color:#7f8bab;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:1px;
  padding:1rem 1.1rem .3rem;
}

.topbar{
  background:var(--navy-800);
  border-bottom:3px solid var(--orange-600);
}

.card{
  border:none;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(15,27,48,.06);
}
.card-header{
  background:#fff;
  border-bottom:1px solid #eee;
  border-radius:12px 12px 0 0 !important;
  font-weight:600;
  color:var(--navy-900);
}

.btn-primary{
  background:var(--orange-600);
  border-color:var(--orange-600);
}
.btn-primary:hover{
  background:#d9622f;
  border-color:#d9622f;
}
.btn-outline-primary{
  color:var(--orange-600);
  border-color:var(--orange-600);
}
.btn-outline-primary:hover{
  background:var(--orange-600);
  border-color:var(--orange-600);
}

.text-navy{ color:var(--navy-900); }
.bg-navy{ background:var(--navy-900); }

.kpi-card{
  border-radius:14px;
  padding:1.1rem 1.3rem;
  color:#fff;
}
.kpi-card.navy{ background:linear-gradient(135deg,var(--navy-800),var(--navy-950)); }
.kpi-card.orange{ background:linear-gradient(135deg,var(--orange-600),#c85a34); }
.kpi-card .kpi-value{ font-size:1.6rem; font-weight:700; }
.kpi-card .kpi-label{ font-size:.8rem; opacity:.85; }

table.table thead{
  background:var(--navy-900);
  color:#fff;
}

.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-700));
}
.login-card{
  background:#fff;
  border-radius:16px;
  padding:2.4rem;
  width:100%;
  max-width:400px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}

/* ============================================
   RESPONSIVE — PC, tablet y celular
   ============================================ */

/* El sidebar tiene ancho fijo en escritorio */
.app-sidebar{
  width:230px;
  flex-shrink:0;
  transition:transform .25s ease;
}
.app-main{
  min-width:0; /* permite que el contenido y las tablas no desborden */
}

/* Tablas: scroll horizontal suave en pantallas chicas */
.table-responsive, .card-body{
  -webkit-overflow-scrolling:touch;
}

/* --- Tablet y celular (menos de 992px) --- */
@media (max-width: 991.98px){
  .app-sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    z-index:1050;
    transform:translateX(-100%);
    overflow-y:auto;
    box-shadow:2px 0 18px rgba(0,0,0,.35);
  }
  .app-sidebar.sidebar-open{
    transform:translateX(0);
  }
  .sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1040;
    display:none;
  }
  .sidebar-overlay.show{
    display:block;
  }
  .app-main{
    padding:1rem !important;
  }
  /* Que las tablas anchas se puedan deslizar en móvil */
  .card > .card-body{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table{
    min-width:640px; /* fuerza scroll en vez de romper columnas */
  }
  h4{ font-size:1.15rem; }
  .kpi-value{ font-size:1.3rem; }
}

/* --- Celular pequeño (menos de 576px) --- */
@media (max-width: 575.98px){
  .app-main{ padding:.75rem !important; }
  .navbar-brand-app{ font-size:.95rem; }
  .btn{ font-size:.9rem; }
  .card-body{ padding:1rem; }
  /* Filtros y formularios en una columna */
  .row.g-2 > [class*="col-"]{ margin-bottom:.35rem; }
}

/* Imágenes/gráficos nunca desbordan */
canvas, img{ max-width:100%; height:auto; }