/* Oléolécar · Notificaciones: línea de tiempo, avisos en directo y chat moderno */

/* ---------- Línea de tiempo del viaje ---------- */
.stp { --f: 0; list-style: none; margin: .7rem 0 .35rem; padding: 0; display: flex; position: relative; }
.stp::before, .stp::after { content: ''; position: absolute; top: .55rem; left: calc(50% / var(--n)); height: 3px; border-radius: 3px; }
.stp::before { right: calc(50% / var(--n)); background: #dbe5df; }
.stp::after { width: calc((100% - 100% / var(--n)) * var(--f)); background: linear-gradient(90deg, #9bd93c, #22b573); transform-origin: left; animation: tl-grow .9s cubic-bezier(.2,.8,.2,1) both; }
.stp--bad::after { background: #fda4af; }
@keyframes tl-grow { from { transform: scaleX(0); } }
.stp li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; position: relative; z-index: 1; min-width: 0; }
.stp li i { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; border: 3px solid #cfdad3; transition: all .3s; box-sizing: border-box; }
.stp li span { font-size: .68rem; font-weight: 700; color: #94a3b8; text-align: center; line-height: 1.15; max-width: 5.2rem; }
.stp li.is-done i { background: #22b573; border-color: #22b573; animation: tl-pop .45s calc(var(--i) * 90ms) cubic-bezier(.3,1.6,.5,1) both; }
.stp li.is-done span { color: #0b7a4b; }
.stp li.is-now i { border-color: #22b573; background: #fff; box-shadow: 0 0 0 0 rgba(34,181,115,.5); animation: tl-ping 1.8s ease-out infinite; }
.stp li.is-now span { color: #0f172a; }
.stp li.is-bad i { background: #f43f5e; border-color: #f43f5e; }
.stp li.is-bad span { color: #be123c; }
@keyframes tl-pop { from { transform: scale(.3); } }
@keyframes tl-ping { 0% { box-shadow: 0 0 0 0 rgba(34,181,115,.5); } 80%, 100% { box-shadow: 0 0 0 .55rem rgba(34,181,115,0); } }
.rq-card > .stp { margin: .2rem .4rem .9rem; }

/* ---------- Tarjeta con aviso nuevo ---------- */
[data-ref].has-new { position: relative; border-color: #34d399 !important; animation: new-glow 2.4s ease-in-out infinite; }
@keyframes new-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,181,115,0), 0 10px 26px -18px rgba(6,78,59,.5); } 50% { box-shadow: 0 0 0 4px rgba(34,181,115,.18), 0 14px 30px -16px rgba(6,78,59,.55); } }
.new-badge { position: absolute; top: -.7rem; right: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 99px; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(100deg, #16a34a, #22b573, #16a34a); background-size: 200% 100%; animation: nb-in .5s cubic-bezier(.3,1.5,.5,1) both, nb-shine 3s linear infinite; box-shadow: 0 8px 16px -8px rgba(6,78,59,.8); }
@keyframes nb-in { from { transform: translateY(8px) scale(.6); opacity: 0; } }
@keyframes nb-shine { to { background-position: -200% 0; } }
.chat-count { margin-left: .4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .35rem; border-radius: 99px; background: #ef4444; color: #fff; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; animation: nb-in .4s cubic-bezier(.3,1.6,.5,1) both; }
[data-ref].flash { animation: flash-card 1.4s ease; }
@keyframes flash-card { 0%, 100% { transform: none; } 20% { transform: scale(1.012); box-shadow: 0 0 0 6px rgba(34,181,115,.3); } }

/* ---------- «Novedades» ---------- */
.nf { margin: 1rem 0 .4rem; padding: .8rem; border-radius: 1.2rem; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid #bbf7d0; box-shadow: 0 18px 36px -26px rgba(6,78,59,.6); animation: nf-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nf-in { from { opacity: 0; transform: translateY(-8px); } }
.nf-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.nf-head h2 { font-size: 1rem; font-weight: 800; margin: 0; }
.nf-head .n { background: #16a34a; color: #fff; border-radius: 99px; font-size: .72rem; font-weight: 800; padding: .05rem .5rem; }
.nf-all { margin-left: auto; font-size: .76rem; font-weight: 700; color: #0b7a4b; background: none; border: 0; cursor: pointer; padding: .2rem .4rem; border-radius: .5rem; }
.nf-all:hover { background: #ecfdf5; }
.nf-live { position: relative; width: .6rem; height: .6rem; }
.nf-live i { position: absolute; inset: 0; border-radius: 50%; background: #22c55e; }
.nf-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: nf-ring 1.8s ease-out infinite; }
@keyframes nf-ring { to { transform: scale(3); opacity: 0; } }
.nf-item { width: 100%; display: flex; align-items: center; gap: .7rem; text-align: left; padding: .55rem .6rem; border: 0; border-radius: .9rem; background: transparent; cursor: pointer; font: inherit; animation: nf-item .45s calc(var(--i) * 70ms + 120ms) cubic-bezier(.2,.8,.2,1) both; transition: background .2s, transform .2s; }
@keyframes nf-item { from { opacity: 0; transform: translateX(-10px); } }
.nf-item:hover { background: #f0fdf4; transform: translateX(3px); }
.nf-ic { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #15803d; }
.nf--amber .nf-ic { background: #fef3c7; color: #b45309; } .nf--blue .nf-ic { background: #dbeafe; color: #1d4ed8; } .nf--rose .nf-ic { background: #ffe4e6; color: #be123c; }
.nf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nf-t strong { font-size: .9rem; } .nf-t small { color: #64748b; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-item time { flex: none; font-size: .72rem; color: #94a3b8; font-weight: 600; }
.np { display: flex; align-items: center; gap: .8rem; margin: .8rem 0; padding: .7rem .9rem; border-radius: 1.1rem; background: linear-gradient(100deg, #ecfdf5, #f0f9ff); border: 1px dashed #86efac; }
.np > div { flex: 1; min-width: 0; } .np strong { display: block; font-size: .9rem; } .np small { color: #64748b; font-size: .78rem; }
.np-ic { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #16a34a; box-shadow: 0 6px 14px -8px rgba(6,78,59,.6); animation: np-ring 2.6s ease-in-out infinite; }
@keyframes np-ring { 0%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(-14deg); } 16%, 32% { transform: rotate(14deg); } 40% { transform: rotate(0); } }
@media (max-width: 560px) { .np { flex-wrap: wrap; } .np .btn { width: 100%; } .nf-item time { display: none; } }

/* ---------- Avisos emergentes ---------- */
#olc-toasts { position: fixed; z-index: 9999; top: calc(var(--hdr-h, 4.5rem) + .6rem); right: 1rem; width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .6rem; pointer-events: none; }
.nt { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem .85rem; border-radius: 1.1rem; cursor: pointer; touch-action: pan-y;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 22px 44px -18px rgba(6,40,30,.55), 0 0 0 1px rgba(15,23,42,.05);
  animation: nt-in .55s cubic-bezier(.2,1.2,.3,1) both; transition: transform .3s, opacity .3s; }
@keyframes nt-in { from { opacity: 0; transform: translateX(2rem) scale(.92); } }
.nt.is-out { opacity: 0; transform: translateX(2.5rem) scale(.95); }
.nt-ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: #dcfce7; color: #15803d; }
.nt--amber .nt-ic { background: #fef3c7; color: #b45309; } .nt--blue .nt-ic { background: #dbeafe; color: #1d4ed8; } .nt--rose .nt-ic { background: #ffe4e6; color: #be123c; }
.nt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nt-txt strong { font-size: .92rem; color: #0f172a; } .nt-txt span { font-size: .8rem; color: #475569; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-x { flex: none; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: #94a3b8; cursor: pointer; padding: .1rem .35rem; border-radius: .5rem; }
.nt-x:hover { background: #f1f5f9; color: #475569; }
.nt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #9bd93c, #22b573); transform-origin: left; animation: nt-bar 7.5s linear forwards; }
.nt--amber .nt-bar { background: #f59e0b; } .nt--blue .nt-bar { background: #3b82f6; } .nt--rose .nt-bar { background: #f43f5e; }
.nt.is-hold .nt-bar { animation-play-state: paused; }
@keyframes nt-bar { to { transform: scaleX(0); } }
@media (max-width: 640px) { #olc-toasts { right: .75rem; left: .75rem; width: auto; } }

/* ---------- Chat moderno ---------- */
.chat-list { scroll-behavior: smooth; background: linear-gradient(180deg, #f8fafc, #f1f5f9); }
.chat-msg.is-new { animation: chat-pop .4s cubic-bezier(.2,1.3,.4,1) both; transform-origin: bottom left; }
.chat-msg.is-new.is-me { transform-origin: bottom right; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(10px) scale(.88); } }
.chat-msg.is-me .chat-bubble { background: linear-gradient(135deg, #22b573, #0b9f62); border-color: transparent; box-shadow: 0 8px 16px -10px rgba(6,78,59,.8); }
.chat-bubble { box-shadow: 0 6px 14px -12px rgba(15,23,42,.5); }
.chat-seen { align-self: flex-end; font-size: .7rem; font-weight: 700; color: #0b9f62; margin-right: .3rem; animation: chat-pop .35s both; }
.chat-typing { display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 .4rem .3rem; font-size: .78rem; font-weight: 600; color: #64748b; animation: chat-pop .3s both; }
.chat-typing[hidden] { display: none; }
.chat-dots { display: inline-flex; gap: .2rem; padding: .35rem .5rem; border-radius: 99px; background: #fff; border: 1px solid #e2e8f0; }
.chat-dots b { width: .38rem; height: .38rem; border-radius: 50%; background: #94a3b8; animation: chat-dot 1.1s ease-in-out infinite; }
.chat-dots b:nth-child(2) { animation-delay: .15s; } .chat-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.28rem); opacity: 1; } }
.chat-form .input { border-radius: 99px; transition: box-shadow .25s, border-color .25s; }
.chat-form .input:focus { border-color: #22b573; box-shadow: 0 0 0 4px rgba(34,181,115,.18); }
.chat-form .btn { border-radius: 50%; width: 2.8rem; height: 2.8rem; padding: 0; transition: transform .2s; }
.chat-form .btn:hover { transform: scale(1.08) rotate(-8deg); } .chat-form .btn:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .stp::after, .stp li i, .new-badge, .nf, .nf-item, .nt, .nt-bar, .np-ic, .chat-msg.is-new, .chat-seen, .chat-typing, .chat-dots b, [data-ref].has-new, [data-ref].flash, .nf-live::after { animation: none !important; }
  .nt-bar { display: none; }
}