/* ===== Colores y base ===== */
:root{
  --azul:#0b2e59;
  --azul-700:#133e7c;
  --naranja:#ff7b00;
  --naranja-700:#e66a00;
  --borde:#ddd;
  --fondo:#ffffff;
  --fondo-bloque:#f9f9f9;
  --texto:#0b2e59;
}

html,body{margin:0;padding:0;background:var(--fondo);color:var(--texto);font-family:Arial,Helvetica,sans-serif;}
img{max-width:100%;height:auto;}
.muted{color:#6b7280;font-size:12px;}
.oculto{display:none;}

/* ===== Header (soporta <header> simple o .app-header) ===== */
/* Antes: 1100px. Ahora crece a 1320px para pantallas ≥1200 */
header .header-inner{
  max-width:1320px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
@media (min-width:1200px){
  th.th-accion-individual, td.td-accion-individual { width: 420px !important; }
}

/* Antes: 1100px. Ahora 1320px (similar a container-xl) */
.contenido{ max-width:1320px; margin:18px auto; padding:0 20px; }

/* Como ahora usamos grid de Bootstrap para columnas, quitamos margen extra del bloque */
.bloque{ margin-bottom:0; padding:16px; background:var(--fondo-bloque); border:1px solid var(--borde); border-radius:10px; }

header,
.app-header{
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul) 60%, var(--naranja) 60%, var(--naranja) 100%);
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
header .header-inner{
  max-width:1100px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
header .brand{display:flex;align-items:center;gap:12px;}
header .logo{height:46px;width:auto;}
header .title,h1,h2{margin:0;line-height:1.2;color:#fff;}
header .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
header .btn-outline{
  display:inline-block;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85);
  padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700;
}
header .btn-outline:hover{background:rgba(255,255,255,.12);}

/* ===== Contenedor y bloques ===== */
.contenido{max-width:1100px;margin:18px auto;padding:0 20px;}
.bloque{margin-bottom:18px;padding:16px;background:var(--fondo-bloque);border:1px solid var(--borde);border-radius:10px;}
.bloque h3{margin:0 0 12px;color:var(--azul);}

/* ===== Botones ===== */
.btn-azul,.btn-naranja{
  border:0;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:700;color:#fff;
}
.btn-azul{background:var(--azul);}
.btn-azul:hover{background:var(--azul-700);}
.btn-naranja{background:var(--naranja);}
.btn-naranja:hover{background:var(--naranja-700);}
.btn-sm{padding:8px 12px;}
.btn-link{
  display:inline-block;padding:10px 12px;text-decoration:none;border-radius:8px;
  border:1px solid #cbd5e1;color:var(--azul);background:#fff;font-weight:700;
}
.btn-link:hover{background:#f3f4f6;}

/* ===== Tablas ===== */
.tabla-wrap{overflow:auto;}
.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;}
.tabla th,.tabla td{padding:10px 12px;border-bottom:1px solid #eee;vertical-align:top;}
.tabla thead th{background:#eff6ff;color:var(--azul);font-weight:700;}
.tabla tbody tr:hover{background:#fafafa;}

/* Badges de estado */
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:12px;line-height:1;}
.b-pendiente{background:#fff7ed;color:#9a3412;}
.b-en_transito{background:#eff6ff;color:#1e3a8a;}
.b-reprogramado{background:#fef2f2;color:#991b1b;}
.b-entregado{background:#ecfdf5;color:#065f46;}

/* ===== Formularios (acciones y filtros) ===== */
.form-accion{
  display:grid;grid-template-columns:120px 1fr auto;grid-template-rows:auto auto;
  gap:8px 12px;align-items:start;
}
.label-inline{align-self:center;font-weight:700;color:var(--azul);}
.select-accion{
  padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--texto);
}
.textarea-observacion{
  grid-column:1 / span 2;min-height:70px;padding:8px 10px;
  border:1px solid #34d15b;border-radius:8px;resize:vertical;background:#f9f9f9;color:var(--texto);
}

/* ===== Checkboxes de selección múltiple ===== */
#select-all,#select-all-my{transform:scale(1.1);}

/* ===== Responsive ===== */
/* Tablets ≤ 1024px */
@media (max-width:1024px){
  header .header-inner{padding:12px 16px;}
  header .logo{height:42px;}
  .contenido{padding:0 16px;}
}

/* Móviles ≤ 768px */
@media (max-width:768px){
  header .header-inner{flex-direction:column;align-items:center;gap:10px;}
  header .actions{width:100%;justify-content:space-between;}
  header .title{font-size:18px;}
  .bloque{padding:14px;}
  .form-accion{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:10px;}
  .textarea-observacion{grid-column:1 / -1;}
  .tabla th,.tabla td{padding:10px;}
}

/* Teléfonos pequeños ≤ 480px */
@media (max-width:480px){
  header .logo{height:36px;}
  header .title{font-size:16px;}
  .btn-azul,.btn-naranja,.btn-link{width:100%;text-align:center;}
  .btn-sm{padding:10px 12px;}
}
.navbar {
  background-color: #ffffff;
}

.navbar-brand {
  font-weight: 700;
  color: #0d6efd !important;
}

.nav-link {
  color: #333 !important;
  font-weight: 500;
  margin-right: 0.8rem;
  transition: color 0.3s ease;
  text-align: center;
}

.nav-link:hover {
  color: #0d6efd !important;
}

.nav-link.active {
  color: #0d6efd !important;
  border-bottom: 2px solid #0d6efd;
}

.pagination .page-link { border: 1px solid var(--bs-border-color); }
.pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--bs-secondary-color); }

/* Badge para estado: recibido */
.badge.b-recibido {
  background-color: #eff4f1; /* Bootstrap "success" */
  color: #015830;
}

/* (Opcional) versión suave si usas variantes light */
.badge.b-recibido.badge-light,
.badge-light.b-recibido {
  background-color: #fefefe; /* success-subtle */
  color: #015830;
  border-color: #badbcc;
}

/* Timeline horizontal */
.tracking-timeline-h {
  --line: #e5e7eb;
  --done: #16a34a;
  --current: #f59e0b;
  --text: #374151;
  --muted: #6b7280;

  display: flex;
  align-items: center;
  gap: 0; /* la línea une sin espacios */
  margin-top: 14px;
  overflow-x: auto;           /* scroll si no cabe */
  padding: 10px 8px;
  border-radius: 10px;
  background: #fff;
}

/* cada paso */
.tracking-step-h {
  display: grid;
  grid-template-rows: 36px auto;
  grid-template-columns: 1fr;
  justify-items: center;
  min-width: 160px;           /* asegúrate de ver texto */
  padding: 0 12px;
  position: relative;
  text-align: center;
}

/* conector izquierdo y derecho como líneas */
.tracking-step-h::before,
.tracking-step-h::after {
  content: "";
  position: absolute;
  top: 18px;                  /* centrado vertical del dot (36px / 2) */
  height: 2px;
  background: var(--line);
  width: 50%;
}
.tracking-step-h::before { left: 0; transform: translateX(-50%); }
.tracking-step-h::after  { right: 0; transform: translateX(50%); }

/* primer y último sin líneas sobrantes */
.tracking-step-h:first-child::before { display: none; }
.tracking-step-h:last-child::after   { display: none; }

/* punto (dot) */
.tracking-dot-h {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* títulos/fechas */
.tracking-title-h {
  font-weight: 600;
  margin: 8px 0 2px;
  color: var(--text);
}
.btn-driver-responsive
{
  display: block;
  width: 100%;
}

.tracking-meta-h {
  font-size: .9rem;
  color: var(--muted);
  margin: 0;
}

/* estados visuales */
.tracking-step-h.done .tracking-dot-h {
  border-color: var(--done);
  background: var(--done);
  color: #fff;
}
.tracking-step-h.current .tracking-dot-h {
  border-color: var(--current);
  background: #fff;
  color: var(--current);
}
.tracking-step-h.skipped .tracking-title-h,
.tracking-step-h.skipped .tracking-meta-h { color: #9ca3af; }

/* mejora del scroll */
.tracking-timeline-h::-webkit-scrollbar { height: 8px; }
.tracking-timeline-h::-webkit-scrollbar-thumb {
  background: #d1d5db; border-radius: 999px;
}

.tracking-step-h.done::before, .tracking-step-h.done::after { background: var(--done); }
.tracking-step-h.current::before { background: var(--done); } /* lo anterior hasta el current */

/* ==== TABLA COMO TARJETAS (relieve + espacio entre filas) ==== */
.tabla {
  border-collapse: separate !important;   /* permite espacio entre filas */
  border-spacing: 0 0.6rem;               /* espacio vertical entre filas */
  background: transparent;                /* deja ver el fondo del bloque */
  border-radius: 0;                       /* las tarjetas son los <tr>, no la tabla */
  overflow: visible;
}

/* celdas del cuerpo sin borde inferior clásico */
.tabla tbody td {
  border-bottom: none !important;
}

/* cada fila se ve como una tarjeta */
.tabla tbody tr {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  border-radius: 0.75rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

/* efecto hover sutil */
.tabla tbody tr:hover {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

/* redondear esquinas: primera y última celda de cada fila */
.tabla tbody tr > *:first-child {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.tabla tbody tr > *:last-child {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* un poco más de aire vertical en cada celda del cuerpo */
.tabla tbody td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}