:root {
  --color-primario: #1E405A;
  --color-secundario: #1E8A95;
  --color-acento: #FBBF24;
}

.bg-primario { background-color: var(--color-primario); }
.bg-secundario { background-color: var(--color-secundario); }
.text-primario { color: var(--color-primario); }
.text-secundario { color: var(--color-secundario); }

.text-turquoise { color: var(--color-secundario); }
.glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.9); }

.btn-primary { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); transition: all 0.3s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3); }

.status-badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; }

.status-Pendiente { background-color: #fef3c7; color: #92400e; }
.status-Aceptada, .status-En-proceso { background-color: #dbeafe; color: #1e40af; }
.status-En-camino-a-recoger, .status-En-origen, .status-En-curso, .status-En-destino { background-color: #e9d5ff; color: #6b21a8; }
.status-Completada { background-color: #dcfce7; color: #166534; }
.status-Cancelada { background-color: #fee2e2; color: #991b1b; }

.timeline-item { position: relative; padding-left: 2rem; padding-bottom: 1.5rem; }
.timeline-item::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 1rem; height: 1rem; background-color: #e5e7eb; border-radius: 9999px; border: 3px solid white; z-index: 10; }
.timeline-item.active::before { background-color: #2563eb; }
.timeline-item::after { content: ''; position: absolute; left: 0.5rem; top: 1.5rem; width: 2px; height: 100%; background-color: #e5e7eb; }
.timeline-item:last-child::after { display: none; }

.realtime-indicator { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.realtime-dot { width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: #10B981; box-shadow: 0 0 8px rgba(16,185,129,0.35); }
.realtime-dot.offline { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.35); }
.pulse-flash { animation: realtime-pulse 1.1s ease-in-out; }
@keyframes realtime-pulse { 0% { transform: scale(1); box-shadow: 0 0 6px rgba(16,185,129,0.25); } 50% { transform: scale(1.35); box-shadow: 0 0 18px rgba(16,185,129,0.45); } 100% { transform: scale(1); box-shadow: 0 0 6px rgba(16,185,129,0.25); } }