/* RASTREO-ENTREGAS-RUTAS-v2. Base v1 (E4). Comparte variables y botones de rastreo.css. */
.rer-root { display: flex; flex-direction: column; gap: 12px; padding: 16px; box-sizing: border-box; color: var(--texto, #1e293b); background: var(--gris-light, #f1f5f9); font: inherit; }
.rer-cabecera h2 { margin: 0 0 4px; font-size: 20px; color: var(--azul-dark, #0f2560); }
.rer-cabecera p { margin: 0; font-size: 14px; color: #475569; }
.rer-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; border-radius: var(--radio, 10px); background: #fff; border: 1px solid var(--borde, #e2e8f0); }
.rer-filtros label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; min-width: 150px; }
.rer-filtros input, .rer-filtros 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%; }
.rer-excel { margin-left: auto; }
.rer-root button { min-height: 44px; cursor: pointer; }
.rer-root button:disabled { cursor: not-allowed; opacity: .55; }
.rer-root :focus-visible { outline: 3px solid var(--azul-light, #2b5cc3); outline-offset: 2px; }
.rer-vistas { display: flex; flex-wrap: wrap; gap: 8px; }
.rer-vistas button[aria-pressed="true"] { background: var(--azul-dark, #0f2560); color: #fff; }
.rer-estado, .rer-mapa-estado { font-size: 14px; line-height: 1.5; }
.rer-estado button, .rer-mapa-estado button { margin-left: 10px; }
.rer-mapa-estado:empty { display: none; }
.rer-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rer-tarjeta { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; font: inherit; color: inherit; background: #fff; border: 1px solid var(--borde, #e2e8f0); border-radius: var(--radio, 10px); transition: border-color .15s, box-shadow .15s; }
.rer-tarjeta:hover { border-color: var(--azul-light, #2b5cc3); box-shadow: 0 2px 8px rgba(15, 37, 96, .12); }
.rer-tarjeta.rer-activa { border-color: var(--azul-light, #2b5cc3); box-shadow: 0 0 0 2px var(--azul-light, #2b5cc3); }
.rer-tarjeta strong { font-size: 16px; color: var(--azul-dark, #0f2560); overflow-wrap: anywhere; }
.rer-jorn { font-size: 12px; color: #475569; }
.rer-tarjeta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 6px 0 0; font-size: 12px; }
.rer-tarjeta dt { color: #475569; }
.rer-tarjeta dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.rer-tabla { overflow-x: auto; background: #fff; border: 1px solid var(--borde, #e2e8f0); border-radius: var(--radio, 10px); }
.rer-tabla table { border-collapse: collapse; text-align: left; width: 100%; font-size: 13px; }
.rer-tabla caption { text-align: left; font-weight: 600; padding: 12px 12px 6px; }
.rer-tabla th, .rer-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--borde, #e2e8f0); vertical-align: top; }
.rer-tabla th { color: var(--azul-dark, #0f2560); background: var(--azul-bg, #edf1f9); white-space: nowrap; }
.rer-vacio { margin: 0; padding: 16px; font-size: 14px; color: #475569; background: #fff; border: 1px dashed #94a3b8; border-radius: var(--radio, 10px); }
.rer-sub { margin-top: 14px; }
.rer-detalle { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--borde, #e2e8f0); border-radius: var(--radio, 10px); }
.rer-detalle[hidden] { display: none; }
.rer-detalle-cab { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.rer-detalle-titulo h3 { margin: 0 0 4px; font-size: 18px; }
.rer-detalle-titulo p { margin: 0; font-size: 13px; color: #475569; }
.rer-leyenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.rer-leyenda span { display: inline-flex; gap: 7px; align-items: center; }
.rer-nota { color: #475569; }
.rer-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.rer-mapa { height: 55vh; width: 100%; box-sizing: border-box; border: 1px solid var(--borde, #e2e8f0); border-radius: var(--radio, 10px); background: #e2e8f0; overflow: hidden; }
.rer-c-verde { background: #15803d; }
.rer-c-ambar { background: #d97706; }
.rer-c-rojo { background: #dc2626; }
.rer-c-gris { background: #64748b; }
.rer-pin, .rer-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 4px; box-sizing: border-box; border-radius: 13px; border: 2px solid #fff; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
@media (max-width: 850px) {
  .rer-excel { margin-left: 0; }
}
.rer-persona-mapa .rer-mapa { height: 65vh; }
.rer-persona-controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rer-persona-controles[hidden] { display: none; }
.rer-persona-controles label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.rer-dia { min-height: 44px; padding: 9px; font: inherit; color: inherit; background: #fff; border: 1px solid #94a3b8; border-radius: 7px; cursor: pointer; }
@media (max-width: 480px) {
  .rer-root { padding: 10px; }
  .rer-filtros { gap: 10px; padding: 10px; }
  .rer-filtros label { flex: 1 1 130px; min-width: 0; }
  .rer-tarjetas { grid-template-columns: 1fr; }
}
/* RASTREO-ENTREGAS-RUTAS-v3: ficha al tocar una entrega */
.rer-pin { cursor: pointer; }
.rer-ficha { font-size: 13px; line-height: 1.35; color: #1f2937; min-width: 210px; }
.rer-ficha strong { font-size: 14px; margin-right: 8px; }
.rer-ficha-estado { display: inline-block; padding: 1px 8px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 600; }
.rer-ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; }
.rer-ficha dt { color: #6b7280; }
.rer-ficha dd { margin: 0; font-weight: 600; }
.rer-ficha-aviso { margin: 8px 0 0; color: #b91c1c; font-weight: 600; }
/* RASTREO-RUTAS-VIVO-R1: avance diario y ruta comercial. */
.rer-filtros[hidden], .rer-mapa[hidden] { display: none; }
.rer-avance { margin-top: 8px; padding-top: 10px; border-top: 1px solid #e2e8f0; color: #334155; font-size: 13px; line-height: 1.6; }
.rer-avance b { display: block; color: var(--azul-dark, #0f2560); }
.rer-c-azul { background: #2563eb; }
.rer-comercial-mapa .rer-mapa { height: 68vh; min-height: 360px; }
.rer-comercial-mapa .rer-pin { min-height: 30px; height: 30px; min-width: 30px; }
.rer-comercial-mapa h4 { margin: 0 0 8px; }
.rer-comercial-mapa ul { margin: 0; padding-left: 24px; color: #475569; line-height: 1.7; }

/* R6: ocultar la vista comercial denegada. */
.rer-vistas [hidden] { display: none; }