/*
  Paleta de marca oficial de JyJ Cargo, extraída del logo real
  (assets/img/logo.png): azul marino del texto "J y J cargo" y rojo del
  ícono/tagline "servicios y transportes".
*/
:root {
  --jyj-navy-900: #23246b;
  --jyj-navy-800: #2a2b80;
  --jyj-navy-700: #333399;
  --jyj-navy-600: #4646b0;
  --jyj-red:      #980101;
  --jyj-red-dark: #700000;
  --jyj-accent:   #980101;
  --jyj-bg:       #f4f6f9;
  --jyj-text:     #1c2430;
  --jyj-muted:    #6b7480;
  --jyj-success:  #1e7e34;
  --jyj-danger:   #b3261e;
  --jyj-radius:   10px;
}

body {
  background: var(--jyj-bg);
  color: var(--jyj-text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.jyj-navbar {
  background: var(--jyj-navy-900);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.jyj-navbar .navbar-brand { font-weight: 700; letter-spacing: .3px; }
.jyj-navbar .navbar-brand img { border-radius: 4px; background: #fff; padding: 2px; }

.jyj-footer {
  background: #fff;
  border-top: 1px solid #e3e7ee;
}

.card, .jyj-card {
  border: none;
  border-radius: var(--jyj-radius);
  box-shadow: 0 1px 3px rgba(11, 31, 58, .08);
}

.btn-primary {
  background: var(--jyj-navy-700);
  border-color: var(--jyj-navy-700);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--jyj-navy-800);
  border-color: var(--jyj-navy-800);
}

/* Botón de acento en rojo de marca, para la acción principal de búsqueda */
.btn-jyj-accent {
  background: var(--jyj-red);
  border-color: var(--jyj-red);
  color: #fff;
}
.btn-jyj-accent:hover,
.btn-jyj-accent:focus {
  background: var(--jyj-red-dark);
  border-color: var(--jyj-red-dark);
  color: #fff;
}

.badge-si { background: var(--jyj-success); }
.badge-no { background: var(--jyj-muted); }

/* Línea de tiempo del despacho */
.jyj-timeline {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  gap: 0;
}
.jyj-timeline li {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 2.25rem;
}
.jyj-timeline li::before {
  content: "";
  position: absolute;
  top: .65rem;
  left: 0;
  right: 0;
  height: 3px;
  background: #dfe4ea;
}
.jyj-timeline li::after {
  content: "";
  position: absolute;
  top: .35rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #dfe4ea;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #dfe4ea;
}
.jyj-timeline li.done { color: var(--jyj-navy-700); font-weight: 600; }
.jyj-timeline li.done::before { background: var(--jyj-red); }
.jyj-timeline li.done::after { background: var(--jyj-red); box-shadow: 0 0 0 2px var(--jyj-red); }
.jyj-timeline li:first-child::before { left: 50%; }
.jyj-timeline li:last-child::before { right: 50%; }

/* Hero de búsqueda pública */
.jyj-search-hero {
  background: linear-gradient(135deg, var(--jyj-navy-900), var(--jyj-navy-700));
  color: #fff;
  border-radius: var(--jyj-radius);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(35, 36, 107, .18);
}
.jyj-search-hero .form-control { border-radius: 8px; border: none; }
.jyj-search-hero .form-control:focus {
  box-shadow: 0 0 0 .2rem rgba(152, 1, 1, .25);
}
.jyj-search-hero .form-label { color: rgba(255, 255, 255, .85); }

.jyj-search-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.jyj-search-hero-text { flex: 1 1 320px; }

.jyj-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #ffb3b3;
  margin-bottom: .35rem;
}

.jyj-search-hero-logo {
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.table-responsive { border-radius: var(--jyj-radius); overflow: hidden; }

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #eef1f6;
  font-size: .8rem;
  margin: .15rem;
}

@media (max-width: 576px) {
  .jyj-timeline { flex-direction: column; gap: .75rem; }
  .jyj-timeline li { text-align: left; padding-left: 2.25rem; padding-top: 0; }
  .jyj-timeline li::before { display: none; }
  .jyj-timeline li::after { top: 0; left: 0; transform: none; }

  .jyj-search-hero-inner { flex-direction: column; align-items: flex-start; }
  .jyj-search-hero-logo { align-self: center; }
}