/* Estilos compartidos del demo Glow Toner Express */
:root {
  --ink: #111111; --ink-2: #3b3b3b; --ink-3: #7a7a7a; --line: #ececec; --bg: #f6f6f4; --card: #fff;
  --cyan: #00a3e0; --magenta: #ec008c; --yellow: #f5cf0a; --green: #0e9f5a; --green-bg: #e7f7ef;
  --red: #d93636; --red-bg: #fdecec; --amber: #b86e00; --amber-bg: #fff4dd;
  --r: 16px; --sh: 0 6px 24px rgba(0,0,0,.08); --sh-2: 0 14px 40px rgba(0,0,0,.16);
  --f: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
.mono { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: transform .12s, opacity .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-light { background: #f0f0ee; color: var(--ink); }
.btn-green { background: var(--green); color: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #f0f0ee; font-weight: 600; font-size: 13px; white-space: nowrap; }
.chip.on { background: var(--ink); color: #fff; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.b-green { background: var(--green-bg); color: var(--green); }
.b-amber { background: var(--amber-bg); color: var(--amber); }
.b-red { background: var(--red-bg); color: var(--red); }
.b-dark { background: var(--ink); color: #fff; }
.b-gray { background: #f0f0ee; color: var(--ink-2); }
.cmyk-bar { height: 4px; background: linear-gradient(90deg, var(--cyan) 0 33%, var(--magenta) 33% 66%, var(--yellow) 66%); }

/* Moto y pines del mapa */
.gt-moto { position: relative; }
.gt-moto-in { position: absolute; inset: 7px; border-radius: 50%; background: var(--c); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); border: 3px solid #fff; }
.gt-moto-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--c); opacity: .25; animation: gtPulse 1.8s infinite; }
.gt-moto-tag { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; font: 700 10px var(--f); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
@keyframes gtPulse { 0% { transform: scale(.7); opacity: .45; } 100% { transform: scale(1.6); opacity: 0; } }
.gt-pin { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); border: 3px solid #fff; }
.gt-pin img { width: 100%; height: 100%; border-radius: 9px; }
.gt-pin-dest { background: var(--ink); }
.gt-pin-bodega { background: #111; overflow: hidden; }
.leaflet-container { font-family: var(--f); background: #eef0f2; }

/* Avisos tipo notificación del teléfono */
#gt-avisos { position: fixed; top: 10px; left: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 10px; }
.gt-aviso { width: min(400px, 100%); display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 18px; padding: 12px 14px; box-shadow: var(--sh-2); font-size: 13px; line-height: 1.35; transform: translateY(-120%); opacity: 0; transition: .45s cubic-bezier(.2,.9,.3,1.2); }
.gt-aviso.in { transform: none; opacity: 1; }
.gt-aviso-ico { width: 36px; height: 36px; border-radius: 10px; background: #111; display: grid; place-items: center; font-size: 18px; flex: none; }
.gt-aviso-app { font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 1px; }

.skel { background: linear-gradient(90deg, #eee 0, #f6f6f6 40%, #eee 80%); background-size: 300% 100%; animation: skel 1.2s infinite; border-radius: 10px; }
@keyframes skel { to { background-position: -150% 0; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Mapa base más sobrio para que resalten rutas y motos */
.leaflet-tile-pane { filter: saturate(.55) contrast(1.02) brightness(1.03); }
.mapa-oscuro .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.4); }