/* T15 · Delivery · indicadores — del mockup aprobado kpis-delivery.html (sistema v7). Todo bajo la sección. */
#seccion-delivery-kpis { --linea:#E7E9EE; --tinta:#0F172A; --tinta-2:#475467; --tinta-3:#667085; --apagado-fondo:#EEF0F3;
  --marca:#3B5BFD; --serie-1:#3344BA; --serie-2:#4D70FF; --serie-3:#8EA5FA; --serie-gris:#C9CED8;
  --atencion:#B45309; --atencion-fondo:#FEF3C7; --problema:#B91C1C; --problema-fondo:#FEE2E2;
  max-width:1280px; font-family:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--tinta); }
#seccion-delivery-kpis * { box-sizing:border-box; }
#seccion-delivery-kpis .filtros { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
#seccion-delivery-kpis .filtros label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--tinta-3); min-width:0; }
#seccion-delivery-kpis .filtros select, #seccion-delivery-kpis .filtros input { font:inherit; font-size:14px; color:var(--tinta); padding:8px 10px;
  border:1px solid var(--linea); border-radius:10px; background:#fff; min-width:0; max-width:100%; }
#seccion-delivery-kpis .filtros input[type=date] { min-width:150px; }
#seccion-delivery-kpis .caja { margin:0 0 16px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.45; }
#seccion-delivery-kpis .caja.atencion { background:var(--atencion-fondo); color:var(--atencion); }
#seccion-delivery-kpis .caja.problema { background:var(--problema-fondo); color:var(--problema); }
#seccion-delivery-kpis .caja code { font-size:12px; }
#seccion-delivery-kpis .kpis { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-bottom:16px; font-variant-numeric:tabular-nums; }
#seccion-delivery-kpis .kpi { background:#fff; border:1px solid var(--linea); border-radius:12px; padding:12px 14px; min-width:0; }
#seccion-delivery-kpis .kpi span { display:block; font-size:12px; color:var(--tinta-3); }
#seccion-delivery-kpis .kpi b { display:block; font-size:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#seccion-delivery-kpis .kpi small { display:block; font-size:12px; color:var(--tinta-3); }
#seccion-delivery-kpis .nd { color:var(--tinta-3); font-weight:500; }
#seccion-delivery-kpis .kpi b .nd { display:inline; font-size:inherit; }
#seccion-delivery-kpis .rejilla { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; align-items:start; }
#seccion-delivery-kpis .tarjeta { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:18px; min-width:0; }
#seccion-delivery-kpis .tarjeta h2 { font-size:15px; font-weight:600; margin:0 0 12px; }
#seccion-delivery-kpis .c-7 { grid-column:span 7; } #seccion-delivery-kpis .c-5 { grid-column:span 5; } #seccion-delivery-kpis .c-6 { grid-column:span 6; }
#seccion-delivery-kpis .barras { display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:8px; border-bottom:1px solid var(--linea); }
#seccion-delivery-kpis .barras > div { flex:1; min-width:0; display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden; }
#seccion-delivery-kpis .barras > div i { display:block; min-height:1px; }
#seccion-delivery-kpis .eje { display:flex; gap:6px; font-size:11px; color:var(--tinta-3); margin-top:4px; font-variant-numeric:tabular-nums; }
#seccion-delivery-kpis .eje span { flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:visible; }
#seccion-delivery-kpis .leyenda { display:flex; gap:14px; font-size:12px; color:var(--tinta-2); margin-top:8px; flex-wrap:wrap; }
#seccion-delivery-kpis .leyenda i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
#seccion-delivery-kpis .pila { display:flex; height:14px; border-radius:999px; overflow:hidden; margin:6px 0 10px; background:var(--apagado-fondo); }
#seccion-delivery-kpis .tabla-wrap { border:1px solid var(--linea); border-radius:10px; overflow:hidden; }
#seccion-delivery-kpis table.t { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
#seccion-delivery-kpis .t th { text-align:left; font-weight:500; color:var(--tinta-3); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--linea); background:#fff; }
#seccion-delivery-kpis .t td { padding:9px 10px; border-bottom:1px solid var(--linea); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
#seccion-delivery-kpis .t td:first-child { white-space:normal; overflow-wrap:anywhere; }
#seccion-delivery-kpis .t .num { text-align:right; }
#seccion-delivery-kpis .t tbody tr:last-child td { border-bottom:0; }
#seccion-delivery-kpis .t tr.total td { font-weight:600; }
#seccion-delivery-kpis .w-en { width:17%; } #seccion-delivery-kpis .w-fa { width:16%; } #seccion-delivery-kpis .w-pd { width:15%; } #seccion-delivery-kpis .w-mi { width:19%; }
#seccion-delivery-kpis .punto { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
/* Mapa: Leaflet + OSM. z-index:0 + isolation encierran las capas de Leaflet (z-index 400–1000)
   para que nunca tapen el menú ni los modales del admin. El fondo liso queda solo de plan B. */
#seccion-delivery-kpis .mapa { position:relative; z-index:0; isolation:isolate; height:280px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#eef2f7,#e3e8f0); border:1px solid var(--linea); }
#seccion-delivery-kpis .mapa.con-calles { background:#f2efe9; }
#seccion-delivery-kpis .mapa-lienzo { position:absolute; inset:0; font:inherit; }
/* Solo el SVG del plan B (no los SVG internos de Leaflet). */
#seccion-delivery-kpis .mapa-lienzo > svg { width:100%; height:100%; display:block; }
#seccion-delivery-kpis .mapa-lienzo > svg circle { fill:var(--marca); fill-opacity:.6; }
/* Arranca a la derecha de los botones +/− de Leaflet (≈44 px) para no taparlos. */
#seccion-delivery-kpis .mapa-msg { position:absolute; left:54px; top:12px; z-index:1000; margin:0; width:max-content; max-width:calc(100% - 66px);
  padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.94); box-shadow:0 1px 3px rgba(15,23,42,.18); color:var(--tinta-2); font-size:12px; line-height:1.4; text-align:center; pointer-events:none; }
#seccion-delivery-kpis .mapa-sin-calles { top:auto; bottom:12px; color:var(--atencion); }
#seccion-delivery-kpis .mapa .leaflet-control-attribution { font-size:10px; max-width:100%; white-space:normal; }
#seccion-delivery-kpis .mapa .leaflet-popup-content { font-size:13px; font-variant-numeric:tabular-nums; margin:10px 12px; }
#seccion-delivery-kpis .vacio { margin:0; padding:12px; border-radius:10px; background:var(--apagado-fondo); color:var(--tinta-3); font-size:13px; line-height:1.45; }
#seccion-delivery-kpis .nota { font-size:12px; color:var(--tinta-3); margin:8px 0 0; line-height:1.45; }
#seccion-delivery-kpis > .nota { margin-top:16px; }
@media (max-width:760px) {
  #seccion-delivery-kpis .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #seccion-delivery-kpis .rejilla { grid-template-columns:1fr; }
  #seccion-delivery-kpis .c-7, #seccion-delivery-kpis .c-5, #seccion-delivery-kpis .c-6 { grid-column:1; }
  #seccion-delivery-kpis .sec { display:none; }
  #seccion-delivery-kpis .barras { gap:2px; } #seccion-delivery-kpis .eje { gap:2px; }
  #seccion-delivery-kpis .t td, #seccion-delivery-kpis .t th { padding:8px 6px; font-size:13px; }
  #seccion-delivery-kpis .mapa { height:220px; }
  #seccion-delivery-kpis .w-en { width:24%; } #seccion-delivery-kpis .w-pd { width:20%; } #seccion-delivery-kpis .w-mi { width:24%; }
  #seccion-delivery-kpis .filtros { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  #seccion-delivery-kpis .filtros label:first-child { grid-column:1 / -1; }
  #seccion-delivery-kpis .filtros input, #seccion-delivery-kpis .filtros select { width:100%; }
}