:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.08);
  --radius:16px;
}

body{ background:var(--bg); color:var(--text); }
a{ text-decoration:none; }

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.navbar{
  border-bottom:1px solid var(--border)!important;
}

.small-muted{ color:var(--muted); }

/* Contenedor más elegante */
.container{ max-width:1200px; }

/* Inputs y botones */
.form-control, .form-select{
  border-radius:12px;
  border:1px solid var(--border);
}
.btn{ border-radius:12px; }

/* Tablas: mejor lectura */
.table thead th{
  color:var(--muted);
  font-weight:600;
  border-bottom:1px solid var(--border);
}
.table tbody td{
  border-top:1px solid var(--border);
}

/* Badge estado tamaño */
.badge-status{ font-size:.85rem; }

/* Responsive: que las tablas no rompan */
.table-responsive{
  border-radius:14px;
}

/* “Móvil”: esconder columnas no críticas si quieres luego */
@media (max-width: 768px){
  .hide-mobile{ display:none!important; }
}

.ship-card .meta { color: var(--muted); font-size: .9rem; }
.ship-card .code { font-weight: 800; letter-spacing: .3px; }
.ship-card .rowline { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ship-card .pill { border:1px solid var(--border); border-radius:999px; padding:.15rem .6rem; font-size:.85rem; background:#fff; }

/* Stepper (progreso) */
.stepper{ display:flex; gap:14px; flex-wrap:wrap; }
.stepper .step{ display:flex; align-items:center; gap:8px; }
.stepper .dot{
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--border); background:#fff;
}
.stepper .done .dot{ background: currentColor; border-color: currentColor; }
.stepper .current .dot{
  border-color: currentColor;
  box-shadow: 0 0 0 4px rgba(15,23,42,.08);
}
.stepper .label{ font-size:.9rem; color: var(--muted); }
.stepper .done .label, .stepper .current .label{ color: var(--text); font-weight:700; }

/* Timeline (historial) */
.timeline{ position:relative; padding-left:18px; }
.timeline:before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px;
  width:2px; background: var(--border);
}
.timeline .item{ position:relative; padding:10px 0 10px 0; }
.timeline .item:before{
  content:''; position:absolute; left:-2px; top:18px;
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid var(--border);
}
.timeline .title{ font-weight:800; }
.timeline .date{ color: var(--muted); font-size:.85rem; }
.timeline .note{ color: var(--muted); }