/* RASTREO-CLIENTES-MAPA-v1. Comparte variables y botones de rastreo.css. */
.rcm-root { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 100%; box-sizing: border-box; color: var(--texto, #1e293b); background: var(--gris-light, #f1f5f9); font: inherit; }
.rcm-cabecera h2 { margin: 0 0 4px; font-size: 20px; color: var(--azul-dark, #0f2560); }
.rcm-cabecera p { margin: 0; font-size: 14px; color: #475569; }
.rcm-filtros { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; border-radius: var(--radio, 10px); background: #fff; border: 1px solid var(--borde, #e2e8f0); }
.rcm-filtro-ayuda { flex-basis: 100%; margin: 0; font-size: 13px; color: #475569; }
.rcm-filtros label, .rcm-selector { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; min-width: 150px; }
.rcm-filtros input, .rcm-filtros select, .rcm-selector select { font: inherit; color: inherit; background: #fff; border: 1px solid #94a3b8; border-radius: 7px; padding: 9px; min-height: 44px; box-sizing: border-box; max-width: 100%; }
.rcm-filtros select, .rcm-selector select { cursor: pointer; }
.rcm-root :focus-visible { outline: 3px solid var(--azul-light, #2b5cc3); outline-offset: 2px; }
.rcm-root button { min-height: 44px; cursor: pointer; }
.rcm-estado, .rcm-personas-aviso, .rcm-mapa-estado { font-size: 14px; line-height: 1.5; }
.rcm-estado button, .rcm-personas-aviso button, .rcm-mapa-estado button, .rcm-historial button { margin-left: 10px; }
.rcm-personas-aviso:empty, .rcm-mapa-estado:empty { display: none; }
.rcm-leyenda { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.rcm-leyenda span { display: inline-flex; gap: 7px; align-items: center; }
.rcm-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.rcm-verde { background: #15803d; }
.rcm-gris { background: #64748b; }
.rcm-cuerpo { display: flex; gap: 14px; align-items: stretch; flex: 1; min-height: 460px; }
.rcm-vista { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rcm-mapa { flex: 1; min-height: 380px; border: 1px solid var(--borde, #e2e8f0); border-radius: var(--radio, 10px); background: #e2e8f0; overflow: hidden; }
.rcm-detalle { width: min(440px, 42%); padding: 16px; background: #fff; border: 1px solid var(--borde, #e2e8f0); border-radius: var(--radio, 10px); box-sizing: border-box; overflow-wrap: anywhere; }
.rcm-detalle[hidden] { display: none; }
.rcm-datos h3 { margin: 14px 0; font-size: 18px; }
.rcm-datos dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; font-size: 13px; }
.rcm-datos dt { color: #475569; margin-bottom: 3px; }
.rcm-datos dd { margin: 0; font-weight: 600; }
.rcm-historial { font-size: 13px; line-height: 1.5; }
/* F5a · historia cronológica y mapa de trabajo amplio. */
.rcm-cuerpo { min-height: 620px; }
.rcm-mapa { min-height: 560px; box-shadow: 0 3px 14px #0f172a0a; }
.rcm-detalle { width: min(410px, 38%); max-height: 780px; overflow-y: auto; box-shadow: 0 3px 14px #0f172a0a; }
.rcm-identidad, .rcm-resumen { color: #475569; font-size: 12px; line-height: 1.6; }
.rcm-historial h4 { font-size: 16px; margin: 22px 0 6px; }
.rcm-evento { --evento: #2563eb; margin: 14px 0; padding: 14px; border: 1px solid #e2e8f0; border-left: 4px solid var(--evento); border-radius: 10px; background: #f8fafc; }
.rcm-evento strong { display: block; color: var(--evento); font-size: 14px; }
.rcm-evento p { margin: 7px 0; }
.rcm-entrego { --evento: #15803d; background: #f0fdf4; }
.rcm-no_compro { --evento: #9a3412; background: #fff7ed; }
.rcm-novedad { --evento: #b91c1c; background: #fef2f2; }
.rcm-evento .rcm-tiempo, .rcm-evento .rcm-llegada { font-weight: 600; }
.rcm-historial .rcm-evento button { margin: 6px 0 0; width: 100%; border: 1px solid #cbd5e1; background: #fff; color: #1e3a8a; border-radius: 7px; font: inherit; }
.rcm-recorrido-estado { padding: 10px 12px; border-radius: 8px; background: #eff6ff; color: #1e3a8a; font-size: 13px; line-height: 1.5; }
.rcm-recorrido-estado:empty { display: none; }
@media (max-width: 850px) { .rcm-detalle { width: 100%; max-height: none; } .rcm-mapa { min-height: 460px; } }
@media (max-width: 850px) {
  .rcm-cuerpo { flex-direction: column; }
  .rcm-detalle { width: 100%; }
  .rcm-mapa { flex: none; height: 380px; }
}
@media (max-width: 480px) {
  .rcm-root { padding: 10px; }
  .rcm-filtros { gap: 10px; padding: 10px; }
  .rcm-filtros label { flex: 1 1 130px; min-width: 0; }
  .rcm-datos dl { grid-template-columns: 1fr; }
}