/* ==========================================================================
   ticonline | ilustración de la página «Control de flotas»
   El panel de equipos, las normas que se aplican y la localización y bloqueo de un equipo perdido.
   ========================================================================== */

.mk-fleet { left: 0; top: 0; width: 60%; }
.mk-fleet__body { display: grid; gap: 3.6cqw; padding: 4.6cqw; }
.mk-fleet__count { margin: 0; font-size: 3.4cqw; color: var(--tile-muted); font-variant-numeric: tabular-nums; }
.mk-fleet__count b { color: var(--tile-ink); font-weight: 600; }
.mk-devs { display: grid; gap: 2.6cqw; }
.mk-dev { display: flex; align-items: center; gap: 2.6cqw; padding: 3cqw 3.4cqw; background: #fff; border: 1px solid var(--tile-line); border-radius: 2.8cqw; font-size: 3.4cqw; }
.mk-dev svg { flex: none; width: 4.6cqw; height: 4.6cqw; color: var(--tile-muted); }
.mk-dev > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-pol { right: 0; top: 6%; width: 46%; }
.mk-pol__list { display: grid; gap: 2.6cqw; padding: 4cqw; }
.mk-pol__list li { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.6cqw 3cqw; background: #fff; border: 1px solid var(--tile-line); border-radius: 2.4cqw; font-size: 3.7cqw; line-height: 1.25; }
.mk-tg { position: relative; flex: none; width: 9cqw; height: 5.2cqw; padding: 0.6cqw; background: #2f5fa8; border-radius: 99px; }
.mk-tg b { display: block; width: 4cqw; height: 4cqw; margin-left: auto; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(31, 20, 13, 0.3); }

.mk-loc { right: 0; bottom: 0; width: 58%; }
.mk-loc__row { display: flex; align-items: center; gap: 4cqw; }
.mk-map {
  position: relative; flex: none; width: 30cqw; aspect-ratio: 1; overflow: hidden; border-radius: 3cqw;
  background:
    linear-gradient(rgba(248, 238, 226, 0.1) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(90deg, rgba(248, 238, 226, 0.1) 1px, transparent 1px) 0 0 / 25% 25%,
    #2a1b12;
}
.mk-pin { position: absolute; left: 56%; top: 46%; width: 4.6cqw; height: 4.6cqw; margin: -2.3cqw 0 0 -2.3cqw; background: var(--img-accent); border-radius: 50%; }
.mk-pin::after { content: ""; position: absolute; inset: -1.6cqw; border: 2px solid var(--img-accent); border-radius: 50%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mk-pin::after { animation: mk-ping 1.8s var(--ease) infinite; }
  @keyframes mk-ping { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(1.9); } }
}
.mk-loc__info { display: grid; gap: 1cqw; justify-items: start; min-width: 0; }
.mk-loc__info b { font-size: max(0.875rem, 3.8cqw); font-weight: 500; }
.mk-loc__info > span { font-size: max(0.75rem, 2.8cqw); color: var(--img-muted); }
.mk-lock { display: inline-grid; margin-top: 1.6cqw; background: #6a93d6; color: #0a1220; border-radius: 99px; font-size: max(0.75rem, 3cqw); font-weight: 500; }
.mk-lock > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: 1.4cqw 3.6cqw; white-space: nowrap; }
.mk-lock .b { opacity: 1; }
.mk-lock .a { opacity: 0; }
.mk-lock svg { width: 3.2cqw; height: 3.2cqw; }

@media (max-width: 860px) {
  .mk-fleet { width: 56%; }
  .mk-pol { width: 44%; }
  .mk-loc { width: 80%; }
}