/* Alertas y ajustes de sonido del vendedor. Usa los tokens de la marca. */
.rv-alert-wrap { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 1200; display: flex; justify-content: center; pointer-events: none; }
.rv-alert-wrap:empty { display: none; }
.rv-alert { pointer-events: auto; width: min(100%, 520px); background: var(--card, #fff); color: var(--fg, #18212F); border: 2px solid var(--rv-blue, #2463D4); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(24,33,47,.22); animation: rvAlertIn .25s ease-out; }
.rv-alert-h { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.rv-alert-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rv-lime, #DDEA32); box-shadow: 0 0 0 3px var(--rv-blue, #2463D4); animation: rvPulse 1.4s ease-in-out infinite; }
.rv-alert p { margin: 6px 0; }
.rv-alert .row-actions { margin-top: 10px; }
.rv-alert-quiet { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-width: 1px; border-color: var(--line, #D9DFEA); box-shadow: 0 4px 14px rgba(24,33,47,.12); padding: 8px 12px; }
.rv-alert-note { font-size: 13px; }
.tone-set { border: 1px solid var(--line, #D9DFEA); border-radius: 12px; padding: 8px 12px; margin: 12px 0; }
.tone-set legend { padding: 0 6px; font-weight: 600; }
.tone { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.notif-devs { list-style: none; margin: 0; padding: 0; }
.notif-devs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line, #D9DFEA); }
input[type=range] { width: 100%; min-height: 44px; }
@keyframes rvAlertIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rvPulse { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .rv-alert, .rv-alert-dot { animation: none; } }

.rv-flash { outline: 3px solid var(--rv-blue, #2463D4); outline-offset: 3px; border-radius: 12px; transition: outline-color .3s; }
.rv-alert-wrap.rv-quiet { top: auto; bottom: 12px; }
.rv-alert-wrap.rv-enable { bottom: 68px; z-index: 1190; }

/* ---------- Avatar compartido ---------- */
.rav { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; overflow: hidden; background: var(--rv-blue-soft, #EAF1FD); color: var(--rv-blue, #2463D4); font-weight: 700; font-size: calc(var(--s, 40px) * .38); line-height: 1; }
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Tarjetas de aviso del comprador (entrada animada) ---------- */
.rv-cards { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.rv-card { pointer-events: auto; width: min(100%, 520px); display: flex; align-items: center; gap: 10px; background: var(--card, #fff); color: var(--fg, #18212F); border: 1px solid var(--rv-blue, #2463D4); border-radius: 16px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(24,33,47,.18); }
.rv-card-ic { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--rv-blue-soft, #EAF1FD); flex: none; }
.rv-card-t { flex: 1; min-width: 0; }
.rv-card-x { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 22px; color: var(--muted, #586475); cursor: pointer; border-radius: 12px; }
.rv-in { animation: rvCardIn 220ms ease-out both; }
.rv-out { animation: rvCardOut 180ms ease-in both; }
@keyframes rvCardIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes rvCardOut { to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .rv-in { animation: rvFade 120ms linear both; } .rv-out { animation: none; opacity: 0; } @keyframes rvFade { from { opacity: 0; } } }

/* ---------- Centro de avisos ---------- */
.nc-tabs { display: flex; gap: 8px; margin: 12px 0; overflow-x: auto; }
.nc-tabs button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line, #D9DFEA); background: var(--card, #fff); color: var(--fg, #18212F); font: inherit; cursor: pointer; white-space: nowrap; }
.nc-tabs button[aria-pressed="true"] { background: var(--rv-blue, #2463D4); border-color: var(--rv-blue, #2463D4); color: #fff; }
.nc-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--rv-lime, #DDEA32); color: #18212F; font-size: 12px; font-weight: 700; }
.nc-day { margin: 16px 0 6px; font-weight: 700; color: var(--muted, #586475); font-size: 14px; }
.nc-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--line, #D9DFEA); touch-action: pan-y; }
.nc-bg { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 20px; gap: 8px; background: var(--rv-blue-soft, #EAF1FD); color: var(--rv-blue, #2463D4); font-weight: 600; }
.nc-fg { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 8px; background: var(--card, #fff); transition: transform .18s ease; will-change: transform; }
.nc-fg.dragging { transition: none; }
.nc-fg.unread .nc-t { font-weight: 700; }
.nc-main { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.nc-t { display: block; }
.nc-b { display: block; color: var(--muted, #586475); font-size: 14px; }
.nc-time { display: block; color: var(--muted, #586475); font-size: 12px; margin-top: 2px; }
.nc-arch { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line, #D9DFEA); margin-left: 6px; }
.nc-x { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted, #586475); cursor: pointer; border-radius: 12px; font: inherit; font-size: 13px; }
.nc-snack { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1250; display: flex; justify-content: center; pointer-events: none; }
.nc-snack > div { pointer-events: auto; width: min(100%, 520px); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #18212F; color: #fff; border-radius: 14px; padding: 8px 8px 8px 16px; }
.nc-snack button { min-height: 44px; border: 0; background: transparent; color: var(--rv-lime, #DDEA32); font: inherit; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 0 12px; }
@media (prefers-reduced-motion: reduce) { .nc-fg { transition: none; } }

/* ---------- Perfil del comprador ---------- */
.pf-head { display: flex; align-items: center; gap: 16px; margin: 8px 0; }
.pf-row { display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px 12px; scroll-snap-type: x proximity; }
.pf-opt { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 6px; min-width: 76px; min-height: 44px; padding: 6px; border: 0; background: transparent; color: var(--fg, #18212F); font: inherit; font-size: 13px; cursor: pointer; border-radius: 16px; }
.pf-opt .rav { outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.pf-opt.on .rav { outline-color: var(--rv-blue, #2463D4); }
.pf-opt.on span:last-child { font-weight: 700; color: var(--rv-blue, #2463D4); }
.pf-opt:focus-visible { outline: 3px solid var(--rv-blue, #2463D4); }


/* Línea de tiempo vertical (mismo componente del comprador): círculos, conector fino, checks y paso actual destacado */
.tlh-wrap.tlh-v { overflow: visible; padding: 4px 0 6px; }
.tlh-v .tlh { list-style: none; margin: 0; padding: 0; display: block; min-width: 0; }
.tlh-v .tlh li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "t b s" "t n s"; align-items: center; column-gap: 12px; row-gap: 0; min-height: 52px; padding: 9px 0; text-align: left; color: var(--rv-ink-2, #586475); }
.tlh-v .tlh li::before { content: ""; position: absolute; left: 15px; width: 2px; top: 0; bottom: 0; right: auto; height: auto; background: var(--rv-line, #D9DFEA); border-radius: 0; display: block; z-index: 0; }
.tlh-v .tlh li:first-child::before { top: 50%; } .tlh-v .tlh li:last-child::before { bottom: 50%; }
.tlh-v .tlh li::after { display: none; }
.tlh-v .tlh li.tlh-done::before, .tlh-v .tlh li.tlh-current::before { background: var(--rv-blue, #2463D4); }
.tlh-v .tlh li.tlh-current::before { background: linear-gradient(var(--rv-blue, #2463D4) 50%, var(--rv-line, #D9DFEA) 50%); }
.tlh-v .tlh li.tlh-current:first-child::before { background: linear-gradient(var(--rv-blue, #2463D4) 0 0) top/100% 0 no-repeat, var(--rv-line, #D9DFEA); }
.tlh-v .tlh-tile { grid-area: t; position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #C5CCDA; color: #fff; box-shadow: none; animation: none; transform: none; }
.tlh-v .tlh-tile svg { width: 16px; height: 16px; stroke-width: 2.4; animation: none; }
.tlh-v .tlh-done .tlh-tile { background: var(--rv-blue, #2463D4); border-color: var(--rv-blue, #2463D4); color: #fff; animation: none; }
.tlh-v .tlh-current .tlh-tile { background: #fff; border-color: #F0952D; color: #F0952D; transform: none; box-shadow: 0 0 0 4px rgba(240,149,45,.18); animation: none; }
.tlh-v .tlh li b { grid-area: b; font-size: 16px; font-weight: 600; max-width: none; line-height: 1.25; color: var(--rv-ink, #18212F); }
.tlh-v .tlh li:not(.tlh-done):not(.tlh-current) b { color: var(--rv-ink-2, #586475); font-weight: 500; }
.tlh-v .tlh li small { grid-area: s; justify-self: end; font-size: 14px; color: var(--rv-ink-2, #586475); }
.tlh-v .tlh li.tlh-current small { color: #D9822B; font-weight: 700; }
.tlh-v .tlh-note { grid-area: n; justify-self: start; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .tlh-v .tlh li { animation: none; } }

/* ---------- Cuenta del comprador: pedidos compactos y perfil ---------- */
.acc-ord { padding: 0; overflow: hidden; }
.acc-det > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; }
.acc-det > summary::-webkit-details-marker { display: none; }
.acc-main { display: grid; gap: 2px; min-width: 0; } .acc-main .muted { font-size: 13px; }
.acc-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.acc-det[open] > summary { border-bottom: 1px solid var(--rv-line, #D9DFEA); }
.acc-body { padding: 12px 16px 16px; }
.acc-tl { margin: 8px 0 12px; }
.pf-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.pf-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border: 1px solid var(--rv-line, #D9DFEA); border-radius: 16px; background: var(--card, #fff); color: inherit; text-decoration: none; }
.pf-card .pf-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--rv-blue-soft, #EAF1FD); color: var(--rv-blue, #2463D4); flex: none; }
.pf-card .pf-t { display: grid; font-size: 14px; color: var(--rv-ink-2, #586475); } .pf-card .pf-t b { font-size: 24px; line-height: 1.1; color: var(--rv-ink, #18212F); }
.pf-list { border: 1px solid var(--rv-line, #D9DFEA); border-radius: 16px; background: var(--card, #fff); overflow: hidden; margin-bottom: 14px; }
.pf-list a, .pf-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--rv-line, #D9DFEA); background: transparent; color: inherit; font: 500 16px inherit; text-decoration: none; text-align: left; cursor: pointer; }
.pf-list > :last-child { border-bottom: 0; }
.pf-list svg { flex: none; color: var(--rv-ink-2, #586475); } .pf-list .pf-go { margin-left: auto; }
.pf-now { border: 1px solid var(--rv-line, #D9DFEA); border-radius: 16px; background: var(--card, #fff); padding: 12px 16px; margin-bottom: 14px; }
.pf-now-h { display: flex; justify-content: space-between; align-items: center; } .pf-now-h a { color: var(--rv-blue, #2463D4); font-weight: 600; text-decoration: none; }
.pf-prog { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; text-align: center; font-size: 12px; color: var(--rv-ink-2, #586475); }
.pf-prog span { position: relative; display: grid; justify-items: center; gap: 6px; }
.pf-prog span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C5CCDA; background: #fff; position: relative; z-index: 1; }
.pf-prog span::after { content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: #C5CCDA; }
.pf-prog span:first-child::after { display: none; }
.pf-prog span.on::before { background: var(--rv-blue, #2463D4); border-color: var(--rv-blue, #2463D4); }
.pf-prog span.on::after { background: var(--rv-blue, #2463D4); }
.pf-prog span.cur::before { background: #fff; border-color: var(--rv-blue, #2463D4); box-shadow: 0 0 0 4px rgba(36,99,212,.18); }
.pf-prog span.cur, .pf-prog span.on { color: var(--rv-ink, #18212F); font-weight: 600; }
.pf-av { margin-bottom: 14px; }
.pf-av > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 8px 16px; cursor: pointer; font-weight: 600; list-style: none; border: 1px solid var(--rv-line, #D9DFEA); border-radius: 16px; background: var(--card, #fff); }
.pf-av > summary::-webkit-details-marker { display: none; }
.pf-av[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pf-av-body { padding: 8px 12px 16px; border: 1px solid var(--rv-line, #D9DFEA); border-top: 0; border-radius: 0 0 16px 16px; background: var(--card, #fff); }

/* Campana: fila descartable dentro del menú */
.menu .nc-row { margin: 0 -2px; }
.menu .nc-fg { padding: 6px 4px; gap: 4px; }
.menu .nc-fg .notif { flex: 1; min-width: 0; text-align: left; }
.menu .nc-x { width: 44px; flex: none; justify-content: center; }
.nc-panel { padding-bottom: 24px; }

/* El recordatorio "pedidos por atender" no tapa la barra inferior ni lo que esté abierto encima (hoja "Más", diálogos, panel de notificaciones). */
.rv-alert-wrap.rv-quiet:not(.rv-enable) { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
body:has(#bottomNav:not([hidden])) .rv-alert-wrap.rv-quiet:not(.rv-enable) { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body:has(#bottomNav:not([hidden])) .rv-alert-wrap.rv-quiet:not(.rv-enable) { bottom: 12px; } }
body:has(#moreSheet:not([hidden])) .rv-alert-wrap.rv-quiet,
body:has(dialog[open]) .rv-alert-wrap.rv-quiet,
body:has(.np-panel.np-in) .rv-alert-wrap.rv-quiet { display: none; }
/* Si ambos avisos están a la vista, la tarjeta de activación sube para no encimarse con el recordatorio. */
body:has(.rv-alert-wrap:not(.rv-enable) .rv-alert-quiet) .rv-alert-wrap.rv-enable { bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body:has(.rv-alert-wrap:not(.rv-enable) .rv-alert-quiet) .rv-alert-wrap.rv-enable { bottom: 76px; } }

/* Botón para ocultar el recordatorio de pedidos por atender */
.rv-alert-quiet .rv-alert-x { flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; background: transparent; color: var(--rv-ink-2, #586475); font-size: 24px; line-height: 1; border-radius: 50%; cursor: pointer; }
.rv-alert-quiet .rv-alert-x:hover { background: var(--rv-surface, #F4F6FA); }

/* Avance con más etapas (reparto): columnas según el número de pasos y texto más compacto */
.pf-prog { grid-template-columns: repeat(var(--n, 4), 1fr); }
.pf-prog.pf-n { font-size: 10px; margin-inline: -8px; }
.pf-prog.pf-n span { min-width: 0; overflow-wrap: normal; word-break: keep-all; }

/* Seguimiento del pedido: el paso actual parpadea en amarillo limón con el ícono de su fase (flama, moto con persona, casa) */
@keyframes tl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pf-prog span::before { width: 28px; height: 28px; }
.pf-prog span::after { top: 13px; }
.pf-prog span { position: relative; }
.pf-ic { position: absolute; top: 0; left: 50%; margin-left: -14px; width: 28px; height: 28px; z-index: 2; display: grid; place-items: center; pointer-events: none; color: #fff; }
.pf-prog span.cur .pf-ic { color: #18212F; }
.pf-prog span.cur::before { background: var(--rv-lime, #DDEA32); border-color: #B7C21A; box-shadow: 0 0 0 4px rgba(221,234,50,.35); animation: tl-blink 1.2s ease-in-out infinite; }
.pf-prog span.cur .pf-ic { animation: tl-blink 1.2s ease-in-out infinite; }
.tlh-wrap .tlh li.tlh-current .tlh-tile { background: var(--rv-lime, #DDEA32); border-color: #B7C21A; color: #18212F; box-shadow: 0 0 0 4px rgba(221,234,50,.35); animation: tl-blink 1.2s ease-in-out infinite; }
.tlh-wrap .tlh li.tlh-current small { color: #6F7800; }
@media (prefers-reduced-motion: reduce) { .pf-prog span.cur::before, .pf-prog span.cur .pf-ic, .tlh-wrap .tlh li.tlh-current .tlh-tile { animation: none; } }
.pf-ic svg { width: 19px; height: 19px; stroke-width: 2.1; }
.tlh-wrap .tlh-v .tlh-tile svg, .tlh-wrap.tlh-v .tlh-tile svg { width: 19px; height: 19px; }
.tlh-v .tlh-current .tlh-tile svg { stroke-width: 2.2; }

/* ======== Seguimiento con iconos ilustrados (comida / productos): neutro = pendiente · a color + halo = actual · icono + check = completado ======== */
.tli { display: block; width: 100%; height: 100%; overflow: visible; }
.tl-ck { position: absolute; right: -4px; bottom: -3px; width: 14px; height: 14px; display: none; line-height: 0; pointer-events: none; }
.tlh-done .tl-ck, .pf-prog span.on .tl-ck { display: block; }
.tlh-tile:has(.a-check) .tl-ck, .pf-ico:has(.a-check) .tl-ck { display: none; }   /* los iconos con su propio check (aceptado, listo, recogido, entregado) no llevan otro */
/* el check propio solo cuenta cuando la etapa ya terminó */
.tlh-current .a-check, .tlh-todo .a-check, .pf-prog span.cur .a-check, .pf-prog span:not(.on):not(.cur) .a-check { display: none; }
.tlh-todo .tli, .pf-prog span:not(.on):not(.cur) .tli { filter: grayscale(1) opacity(.42); }

/* Detallado: iconos de 38 px, sin círculo de fondo */
.tlh-tile.has-ico { background: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; width: 38px !important; height: 38px !important; min-width: 38px; position: relative; padding: 0 !important; color: inherit; transform: none !important; display: block !important; }
.tlh-v .tlh li { grid-template-columns: 38px minmax(0, 1fr) auto !important; }
.tlh-v .tlh li::before { left: 18px !important; }
.tlh-wrap:not(.tlh-v) .tlh-tile.has-ico { width: 44px !important; height: 44px !important; }
.tlh-tile.has-ico svg.tli { width: 100%; height: 100%; stroke-width: 2; }
.tlh-tile.has-ico::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(221, 234, 50, .55); opacity: 0; }
.tlh-current .tlh-tile.has-ico::before { opacity: 1; animation: tl-halo 1.6s ease-in-out infinite; }
.tlh-current .tlh-tile.has-ico .tli { position: relative; z-index: 1; }
.tlh li.tlh-current small { color: #6F7800; font-weight: 700; }

/* Compacto: iconos de 30 px; el conector va solo entre iconos */
.pf-prog span::before { display: none !important; }
.pf-prog span::after { top: 15px !important; right: calc(50% + 19px) !important; width: calc(100% - 38px) !important; }
.pf-prog span { position: relative; }
.pf-ico { position: relative; z-index: 1; width: 30px; height: 30px; display: block; font-style: normal; }
.pf-ico::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(221, 234, 50, .55); opacity: 0; }
.pf-prog span.cur .pf-ico::before { opacity: 1; animation: tl-halo 1.6s ease-in-out infinite; }
.pf-ico .tli { position: relative; z-index: 1; }
.pf-prog span.cur { color: var(--rv-ink, #18212F); font-weight: 700; }

/* ---- Efectos: SOLO la etapa actual se mueve (nada se anima en las demás) ---- */
@keyframes tl-halo { 0%, 100% { opacity: .95; } 50% { opacity: .25; } }
@keyframes tl-flame { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.96, 1.08) skewX(-3deg); } 60% { transform: scale(1.03, .96) skewX(2.5deg); } }
@keyframes tl-sparks { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@keyframes tl-road { to { stroke-dashoffset: -16; } }
@keyframes tl-ride { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.2px, -1px); } }
@keyframes tl-speed { 0%, 100% { opacity: .3; transform: translateX(3px); } 50% { opacity: 1; transform: translateX(-2px); } }
@keyframes tl-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-1.5deg); } }
@keyframes tl-pin { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(0); } }
@keyframes tl-draw { 0% { stroke-dashoffset: 16; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes tl-ping { 0% { transform: scale(.8); } 50% { transform: scale(1.15); } 100% { transform: scale(.8); } }
@keyframes tl-lid { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes tl-lidr { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes tl-tape { to { transform: rotate(360deg); } }
@keyframes tl-house { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes tl-drop { 0% { transform: translateY(-8px); opacity: 0; } 60% { transform: translateY(1.5px); opacity: 1; } 100% { transform: translateY(0); } }
@keyframes tl-pop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tl-stamp { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
.tli .a-flame, .tli .a-lidL, .tli .a-lidR, .tli .a-tape, .tli .a-pin, .tli .a-ping, .tli .a-bob, .tli .a-moto, .tli .a-lines, .tli .a-wheel, .tli .a-house, .tli .a-drop, .tli .a-check { transform-box: fill-box; transform-origin: center; }
.tli .a-flame { transform-origin: 50% 100%; } .tli .a-lidL { transform-origin: 100% 100%; } .tli .a-lidR { transform-origin: 0 100%; } .tli .a-house { transform-origin: 50% 100%; }
.tlh-current .a-flame, .pf-prog .cur .a-flame { animation: tl-flame 1.1s ease-in-out infinite; }
.tlh-current .a-sparks, .pf-prog .cur .a-sparks { animation: tl-sparks 1.1s ease-in-out infinite; }
.tlh-current .a-wheel, .pf-prog .cur .a-wheel { animation: tl-spin .7s linear infinite; }
.tlh-current .a-road, .pf-prog .cur .a-road { animation: tl-road .6s linear infinite; }
.tlh-current .a-moto, .pf-prog .cur .a-moto { animation: tl-ride .5s ease-in-out infinite; }
.tlh-current .a-lines, .pf-prog .cur .a-lines { animation: tl-speed .6s ease-in-out infinite; }
.tlh-current .a-bob, .pf-prog .cur .a-bob { animation: tl-bob 1.6s ease-in-out infinite; }
.tlh-current .a-pin, .pf-prog .cur .a-pin { animation: tl-pin 1.2s ease-in-out infinite; }
.tlh-current .a-ping, .pf-prog .cur .a-ping { animation: tl-ping 1.2s ease-in-out infinite; }
.tlh-current .a-lidL, .pf-prog .cur .a-lidL { animation: tl-lid 1.4s ease-in-out infinite; }
.tlh-current .a-lidR, .pf-prog .cur .a-lidR { animation: tl-lidr 1.4s ease-in-out infinite; }
.tlh-current .a-tape, .pf-prog .cur .a-tape { animation: tl-tape 2s linear infinite; }
.tlh-current .a-house, .pf-prog .cur .a-house { animation: tl-house 1.4s ease-in-out infinite; }
.tlh-current .a-drop, .pf-prog .cur .a-drop { animation: tl-drop 1.6s ease-in-out infinite; }
.tli .a-draw { stroke-dasharray: 16; stroke-dashoffset: 0; }
.tlh-current .a-draw, .pf-prog .cur .a-draw { animation: tl-draw 2.2s ease-in-out infinite; }
/* al completarse: el icono "salta" una vez y el check se sella */
.tlh-done .tli, .pf-prog span.on .tli { animation: tl-pop .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 60ms); }
.tlh-done .tl-ck svg, .pf-prog span.on .tl-ck svg { animation: tl-stamp .4s ease-out both; animation-delay: .3s; }
.tlh-done .a-check, .pf-prog span.on .a-check { animation: tl-stamp .4s ease-out both; animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .tli *, .tli, .tl-ck svg, .tlh-tile.has-ico::before, .pf-ico::before { animation: none !important; }
  .tlh-current .tlh-tile.has-ico::before, .pf-prog span.cur .pf-ico::before { opacity: 1; }
}

/* ===== Línea de tiempo: iconos más grandes, cada uno dentro de un círculo amarillo limón ===== */
:root { --tl-lime: #DDEA32; --tl-lime-soft: #F2F7B4; --tl-lime-ring: #B8C71A; }
.tlh-tile.has-ico, .pf-ico { box-sizing: border-box; border-radius: 50% !important; background: var(--tl-lime) !important; border: 2px solid var(--tl-lime-ring) !important; box-shadow: 0 3px 8px rgba(111, 120, 0, .22) !important; display: grid !important; place-items: center; }
.tlh-tile.has-ico { width: 68px !important; height: 68px !important; min-width: 68px; padding: 5px !important; }
.tlh-wrap:not(.tlh-v) .tlh-tile.has-ico { width: 78px !important; height: 78px !important; min-width: 78px; padding: 6px !important; }
.tlh-tile.has-ico svg.tli, .pf-ico svg.tli, body.pv .tlh-v .tlh-tile.has-ico svg.tli, .tlh-wrap .tlh-v .tlh-tile.has-ico svg.tli { width: 100% !important; height: auto !important; aspect-ratio: 1; transform: scale(1.12); }
.tlh-tile.has-ico { grid-template-columns: minmax(0, 1fr) !important; }   /* el dibujo ocupa más del círculo */
.pf-ico { width: 56px; height: 56px; padding: 4px; }
/* etapas por cumplir: círculo suave y gris; la actual lleva el halo que late */
.tlh-todo .tlh-tile.has-ico, .pf-prog span:not(.on):not(.cur) .pf-ico { background: var(--tl-lime-soft) !important; border-color: #DCE58A !important; box-shadow: none !important; }
.tlh-todo .tli, .pf-prog span:not(.on):not(.cur) .tli { filter: grayscale(1) opacity(.5); }
.tlh-tile.has-ico::before { inset: -6px; background: rgba(221, 234, 50, .5); z-index: -1; }
.pf-ico::before { inset: -6px; z-index: -1; }
.tlh-current .tlh-tile.has-ico, .pf-prog span.cur .pf-ico { border-color: #8E9B00 !important; box-shadow: 0 4px 14px rgba(142, 155, 0, .4) !important; }
/* conectores centrados con el nuevo tamaño */
.tlh-wrap:not(.tlh-v) .tlh li::before, .tlh-wrap:not(.tlh-v) .tlh li::after { top: 37px !important; }
.tlh-v .tlh li { grid-template-columns: 68px minmax(0, 1fr) auto !important; column-gap: 14px; min-height: 80px; }
.tlh-v .tlh li::before { left: 33px !important; }
.tl-ck { right: -2px; bottom: -2px; }
.pf-prog span::after { top: 26px !important; right: calc(50% + 30px) !important; width: calc(100% - 60px) !important; }
@media (max-width: 600px) { .tlh-wrap:not(.tlh-v) .tlh-tile.has-ico { width: 70px !important; height: 70px !important; min-width: 70px; padding: 5px !important; } .tlh-wrap:not(.tlh-v) .tlh li::before, .tlh-wrap:not(.tlh-v) .tlh li::after { top: 33px !important; } .tlh { min-width: max(100%, calc(var(--n) * 96px)); } }

/* La nota de una etapa (p. ej. repartidor + folio) va debajo del título, nunca encima de la hora */
.tlh-v .tlh li small.tlh-note, body.pv .tlh-v .tlh li small.tlh-note { grid-area: n !important; justify-self: start; text-align: left; font-size: 13px; color: var(--rv-ink-2, #586475); overflow-wrap: anywhere; }

/* Seguimiento horizontal en móvil: íconos más chicos y textos alineados arriba, con la misma altura (2 líneas) para que todo quede en una fila ordenada */
@media (max-width: 600px) {
  .tlh-wrap:not(.tlh-v) .tlh { min-width: 100%; }
  .tlh-wrap:not(.tlh-v) .tlh li { min-width: 0; justify-content: flex-start; gap: 6px; padding: 0 1px; }
  .tlh-wrap:not(.tlh-v) .tlh-tile.has-ico { width: 46px !important; height: 46px !important; min-width: 46px; padding: 3px !important; }
  .tlh-wrap:not(.tlh-v) .tlh li b { display: flex; align-items: flex-start; justify-content: center; min-height: 2.4em; max-width: none; font-size: 11px; line-height: 1.2; font-weight: 600; overflow-wrap: break-word; word-break: normal; hyphens: none; }
  .tlh-wrap:not(.tlh-v) .tlh li small { font-size: 10.5px; }
  .tlh-wrap:not(.tlh-v) .tlh li::before, .tlh-wrap:not(.tlh-v) .tlh li::after { top: 22px; }
}
/* Seguimiento del pedido (tarjeta de Pedidos) en móvil: íconos más chicos y textos alineados arriba, todos a la misma altura */
@media (max-width: 600px) {
  .pf-prog.pf-n { margin-inline: -14px; font-size: 9.5px; letter-spacing: -.01em; line-height: 1.2; align-items: start; }
  .pf-prog.pf-n span { align-content: start; gap: 6px; }
  .pf-prog.pf-n .pf-ico { width: 40px; height: 40px; padding: 3px; }
  .pf-prog.pf-n span::after { top: 19px !important; right: calc(50% + 22px) !important; width: calc(100% - 44px) !important; }
  .pf-prog.pf-n .pf-ico::before { inset: -4px; }
}
@media (max-width: 600px) { .pf-prog.pf-n span { padding-inline: 2px; min-width: 0; } .pf-prog.pf-n span::after { right: calc(50% + 21px) !important; width: calc(100% - 42px) !important; } }

/* Administrador: el aviso de pendientes urgentes va abajo, sobre la barra de navegación, para no tapar el encabezado ni la lista. */
.rv-alert-wrap.rv-adm { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.rv-adm .rv-alert { padding: 10px 12px; }
.rv-adm .rv-alert-h { font-size: 16px; }
.rv-adm .rv-alert p { margin: 2px 0; font-size: 14px; }
.rv-adm .rv-alert .row-actions { margin-top: 6px; }
@media (min-width: 900px) { .rv-alert-wrap.rv-adm { bottom: 12px; } }
body:has(.rv-adm .rv-alert) .rv-alert-wrap.rv-enable { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body:has(.rv-adm .rv-alert) .rv-alert-wrap.rv-enable { bottom: 190px; } }
.rv-alert-slim { display: flex; align-items: center; gap: 8px; padding: 6px 10px !important; }
.rv-alert-slim b { flex: 1 1 auto; font-size: 15px; }
.rv-alert-slim .btn { min-height: 44px; padding: 8px 14px; }

/* Aviso interno (toast) en pantallas angostas o con letra grande: el texto ocupa todo el ancho y los botones pasan a una segunda fila (antes quedaba una columna de una palabra por línea). */
@media (max-width: 700px) {
  .rv-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic t x" "go go go"; align-items: start; column-gap: 10px; row-gap: 8px; padding: 12px; }
  .rv-card-ic { grid-area: ic; }
  .rv-card-t { grid-area: t; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
  .rv-card-x { grid-area: x; min-width: 44px; min-height: 44px; margin: -8px -6px 0 0; }
  .rv-card [data-go] { grid-area: go; width: 100%; justify-content: center; min-height: 44px; }
}