:root{
  --bg:#F3F5FB;
  --card:#FFFFFF;
  --text:#1A1F2B;
  --muted:#6C7383;

  --purple:#5B4AE6;
  --purple-2:#6B57FF;
  --purple-dark:#4636D6;

  --sidebar:#0B0B10;
  --sidebar-dark:#2A1208;

  --shadow: 0 18px 45px rgba(20, 28, 60, .18);
  --shadow-soft: 0 14px 35px rgba(20, 28, 60, .12);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

.layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: 300px 1fr;
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--sidebar) 0%, #151018 45%, var(--sidebar-dark) 100%);
  padding: 28px 22px;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.brand{
  font-weight:800;
  letter-spacing:.12em;
  font-size:20px;
  opacity:.95;
}

.brand-logo{
  width: 180px;
  max-width: 100%;
  height: auto;
  display:block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}

.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.nav-item{
  border:none;
  background: rgba(255,255,255,.12);
  color:#fff;
  padding: 14px 14px;
  border-radius: 16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}
.nav-item:not(.active){ background: transparent; opacity:.9; }
.nav-item:hover{ background: rgba(255,255,255,.14); }
.nav-item.active{
  background: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.15);
}

.mode-box{
  margin-top:8px;
  padding:14px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
}
.mode-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.85;
  margin-bottom:10px;
}
.mode-buttons{ display:flex; gap:10px; flex-wrap:wrap; }

.pill{
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color:#fff;
  padding: 9px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.pill.active{
  background: #FFC83D;
  border-color: transparent;
  color:#2A1F00;
}

/* ==== User card (mejorado) ==== */
.spectator-card{
  margin: 12px 0 14px;

  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.spectator-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.spectator-emoji{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.18);
  font-size:20px;
  position:relative;
  flex:0 0 auto;
}

.spectator-text{ min-width:0; }
.spectator-title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}
.spectator-sub{
  font-size:12px;
  opacity:.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}

.status-dot{
  position:absolute;
  right:6px;
  bottom:6px;
  width:10px;height:10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
}

.spectator-actions-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.w100{ width:100%; }

.mini-btn{
  border:none;
  cursor:pointer;
  background: rgba(255,255,255,.20);
  color:#fff;
  font-weight:900;
  padding: 12px 12px;
  border-radius: 14px;
}
.mini-btn:hover{ background: rgba(255,255,255,.24); }

.footer{
  margin-top:auto;
  font-size:12px;
  opacity:.8;
  margin-top:10px;
}

.main{
  padding: 34px 34px 60px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* Permite que el título se adapte para que el buscador + CTA siempre quepan en una sola fila */
.topbar > div:nth-child(2){
  flex: 1 1 auto;
  min-width: 220px;
}

h1{
  margin:0;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing:-.02em;
}
.subtitle{
  color: var(--muted);
  margin-top:6px;
  font-weight:600;
}

/* En tabs distintos a Inicio escondemos el título global */
body.noTopTitle .topbar h1,
body.noTopTitle .topbar .subtitle{
  display:none;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
  flex-wrap:nowrap;
}

.search{
  background: #fff;
  border-radius: 999px;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  width: min(520px, 48vw);
  max-width: 100%;
  position: relative;
}
.search input{
  border:none;
  outline:none;
  width:100%;
  font-size:14px;
}
.search-icon{ opacity:.7; }

/* Buscador inteligente (sugerencias) */
.search-suggest{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 18px;
  padding: 12px 12px 10px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .12);
  border: 1px solid rgba(15, 23, 42, .06);
  z-index: 50;
}
.search-suggest.hidden{ display:none; }
.search-suggest .ss-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.search-suggest .ss-title{
  font-weight: 900;
  font-size: 12px;
  color: #0f172a;
  letter-spacing: .2px;
}
.search-suggest .ss-hint{
  font-size: 12px;
  color: rgba(15, 23, 42, .68);
}
.search-suggest .ss-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-suggest .ss-chip{
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.search-suggest .ss-chip:hover{
  border-color: rgba(215, 38, 56, .35);
  box-shadow: 0 10px 18px rgba(215, 38, 56, .12);
}
.search-suggest .ss-foot{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(15, 23, 42, .58);
}

.primary-btn{
  border:none;
  cursor:pointer;
  /* Botones principales: naranja degradado (más "picante") */
  background: linear-gradient(135deg, #FF6A00, #D72638);
  color:#fff;
  font-weight:900;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(215, 38, 56, .28);
}
.primary-btn:hover{ filter: brightness(1.02); }
.primary-btn:disabled{
  cursor:not-allowed;
  opacity:.55;
  filter:none;
  box-shadow:none;
}

.chips{
  display:flex;
  gap:10px;
  margin: 18px 0 18px;
}
.chip{
  width:42px;height:42px;
  border-radius: 999px;
  border: 2px solid rgba(91,74,230,.25);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:#3A3F52;
}
.chip.active{
  border-color: var(--purple);
  box-shadow: 0 12px 22px rgba(91,74,230,.22);
}

.hero-card{
  background: linear-gradient(135deg, #FF4D2D 0%, #FF8A00 42%, #B1002D 100%);
  color:#fff;
  border-radius: var(--radius);
  padding: 26px 28px 18px;
  box-shadow: var(--shadow);
  position:relative;
}

.hero-tag{
  display:inline-block;
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  margin-bottom: 12px;
}

.hero-card h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.01em;
}

.hero-meta{
  margin-top:10px;
  opacity:.9;
  font-weight:600;
  font-size:13px;
}

.hero-card p{
  margin: 14px 0 0;
  opacity:.95;
  font-weight:600;
  line-height:1.45;
  max-width: 980px;
}

.reactions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 18px;
  flex-wrap:wrap;
}
.react{
  height:38px;
  min-width: 52px;
  padding: 0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-size:16px;
}
.react:hover{ background: rgba(255,255,255,.16); }

/* =========================
   HERO – Carrusel (solo esta caja)
   ========================= */
.hero-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  
  height:38px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.18);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
  user-select:none;
  z-index:2;
}
.hero-nav:hover{ background: rgba(0,0,0,.26); }
.hero-prev{ left:14px; }
.hero-next{ right:14px; }

.hero-dots{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:12px;
  display:flex;
  gap:8px;
  z-index:2;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  cursor:pointer;
}
.hero-dot.active{
  background: rgba(255,255,255,.85);
}

@media (max-width: 720px){
  .hero-prev{ left:10px; }
  .hero-next{ right:10px; }
}

.comment-count{
  margin-left:6px;
  opacity:.95;
  font-weight:700;
  border:none;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:0;
}

.hero-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 12px;
  gap:12px;
  flex-wrap:wrap;
}
.hero-actions-right{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ghost-btn{
  border:none;
  background: transparent;
  color:#fff;
  cursor:pointer;
  font-weight:900;
  opacity:.95;
}
.ghost-btn:hover{ opacity:1; text-decoration: underline; }

.section{
  margin-top: 26px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
  gap:12px;
  flex-wrap:wrap;
}
.section-head h3{
  margin:0;
  font-size:20px;
}

.badge{
  background:#fff;
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);
  color:#2B3140;
  font-weight:900;
  font-size:12px;
}

.empty{
  background:#fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.soft-btn{
  border:none;
  cursor:pointer;
  background:#fff;
  font-weight:900;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.soft-btn:hover{ filter: brightness(0.99); }

.empty-text{
  margin-top: 12px;
  font-weight:900;
}
.empty-sub{
  margin-top: 6px;
  color: var(--muted);
  font-weight:600;
}

.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index: 999;
}
.hidden{ display:none !important; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,12,22,.55);
  backdrop-filter: blur(6px);
}

.modal-card{
  position:relative;
  width: 560px;
  max-width: calc(100vw - 28px);
  background:#fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}

.modal-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* Spacer para alinear el botón cerrar a la derecha cuando no mostramos título */
.modal-top-spacer{ flex:1; }

.modal-title{
  font-weight:900;
  font-size:18px;
  color:#2A2F40;
}
.modal-sub{
  margin-top:4px;
  font-weight:600;
  color:#7B8292;
  font-size:13px;
}

.icon-btn{
  height:38px;
  border-radius: 12px;
  border:none;
  background:#F2F4FA;
  cursor:pointer;
  font-weight:900;
}

.google-btn{
  width:100%;
  margin-top: 14px;
  border:none;
  cursor:pointer;
  background: linear-gradient(135deg, #FF6A00, #D72638);
  color:#fff;
  font-weight:900;
  padding: 13px 16px;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(215, 38, 56, .22);
}

.divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 14px 0;
  color:#A1A7B6;
  font-weight:900;
  font-size:12px;
}
.divider:before,.divider:after{
  content:"";
  height:1px;
  flex:1;
  background:#E6E9F2;
}
.divider span{ white-space:nowrap; }

.label{
  font-size:12px;
  font-weight:900;
  color:#2A2F40;
  display:block;
  margin: 8px 0 6px;
}
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #E6E9F2;
  outline:none;
  font-weight:600;
}

.modal-actions{
  display:flex;
  gap:12px;
  margin-top: 14px;
}
.w50{ flex:1; }

.form-row{
  display:flex;
  gap:12px;
  margin-top: 10px;
}

.fineprint{
  margin-top: 10px;
  font-size:12px;
  color:#8B92A3;
  font-weight:600;
}

.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform: translateX(-50%);
  background:#0F1220;
  color:#fff;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  font-weight:800;
  z-index: 1000;
}

.forgot-row{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}
.link-btn{
  border:none;
  background:transparent;
  color: var(--purple);
  font-weight:900;
  cursor:pointer;
  padding: 0;
}
.link-btn:hover{ text-decoration: underline; }

/* Avatar picker */
.avatar-block{
  margin-top: 12px;
  background: #F6F7FC;
  border: 1px solid #E6E9F2;
  border-radius: 16px;
  padding: 12px;
}
.avatar-title{
  font-weight:900;
  color:#2A2F40;
  font-size:13px;
  margin-bottom:10px;
}
.avatar-grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:10px;
}
.avatar-btn{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(91,74,230,.18);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  display:grid;
  place-items:center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.avatar-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(91,74,230,.18);
}
.avatar-btn.selected{
  border-color: var(--purple);
  box-shadow: 0 12px 22px rgba(91,74,230,.22);
}
.avatar-hint{
  margin-top:10px;
  font-size:12px;
  color:#6C7383;
  font-weight:700;
}

.check-row{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.check{
  font-size:13px;
  font-weight:700;
  color:#2A2F40;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.check input{ transform: translateY(2px); }
.check a{ color: var(--purple); text-decoration:none; font-weight:900; }
.check a:hover{ text-decoration: underline; }
.legal-mini{
  font-size:12px;
  color:#8B92A3;
  font-weight:700;
}

/* Account / Security */
.account-actions{ display:flex; flex-direction:column; gap:10px; margin-top: 14px; }
.security-box{
  background:#F6F7FC;
  border: 1px solid #E6E9F2;
  border-radius: 16px;
  padding: 12px;
  margin-top: 12px;
}
.security-label{
  font-size:12px;
  font-weight:900;
  color:#2A2F40;
  opacity:.9;
}
.security-value{
  margin-top:6px;
  font-weight:900;
  color:#2A2F40;
  word-break: break-word;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 280px 1fr; }
  .search{ min-width: 280px; }
  h1{ font-size:38px; }
}
@media (max-width: 760px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ border-radius: 0; }
  .main{ padding: 22px 16px 54px; }
  .topbar{ flex-direction:column; align-items:flex-start; }
  .search{ width:100%; min-width: 0; }
  .avatar-grid{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 480px){
  .avatar-grid{ grid-template-columns: repeat(5, 1fr); }
  .form-row{ flex-direction:column; }
}


/* ===== Confesiones (feed + destacadas) ===== */
.featured-strip{
  margin-top: 18px;
  padding: 14px 14px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid #E6E9F2;
  box-shadow: 0 18px 55px rgba(22,27,45,.08);
}
.featured-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px;
}
.featured-head h3{ margin:0; font-size: 16px; }
.featured-sub{
  font-size: 12px;
  font-weight: 800;
  color:#6B7280;
}
.featured-list{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
}
.featured-card{
  background:#fff;
  border: 1px solid #E6E9F2;
  border-radius: 16px;
  padding: 10px 10px 12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.featured-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(22,27,45,.10);
}
.featured-rank{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  color: var(--purple);
}
.featured-title{
  margin-top: 8px;
  font-weight: 900;
  color:#2A2F40;
  font-size: 13px;
  line-height: 1.2;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.featured-meta{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color:#6B7280;
  display:flex;
  align-items:center;
  gap: 8px;
}

.featured-avatar{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: rgba(109,92,246,.14);
  display:grid;
  place-items:center;
  font-size: 14px;
}

/* Reaction popover (sin tocar layout: solo overlay) */
.reaction-popover{
  position: fixed;
  z-index: 9999;
  width: 240px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #E6E9F2;
  box-shadow: 0 18px 55px rgba(22,27,45,.18);
  display:flex;
  gap: 8px;
  justify-content: space-between;
}
.reaction-opt{
  flex:1;
  border: 0;
  background: transparent;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 14px;
  transition: transform .12s ease, background .12s ease;
}
.reaction-opt:hover{ transform: translateY(-2px); background: rgba(109,92,246,.10); }
.reaction-emoji{ font-size: 22px; line-height: 1; }
.reaction-label{ font-size: 10px; font-weight: 900; color:#6B7280; text-align:center; }

/* Comments modal */
.comments-wrap{ margin-top: 6px; }

/* ✅ Modal de comentarios: header de historia sticky + scroll solo en comentarios */
#commentsModal .modal-card{
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#commentsModal .comments-wrap{
  overflow: auto;
  padding-right: 4px;
}
#commentsModal .comments-story{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
}
#commentsModal .comments-list{
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.comments-story{
  background:#fff;
  border:1px solid #E6E9F2;
  border-radius:18px;
  padding:12px;
  box-shadow: 0 18px 55px rgba(22,27,45,.06);
  margin-bottom:10px;
}
.comments-story.hidden{ display:none; }
.cs-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cs-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.cs-avatar{ width:40px; height:40px; border-radius:14px; background: rgba(109,92,246,.14); display:grid; place-items:center; font-size:20px; flex:0 0 auto; }
.cs-name{ font-weight:1000; color:#2A2F40; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-meta{ font-size:12px; font-weight:800; color:#6B7280; }
.cs-title{ margin-top:10px; font-size:20px; font-weight:1000; color:#111827; line-height:1.15; }
.cs-body{ margin-top:8px; font-size:14px; font-weight:700; color:#2A2F40; line-height:1.35; white-space:pre-wrap; word-break: break-word; }
.cs-more{ border:0; background: transparent; color: var(--purple); font-weight:1000; cursor:pointer; padding:0; margin-top:6px; }
.cs-chip-row{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cs-chip{ display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:900; padding:6px 10px; border-radius:999px; border:1px solid #E6E9F2; background: rgba(109,92,246,.06); color:#2A2F40; }
.cs-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.cs-actions .icon-count{ background: #F6F7FB; border: 1px solid #E6E9F2; }
.cs-stats{ font-size:12px; font-weight:900; color:#6B7280; white-space:nowrap; }
.comments-list{ display:flex; flex-direction:column; gap: 10px; max-height: 42vh; overflow:auto; padding-right: 4px; }
.comments-empty{ font-weight: 900; color:#6B7280; padding: 12px 2px; }
.comment-row{ display:flex; gap: 10px; align-items:flex-start; padding: 10px; border: 1px solid #E6E9F2; border-radius: 16px; background:#fff; }
.comment-avatar{ width: 36px; height: 36px; border-radius: 14px; background: rgba(109,92,246,.14); display:grid; place-items:center; font-size: 18px; flex: 0 0 auto; }
.comment-body{ min-width:0; flex:1; }
.comment-meta{ display:flex; gap: 6px; align-items:center; font-size: 12px; font-weight: 900; color:#6B7280; }
.comment-nick{ color:#2A2F40; }
.comment-dot{ opacity:.6; }
.comment-time{ white-space:nowrap; }
.comment-text{ margin-top: 4px; font-size: 13px; font-weight: 700; color:#2A2F40; line-height: 1.25; white-space: pre-wrap; word-break: break-word; }
.comment-del{ border:0; background: transparent; cursor:pointer; font-weight: 1000; color: var(--purple); padding: 6px 8px; border-radius: 12px; }
.comment-del:hover{ background: rgba(109,92,246,.10); }
.comments-compose{ margin-top: 12px; }
.comments-login{ margin-top: 12px; }
.feed{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.post-card{
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 55px rgba(22,27,45,.07);
}
.post-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.post-who{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.post-avatar{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(109,92,246,.14);
  display:grid;
  place-items:center;
  font-size: 20px;
}
.post-name{
  font-weight: 1000;
  color:#2A2F40;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.post-time{
  font-size: 12px;
  font-weight: 800;
  color:#6B7280;
}
.post-title{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 1000;
  color:#2A2F40;
}
.post-body{
  margin-top: 8px;
  font-weight: 650;
  color:#2A2F40;
  opacity: .95;
  line-height: 1.45;
}

.read-more{
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--purple);
  font-weight: 1000;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.read-more:hover{ text-decoration: underline; }

/* Micro-animación (tap/click) */
.tap-pop{
  animation: tapPop .14s ease-out;
  transform-origin: center;
}
@keyframes tapPop{
  0%{ transform: translateY(0) scale(1); filter: brightness(1); }
  55%{ transform: translateY(1px) scale(.96); filter: brightness(1.06); }
  100%{ transform: translateY(0) scale(1); filter: brightness(1); }
}
.post-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.action-row{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.icon-count{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #E6E9F2;
  background: #F6F7FC;
  font-weight: 900;
  cursor:pointer;
}
.icon-count b{ font-weight: 1000; }
.icon-count.liked{
  background: rgba(109,92,246,.14);
  border-color: rgba(109,92,246,.35);
}
.icon-count.saved{
  background: rgba(255, 193, 7, .16);
  border-color: rgba(255, 193, 7, .35);
}
.textarea{
  width: 100%;
  border: 1px solid #E6E9F2;
  border-radius: 16px;
  padding: 12px 14px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  font-weight: 650;
  outline: none;
  resize: vertical;
  background: #fff;
}
.textarea:focus{
  border-color: rgba(109,92,246,.55);
  box-shadow: 0 0 0 4px rgba(109,92,246,.12);
}
.modal-card-wide{
  width: min(640px, calc(100vw - 24px));
}
.check-row{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 12.5px;
  font-weight: 800;
  color:#2A2F40;
}
.check-row input{ transform: translateY(2px); }

@media (max-width: 980px){
  .featured-list{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px){
  .featured-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .featured-list{ grid-template-columns: 1fr; }
}


/* Avatar dropdown (registro) */
.avatar-details{
  border:none;
  padding:0;
  margin:0;
}
.avatar-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background:#fff;
  border: 1px solid rgba(91,74,230,.18);
  font-weight:900;
  color:#2A2F40;
}
.avatar-summary::-webkit-details-marker{ display:none; }
.avatar-preview{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(91,74,230,.10);
  border: 1px solid rgba(91,74,230,.18);
  font-size:16px;
}
.avatar-grid-wrap{
  margin-top: 10px;
  max-height: 220px;
  overflow:auto;
  padding-right: 4px;
}


/* Responsive modals (no UI change, just prevents cut) */
.modal-card{
  max-height: calc(100vh - 80px);
  overflow: auto;
}
@media (max-width: 720px){
  .modal-card{
    width: min(92vw, 560px);
  }
}

/* Collapsible sections */
.reg-details, .login-details{
  border: none;
  padding: 0;
  margin: 0 0 12px;
}
.reg-details summary, .login-details summary{
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: #2A2F40;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(91,74,230,.18);
}
.reg-details summary::-webkit-details-marker,
.login-details summary::-webkit-details-marker{ display:none; }



/* v13 fix: keep user card aligned and boxed */
.sidebar .spectator-card{
  margin: 12px 0 14px;
 width:100%; box-sizing:border-box; }
.sidebar .spectator-btn{
  width:100%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  color:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.02em;
}
.spectator-btn:hover{ background: rgba(255,255,255,.24); }
.spectator-btn:active{ transform: translateY(1px); }


/* Reply bar (comentarios) */
.reply-bar{margin:8px 0 6px; padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.04); display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px;}
.reply-bar b{font-weight:600;}
.reply-bar button{border:0; background:transparent; cursor:pointer; font-weight:600;}

/* Replies + actions */

.comment-row.comment-reply{margin-left:34px;}


/* ===== Reaction picker (tipo FB) ===== */
.reaction-popover{
  position: fixed;
  z-index: 9999;
  padding: 10px 12px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform-origin: center;
  animation: popIn .14s ease-out;
}
.reaction-popover.hidden{ display:none; }

@keyframes popIn{
  from{ transform: translateY(10px) scale(.96); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.reaction-row{ display:flex; gap: 8px; align-items:center; }
.reaction-opt{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.0);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .12s ease, background .12s ease;
}
.reaction-opt:hover{
  transform: translateY(-6px) scale(1.18);
  background: rgba(109,92,246,.10);
}
.reaction-emoji{ font-size: 22px; line-height: 1; }
.reaction-hint{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -26px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(17,24,39,.88);
  color: #fff;
  white-space: nowrap;
}


/* mini reacts (top 3) */
.mini-react{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-right:4px;
  border-radius:999px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  font-size:12px;
  line-height:1;
}

/* FASE3: ocultar flechas del hero (solo dots) */
#heroPrev, #heroNext { display: none !important; }

/* FASE3: feed grid 2 columnas (compacto) */
.feed-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .feed-grid{ grid-template-columns: 1fr; }
}
/* Story modal */
.story-body{
  color:#111;
  font-size:15px;
  line-height:1.55;
  padding: 6px 2px 2px 2px;
  white-space: normal;
  word-break: break-word;
}
.related-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .related-grid{ grid-template-columns: 1fr; }
}
.related-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.related-title{ font-weight:800; margin-bottom:6px; }
.related-meta{ font-size:12px; color:#666; margin-bottom:10px; }
.related-actions{ display:flex; justify-content:flex-end; }

/* FASE3: feed en 2 columnas (compacto) */
.feed.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .feed.grid2{ grid-template-columns: 1fr; }
}

.feed.grid2 .post-card{ height: 100%; }

/* Explorar categorías */
.cat-bar{
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,0,0,0.06);
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
}
.cat-bar.hidden{ display:none; }
.cat-bar-left{ display:flex; flex-direction:column; gap:2px; }
.cat-bar-title{ font-weight: 900; }
.cat-bar-sub{ font-size: 12px; color:#666; }
.cat-bar-filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.cat-input{ width: 160px; }
@media (max-width: 980px){
  .cat-bar{ flex-direction:column; align-items:stretch; }
  .cat-bar-filters{ justify-content:stretch; }
  .cat-input{ width: 100%; }
}

.cat-tile{
  border-radius: 18px;
  padding: 16px;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.cat-tile:hover{ transform: translateY(-1px); }
.cat-name{ font-weight: 900; }
.cat-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.10);
  border: 1px solid rgba(124, 92, 255, 0.18);
}

.react b{
  font-size:12px;
  font-weight:900;
  line-height:1;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}

.hero-cat-row{ margin-top:10px; }
.hero-cat{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
}

/* Sidebar responsive (off-canvas en móvil) */
.menu-btn{ display:none; }

.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 50;
}

@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
  }
  .menu-btn{
    display:inline-grid;
    place-items:center;
    width:42px;height:42px;
    border-radius: 14px;
    margin-right: 10px;
    background: rgba(255,255,255,.9);
  }
  .topbar{ align-items: center; }
  .sidebar{
    position: fixed;
    z-index: 60;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 86vw);
    transform: translateX(-110%);
    transition: transform .22s ease;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
  }
  .sidebar.open{ transform: translateX(0); }
  .main{ padding: 22px 16px 50px; }
  h1{ font-size: 34px; }
}

@media (max-width: 520px){
  h1{ font-size: 28px; }
  .top-actions{ width: 100%; justify-content: flex-end; }
  .search{ width: 100%; }
  .primary-btn{ width: 100%; }
}

.post-chip-row{ margin-top:10px; }
.post-chip{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(91,74,230,.10);
  border: 1px solid rgba(91,74,230,.18);
  color:#3a2fb5;
  font-weight:800;
  font-size:12px;
}


/* =========================
   Reacciones emocionales (v2)
   - botones 36x36
   - tooltip hover / long-press
   ========================= */
.reaction-btn,
.reaction-opt{
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.reaction-btn .reaction-emoji,
.reaction-opt .reaction-emoji{
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reaction-count{
  font-size:11px;
  font-weight:700;
  margin-left:6px;
}
.reactions-mini{
  display:flex;
  gap:10px;
  align-items:center;
}
.reactions-mini .reaction-btn{
  padding:0 10px;
  width:auto;
  min-width:36px;
}

/* Tooltip */
.reaction-opt .reaction-tip{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-34px;
  background:rgba(15,15,20,.95);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s ease, transform .12s ease;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.reaction-opt:hover .reaction-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.reaction-opt.show-tip .reaction-tip{ opacity:1; }

/* Pikoso micro shake */
@keyframes pikosoShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-2px); }
  40%{ transform:translateX(2px); }
  60%{ transform:translateX(-1px); }
  80%{ transform:translateX(1px); }
}
.reaction-opt.pikoso-accent{
  outline:2px solid rgba(140, 20, 10, .18);
}
.reaction-opt.pikoso-accent:active{
  animation:pikosoShake .18s linear;
}

/* Mis confesiones header */
.mine-header{
  display:flex;
  gap:14px;
  margin:10px 0 16px;
  flex-wrap:wrap;
}
.mine-box{
  background:#fff;
  border-radius:16px;
  padding:14px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  min-width:240px;
}
.mine-box h4{
  margin:0 0 10px;
  font-size:14px;
  opacity:.85;
  letter-spacing:.2px;
}
.mine-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mine-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f2f2f6;
  font-size:12px;
  font-weight:600;
}
.mine-chip small{
  font-weight:800;
  opacity:.8;
}


/* Nickname link */
.nick-link{color:inherit;text-decoration:none;font-weight:700;}
.nick-link:hover{text-decoration:underline;}


/* ===========================
   Mobile Topbar (mobile only)
   =========================== */
:root{
  --mobileTopbarH: 62px;
}

.mobile-topbar{
  display:none;
}

@media (max-width: 720px){
  .mobile-topbar{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    height: var(--mobileTopbarH);
    align-items:center;
    justify-content:flex-end;
    padding: 0 12px;
    background: #0b0d12;
    z-index: 1200;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
  }
  .mobile-topbar::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,122,24,.55), rgba(255,255,255,0));
    opacity:.9;
    pointer-events:none;
  }
  .mobile-pikosin{
    position:absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    width: auto;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
  }
  .mobile-menu-btn{
    position:absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size: 20px;
    line-height: 1;
    display:grid;
    place-items:center;
  }

  .mobile-wordmark{
    position:absolute;
    left: 66px;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: auto;
    opacity: .95;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
  }

  /* Hide desktop menu button inside content header to avoid duplicate */
  .topbar .menu-btn{
    display:none !important;
  }

  /* Push the whole page down so the fixed topbar never overlaps content */
  .main{
    padding-top: calc(var(--mobileTopbarH) + 18px) !important;
  }

  /* Mobile spacing: que el CTA "+ Nueva confesión" no quede pegado al HERO */
  .top-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 16px;
  }
  .top-actions .primary-btn{
    width: 100%;
    justify-content: center;
  }
  .hero-card{
    margin-top: 0;
  }

  /* Mobile: evitamos logo duplicado dentro del sidebar */
  .sidebar .brand{ display:none; }

  /* Sidebar drawer should start below the topbar (so the topbar stays clickable) */
  .sidebar{
    top: var(--mobileTopbarH) !important;
    height: calc(100dvh - var(--mobileTopbarH)) !important;
  }
}

/* ===========================
   Desktop Header refinement
   =========================== */
@media (min-width: 980px){
  /* Desktop: buscador + CTA en la MISMA LÍNEA */
  .top-actions{
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 0;
    flex-wrap: nowrap;
  }
  .top-actions .search{
    width: min(520px, 38vw);
    min-width: 360px;
  }
  .top-actions #btnNueva{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ===========================
   Mobile: más aire entre CTA y Hero
   =========================== */
@media (max-width: 720px){
  .top-actions{ width: 100%; }
  .top-actions .search{ width: 100%; }
  .top-actions #btnNueva{ width: 100%; margin-top: 10px; margin-bottom: 16px; }
}

/* =========================
   Reportes + Admin
   ========================= */
.report-preview{
  border: 1px solid rgba(17,24,39,.08);
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.rp-top{ display:flex; gap:10px; align-items:center; }
.rp-avatar{ width:34px; height:34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(17,24,39,.08); }
.rp-nick{ font-weight: 900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-meta{ font-size: 12px; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-title{ margin-top:10px; font-weight: 900; }
.rp-body{ margin-top:6px; font-size: 14px; line-height: 1.35; opacity:.92; }
.report-label{ font-weight: 900; font-size: 13px; margin-bottom: 8px; }
.report-reasons{ display:flex; flex-wrap: wrap; gap:10px; }
.report-reasons .rr{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid rgba(17,24,39,.08);
  background: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}
.report-reasons input{ transform: translateY(1px); }
.report-hint{ font-size: 12px; opacity:.7; margin-top: 8px; }

.admin-panel{
  border: 1px solid rgba(17,24,39,.08);
  background: #ffffff;
  border-radius: 18px;
  padding: 14px;
}
.admin-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
.admin-title{ font-weight: 1000; font-size: 16px; }
.admin-muted{ font-size: 12px; opacity:.75; }
.admin-filters{ display:flex; flex-wrap: wrap; gap: 8px; }
.admin-filters .pill{
  border: 1px solid rgba(99,102,241,.20);
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 1000;
  cursor: pointer;
}
.admin-filters .pill.active{ background:#4f46e5; color:#fff; }
.admin-list{ margin-top: 12px; display:flex; flex-direction: column; gap: 10px; }
.admin-item{
  border: 1px solid rgba(17,24,39,.08);
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
}
.admin-item:hover{ filter: brightness(0.99); }
.admin-item-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.admin-badge{ font-weight: 1000; font-size: 12px; padding: 6px 10px; border-radius: 999px; background:#fff; border:1px solid rgba(17,24,39,.08); }
.admin-item-title{ font-weight: 1000; margin-top: 8px; }
.admin-item-body{ font-size: 13px; opacity:.85; margin-top: 6px; }
.admin-actions{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 12px; }
.admin-actions .btn{ border-radius: 12px; font-weight: 1000; }
.btn.danger{ background:#111827; color:#fff; }

/* =========================================================
   SALAS_UI_V1 (tipo Reddit)
   ========================================================= */

.salas-toolbar{display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap;}
.salas-search{flex:1; min-width:260px; position:relative;}
.salas-search-ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.7;}
.salas-search .input{padding-left:38px;}
.salas-sort{width:170px; min-width:170px;}

.salas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:14px;}
@media (max-width:980px){ .salas-grid{grid-template-columns:1fr;} }

.sala-card{background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.06); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;}
.sala-card:hover{transform:translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.09);}
.sala-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.sala-name{font-size:16px; font-weight:1000;}
.sala-meta{font-size:12px; opacity:.75; white-space:nowrap;}
.sala-desc{margin-top:8px; font-size:13px; opacity:.9; line-height:1.35;}
.sala-actions{display:flex; justify-content:flex-end; margin-top:12px;}




/* ===== SALAS_UI_V2 ===== */
.salas-shell{max-width:1100px;margin:0 auto;padding:18px 18px 28px;}
.salas-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.salas-title h1{margin:0;font-size:28px;}
.salas-sub{margin-top:4px;color:rgba(0,0,0,.55);font-size:13px;}
.salas-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.salas-toolbar{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap;}
.salas-search{flex:1;min-width:280px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.06);}
.salas-search input{border:none;outline:none;width:100%;font-size:14px;background:transparent;}
.salas-search-ico{opacity:.7}
.salas-sort select{border-radius:999px;padding:10px 14px;border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.06);}

.salas-empty{margin-top:18px;}
.salas-empty-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px 18px;box-shadow:0 18px 40px rgba(0,0,0,.06);max-width:560px;}
.salas-empty-title{font-weight:800;font-size:18px;margin-bottom:4px;}
.salas-empty-sub{color:rgba(0,0,0,.6);margin-bottom:12px;}

.sala-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.06);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;border-left:4px solid rgba(255,72,0,.55);}
.sala-card:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(0,0,0,.09);}
.sala-card:focus{outline:2px solid rgba(255,72,0,.35);outline-offset:3px;}
.sala-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sala-card-path{font-weight:800;color:rgba(0,0,0,.55);font-size:12px;}
.sala-card-badges{display:flex;gap:8px;align-items:center;}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 9px;font-weight:800;font-size:11px;}
.badge-danger{background:#ff3b30;color:#fff;}
.sala-card-title{margin-top:6px;font-weight:900;font-size:18px;line-height:1.2;}
.sala-card-desc{margin-top:6px;color:rgba(0,0,0,.68);font-size:13px;line-height:1.35;min-height:36px;}
.sala-card-meta{margin-top:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.sala-card-chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.06);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;color:rgba(0,0,0,.6);}
.sala-card-cta{display:flex;gap:12px;align-items:center;}
.muted{color:rgba(0,0,0,.55);font-size:12px;}
.arrow{font-weight:900;color:#ff4800;}
.sala-card-url{margin-top:10px;color:rgba(0,0,0,.4);font-size:12px;}

.sala-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-top:6px;}
.sala-head-main{flex:1;min-width:280px;}
.sala-path{font-size:12px;font-weight:900;color:rgba(0,0,0,.55);}
.sala-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;}
.sala-name{font-size:26px;font-weight:950;line-height:1.1;}
.sala-badges{display:flex;gap:8px;align-items:center;}
.sala-desc{margin-top:6px;color:rgba(0,0,0,.68);font-size:13px;max-width:760px;}
.sala-chips{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.sala-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

.sala-filters{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.pill{border:none;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:9px 12px;font-weight:800;cursor:pointer;box-shadow:0 14px 36px rgba(0,0,0,.06);}
.pill.active{background:#111;color:#fff;border-color:#111;}
.sala-posts{margin-top:16px;display:flex;flex-direction:column;gap:14px;}

.post-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.06);}
.post-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.tag{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-weight:900;font-size:11px;letter-spacing:.3px;}
.tag-CONFESION{background:rgba(255,72,0,.12);border:1px solid rgba(255,72,0,.25);color:#ff4800;}
.tag-CHISME{background:rgba(255,196,0,.18);border:1px solid rgba(255,196,0,.35);color:#b37a00;}
.tag-HISTORIA{background:rgba(0,122,255,.12);border:1px solid rgba(0,122,255,.25);color:#007aff;}
.tag-OPINION{background:rgba(88,86,214,.14);border:1px solid rgba(88,86,214,.30);color:#5856d6;}
.post-title{margin-top:8px;font-weight:950;font-size:18px;line-height:1.2;}
.post-text{margin-top:8px;color:rgba(0,0,0,.75);font-size:13px;line-height:1.4;white-space:pre-wrap;}
.post-text-full{color:rgba(0,0,0,.8);font-size:14px;line-height:1.55;white-space:pre-wrap;}
.link-btn{margin-top:8px;border:none;background:transparent;color:#ff4800;font-weight:900;cursor:pointer;padding:0;}
.post-actions{margin-top:12px;display:flex;gap:8px;}
.icon-btn{border:none;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:8px 10px;cursor:pointer;font-weight:900;}

.modal-wide{max-width:720px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.field span{font-weight:900;color:rgba(0,0,0,.65);font-size:12px;}
.field input,.field textarea,.field select{border-radius:14px;border:1px solid rgba(0,0,0,.08);padding:10px 12px;font-size:14px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.06);}
.check{display:flex;gap:10px;align-items:center;margin:8px 0;}
.disclaimer{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:10px 12px;color:rgba(0,0,0,.6);font-size:12px;}
.form-error{margin-top:6px;background:rgba(255,59,48,.10);border:1px solid rgba(255,59,48,.22);color:#b91c1c;border-radius:14px;padding:10px 12px;font-weight:800;}
.soft-reminder{margin-top:10px;background:rgba(255,196,0,.14);border:1px solid rgba(255,196,0,.28);color:rgba(0,0,0,.72);border-radius:14px;padding:10px 12px;font-weight:800;font-size:12px;}

/* --- Salas: botón flotante Crear sala --- */
.fab{
  position: fixed;
  right: 28px;
  bottom: 22px;
  z-index: 60;
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  background: #ff5a00;
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.fab:hover{filter: brightness(0.98);}
.fab:active{transform: translateY(1px);}
.fab:focus{outline: none; box-shadow: 0 0 0 3px rgba(255,90,0,.25), 0 18px 38px rgba(0,0,0,.18);} 



/* --- SALA HERO (detalle) --- */
.sala-hero{
  margin-top: 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.sala-hero-left{display:flex; gap:14px; align-items:flex-start; min-width:260px; flex:1;}
.sala-hero-icon{
  width:56px; height:56px;
  border-radius:16px;
  background:rgba(255,90,0,.12);
  border:1px solid rgba(255,90,0,.22);
  display:flex; align-items:center; justify-content:center;
  font-weight:1000; font-size:22px; color:#ff5a00;
  overflow:hidden;
  flex:0 0 auto;
}
.sala-hero-icon.has-img{background:#fff; border-color: rgba(0,0,0,.10);}
.sala-hero-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.sala-hero-title{font-weight:950; font-size:26px; line-height:1.1;}
.sala-hero-desc{margin-top:6px; color:rgba(0,0,0,.68); font-size:13px; max-width:760px;}
.sala-hero-meta{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.sala-hero-subs{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  font-weight:900;
  font-size:12px;
  color:rgba(0,0,0,.70);
}

.sala-hero-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  flex:0 0 auto;
  min-width:260px;
}
.sala-hero-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.sala-hero-actions{gap:8px;}
@media (max-width: 820px){
  .sala-hero-right{align-items:flex-start; min-width:unset; width:100%;}
  .sala-hero-row{justify-content:flex-start;}
}

/* Botón naranja (para Crear publicación) */
.orange-btn{
  border:none;
  border-radius:999px;
  padding:10px 14px;
  font-weight:950;
  cursor:pointer;
  background:#ff5a00;
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  height:38px;
}
.orange-btn:hover{filter:brightness(0.98);}
.orange-btn:active{transform:translateY(1px);}
.orange-btn:disabled{opacity:.55; cursor:not-allowed;}