/* =========================================================================
   Panel de despacho — hoja de estilos
   =========================================================================
   CSS escrito a mano, sin compilación. Motivo: el proyecto debe poder
   levantarse con `php artisan serve` y nada más. Un build de Node (Vite +
   Tailwind) obligaría a instalar dependencias antes de ver una sola pantalla y
   añadiría una fuente de fallos ajena al sistema.

   Convenciones:
     · Paleta oscura para la cabecera y clara para el contenido: reduce el
       deslumbramiento en una pantalla que se mira toda la jornada.
     · Estados del semáforo GPS siempre acompañados de texto, nunca solo color:
       ~8% de los hombres tiene daltonismo rojo-verde, y en un panel de flota ese
       dato es crítico.
     · Objetivos táctiles de 40 px+ por si el panel se usa en una tablet.
   ========================================================================= */

:root {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #cbd5e1;
  --border-soft: #e2e8f0;

  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;

  --primary: #1d4ed8;
  --primary-dark: #1e3a8a;
  --primary-soft: #dbeafe;

  --success: #059669;
  --success-soft: #d1fae5;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --slate-soft: #e2e8f0;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 3px rgb(15 23 42 / 8%), 0 1px 2px rgb(15 23 42 / 4%);
  --shadow-lg: 0 10px 25px rgb(15 23 42 / 10%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Layout */

.topbar {
  background: var(--primary-dark);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar__brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__brand small {
  font-weight: 400;
  font-size: 12px;
  color: #bfdbfe;
  display: block;
}

.topbar__nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.topbar__link {
  color: #dbeafe;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
}
.topbar__link:hover { background: rgb(255 255 255 / 12%); text-decoration: none; }
.topbar__link--active { background: rgb(255 255 255 / 18%); color: #fff; }

.topbar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #bfdbfe;
}

.container { max-width: 1500px; margin: 0 auto; padding: 24px; }
.container--wide { max-width: none; }

.page-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.page-subtitle { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }

/* ------------------------------------------------------------------ Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
}

.stat__value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat__label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.stat--success .stat__value { color: var(--success); }
.stat--warning .stat__value { color: var(--warning); }
.stat--danger  .stat__value { color: var(--danger); }
.stat--primary .stat__value { color: var(--primary); }

/* ----------------------------------------------------------------- Tables */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

tbody tr:hover { background: var(--surface-alt); }
tbody tr:last-child td { border-bottom: none; }

.cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.cell-muted { color: var(--text-muted); font-size: 13px; }
.cell-nowrap { white-space: nowrap; }

/* ----------------------------------------------------------------- Badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--pending   { background: var(--slate-soft); color: #334155; }
.badge--assigned  { background: var(--primary-soft); color: var(--primary-dark); }
.badge--in_transit{ background: var(--warning-soft); color: #92400e; }
.badge--delivered { background: var(--success-soft); color: #065f46; }
.badge--failed    { background: var(--danger-soft); color: #991b1b; }
.badge--cancelled { background: var(--slate-soft); color: #475569; }

.badge--ok      { background: var(--success-soft); color: #065f46; }
.badge--warn    { background: var(--warning-soft); color: #92400e; }
.badge--danger  { background: var(--danger-soft); color: #991b1b; }
.badge--muted   { background: var(--slate-soft); color: #475569; }

/* Punto del semáforo GPS. Siempre acompañado de texto. */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot--moving  { background: #10b981; }
.dot--idle    { background: #f59e0b; }
.dot--stopped { background: #f59e0b; }
.dot--stale   { background: #ef4444; }
.dot--offline { background: #ef4444; }
.dot--unknown { background: #94a3b8; }

/* ---------------------------------------------------------------- Forms */

.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.field--grow { flex: 1; }

.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-height: 40px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary);
}

textarea { resize: vertical; min-height: 72px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  min-height: 40px;
  transition: background 0.15s;
}

.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--secondary { background: #fff; color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--surface-alt); }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #b91c1c; }
.btn--sm { padding: 5px 12px; font-size: 13px; min-height: 32px; }

/* ---------------------------------------------------------------- Alerts */

.alert {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid transparent;
}

.alert--success { background: var(--success-soft); color: #065f46; border-color: #a7f3d0; }
.alert--error   { background: var(--danger-soft);  color: #991b1b; border-color: #fecaca; }
.alert--info    { background: var(--primary-soft); color: var(--primary-dark); border-color: #bfdbfe; }
.alert--warning { background: var(--warning-soft); color: #92400e; border-color: #fde68a; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* ------------------------------------------------------------------ Misc */

.empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty__title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.pagination { margin-top: 18px; }
.pagination nav > div { display: flex; gap: 4px; flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; }
.kv dt { color: var(--text-muted); font-weight: 600; }
.kv dd { margin: 0; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

.photo-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
}

.photo-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: #e2e8f0; }
.photo-card__meta { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }

.small-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ------------------------------------------------------------------- Map */

#map { height: calc(100vh - 200px); min-height: 460px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.map-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  align-items: center;
}
.map-legend span { display: flex; align-items: center; gap: 6px; }

.fleet-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 200px); overflow-y: auto; }

.fleet-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  font-size: 13px;
}
.fleet-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.fleet-item__name { font-weight: 600; }

/* ---------------------------------------------------------------- Login */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 100%);
  padding: 24px;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.login-card h1 { margin: 0 0 4px; font-size: 24px; color: var(--primary); }
.login-card p.sub { margin: 0 0 24px; color: var(--text-muted); font-size: 14px; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn { width: 100%; margin-top: 8px; }

.login-hint {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text-muted);
}
.login-hint code { background: var(--surface-alt); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---------------------------------------------------------------------------
   Avance del pedido (linea de tiempo del rastreo publico)

   Los colores de los puntos salen del catalogo de pasos de la organizacion, asi
   que cada uno es una clase propia. Se declaran todas las de la paleta del panel
   para que anadir un paso con cualquier color funcione sin tocar el CSS.
   --------------------------------------------------------------------------- */
.progress {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.progress__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}

.progress__item:last-child { border-bottom: 0; }

.progress__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-faint);
}

.progress__dot--blue   { background: var(--primary); }
.progress__dot--purple { background: #7c3aed; }
.progress__dot--amber  { background: #d97706; }
.progress__dot--green  { background: var(--success); }
.progress__dot--red    { background: #dc2626; }
.progress__dot--gray   { background: var(--text-faint); }

.progress__label { flex: 1; color: var(--text); }

.progress__time {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .container { padding: 16px; }
}