/* ============================================================
   Grupo Sulogística · tema.css
   Hoja de estilos central del entorno.
   Punto único para colores, tipografía y componentes.
   Cambia la paleta aquí y se refleja en todo el sistema.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

:root{
  /* ---- Paleta Grupo Sulogística ---- */
  --primary:      #0F2D4E;   /* azul corporativo */
  --primary-2:    #16375c;   /* azul para degradados */
  --accent:       #C22438;   /* rojo corporativo */
  --accent-soft:  #d94656;   /* rojo hover */
  --primary-soft: #8fa6c4;   /* azul claro para encabezados */

  /* ---- Alias de compatibilidad (todo el CSS histórico sigue funcionando) ---- */
  --navy:        var(--primary);
  --navy-2:      var(--primary-2);
  --gold:        var(--accent);
  --gold-soft:   var(--accent-soft);

  /* Semánticos */
  --bg:          #f4f6f9;
  --surface:     #ffffff;
  --border:      #eef1f5;
  --border-2:    #e6e9ee;
  --text:        #1f2b3a;
  --text-muted:  #7b8794;
  --text-soft:   #9aa5b1;

  /* Estados */
  --success:     #2f855a;
  --success-bg:  #e9f7ef;
  --info:        #2b6cb0;
  --info-bg:     #eaf3ff;
  --warning:     #b7791f;
  --warning-bg:  #fef5e7;
  --danger:      #dc3545;

  /* Formas */
  --radius:      14px;
  --radius-sm:   10px;
  --radius-xs:   8px;
  --shadow:      0 2px 10px rgba(15,45,78,.06);
  --shadow-hover:0 8px 22px rgba(15,45,78,.12);
  --shadow-lg:   0 24px 60px rgba(0,0,0,.45);

  /* Tipografía */
  --font: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Poppins', 'Inter', sans-serif;
}

body{ font-family:var(--font); }

/* ============================================================
   1. Utilidades generales
   ============================================================ */
.font-weight-600{ font-weight:600; }
.text-muted-soft{ color:var(--text-soft); }

.btn-gold{
  background:var(--accent); border:none; color:#fff; font-weight:600;
}
.btn-gold:hover,
.btn-gold:focus{ background:var(--accent-soft); color:#fff; }

/* ============================================================
   2. Pantalla de acceso (login) + fondo dinámico
   ============================================================ */
.auth-body{
  min-height:100vh; margin:0; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font);
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}

/* -- Fondo dinámico (fondo.php) -- */
.bg-fondo{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.bg-fondo .bg-gradient{
  position:absolute; inset:0;
  background:linear-gradient(135deg, #0a2545 0%, var(--navy) 45%, #16375c 100%);
}
/* Imagen de fondo (assets/img/fondo.png). Ruta relativa al CSS, así funciona
   desde cualquier página. El velo (.bg-overlay) controla su opacidad. */
.bg-fondo .bg-image{
  position:absolute; inset:0;
  background:url('../img/fondo.png') center center / cover no-repeat;
}
.bg-fondo .blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
  animation:blobFloat 18s ease-in-out infinite;
}
.bg-fondo .blob.b1{ width:420px; height:420px; background:#1e5fa8; top:-120px; left:-80px; }
.bg-fondo .blob.b2{ width:360px; height:360px; background:var(--accent); bottom:-120px; right:-60px; animation-delay:-6s; opacity:.35; }
.bg-fondo .blob.b3{ width:300px; height:300px; background:#2b6cb0; top:40%; left:55%; animation-delay:-11s; opacity:.4; }
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.08); }
  66%{ transform:translate(-30px,25px) scale(.95); }
}
.bg-fondo .bg-grid{
  position:absolute; inset:0; opacity:.06;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.bg-fondo .ico{
  position:absolute; color:#fff; opacity:.06; animation:icoFloat 14s ease-in-out infinite;
}
.bg-fondo .ico.i1{ font-size:72px; top:14%; left:12%; }
.bg-fondo .ico.i2{ font-size:54px; top:70%; left:18%; animation-delay:-3s; }
.bg-fondo .ico.i3{ font-size:88px; top:22%; right:14%; animation-delay:-6s; }
.bg-fondo .ico.i4{ font-size:48px; bottom:16%; right:22%; animation-delay:-9s; }
.bg-fondo .ico.i5{ font-size:60px; top:50%; left:46%; animation-delay:-5s; opacity:.05; }
@keyframes icoFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(6deg); }
}
.bg-fondo .bg-overlay{
  position:absolute; inset:0; background:var(--navy);
  /* la opacidad se define inline desde fondo.php */
}
.bg-fondo .bg-overlay.velo-blanco{ background:#eef1f63b; }
.bg-fondo .bg-overlay.velo-split{
  background:linear-gradient(90deg,
    rgba(15,45,78,.74) 0%,
    rgba(15,45,78,.74) 44%,
    rgba(238,241,246,.62) 56%,
    rgba(238,241,246,.62) 100%);
}

/* La tarjeta y demás contenido por encima del fondo */
.auth-body > *:not(.bg-fondo){ position:relative; z-index:1; }

.login-card{
  width:100%; max-width:420px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px) saturate(140%);
  border-radius:20px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.6);
  animation:cardPop .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes cardPop{ from{opacity:0; transform:translateY(22px) scale(.98);} to{opacity:1; transform:none;} }
.login-head{
  background:#fff;
  color:var(--navy); text-align:center; padding:28px 24px 18px;
  border-bottom:3px solid var(--accent); position:relative;
}
.login-head small{ display:block; margin-top:2px; color:var(--text-muted); letter-spacing:3px; text-transform:uppercase; font-size:10px; }
.login-logo-box{ background:transparent; box-shadow:none; border-radius:0; padding:0; display:block; margin:0 auto 6px; }
.login-logo-box img{ max-height:56px; max-width:230px; object-fit:contain; display:block; margin:0 auto; }
.login-body{ padding:30px 32px 30px; }
.login-body .form-label{ font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.login-body .form-control{ border-radius:10px; padding:.6rem .9rem; border-color:#dfe4ea; }
.login-body .input-group-text{ background:var(--navy); color:#fff; border-color:var(--navy); }
.login-body .form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(194,36,56,.18); }
.login-foot{ text-align:center; color:#8a97a7; font-size:12px; padding:0 24px 24px; }
.login-foot a{ color:var(--navy); font-weight:600; text-decoration:none; }
.login-foot a:hover{ color:var(--accent); }

/* ===== Pantalla dividida: login (izq) + seguimiento (der) ===== */
.login-split{
  display:flex; align-items:stretch; justify-content:center;
  min-height:30vh; padding:30px 16px;
}
.login-split .login-card{
  max-width:400px; width:100%; margin:0;
  border-radius:20px 0 0 20px;
}
.track-panel{
  width:380px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff; padding:44px 34px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, #0F2D4E 0%, #1a3977 100%);
  border-radius:0 20px 20px 0;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08); border-left:none;
  transition:.2s; animation:cardPop .55s cubic-bezier(.2,.8,.2,1);
}
.track-panel::before{
  content:""; position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,.18), transparent 70%);
  top:-80px; right:-80px;
}
.track-panel:hover{ filter:brightness(1.09); }
.track-panel:hover .track-panel-btn{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.track-panel-inner{ text-align:center; position:relative; z-index:1; }
.track-panel-ico{ font-size:66px; color:var(--gold); }
.track-panel-title{ font-weight:700; margin:14px 0 8px; font-size:22px; color:#fff; }
.track-panel-text{ opacity:.82; font-size:14px; line-height:1.5; margin-bottom:24px; }
.track-panel-btn{ display:inline-block; background:#fff; color:var(--primary); font-weight:700;
  padding:12px 24px; border-radius:12px; transition:.2s; }
.solo-movil{ display:none; }

@media (max-width:800px){
  .login-split{ flex-direction:column; align-items:center; gap:16px; }
  .login-split .login-card{ border-radius:20px; max-width:420px; }
  .track-panel{ display:none; }
  .solo-movil{ display:block !important; }
}
.toggle-pass{ cursor:pointer; }
.btn-block-login{
  width:100%; padding:12px; border-radius:12px; letter-spacing:.5px;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  box-shadow:0 8px 20px rgba(194,36,56,.35); transition:.2s;
}
.btn-block-login:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(194,36,56,.45); }

/* ============================================================
   3. Layout de administración · Marca y sidebar
   ============================================================ */
.brand-link{ background:rgba(255,255,255,.55)!important; border-bottom:1px solid rgba(15,45,78,.06); padding:12px 8px; }
.brand-link .brand-text{ color:var(--primary); font-weight:700; letter-spacing:.5px; }
.brand-link .mdi{ color:var(--accent); }
.brand-logo{ max-height:40px; max-width:88%; object-fit:contain; }

/* -- Sidebar glass muy claro (blanco esmerilado) -- */
.main-sidebar{
  background:rgba(255,255,255,.58)!important;
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-right:1px solid rgba(255,255,255,.55);
  box-shadow:4px 0 30px rgba(15,45,78,.07)!important;
}
/* Ítems: letra sutil oscura; lado izq. redondeado, derecho recto (se funde con el borde) */
.nav-sidebar .nav-link{
  color:rgba(15,45,78,.82)!important; font-weight:400;
  font-size:.84rem; letter-spacing:.2px;
  border-radius:40px 0 0 40px; margin:3px 0 3px 12px; padding:.55rem 1rem; transition:.18s;
}
.nav-sidebar .nav-link .nav-icon{ color:rgba(15,45,78,.6); font-size:1rem; }
.nav-sidebar .nav-link:hover{ background:rgba(15,45,78,.06)!important; color:var(--primary)!important; }
.nav-sidebar .nav-link:hover .nav-icon{ color:var(--primary); }
/* Ítem activo: azul profundo, en cualquier nivel (top o dentro de un grupo) */
.sidebar-dark-primary .nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active{
  background:#051668!important; color:#fff!important; font-weight:600; font-size:.84rem;
  box-shadow:0 8px 22px rgb(26 57 119 / 30%);
}
.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active .mdi{ color:#fff!important; }
.nav-header{ color:rgba(15,45,78,.45)!important; text-transform:uppercase; font-size:11px; letter-spacing:1.5px; font-weight:600; }
.nav-link.disabled{ opacity:.5; cursor:not-allowed; }
.badge-pronto{ background:rgba(5,22,104,.1); color:#051668; font-size:9px; letter-spacing:.5px; }

/* -- Grupos colapsables (treeview) -- */
.nav-sidebar .has-treeview > .nav-link{ cursor:pointer; }
.nav-sidebar .has-treeview > .nav-link.active-group{ color:var(--accent)!important; font-weight:600; }
.nav-sidebar .has-treeview > .nav-link.active-group .nav-icon,
.nav-sidebar .has-treeview > .nav-link.active-group .right{ color:var(--accent)!important; }
.nav-sidebar .nav-link > p > .right{ position:absolute; right:1rem; top:.65rem; transition:transform .3s; font-size:1rem; }
.nav-sidebar .menu-open > .nav-link > p > .right{ transform:rotate(-90deg); }

/* Grupo abierto: se realza y su bloque de submenús toma otro tono (más azulado) */
.nav-sidebar .has-treeview.menu-open > .nav-link{
  background:rgba(15,45,78,.05)!important; color:var(--primary)!important; font-weight:600;
  border-radius:40px 0 0 40px; margin:3px 0 3px 12px;
}
.nav-sidebar .has-treeview.menu-open > .nav-link .nav-icon,
.nav-sidebar .has-treeview.menu-open > .nav-link .right{ color:var(--primary)!important; }
.nav-sidebar .nav-treeview{
  background:linear-gradient(90deg, rgba(15,45,78,.06), rgba(15,45,78,.02));
  margin:2px 0 8px 12px; border-radius:16px 0 0 16px; padding:5px 0;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link{ padding-left:1.2rem; font-size:.8rem; margin:2px 0 2px 8px; border-radius:40px 0 0 40px; }
.nav-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon{ font-size:.9rem; }
/* el activo dentro del submenú conserva su pill oscuro y su radio propio */
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active{ border-radius:8px; }

/* ============================================================
   4. Topbar
   ============================================================ */
.main-header.navbar{ background:var(--surface); border-bottom:1px solid var(--border-2); }
.navbar .nav-link{ color:var(--navy); }
.user-badge{
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ============================================================
   5. Contenido
   ============================================================ */
.content-wrapper{
  background:
    radial-gradient(900px 520px at -6% -12%, rgba(29,48,124,.07), transparent 62%),
    radial-gradient(700px 420px at 10% 108%, rgba(194,36,56,.04), transparent 60%),
    var(--bg);
}
.page-title{ color:var(--navy); font-weight:700; }
.breadcrumb{ background:transparent; padding-left:0; margin-bottom:0; }

/* ============================================================
   6. Tarjetas y KPIs
   ============================================================ */
.card{ border:none; border-radius:var(--radius); box-shadow:var(--shadow); }
.card-header{
  background:var(--surface); border-bottom:1px solid var(--border);
  font-weight:600; color:var(--navy); border-radius:var(--radius) var(--radius) 0 0!important;
}
.kpi-card{ border:none; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.2s; }
.kpi-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.kpi-ico{
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.kpi-value{ font-size:30px; font-weight:700; color:var(--navy); line-height:1; }
.kpi-label{ color:var(--text-muted); font-size:13px; margin-top:4px; }

/* ============================================================
   7. Tablas
   ============================================================ */
.table thead th{ color:var(--navy); border-bottom:2px solid var(--border); font-size:13px; }

.empty-state{ text-align:center; padding:48px 16px; color:var(--text-soft); }
.empty-state .mdi{ font-size:56px; color:#cbd3dc; }

/* ============================================================
   8. Modales
   ============================================================ */
.modal-header .close{ opacity:.9; }
.modal-header-navy{ background:var(--navy); color:#fff; }
.modal-header-navy2{ background:var(--navy-2); color:#fff; }

/* ============================================================
   9. Matriz de permisos y pestañas
   ============================================================ */
.matriz td, .matriz th{ vertical-align:middle; }
.matriz input[type=checkbox]{ width:18px; height:18px; cursor:pointer; }
.nav-tabs .nav-link.active{ color:var(--navy); font-weight:600; border-top:2px solid var(--gold); }

/* ============================================================
   10. Portal de cliente (tarjeta centrada)
   ============================================================ */
.portal-body{
  min-height:100vh; margin:0; background:var(--navy);
  display:flex; align-items:center; justify-content:center; font-family:var(--font);
}
.portal-card{ max-width:520px; border-top:4px solid var(--gold)!important; }

/* ============================================================
   11. Línea de tiempo (tracking)
   ============================================================ */
.track-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.track-timeline:before{
  content:''; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:var(--border);
}
.track-item{ position:relative; padding:0 0 22px 46px; }
.track-item:last-child{ padding-bottom:4px; }
.track-dot{
  position:absolute; left:6px; top:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--gold); z-index:1;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--navy);
}
.track-item.done .track-dot{ background:var(--gold); color:var(--navy); }
.track-item.current .track-dot{ box-shadow:0 0 0 4px rgba(201,168,76,.25); }
.track-title{ font-weight:600; color:var(--navy); }
.track-meta{ font-size:12px; color:var(--text-muted); }
.track-note{ font-size:13px; color:var(--text); }

/* Chips de estado (tablero de tracking) */
.state-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow); cursor:pointer; transition:.15s;
  border:2px solid transparent;
}
.state-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.state-chip.active{ border-color:var(--gold); }
.state-chip .num{ font-size:20px; font-weight:700; color:var(--navy); }
.state-chip .lbl{ font-size:12px; color:var(--text-muted); }

/* ============================================================
   12. Rastreo público
   ============================================================ */
.track-public-body{
  min-height:100vh; margin:0; font-family:var(--font);
}
.track-public-wrap{
  position:relative; z-index:1; min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:30px 14px;
}
.track-public-card{
  width:100%; max-width:680px; margin:0 auto;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px) saturate(140%);
  border-radius:20px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.6);
  animation:cardPop .45s cubic-bezier(.2,.8,.2,1);
  transition:max-width .3s;
}
/* cuando hay resultado, la tarjeta se ensancha para las 2 columnas */
.track-public-card.con-resultado{ max-width:820px; }
.track-public-head{
  background:#fff; color:var(--navy);
  text-align:center; padding:26px 20px 20px; border-bottom:3px solid var(--accent);
}
.track-public-head .mdi{ color:var(--accent); font-size:38px; }
.status-hero{
  text-align:center; padding:18px; border-radius:14px; background:var(--bg); margin-bottom:14px;
}
.status-hero .mdi{ font-size:44px; }
.status-hero .estado{ font-size:20px; font-weight:700; color:var(--navy); }

/* ---- Resultado en dos columnas ---- */
.track-result{ display:flex; gap:22px; align-items:flex-start; }
.track-col-info{ flex:0 0 230px; }
.track-col-time{ flex:1; min-width:0; }
.ruta-box{
  background:var(--bg); border-radius:14px; padding:14px 16px; text-align:center;
}
.ruta-box .ruta-arrow{ color:var(--accent); font-size:20px; margin:4px 0; display:block; }
.track-scroll{
  max-height:300px; overflow-y:auto; padding-right:10px; margin-right:-6px;
}
.track-scroll::-webkit-scrollbar{ width:6px; }
.track-scroll::-webkit-scrollbar-thumb{ background:rgba(15,45,78,.22); border-radius:10px; }
.track-scroll::-webkit-scrollbar-track{ background:transparent; }

@media (max-width:640px){
  .track-result{ flex-direction:column; }
  .track-col-info{ flex:none; width:100%; }
  .ruta-box{ display:flex; align-items:center; justify-content:space-around; text-align:left; }
  .ruta-box .ruta-arrow{ transform:rotate(-90deg); margin:0; }
  .track-scroll{ max-height:260px; }
}

/* ===== Selector visual de tamaños de paquete ===== */
.tipo-paq{
  width:104px; padding:10px 6px 8px; border:2px solid #eef1f5; border-radius:14px;
  background:#fff; cursor:pointer; text-align:center; transition:.15s; user-select:none;
}
.tipo-paq:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.06); }
.tipo-paq.sel{ border-color:var(--accent); background:rgba(194,36,56,.04); }
.tipo-paq-box{ height:74px; display:flex; align-items:center; justify-content:center; }
.tipo-paq-med{ font-size:12px; color:#8a97a7; margin-top:4px; font-weight:500; }
.tipo-paq.sel .tipo-paq-med{ color:var(--accent); }