/* Salas - estilo tipo Reddit */

.salas-shell{max-width:1200px}
.salas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}

.sala-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px 12px;box-shadow:0 10px 24px rgba(0,0,0,.06);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.sala-card:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,0,0,.10);border-color:rgba(0,0,0,.12)}

.sala-card-row{display:flex;gap:12px;align-items:flex-start}
.sala-card-left{flex:0 0 auto}
.sala-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:linear-gradient(135deg,rgba(255,120,0,.18),rgba(255,0,80,.14));color:#222}

.sala-card-main{min-width:0;flex:1 1 auto}
.sala-card-name{font-size:18px;font-weight:900;line-height:1.1;margin-top:2px}
.sala-card-desc{margin-top:4px;font-size:13px;line-height:1.35;color:rgba(0,0,0,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sala-card-badges{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.sala-badge{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.06);color:rgba(0,0,0,.75)}

.sala-card-actions{margin-left:auto;flex:0 0 auto;display:flex;align-items:center}
.sala-share-btn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 10px;font-weight:800;font-size:12px}
.sala-share-btn:hover{background:rgba(0,0,0,.04)}

/* Detail */
.sala-detail-header{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.sala-back-btn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 12px;font-weight:800}
.sala-title{font-size:22px;font-weight:900}
.sala-subtitle{font-size:13px;color:rgba(0,0,0,.65)}

.sala-posts{display:flex;flex-direction:column;gap:12px}
.sala-post{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.06)}

.pulse-highlight{animation:pulseHL 1.2s ease-in-out 1}
@keyframes pulseHL{0%{transform:scale(1);box-shadow:0 10px 24px rgba(0,0,0,.06)}50%{transform:scale(1.01);box-shadow:0 18px 38px rgba(255,95,0,.18)}100%{transform:scale(1);box-shadow:0 10px 24px rgba(0,0,0,.06)}}
.sala-post-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sala-post-tag{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.06);font-weight:800}
.sala-post-tag.tag-confesion{background:rgba(255,0,80,.12)}
.sala-post-tag.tag-chisme{background:rgba(255,140,0,.12)}
.sala-post-tag.tag-historia{background:rgba(0,160,255,.12)}
.sala-post-tag.tag-opinion{background:rgba(0,200,120,.12)}

/* En el detalle usamos la clase .post-tag. Aseguramos legibilidad (fondo + borde + texto). */
.post-tag{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;border:1px solid transparent}
.post-tag.tag-confesion{background:#f3e8ff;border-color:#d8b4fe;color:#6b21a8}
.post-tag.tag-chisme{background:#fff7ed;border-color:#fdba74;color:#9a3412}
.post-tag.tag-opinion{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.post-tag.tag-historia{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}

.sala-post-meta{font-size:12px;color:rgba(0,0,0,.6)}
.sala-post-title{font-size:18px;font-weight:900;margin:0 0 6px}
.sala-post-body{font-size:14px;color:rgba(0,0,0,.78);white-space:pre-wrap}

.sala-create-btn{border:0;background:linear-gradient(135deg,#ff7a00,#ff0050);color:#fff;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:0 12px 26px rgba(0,0,0,.14)}
.sala-create-btn:hover{filter:brightness(1.03)}

/* Modal (si existe en tu UI) */
.sala-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;z-index:9999}
.sala-modal-card{width:min(560px,100%);background:#fff;border-radius:18px;padding:16px;border:1px solid rgba(0,0,0,.12);box-shadow:0 20px 60px rgba(0,0,0,.22)}



/* Post card extras */
.sala-post .post-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.sala-post .post-meta{font-size:12px;color:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.sala-post .post-media{margin:10px 0 8px 0}
.sala-post .post-media img{width:100%;max-height:320px;object-fit:cover;border-radius:14px;border:1px solid rgba(0,0,0,.08)}

/* Solo el título en negrita */
.sala-post .post-title{font-weight:900}
.sala-post .post-body{font-weight:400}

/* Footer acciones (reacciones / comentarios / compartir) */
.sala-post .post-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.sala-post .post-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sala-post .post-action-btn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 10px;font-weight:900;font-size:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.sala-post .post-action-btn:hover{background:rgba(0,0,0,.04)}
.sala-post .post-action-btn .count{font-weight:900;color:rgba(0,0,0,.75)}
.sala-post .post-topreactions{display:flex;align-items:center;gap:6px;color:rgba(0,0,0,.6);font-size:12px}
.sala-post .post-topreactions .stack{display:flex;align-items:center}
.sala-post .post-topreactions .stack span{width:22px;height:22px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.12);display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.sala-post .post-topreactions .stack span:first-child{margin-left:0}

/* Picker de reacciones */
.reaction-pop{position:absolute;z-index:9999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:10px 12px;box-shadow:0 24px 70px rgba(0,0,0,.18);display:flex;gap:10px;backdrop-filter:saturate(1.2)}
.reaction-pop button{position:relative;width:38px;height:38px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer;font-size:18px;transition:transform .12s ease, box-shadow .12s ease}
.reaction-pop button:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 30px rgba(0,0,0,.12)}
.reaction-pop button .r-tip{position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;white-space:nowrap;background:#111;color:#fff;font-size:12px;padding:4px 8px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .12s ease}
.reaction-pop button:hover .r-tip{opacity:1}

/* Comentarios (hilos) */
.comments-wrap{margin-top:10px;border-top:1px dashed rgba(0,0,0,.12);padding-top:10px}
.comments-wrap.hidden{display:none}

/* === Comentarios estilo hilo (tipo reddit) === */
.comments-box{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.08)}
.comments-box .comment-compose{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.comments-box .comment-compose input{flex:1;border:1px solid rgba(0,0,0,.10);border-radius:14px;padding:12px 14px;font-size:14px}
.comments-box .comment-compose button{border:0;border-radius:14px;padding:12px 14px;background:#ff7a1a;color:#fff;font-weight:700;cursor:pointer}

.comments-list{display:flex;flex-direction:column;gap:10px}
.comment{position:relative;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:10px 12px 10px;box-shadow:0 10px 25px rgba(0,0,0,.05)}
.comment[data-depth]:not([data-depth="0"])::before{content:"";position:absolute;left:-10px;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(255,122,26,.25)}
.comment-meta{font-size:12px;color:#6b7280;margin-bottom:6px}
.comment-text{font-size:14px;color:#111827;line-height:1.35;white-space:pre-wrap}
.comment-actions{margin-top:8px;display:flex;gap:8px}
.comment-actions button{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:999px;padding:8px 10px;font-size:12px;cursor:pointer}
.comment-actions button:hover{transform:translateY(-1px)}
.comment-item{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:14px;padding:10px 10px 8px;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.comment-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.comment-meta{font-size:12px;color:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comment-body{font-size:13px;color:rgba(0,0,0,.78);white-space:pre-wrap;font-weight:400}
.comment-actions{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.comment-actions .mini-btn{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:6px 8px;font-weight:900;font-size:12px;cursor:pointer}
.comment-actions .mini-btn:hover{background:rgba(0,0,0,.04)}
.reply-box{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.reply-box textarea{width:min(520px,100%);min-height:72px;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px;outline:none}
.reply-box .send{border:0;background:linear-gradient(135deg,#ff7a00,#ff0050);color:#fff;border-radius:999px;padding:10px 14px;font-weight:900}
.reply-box .cancel{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:10px 14px;font-weight:900}
.comment-compose{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.comment-compose textarea{width:min(650px,100%);min-height:84px;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px;outline:none}
.comment-compose button{border:0;background:linear-gradient(135deg,#ff7a00,#ff0050);color:#fff;border-radius:999px;padding:10px 14px;font-weight:900}

/* Suscripciones */
.btn-sala-share,.btn-sala-sub{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 10px;font-weight:800;font-size:12px}
.btn-sala-share:hover,.btn-sala-sub:hover{background:rgba(0,0,0,.04)}

.sala-user-pill,.sala-sub-pill{display:flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:6px 10px;height:38px}
.sala-user-pill .dot,.sala-sub-pill .dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.2)}
.sala-user-pill .dot.on,.sala-sub-pill .dot.on{background:rgba(0,200,120,.9)}
.sala-user-pill .nick,.sala-sub-pill .nick{font-weight:800;font-size:12px;color:rgba(0,0,0,.72)}


.sala-owner-badge{display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;padding:2px 6px;border-radius:999px;background:rgba(255,122,0,.14);border:1px solid rgba(255,122,0,.22);margin-left:6px;vertical-align:middle}


/* Ajuste: solo el título en negrita */
.post-title{font-weight:800;}
.post-body{font-weight:400;}

/* Reacciones estilo feed (popover redondo) */
.reaction-picker{position:absolute;z-index:50;display:flex;gap:8px;align-items:center;padding:8px 10px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.12)}
.reaction-picker .reaction-pill{width:38px;height:38px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:transform .12s ease, background .12s ease}
.reaction-picker .reaction-pill:hover{transform:translateY(-2px);background:rgba(109,92,246,.08)}

/* ===== Modal de comentarios (tipo reddit) ===== */
.cmt-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(10,10,20,.42);backdrop-filter: blur(6px);}
.cmt-modal.open{display:flex;}
.cmt-card{width:min(860px,100%);max-height:86vh;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:22px;box-shadow:0 26px 90px rgba(0,0,0,.25);overflow:hidden;}
.cmt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));}
.cmt-title{font-weight:1000;color:#111827;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmt-sub{font-size:12px;font-weight:900;color:rgba(17,24,39,.55)}
.cmt-close{border:1px solid rgba(0,0,0,.10);background:#fff;border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;font-size:18px;font-weight:900}
.cmt-close:hover{background:rgba(0,0,0,.04)}
.cmt-body{padding:14px 16px;overflow:auto;flex:1}
.cmt-compose{display:flex;flex-direction:column;gap:10px;padding:12px 16px;border-top:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92)}
.cmt-compose textarea{width:100%;min-height:86px;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:10px 12px;outline:none;font-weight:600}
.cmt-compose .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cmt-compose .btn{border:0;border-radius:999px;padding:10px 14px;font-weight:1000;cursor:pointer}
.cmt-compose .btn.primary{background:linear-gradient(135deg,#ff7a00,#ff0050);color:#fff}
.cmt-compose .btn.ghost{border:1px solid rgba(0,0,0,.12);background:#fff;color:#111827}

.cmt-thread .comment{box-shadow:0 10px 25px rgba(0,0,0,.05)}
.cmt-thread .comment-actions .btn-link{border:1px solid rgba(0,0,0,.10);background:#fff;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900;cursor:pointer}
.cmt-thread .comment-actions .btn-link:hover{transform:translateY(-1px);background:rgba(0,0,0,.04)}
.cmt-thread .btn-pill{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:10px 14px;font-weight:1000;cursor:pointer}
.cmt-thread .btn-pill.primary{border:0;background:linear-gradient(135deg,#ff7a00,#ff0050);color:#fff}

@media (max-width:640px){
  .cmt-card{max-height:92vh;border-radius:18px}
  .cmt-body{padding:12px}
  .cmt-compose{padding:12px}
}