:root {
  --marsan-bg: #0d0f12;
  --marsan-surface: rgba(22, 25, 30, .96);
  --marsan-surface-2: #1d2127;
  --marsan-border: #303640;
  --marsan-text: #f4f7fb;
  --marsan-muted: #9ba6b4;
  --marsan-blue: #4d9aff;
  --marsan-green: #42d88d;
}

html { min-height: 100%; background: var(--marsan-bg); }

body.portal-dark {
  min-height: 100vh;
  margin: 0;
  color: var(--marsan-text);
  background:
    radial-gradient(circle at 92% 0, rgba(13, 110, 253, .20), transparent 32rem),
    radial-gradient(circle at 4% 90%, rgba(25, 135, 84, .10), transparent 28rem),
    linear-gradient(180deg, #15181d 0, #0d0f12 58%, #090b0d 100%);
  background-attachment: fixed;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.portal-navbar {
  min-height: 68px;
  position: sticky;
  top: 0;
  z-index: 1050;
  background: rgba(14, 16, 20, .94);
  border-bottom: 1px solid var(--marsan-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .42);
  backdrop-filter: blur(14px);
}

.portal-navbar .navbar-brand img { height: 38px !important; }

.portal-menu-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 1.25rem;
  background: #1c2026;
  border: 1px solid #353c47;
  border-radius: 14px;
}

.portal-menu-btn:hover { color: var(--marsan-blue); border-color: rgba(77,154,255,.7); }

.portal-nav-menu {
  min-width: 245px;
  padding: .65rem;
  margin-top: .55rem !important;
  background: #181c22;
  border: 1px solid var(--marsan-border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}

.portal-nav-menu .dropdown-item { padding: .7rem .8rem; border-radius: 10px; color: #dce3ec; }
.portal-nav-menu .dropdown-item i { width: 1.7rem; color: var(--marsan-blue); }
.portal-nav-menu .dropdown-item:hover { background: rgba(77,154,255,.13); color: #fff; }

body.portal-dark .index-dark,
body.portal-dark .envios-dark,
body.portal-dark .integraciones-dark {
  min-height: calc(100vh - 68px);
  color: var(--marsan-text);
  background: transparent !important;
}

body.portal-dark .card,
body.portal-dark .envios-dark .card,
body.portal-dark .integraciones-dark .card {
  color: var(--marsan-text);
  background: var(--marsan-surface) !important;
  border: 1px solid var(--marsan-border) !important;
  border-radius: 20px;
  box-shadow: 0 15px 36px rgba(0,0,0,.38);
}

body.portal-dark .stat-card { overflow: hidden; }
body.portal-dark .stat-card::before { content: ""; display: block; height: 4px; background: var(--marsan-blue); }
body.portal-dark .stat-card.success::before { background: var(--marsan-green); }
body.portal-dark .stat-card.danger::before { background: #ff7381; }
body.portal-dark .stat-title,
body.portal-dark .text-muted,
body.portal-dark .text-secondary,
body.portal-dark small { color: var(--marsan-muted) !important; }

body.portal-dark .form-control,
body.portal-dark .form-select,
body.portal-dark .select2-container--default .select2-selection--single {
  color: #f7f9fc !important;
  background-color: #1b1f25 !important;
  border-color: #39414d !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color-scheme: dark;
}

body.portal-dark .form-control:focus,
body.portal-dark .form-select:focus {
  background-color: #20252c !important;
  border-color: var(--marsan-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(77,154,255,.16) !important;
}

body.portal-dark .form-control::placeholder { color: #778291; }

body.portal-dark .table-responsive {
  background: rgba(18, 21, 25, .94);
  border: 1px solid var(--marsan-border);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0,0,0,.34);
}

body.portal-dark .table { --bs-table-bg: transparent; --bs-table-color: #e9eef5; --bs-table-border-color: #303640; color: #e9eef5; }
body.portal-dark .table > :not(caption) > * > * { background: transparent; color: inherit; border-color: #303640 !important; }
body.portal-dark .table thead th { background: #20252c !important; color: #f8fafc !important; border-color: #3b4350 !important; }
body.portal-dark .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(77,154,255,.09); color: #fff; }

body.portal-dark .btn {
  min-height: 38px;
  border-radius: 11px;
  font-weight: 600;
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

body.portal-dark .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
body.portal-dark .btn-primary,
body.portal-dark .btn-dark,
body.portal-dark #btnGuardar { background: #0d6efd; border-color: var(--marsan-blue); }
body.portal-dark .btn-success { background: #198754; border-color: var(--marsan-green); }
body.portal-dark .btn-secondary { background: #303640; border-color: #46505e; }
body.portal-dark .btn-outline-info { color: #52ddff; border-color: rgba(82,221,255,.65); }
body.portal-dark .btn-outline-success { color: var(--marsan-green); border-color: rgba(66,216,141,.65); }
body.portal-dark .btn-outline-primary { color: #75afff; border-color: rgba(77,154,255,.7); }
body.portal-dark .btn-outline-danger { color: #ff7381; border-color: rgba(255,115,129,.65); }
body.portal-dark .btn i { margin-right: .35rem; }

body.portal-dark .modal-content {
  color: var(--marsan-text);
  background: #171b20 !important;
  border: 1px solid #39414d;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.68);
}

body.portal-dark .modal-header { background: linear-gradient(135deg, #1d2735, #18202a) !important; border-bottom-color: #343c47; }
body.portal-dark .modal-footer { border-top-color: #343c47; }
body.portal-dark .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.portal-login .login-panel {
  width: min(100%, 430px);
  background: rgba(20, 23, 28, .96);
  border: 1px solid #343b46;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.portal-login .login-logo { object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 12px 22px rgba(0,0,0,.38)); }
.portal-login .form-control,
.portal-login .btn { min-height: 48px; }

.swal2-popup { color: var(--marsan-text) !important; background: #171b20 !important; border: 1px solid #39414d !important; border-radius: 20px !important; }
.dashboard-loader {
  position: fixed;
  inset: 68px 0 0;
  z-index: 1040;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  color: var(--marsan-text);
  background: rgba(9, 11, 13, .72);
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(5px);
  transition: opacity .18s ease, visibility .18s ease;
}
.dashboard-loader[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.logistics-loader { position: relative; width: 154px; height: 70px; color: var(--marsan-blue); }
.loader-box,
.loader-truck { position: absolute; bottom: 17px; display: grid; place-items: center; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.loader-box { left: 8px; width: 34px; height: 34px; color: #ffd166; font-size: 1.75rem; animation: cargarCaja 1.7s cubic-bezier(.45,0,.25,1) infinite; }
.loader-truck { right: 9px; width: 54px; height: 48px; color: var(--marsan-blue); font-size: 2.8rem; animation: marchaCamion .42s ease-in-out infinite alternate; }
.loader-road { position: absolute; right: 4px; bottom: 10px; width: 142px; height: 2px; overflow: hidden; background: #343c47; border-radius: 99px; }
.loader-road::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--marsan-blue), transparent); animation: recorrerRuta 1.1s linear infinite; }
.dashboard-loader-text { color: #cbd5e1; font-size: .86rem; font-weight: 600; letter-spacing: .025em; }
@keyframes cargarCaja {
  0% { opacity: 0; transform: translateX(-12px) translateY(-8px) rotate(-8deg) scale(.82); }
  18% { opacity: 1; transform: translateX(0) translateY(0) rotate(0) scale(1); }
  68% { opacity: 1; transform: translateX(67px) translateY(0) rotate(0) scale(.92); }
  82%, 100% { opacity: 0; transform: translateX(83px) translateY(-5px) scale(.65); }
}
@keyframes marchaCamion { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes recorrerRuta { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .loader-box, .loader-truck, .loader-road::after { animation-duration: 2.8s; }
}

.perfil-page { padding: 1.5rem clamp(.75rem, 2vw, 1.75rem) 2rem; }
.perfil-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.perfil-heading h1 { margin: 0 0 .2rem; font-size: 1.65rem; }
.perfil-heading p { margin: 0; color: var(--marsan-muted); }
.perfil-avatar { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; color: var(--marsan-blue); background: rgba(77,154,255,.13); border: 1px solid rgba(77,154,255,.35); border-radius: 18px; font-size: 1.7rem; }
.perfil-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr); gap: 1rem; align-items: start; }
.perfil-card { padding: 1.25rem; background: var(--marsan-surface); border: 1px solid var(--marsan-border); border-radius: 20px; box-shadow: 0 15px 36px rgba(0,0,0,.3); }
.perfil-card h2 { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.15rem; padding-bottom: .8rem; border-bottom: 1px solid var(--marsan-border); font-size: 1.05rem; }
.perfil-card h2 i { color: var(--marsan-blue); }
@media (max-width: 991.98px) { .perfil-grid { grid-template-columns: 1fr; } }

@media (max-width: 767.98px) {
  body.portal-dark .table-responsive { border-radius: 13px; }
  body.portal-dark .envios-dark,
  body.portal-dark .integraciones-dark { padding: .65rem; }
}