/* ============================================================
   Plataforma — cómo funciona cada parte, con su pantalla
   Filas alternadas (texto ↔ celular). Cada pantalla se anima al verse:
   el auto avanza en vivo, el historial se arma, llegan las alertas,
   el auto sale de la geocerca. El celular reutiliza los estilos de pasos.css.
   ============================================================ */

.plataforma { margin: 8px auto 0; }
.pl-filas { display: grid; gap: 96px; max-width: 1000px; margin: 0 auto; }
.pl-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.pl-fila:nth-child(even) .pl-tel { order: -1; }

/* Texto */
.pl-kick { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.pl-titulo { margin: 10px 0 14px; font: 800 30px/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: -.8px; color: var(--ink); }
.pl-p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 440px; }
.pl-datos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 440px; }
/* Lista: mismo tamaño, interlineado y color que el párrafo; punto azul en vez de palomita */
.pl-datos li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.pl-datos li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: calc(.8em - 3.5px); border-radius: 50%; background: var(--blue); }
.pl-nota { margin-top: 36px; text-align: center; font-size: 12px; color: #9ca3af; }

/* Celular (300 × 620 escalado con --escala) */
.pl-tel { display: flex; justify-content: center; }
.pl-marco { --alto: 560px; position: relative; height: var(--alto); width: calc(var(--alto) / 2); }

/* Banda azul superior (como en la plataforma) */
.pl-banda { position: relative; z-index: 2; margin: 0 10px; padding: 14px 16px 16px; border-radius: 18px; background: var(--blue); color: #fff; }
.pl-banda-est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: #ffffff26; font-size: 11.5px; font-weight: 600; }
.pl-banda-est i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.pl-banda-est i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: carril-ping 1.6s ease-out infinite; }
.pl-banda-nom { margin-top: 8px; font: 800 24px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.5px; }
.pl-banda-sel { display: flex; gap: 8px; }
.pl-banda-sel span { padding: 7px 11px; border-radius: 10px; background: #ffffff26; font-size: 12.5px; font-weight: 600; }
.pl-banda-datos { display: flex; gap: 16px; margin-top: 10px; }
.pl-banda-datos p { font-size: 11px; }
.pl-banda-datos b { font: 800 19px 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; }
.pl-banda-datos small { display: block; font-size: 10.5px; opacity: .8; }

/* Mapas */
.pl-mapa { display: block; width: 100%; }
.pant > .pl-mapa:not(.pl-mapa-corto) { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - 118px); }
.pant > .pl-mapa-geo { height: 100%; top: 0; }
.pl-mapa-corto { height: 112px; margin-top: -14px; }
.pl-cuadras rect { fill: #dde9f3; }
.pl-calle { fill: none; stroke: #fff; stroke-width: 8; }
.pl-ruta { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pl-pt { stroke: #fff; stroke-width: 2.5; }
.pl-pt-ini { fill: #18b26b; } .pl-pt-par { fill: #f5a524; } .pl-pt-fin { fill: #ef4444; }
.pl-zona { fill: #006aca14; stroke: var(--blue); stroke-width: 1.8; stroke-dasharray: 5 5; }
.pl-zona-t { fill: var(--blue); font: 700 12px Inter, sans-serif; text-anchor: middle; }
.pl-auto-pulso { fill: var(--blue); }
.pl-auto-punto { fill: var(--blue); stroke: #fff; stroke-width: 3.5; }

.pl-dir {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 16px;
  background: #fff; box-shadow: 0 10px 28px #0a223b1f, 0 0 0 1px #e8edf2;
}
.pl-dir-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sky); position: relative; }
.pl-dir-ico::after { content: ""; position: absolute; left: 11px; top: 8px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--blue); transform: rotate(-45deg); box-shadow: inset 0 0 0 3.5px var(--blue), inset 0 0 0 7px #fff; }
.pl-dir b { display: block; font-size: 13.5px; }
.pl-dir span { display: block; font-size: 11.5px; color: var(--muted); }

/* Historial: línea de tiempo que se arma */
.pl-linea { list-style: none; margin: 10px 18px 0; padding: 0; position: relative; }
.pl-linea::before { content: ""; position: absolute; left: 47px; top: 8px; bottom: 8px; width: 2px; background: #e3eaf1; }
.pl-linea li {
  position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 6px 0;
  opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease-out);
}
.pl-linea li.on { opacity: 1; transform: none; }
.pl-linea li::before { content: ""; position: absolute; left: 43px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #fff; }
.pl-linea .l-est::before { background: var(--ink); } .pl-linea .l-par::before { background: #f5a524; } .pl-linea .l-fin::before { background: #ef4444; }
.pl-linea time { font-size: 11px; font-weight: 700; color: var(--blue); padding-top: 2px; }
.pl-linea b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.pl-linea .l-par b { color: #b45309; }
.pl-linea span { display: block; font-size: 12px; color: var(--muted); }
.pl-linea li.actual p { background: #fff7e6; border-radius: 8px; margin: -3px -6px; padding: 3px 6px; }
.pl-play { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 10px; }
.pl-play-btn { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue); position: relative; }
.pl-play-btn::after { content: ""; position: absolute; left: 13px; top: 10px; border: 7px solid transparent; border-left: 10px solid #fff; border-right: 0; }
.pl-play-barra { flex: 1; height: 6px; border-radius: 6px; background: #e3eaf1; overflow: hidden; }
.pl-play-barra i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.pl-play-t { font-size: 12px; font-weight: 700; color: var(--blue); }

/* Alertas: llegan una tras otra */
.pl-pant-alertas { padding: 14px 16px 0; }
.pl-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-alertas li {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 16px;
  background: #fff; box-shadow: 0 6px 18px #0a223b14, 0 0 0 1px #e8edf2;
  opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .3s, transform .5s var(--ease-pop);
}
.pl-alertas li.on { opacity: 1; transform: none; }
.a-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--sky); }
.a-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-vel .a-ico { background: #fff1e6; } .a-vel .a-ico svg { stroke: #c2410c; }
.a-desc .a-ico { background: #fdecec; } .a-desc .a-ico svg { stroke: #dc2626; }
.pl-alertas b { display: block; font-size: 13px; color: var(--ink); }
.pl-alertas p span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }   /* no al recuadro del ícono */

/* Geocerca */
.pl-ficha-geo {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2;
  padding: 12px 15px; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px #0a223b1f, 0 0 0 1px #e8edf2;
}
.pl-ficha-geo > p:first-child { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pl-ficha-geo b { font-size: 15px; }
.pl-ficha-geo > p:first-child span { font-size: 12px; color: var(--muted); }
.pl-switch { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: #374151; }
.pl-switch i { width: 34px; height: 20px; border-radius: 999px; background: #d4dde6; position: relative; }
.pl-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; }
.pl-switch.on i { background: #18b26b; }
.pl-switch.on i::after { left: 16px; }
.pl-aviso-geo { top: 8px; }

@media (max-width: 860px) {
  .pl-filas { gap: 72px; }
  .pl-fila { grid-template-columns: 1fr; gap: 26px; }
  .pl-fila:nth-child(even) .pl-tel { order: 0; }   /* en móvil: siempre texto y luego su pantalla */
  .pl-marco { --alto: 460px; }
  .pl-titulo { font-size: 25px; }
  .pl-p, .pl-datos li { font-size: 15px; line-height: 1.55; }
  .pl-datos li::before { margin-top: calc(.775em - 3.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .plataforma *, .plataforma *::after { transition: none !important; animation: none !important; }
}

/* Etiqueta "Ejemplo" en los teléfonos de muestra (datos ilustrativos, no de un cliente) — decisión de Daniel 2026-10-12 */
.pl-marco::after {
  content: "Ejemplo"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 2px 10px; border-radius: 999px; background: #E6F5FE; color: #0364A0; border: 1px solid #B9E3FE;
  font: 600 11px/1.6 Inter, system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}