/* Publicaciones de Comunidad: tarjetas, reacciones, comentarios, canciones y cuadrícula de perfil */
.mom { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; margin-bottom: 1rem; overflow: hidden; }
.mom .quien { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; }
.mom .quien .avatar { width: 40px; height: 40px; font-size: .85rem; cursor: pointer; }
.mom .quien b { cursor: pointer; } .mom .quien small { display: block; color: var(--muted); font-size: .76rem; }
.mom .quien .dot { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; padding: .2rem .5rem; }
.fotow { position: relative; overflow: hidden; -webkit-user-select: none; user-select: none; }
.mom img.foto { width: 100%; display: block; max-height: 560px; object-fit: cover; background: var(--surface2); cursor: pointer; }
.mom .pie { padding: .7rem .9rem .9rem; }
.mom .txt { margin-bottom: .6rem; white-space: pre-wrap; word-break: break-word; }
.tpost { margin: 0 .9rem; padding: 1.6rem 1.3rem; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 82%, #000), color-mix(in srgb, var(--gold) 55%, var(--lamp))); color: #fff; font: 700 1.25rem/1.35 var(--font-display); letter-spacing: -.01em; white-space: pre-wrap; word-break: break-word; text-align: center; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.acc { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.reac { display: flex; gap: .45rem; flex-wrap: wrap; }
.reac button, .cbtn { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .35rem .8rem; font: 650 .9rem 'Instrument Sans', sans-serif; color: var(--text); cursor: pointer; }
.reac button.yo { background: var(--info-bg); border-color: var(--gold); color: var(--info-fg); }
.coments { margin-top: .6rem; }
.coments:empty { margin: 0; }
.hilo { display: grid; gap: .45rem; margin: .3rem 0 .7rem; max-height: 320px; overflow: auto; }
.com { background: var(--surface2); border-radius: 14px; padding: .5rem .8rem; word-break: break-word; }
.com small { display: block; color: var(--muted); font-size: .72rem; margin-top: .1rem; }
.com small button { border: none; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: .72rem; padding: 0; }
.envia { display: flex; gap: .5rem; }
.envia input { flex: 1; min-width: 0; padding: .65rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 1rem 'Instrument Sans', sans-serif; }
.corazon { position: absolute; left: 50%; top: 50%; font-size: 5.5rem; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); animation: corazon .85s ease-out forwards; }
.part { position: fixed; z-index: 9900; pointer-events: none; font-size: 1.4rem; animation: vuela .95s cubic-bezier(.2,.7,.3,1) forwards; }

/* canciones */
.cancion { display: flex; align-items: center; gap: .7rem; padding: .55rem; border-radius: 14px; background: var(--surface2); margin-top: .5rem; }
.cancion img.port { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--border); flex-shrink: 0; }
.cancion .t { flex: 1; min-width: 0; } .cancion .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cancion .t small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cancion button { border-radius: 999px; padding: .45rem .8rem; font: 650 .85rem 'Instrument Sans', sans-serif; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); flex-shrink: 0; }
.cancion button.pl { width: 38px; height: 38px; padding: 0; background: var(--gold); color: #fff; border-color: var(--gold); } .cancion button.main { background: var(--gold); color: #fff; border-color: var(--gold); }
.cancion.sonando button.pl { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }
.mom .cancion.grande { margin: 0 .9rem; padding: .8rem; background: linear-gradient(135deg, #191414, #2a2a2a); color: #fff; }
.mom .cancion.grande .port { width: 72px; height: 72px; } .mom .cancion.grande .t small { color: #b3b3b3; } .mom .cancion.grande button.pl { width: 46px; height: 46px; background: #1ed760; border-color: #1ed760; color: #000; }

/* cuadrícula de perfil */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.gi { position: relative; aspect-ratio: 1; border: none; padding: 0; background: var(--surface2); color: var(--text); overflow: hidden; cursor: pointer; border-radius: 4px; }
.gi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gi .gt { display: flex; align-items: center; justify-content: center; height: 100%; padding: .5rem; font: 700 .72rem/1.25 var(--font-display); text-align: center; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 82%, #000), color-mix(in srgb, var(--gold) 55%, var(--lamp))); overflow: hidden; }
.gi .gm { position: absolute; right: 5px; top: 3px; color: #fff; font-style: normal; text-shadow: 0 1px 4px #000; }
.gi .g24 { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font: 700 .62rem 'Instrument Sans', sans-serif; padding: .1rem .4rem; border-radius: 999px; font-style: normal; }
.gi:active { transform: scale(.96); }

@keyframes corazon { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 65% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -85%) scale(1.1); } }
@keyframes vuela { to { transform: translate(var(--dx), var(--dy)) scale(.5) rotate(var(--rot)); opacity: 0; } }
@keyframes bote { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .reac button { transition: transform .15s, background .2s, border-color .2s; } .reac button:active, .cbtn:active { transform: scale(.85); }
  .reac button.bote { animation: bote .5s cubic-bezier(.2, 1.6, .4, 1); }
  .gi { transition: transform .2s var(--ease); }
}

/* selector de canción y trozo elegido */
.selc .modos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .2rem 0 .5rem; }
.selc .modos button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: .5rem .3rem; font: 650 .82rem 'Instrument Sans', sans-serif; cursor: pointer; transition: all .2s; }
.selc .modos button.on { background: var(--gold); color: #fff; border-color: var(--gold); }
.selc .modo-ayuda { margin: 0 0 .5rem; font-size: .82rem; }
.selc .busca { width: 100%; padding: .75rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 1rem 'Instrument Sans', sans-serif; }
.yt-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; margin-top: .6rem; }
.yt-marco iframe, .yt-marco > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-slot:empty { display: none; } .yt-slot { margin: .5rem .9rem 0; }
.trozo-t { margin-top: .4rem; }
.trozo-c { margin-top: .8rem; } .trozo-c label { display: block; font-weight: 650; margin-bottom: .3rem; }
.trozo-c input[type=range] { width: 100%; accent-color: var(--gold); height: 28px; }
.largo { display: flex; align-items: center; gap: .4rem; margin: .4rem 0; } .largo span { font-weight: 650; }
.largo button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: .35rem .8rem; font: 650 .85rem 'Instrument Sans', sans-serif; cursor: pointer; }
.largo button.on { background: var(--gold); color: #fff; border-color: var(--gold); }
.trozo-b { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }

/* barra de trozo (como Instagram) */
.yt-marco.peque { aspect-ratio: auto; height: 150px; }
.trozo-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .trozo-cab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trozo-cab .b { padding: .35rem .8rem; flex-shrink: 0; }
.barra { position: relative; height: 58px; margin-top: .9rem; border-radius: 14px; background: var(--surface2); touch-action: none; cursor: pointer; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 45%, transparent) 0 3px, transparent 3px 7px); background-size: 100% 60%; background-repeat: no-repeat; background-position: center; }
.ventana { position: absolute; top: 0; bottom: 0; min-width: 24px; border: 3px solid var(--gold); border-radius: 12px; background: color-mix(in srgb, var(--gold) 28%, transparent); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--surface2) 55%, transparent); transition: left .05s linear; }
.ventana i { position: absolute; left: 50%; top: 50%; width: 4px; height: 22px; margin: -11px 0 0 -2px; border-radius: 4px; background: var(--gold); }
.barra-t { display: flex; justify-content: space-between; margin: .5rem .2rem 0; font-weight: 650; } .barra-t .t-dur { color: var(--muted); font-weight: 500; }
.b.ancho { width: 100%; margin-top: .7rem; }
.b:disabled { opacity: .5; }

.solo-min { color: var(--c, var(--gold)); font-weight: 700; }

/* reparto como en el diseño: nombre en acento, ministerio en su propia línea y acciones a los lados */
.mom .quien b { color: var(--gold2); }
.mom .quien .gchip { display: inline-flex; align-items: center; gap: .3rem; color: var(--c, var(--gold2)); font-weight: 700; margin-top: .1rem; }
.mom .quien .gchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--gold)); }
.acc .dcha { display: flex; gap: .45rem; align-items: center; }
.cbtn.comp { padding: .35rem .6rem; display: inline-flex; align-items: center; }
/* iconos (Lucide) dentro de reacciones, comentarios y reproductor */
.reac button .i, .cbtn .i { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.reac button.yo .i { color: var(--gold); }
.reac button b { font-weight: 700; }
.cancion button.pl .i, .spot button .i { width: 1.1em; height: 1.1em; }
.corazon { color: #E5484D; }
.corazon .i { width: 1em; height: 1em; }
.gm .i, .gt .i { width: 1.1em; height: 1.1em; }

/* ── tarjeta de publicación (diseño nuevo) ── */
.mom { border-radius: 24px; padding: .2rem 0 .3rem; box-shadow: var(--shadow-card, none); }
.mom .quien { padding: .9rem 1rem .7rem; align-items: flex-start; gap: .8rem; }
.mom .quien .avatar { width: 52px; height: 52px; }
.mom .quien b { font-size: 1.02rem; }
.mom .quien small { font-size: .8rem; margin-top: .1rem; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.mom .quien .gchip { color: var(--gold2); font-weight: 750; font-size: .86rem; margin-top: .2rem; }
.mom .quien .gchip .i { width: 1em; height: 1em; }
.mom .quien .dot { padding: .2rem .1rem; color: var(--muted); }
.mom .quien .dot .i { width: 1.1rem; height: 1.1rem; }
.mom .fotow { margin: 0 1rem; border-radius: 18px; overflow: hidden; }
.mom img.foto { border-radius: 18px; max-height: 480px; }
.mom .tpost, .mom .cancion.grande { margin-left: 1rem; margin-right: 1rem; }
.mom .pie { padding: .8rem 1rem 1rem; }
.acc { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: nowrap; }
.acc .reac { display: block; }
.acc .hbtn, .acc .cbtn { border: 0; background: none; padding: .25rem 0; border-radius: 0; display: inline-flex; align-items: center; gap: .4rem; color: var(--text); font: 600 .92rem 'Instrument Sans', sans-serif; cursor: pointer; -webkit-user-select: none; user-select: none; }
.acc .hbtn .i, .acc .cbtn .i { width: 1.3rem; height: 1.3rem; stroke-width: 1.8; }
.acc .hbtn b { font-weight: 600; min-width: .6em; }
.acc .hbtn.yo { color: var(--gold); background: none; border: 0; }
.acc .hbtn.yo.rojo { color: #E5484D; }
.acc .hbtn:active .i, .acc .cbtn:active .i { transform: scale(.82); }
.acc .cbtn.ic { gap: 0; } .acc .cbtn.der { margin-left: auto; }
.acc .cbtn { color: var(--text); }
.pick-reac { position: fixed; z-index: 9800; display: flex; gap: .2rem; padding: .35rem; border-radius: 999px; background: var(--surface); box-shadow: 0 10px 30px rgba(20,6,9,.28), 0 0 0 1px var(--border); animation: surge .18s cubic-bezier(.2,1.4,.4,1); }
.pick-reac button { display: grid; justify-items: center; gap: .1rem; border: 0; background: none; padding: .45rem .7rem; border-radius: 999px; color: var(--text); cursor: pointer; }
.pick-reac button:hover, .pick-reac button:active { background: var(--soft); }
.pick-reac button[data-e="❤️"] { color: #E5484D; } .pick-reac button[data-e="🔥"] { color: #FF8A1F; } .pick-reac button[data-e="🙏"] { color: #C9962B; }
.pick-reac .i { width: 1.35rem; height: 1.35rem; }
.pick-reac small { font-size: .68rem; font-weight: 650; color: var(--muted); }
@keyframes surge { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.coments .envia { margin-top: .2rem; }
.mom .coments { margin-top: .5rem; }