/* PulseBot — Página de actualizaciones (/actualizaciones)
   Colores de la marca: blanco, gris y negro.
   Los ejemplos de Discord usan los colores propios de Discord (botones azul, gris, verde y rojo). */

/* ---------- Línea de tiempo (PC) ---------- */
.cl-tl { position: relative; margin-top: .75rem; }
.cl-tl::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: rgba(255,255,255,.12); }
.cl-tl-item { position: relative; display: block; padding: .7rem .75rem .7rem 2rem; border-radius: .9rem; border: 1px solid transparent; color: #a2a6ad; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.cl-tl-item::before { content: ''; position: absolute; left: 2px; top: 1.05rem; width: 11px; height: 11px; border-radius: 9999px; background: #08090c; border: 2px solid rgba(255,255,255,.3); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cl-tl-item:hover { color: #f7f7f8; background: rgba(255,255,255,.035); }
.cl-tl-item.is-active { color: #f7f7f8; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.cl-tl-item.is-active::before { background: #fff; border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); }

/* ---------- Fechas como botones (celular) ---------- */
.cl-chips { scrollbar-width: none; }
.cl-chips::-webkit-scrollbar { display: none; }
.cl-chip { flex-shrink: 0; border-radius: 9999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding: .45rem .9rem; font-size: .75rem; font-weight: 600; color: #a2a6ad; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cl-chip.is-active { background: #f7f7f8; border-color: #f7f7f8; color: #090a0d; }

/* ---------- Artículo y secciones ---------- */
.cl-article + .cl-article { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid rgba(255,255,255,.1); }
.cl-sec { margin-top: 2.5rem; }
.cl-sec p { line-height: 1.75; }
.cl-sec code, .cl-article code { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: .35rem; padding: .05rem .35rem; font-size: .85em; color: #f7f7f8; }
.cl-sec kbd { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px; border-radius: .35rem; padding: 0 .35rem; font-size: .8em; color: #f7f7f8; }
.cl-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 9999px; padding: .15rem .6rem; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cl-badge-new { background: #f7f7f8; color: #090a0d; }
.cl-badge-fix { border: 1px solid rgba(255,255,255,.25); color: #d7d9de; }
.cl-steps { counter-reset: step; }
.cl-steps li { counter-increment: step; position: relative; padding-left: 2.25rem; }
.cl-steps li::before { content: counter(step); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); font-size: .72rem; font-weight: 700; color: #f7f7f8; }
.cl-note li { position: relative; padding-left: 1.1rem; }
.cl-note li::before { content: ''; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 9999px; background: #a2a6ad; }

/* ---------- Marco de los ejemplos ---------- */
.cl-demo { margin-top: 1.5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1.25rem; background: rgba(255,255,255,.02); padding: 1rem; }
@media (min-width: 640px) { .cl-demo { padding: 1.25rem; } }
.cl-demo-tag { margin-bottom: .75rem; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #6b7280; }
.cl-cap { margin-bottom: .5rem; font-size: .75rem; font-weight: 700; color: #6b7280; }
.cl-cap-now { color: #f7f7f8; }

/* ---------- Imitación de Discord ---------- */
.dc { background: #313338; color: #dbdee1; border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; padding: 1rem; font-size: .875rem; overflow: hidden; }
.dc-msg { display: flex; gap: .75rem; }
.dc-msg + .dc-msg, .dc-used + .dc-msg { margin-top: .25rem; }
.dc-msg + .dc-used { margin-top: 1rem; }
.dc-av { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; object-fit: cover; }
.dc-av-letter { display: grid; place-items: center; background: #4e5058; color: #fff; font-weight: 700; }
.dc-main { min-width: 0; flex: 1; }
.dc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dc-name { color: #f2f3f5; font-weight: 600; }
.dc-app { background: #5865F2; color: #fff; font-size: 9px; font-weight: 700; border-radius: 3px; padding: 1px 5px; }
.dc-time { color: #949ba4; font-size: .72rem; }
.dc-text { margin-top: .15rem; line-height: 1.45; overflow-wrap: anywhere; }
.dc-used { display: flex; align-items: center; gap: .35rem; padding-left: 1.25rem; font-size: .75rem; color: #949ba4; }
.dc-used b { color: #dbdee1; font-weight: 600; }
.dc-cmd { color: #c9cdfb; font-weight: 600; }
.dc-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-embed { margin-top: .4rem; max-width: 28rem; background: #2b2d31; border-left: 4px solid var(--c, #fff); border-radius: 4px; padding: .7rem .9rem; }
.dc-embed-author { font-size: .75rem; font-weight: 600; color: #f2f3f5; }
.dc-embed-title { margin-top: .2rem; color: #f2f3f5; font-weight: 700; }
.dc-embed-desc { margin-top: .3rem; line-height: 1.45; }
.dc-embed-foot { margin-top: .6rem; font-size: .72rem; color: #949ba4; }
.dc-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.dc-btn { border-radius: 4px; padding: .4rem .9rem; font-size: .85rem; font-weight: 600; color: #fff; }
.dc-btn-primary { background: #5865F2; }
.dc-btn-secondary { background: #4e5058; }
.dc-btn-success { background: #248046; }
.dc-btn-danger { background: #da373c; }
.dc-fail { margin-top: .4rem; font-size: .75rem; color: #f23f43; }
.dc-eph { margin-top: .35rem; font-size: .72rem; color: #949ba4; }
.dc-eph u { color: #b5bac1; }
.dc-ac { background: #2b2d31; border-radius: .5rem; padding: .4rem; }
.dc-ac-head { padding: .25rem .5rem .4rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #949ba4; }
.dc-ac-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-radius: 4px; padding: .45rem .5rem; color: #dbdee1; }
.dc-ac-item.on { background: #404249; color: #fff; }
.dc-ac-item small { color: #949ba4; font-size: .7rem; }
.dc-input { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; background: #383a40; border-radius: .5rem; padding: .6rem .8rem; color: #dbdee1; }
.dc-opt { background: #1e1f22; border-radius: 4px; padding: .1rem .45rem; font-size: .8rem; }

/* ---------- Imitación de la web (editor) ---------- */
.wm { background: rgba(16,17,22,.74); border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; padding: 1rem; font-size: .875rem; }
.wm-title { font-weight: 700; color: #f7f7f8; }
.wm-label { display: block; margin-top: .85rem; font-size: .72rem; font-weight: 600; color: #a2a6ad; }
.wm-input { margin-top: .35rem; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); border-radius: .6rem; padding: .55rem .75rem; color: #f7f7f8; line-height: 1.45; overflow-wrap: anywhere; }
.wm-input.bad { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.wm-err { margin-top: .35rem; font-size: .75rem; color: #fca5a5; }
.wm-chip { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .55rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-size: 1rem; }
.wm-sw { display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: .45rem; border: 1px solid rgba(255,255,255,.22); }
.wm-sw.on { outline: 2px solid #fff; outline-offset: 2px; }
.wm-more { display: inline-grid; place-items: center; height: 1.6rem; padding: 0 .45rem; border-radius: .45rem; border: 1px dashed rgba(255,255,255,.25); font-size: .68rem; font-weight: 700; color: #a2a6ad; }
.wm-btn { display: inline-block; margin-top: 1rem; border-radius: .6rem; background: #f7f7f8; color: #090a0d; padding: .45rem 1rem; font-size: .8rem; font-weight: 700; }
.wm-stars { letter-spacing: .1em; color: #f7f7f8; font-size: 1.1rem; }
.wm-stars .off { color: #4b5563; }

/* ---------- Ejemplo de la mascota de Halloween ---------- */
.cl-mascot { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: .5rem 0; }
@media (min-width: 640px) { .cl-mascot { flex-direction: row; justify-content: center; gap: 1.25rem; } }
.cl-mascot img { width: 7.5rem; height: 7.5rem; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.cl-bubble { position: relative; max-width: 17rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.18); background: #17191f; padding: .75rem 1rem; font-size: .85rem; line-height: 1.5; color: #f7f7f8; }