*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow-y:auto;}

@font-face {
  font-family: 'Playfair Display';
  src: local('Playfair Display');
  font-style: normal;
  font-weight: 400 500;
  unicode-range:
    U+0020-007E,
    U+00A0-00FF,
    U+0100-017F,
    U+0180-024F,
    U+2000-206F,
    U+2070-209F,
    U+20A0-20CF,
    U+2100-214F,
    U+FB01-FB02;
}
:root{
  --bg:#FBF6F0;--surface:#FFF9F4;--s2:#F5EDE3;
  --w1:#C9785A;--w2:#8B4A2A;--w3:#E8C5A8;--w4:#F2DBC8;
  --tx:#2C1810;--tx2:#7A5540;--tx3:#A07050;
  --bd:#E8D5C0;--r:14px;--r2:10px;
  --fd:'Playfair Display',serif;--fb:'DM Sans',sans-serif;
}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);font-size:15px;line-height:1.5;}
input,textarea,select{font-family:var(--fb),'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Apple Symbols',sans-serif;font-size:14px;color:var(--tx);}

/* ---- reset ALL button defaults ---- */
button{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  font-family:var(--fb);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}

/* ---- auth ---- */
#auth{display:flex;align-items:center;justify-content:center;min-height:100%;padding:2rem;}
.acard{background:var(--surface);border:1px solid var(--bd);border-radius:20px;padding:2.25rem 2rem;width:100%;max-width:390px;}
.alogo{font-family:var(--fd);font-size:1.9rem;color:var(--w1);text-align:center;margin-bottom:.2rem;}
.asub{font-size:.78rem;color:var(--tx3);text-align:center;margin-bottom:1.75rem;}
.atabs{display:flex;border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden;margin-bottom:1.5rem;}
.atab{
  flex:1;padding:.6rem;font-size:.83rem;
  background:var(--surface);color:var(--tx2);
  border:none;cursor:pointer;font-family:var(--fb);
  transition:background .15s,color .15s;
}
.atab.on{background:var(--w1);color:#fff;}
.field{margin-bottom:.9rem;}
.field label{display:block;font-size:.75rem;color:var(--tx2);margin-bottom:.35rem;font-weight:500;}
.field input{
  width:100%;padding:.7rem .95rem;border:1px solid var(--bd);
  border-radius:var(--r2);background:var(--bg);color:var(--tx);
  transition:border-color .2s;outline:none;
}
.field input:focus{border-color:var(--w1);}
.btn-fill{
  width:100%;padding:.78rem;margin-top:.4rem;
  background:var(--w1);color:#fff;
  border-radius:var(--r2);font-size:.9rem;font-weight:500;
  border:none;cursor:pointer;font-family:var(--fb);
  transition:background .15s;display:block;text-align:center;
}
.btn-fill:hover{background:var(--w2);}
.aerr{color:#a33;font-size:.78rem;margin-top:.5rem;text-align:center;min-height:1rem;}

/* ---- layout ---- */
#app{display:none;flex-direction:column;min-height:100%;}
header{
  background:var(--surface);border-bottom:1px solid var(--bd);
  padding:.75rem 1.25rem;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:50;
}
.hlogo{font-family:var(--fd);font-size:1.35rem;color:var(--w1);cursor:pointer;flex-shrink:0;}

/* Nav wrapper: logo left, main center, actions right */
.hnav{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1;
  justify-content:flex-end;
}
.hnav-main{
  display:flex;
  align-items:center;
  gap:.2rem;
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:.28rem .32rem;
}
.hnav-actions{
  display:flex;
  align-items:center;
  gap:.25rem;
}
.hnav-divider{
  width:1px;height:20px;
  background:var(--bd);
  margin:0 .2rem;
  flex-shrink:0;
}

/* nav buttons */
.nbtn{
  padding:.42rem .9rem;border-radius:8px;
  background:transparent;color:var(--tx2);font-size:.81rem;
  letter-spacing:.01em;
}
.nbtn:hover{background:var(--w4);color:var(--w2);}
.nbtn.on{background:var(--surface);color:var(--w1);box-shadow:0 1px 4px rgba(44,24,16,.1);}
.nlog{
  width:34px;height:34px;border-radius:50%;
  background:transparent;color:var(--tx3);
}
.nlog:hover{background:var(--w4);color:var(--w2);}

/* logout button */
.nlog-out{
  display:inline-flex;align-items:center;gap:.38rem;
  padding:.4rem .82rem;border-radius:var(--r2);
  background:transparent;
  color:var(--tx3);
  font-size:.78rem;
  border:1px solid var(--bd);
  transition:background .15s,color .15s,border-color .15s;
}
.nlog-out:hover{background:var(--s2);color:var(--tx2);border-color:var(--tx3);}

main{flex:1;padding:1.25rem;max-width:660px;margin:0 auto;width:100%;}

/* feed */
.ftitle{font-family:var(--fd);font-size:1.5rem;color:var(--tx);margin-bottom:.15rem;}
.fsub{font-size:.8rem;color:var(--tx3);margin-bottom:1.1rem;}

/* compose */
.ccard{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);padding:1.15rem;margin-bottom:1.1rem;}
.ctop{display:flex;gap:.7rem;align-items:flex-start;}
.av{
  width:36px;height:36px;border-radius:50%;
  background:var(--w3);color:var(--w2);font-size:.8rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
}
.av img{width:100%;height:100%;object-fit:cover;}
/* Cuando la img falla, onerror inyecta un <span> con las iniciales */
.av span,.pav span{
  font-weight:500;color:var(--w2);line-height:1;
}
.av span{font-size:.8rem;}
.pav span{font-size:1.3rem;}
.ctxt{
  flex:1;border:none;background:transparent;resize:none;
  font-size:.93rem;color:var(--tx);outline:none;min-height:56px;
  line-height:1.6;font-family:var(--fb);
}
.ctxt::placeholder{color:var(--tx3);}
.cbot{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--bd);}
.csel{
  border:1px solid var(--bd);border-radius:var(--r2);
  padding:.35rem .7rem;font-size:.77rem;
  background:var(--bg);color:var(--tx2);outline:none;cursor:pointer;
}

/* post button */
.pbtn{
  padding:.44rem 1.1rem;
  background:var(--w1);color:#fff;
  border-radius:var(--r2);font-size:.83rem;font-weight:500;
}
.pbtn:hover{background:var(--w2);}

/* cats */
.cats{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.catb{
  padding:.35rem .8rem;border-radius:20px;font-size:.75rem;
  border:1px solid var(--bd);background:var(--surface);color:var(--tx2);
}
.catb:hover{background:var(--w4);color:var(--w2);}
.catb.on{background:var(--w1);color:#fff;border-color:var(--w1);}

/* post card */
.pcard{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);padding:1.15rem;margin-bottom:.9rem;transition:border-color .18s,box-shadow .18s;}
.pcard:hover{border-color:var(--w3);box-shadow:0 4px 18px rgba(44,24,16,.08);}
.phead{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;}
.puname{font-weight:500;font-size:.86rem;color:var(--tx);cursor:pointer;}
.puname:hover{color:var(--w1);}
.ptime{font-size:.7rem;color:var(--tx3);}
.pbadge{font-size:.68rem;padding:.18rem .6rem;border-radius:10px;background:var(--w4);color:var(--w2);}
.pcontent{font-family:var(--fd),system-ui,-apple-system,'Noto Sans Symbols 2','Noto Sans Symbols','Noto Sans','Segoe UI Symbol','Apple Symbols',sans-serif;font-size:1rem;line-height:1.75;color:var(--tx);white-space:pre-wrap;word-break:break-word;margin-bottom:.9rem;unicode-bidi:plaintext;}

/* action buttons on posts */
.pacts{display:flex;gap:.35rem;align-items:center;}
.abtn{
  padding:.36rem .65rem;border-radius:var(--r2);
  background:transparent;color:var(--tx3);font-size:.78rem;
  gap:.3rem;
}
.abtn:hover{background:var(--w4);color:var(--w2);}
.abtn.liked{color:var(--w1);}
.abtn.sav{color:var(--w1);}

/* like button — icono corazón */
.like-btn {
  gap: .32rem;
  transition: color .18s, background .15s, transform .12s;
}
.like-btn i {
  font-size: .88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color .18s, transform .15s;
}
.like-btn.liked i {
  color: var(--like-color, var(--w1));
  transform: scale(1.15);
}
.like-btn:not(.liked):hover i {
  transform: scale(1.1);
}

/* Botón de comentario */
.comment-btn {
  gap: .32rem;
  transition: color .18s, background .15s;
}
.comment-btn i {
  font-size: .88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color .18s, transform .15s;
}
.comment-btn.active i {
  color: var(--w1);
  transform: scale(1.15);
}
.comment-btn:not(.active):hover i {
  transform: scale(1.1);
}

/* Botón de guardar */
.save-btn {
  gap: .32rem;
  transition: color .18s, background .15s;
}
.save-btn i {
  font-size: .88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color .18s, transform .15s;
}
.save-btn.sav i {
  color: var(--w1);
  transform: scale(1.15);
}
.save-btn:not(.sav):hover i {
  transform: scale(1.1);
}

/* Botón de copiar */
.copy-btn {
  gap: .32rem;
  transition: color .18s, background .15s;
}
.copy-btn i {
  font-size: .88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color .18s, transform .15s;
}
.copy-btn.copy-done i {
  color: var(--w1);
  transform: scale(1.15);
}
.copy-btn:hover i {
  transform: scale(1.1);
}

/* Animación pop — compartida por todos los iconos de acción */
@keyframes like-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.38); }
  100% { transform: scale(1.15); }
}
.like-btn.pop i,
.comment-btn i.pop,
.save-btn i.pop,
.copy-btn i.pop {
  animation: like-pop .25s ease;
}

/* dots menu */
.mwrap{margin-left:auto;position:relative;}
.dotsbtn{
  width:28px;height:28px;border-radius:var(--r2);
  background:transparent;color:var(--tx3);font-size:.95rem;
  letter-spacing:1px;line-height:1;
}
.dotsbtn:hover{background:var(--w4);color:var(--w2);}
.dotsbtn.open{background:var(--w4);color:var(--w2);}
.pmenu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--r2);box-shadow:0 4px 14px rgba(44,24,16,.1);
  min-width:170px;z-index:9999;
}
.mi{
  width:100%;padding:.62rem .95rem;font-size:.81rem;
  background:transparent;color:var(--tx2);text-align:left;
  gap:.55rem;justify-content:flex-start;display:flex;
}
.mi i {
  font-size: .88rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: inherit;
}
.mi:hover{background:var(--w4);color:var(--w2);}
.mi.del{color:#954040;}
.mi.del:hover{background:#fdf0f0;color:#833;}

/* comments */
.csec{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--bd);}
.crow{display:flex;gap:.55rem;align-items:flex-end;margin-bottom:.7rem;}
.cinput{
  width:100%;padding:.47rem .85rem;border:1px solid var(--bd);
  border-radius:20px;background:var(--bg);color:var(--tx);
  outline:none;font-size:.8rem;font-family:var(--fb);transition:border-color .2s;
}
.cinput:focus{border-color:var(--w1);}
.sendbtn{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--w1);color:#fff;font-size:.85rem;
}
.sendbtn:hover{background:var(--w2);}
.cm{display:flex;gap:.55rem;margin-bottom:.55rem;align-items:flex-start;}
.cmb{flex:1;background:var(--bg);padding:.47rem .8rem;border-radius:11px;}
.cma{font-size:.75rem;font-weight:500;color:var(--w2);margin-bottom:.12rem;}
.cmt{font-size:.8rem;color:var(--tx);}

/* profile */
.ppage{padding-top:1.25rem;}
.pavwrap{display:flex;justify-content:center;margin-bottom:.7rem;}
.pav{
  width:90px;height:90px;border-radius:50%;
  border:2.5px solid var(--bd);background:var(--w3);
  color:var(--w2);font-size:1.8rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:pointer;position:relative;
}
.pav img{width:100%;height:100%;object-fit:cover;}
.pavov{
  position:absolute;inset:0;background:rgba(44,24,16,.35);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.2s;font-size:.68rem;color:#fff;text-align:center;
}
.pav:hover .pavov{opacity:1;}
.pinfo{text-align:center;padding:0 1rem;}
.pname{font-family:var(--fd);font-size:1.35rem;color:var(--tx);margin-bottom:.3rem;}
.pbio{font-size:.855rem;color:var(--tx2);line-height:1.6;max-width:370px;margin:0 auto .7rem;}

/* edit profile button */
.editbtn{
  padding:.45rem 1.15rem;
  border:1.5px solid var(--w1);border-radius:var(--r2);
  color:var(--w1);background:transparent;font-size:.8rem;
}
.editbtn:hover{background:var(--w1);color:#fff;}

/* profile tabs */
.ptabs{display:flex;border-bottom:1px solid var(--bd);margin:1.2rem 0 1rem;}
.ptab{
  flex:1;padding:.58rem;text-align:center;font-size:.81rem;
  color:var(--tx3);border-bottom:2px solid transparent;
  background:transparent;
}
.ptab:hover{color:var(--tx2);}
.ptab.on{color:var(--w1);border-bottom-color:var(--w1);}

/* modal */
.mov{
  position:fixed;inset:0;background:rgba(44,24,16,.38);
  z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;
}
.mdl{background:var(--surface);border-radius:20px;padding:1.85rem;width:100%;max-width:390px;border:1px solid var(--bd);}
.mdlt{font-family:var(--fd);font-size:1.15rem;margin-bottom:1.15rem;color:var(--tx);}
.mdl textarea{
  width:100%;padding:.7rem .95rem;border:1px solid var(--bd);
  border-radius:var(--r2);background:var(--bg);color:var(--tx);
  font-size:.88rem;resize:none;outline:none;min-height:76px;
  font-family:var(--fb);transition:border-color .2s;
}
.mdl textarea:focus{border-color:var(--w1);}
.macts{display:flex;gap:.7rem;margin-top:1.15rem;justify-content:flex-end;}

/* cancel / save buttons */
.cancelbtn{
  padding:.55rem 1.1rem;
  border:1px solid var(--bd);border-radius:var(--r2);
  color:var(--tx2);background:var(--surface);font-size:.83rem;
}
.cancelbtn:hover{background:var(--s2);}
.savebtn{
  padding:.55rem 1.1rem;
  background:var(--w1);color:#fff;
  border-radius:var(--r2);font-size:.83rem;font-weight:500;
}
.savebtn:hover{background:var(--w2);}

/* empty */
.empty{text-align:center;padding:2.25rem 1rem;color:var(--tx3);}
.ei{font-size:1.75rem;margin-bottom:.4rem;}
.el{font-size:.82rem;}

/* toast */
.toast{
  position:fixed;bottom:72px;left:50%;transform:translateX(-50%);
  background:var(--tx);color:#fff;padding:.58rem 1.2rem;
  border-radius:20px;font-size:.8rem;z-index:200;
  opacity:0;transition:.28s;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;}

footer{
  background:var(--surface);border-top:1px solid var(--bd);
  padding:.9rem;text-align:center;font-size:.73rem;color:var(--tx3);font-style:italic;
}
footer b{color:var(--w2);font-weight:500;}

/* ---- BÚSQUEDA ---- */
header { position: relative; }
#searchOverlay {
  position: absolute;
  top: calc(100% + 6px);
  right: 1.25rem;
  width: min(340px, calc(100vw - 2.5rem));
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(44,24,16,.12);
  z-index: 60;
  padding: .6rem;
}
.searchInput {
  width: 100%;
  padding: .6rem .9rem;
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  background: var(--bg);
  color: var(--tx);
  font-size: .85rem;
  font-family: var(--fb);
  outline: none;
  transition: border-color .2s;
}
.searchInput:focus { border-color: var(--w1); }
.searchResults { margin-top: .45rem; }
.s-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: var(--r2);
  cursor: pointer;
  transition: background .15s;
}
.s-row:hover { background: var(--w4); }
.s-name { font-size: .85rem; color: var(--tx); font-weight: 500; }
.s-empty { font-size: .78rem; color: var(--tx3); text-align: center; padding: .6rem; }

/* ---- CARPETAS ---- */
.folder-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .85rem;
}
.folder-new-btn {
  padding: .42rem 1rem;
  border: 1.5px solid var(--w1);
  border-radius: var(--r2);
  color: var(--w1);
  background: transparent;
  font-size: .8rem;
  font-family: var(--fb);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.folder-new-btn:hover { background: var(--w1); color: #fff; }

.folders-grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1rem;
}

.folder-card {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s;
}
.folder-card.open { border-color: var(--w3); }
.folder-card:hover { border-color: var(--w3); }

.folder-card-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1rem;
  cursor: pointer;
  user-select: none;
}
.folder-icon { font-size: 1.1rem; flex-shrink: 0; }
.folder-name { flex: 1; font-size: .9rem; font-weight: 500; color: var(--tx); }
.folder-count {
  font-size: .72rem;
  background: var(--w4);
  color: var(--w2);
  padding: .15rem .55rem;
  border-radius: 10px;
  flex-shrink: 0;
}
.folder-chevron { font-size: .65rem; color: var(--tx3); flex-shrink: 0; }

.folder-actions { display: flex; gap: .3rem; align-items: center; }
.folder-act-btn {
  all: unset;
  box-sizing: border-box;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r2);
  font-size: .82rem;
  color: var(--tx3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.folder-act-btn:hover { background: var(--w4); color: var(--w2); }
.folder-act-btn.del:hover { background: #fdf0f0; color: #833; }

.folder-posts {
  border-top: 1px solid var(--bd);
  padding: .85rem .85rem .4rem;
}

.folder-section-label {
  font-size: .72rem;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: .6rem 0 .5rem;
  padding-left: .2rem;
}

/* ---- SKELETON LOADING ---- */
.skeleton-card {
  background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);
  padding:1.15rem;margin-bottom:.9rem;
}
.sk-line {
  height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bd) 25%,var(--w4) 50%,var(--bd) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;
}
.sk-avatar { width:36px;height:36px;border-radius:50%;flex-shrink:0; }
.sk-head { display:flex;gap:.7rem;align-items:center;margin-bottom:.85rem; }
.sk-meta { flex:1;display:flex;flex-direction:column;gap:.4rem; }
.sk-line.short { width:38%; }
.sk-line.tiny  { width:22%;height:9px; }
.sk-line.full  { width:100%;margin-bottom:.5rem; }
.sk-line.med   { width:72%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---- POST FADE-IN ---- */
@keyframes postIn { from{opacity:0} to{opacity:1} }
.pcard { animation: postIn .25s ease both; }

/* ---- SELECTOR DE CATEGORÍA EN COMPOSE (pills) ---- */
.compose-cats {
  display:flex;gap:.35rem;flex-wrap:wrap;
  margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--bd);
}
.compose-catb {
  padding:.3rem .72rem;border-radius:20px;font-size:.73rem;
  border:1px solid var(--bd);background:var(--surface);color:var(--tx2);
  transition:background .15s,color .15s,border-color .15s;
}
.compose-catb:hover{background:var(--w4);color:var(--w2);}
.compose-catb.on{background:var(--w1);color:#fff;border-color:var(--w1);}

/* ---- PCARD hover lift ---- */
.pcard{
  transition:border-color .18s, box-shadow .18s;
}
.pcard:hover{
  border-color:var(--w3);
  box-shadow:0 4px 16px rgba(44,24,16,.07);
}

/* ---- TEXTAREA EXPAND ON FOCUS ---- */
.ctxt { transition: min-height .2s ease; }
.ctxt:focus { min-height: 110px; }

/* ---- EMPTY STATE ---- */
.empty-friendly { text-align:center;padding:2.5rem 1rem; }
.empty-friendly .ei { font-size:1.9rem;margin-bottom:.55rem; }
.empty-friendly .el { font-size:.84rem;color:var(--tx3);line-height:1.6; }

/* ---- PASSWORD TOGGLE ---- */
.field-pw { position:relative; }
.field-pw input { padding-right:2.5rem; }
.pw-toggle {
  position:absolute;right:.75rem;bottom:0;
  height:calc(100% - 1.25rem);
  background:transparent;color:var(--tx3);font-size:.85rem;
  width:24px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s;
}
.pw-toggle:hover { color:var(--w1); }

/* ---- INFINITE SCROLL SENTINEL ---- */
.scroll-sentinel { height:1px;margin-top:1rem; }

/* ---- COPY CONFIRM ---- */
.copy-done { color:var(--w1) !important; }

/* ---- CARGA ---- */
.loading-dots { display:flex; gap:.4rem; align-items:center; }
.loading-dots span {
  width:8px; height:8px; border-radius:50%; background:var(--w3);
  animation: ldot .9s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.15s;}
.loading-dots span:nth-child(3){animation-delay:.3s;}
@keyframes ldot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ---- CONTADOR DE CARACTERES ---- */
.char-count { font-size:.72rem; color:var(--tx3); }
.char-count.warn { color:#c07020; }
.char-count.over { color:#a33; font-weight:600; }

/* ---- BOTON COPIAR ---- */
.copy-btn { gap:.28rem; }
.copy-btn:active { transform:scale(.95); }

/* ---- BOTON COMPARTIR ---- */
.share-btn { gap:.28rem; }
.share-btn:active { transform:scale(.95); }

@media (max-width: 640px) {
  /* Ocultar la etiqueta de texto del botón compartir en móvil */
  .share-btn .share-label { display: none; }
  /* Reducir padding de botones de acción en móvil para que quepan */
  .abtn { padding: .34rem .5rem; font-size: .76rem; gap: .22rem; }
  .pacts { gap: .15rem; }
}

/* ---- MENÚ DE COMPARTIR ---- */
.share-menu-title {
  font-size:.72rem;
  color:var(--tx3);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.5rem .85rem .25rem;
  font-family:var(--fb);
}

/* ---- RESPUESTAS A COMENTARIOS ---- */
.cinput-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reply-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding: .28rem .65rem;
  background: var(--w4);
  border: 1px solid var(--w3);
  border-bottom: none;
  border-radius: var(--r2) var(--r2) 0 0;
  font-size: .73rem;
  color: var(--tx2);
}
.reply-indicator b { color: var(--w1); font-weight: 600; }
.reply-cancel-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: .68rem;
  color: var(--tx3);
  padding: .1rem .3rem;
  border-radius: 4px;
  font-family: var(--fb);
  flex-shrink: 0;
}
.reply-cancel-btn:hover { color: #a33; background: #fdf0f0; }

/* Cuando hay reply activo, redondear el input solo abajo */
.reply-indicator[style*="display:flex"] + .cinput,
.reply-indicator:not([style*="none"]) + .cinput {
  border-radius: 0 0 var(--r2) var(--r2);
}

/* Comentarios que son respuesta (indentados) */
.cm-reply {
  margin-left: 1.6rem;
  border-left: 2px solid var(--w4);
  padding-left: .55rem;
}

/* Botón de responder en comentarios */
.cmt-reply-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: .67rem;
  color: var(--tx3);
  padding: .1rem .32rem;
  border-radius: 4px;
  font-family: var(--fb);
  transition: color .15s, background .15s;
}
.cmt-reply-btn:hover { color: var(--w1); background: var(--w4); }

/* Label "↳ respondiendo a" en comentario */
.cmt-reply-to {
  font-size: .67rem;
  color: var(--w1);
  font-weight: 400;
  opacity: .8;
}

/* ---- CARGAR MAS ---- */
.load-more-btn {
  padding:.55rem 1.4rem;
  border:1.5px solid var(--bd);
  border-radius:20px;
  background:var(--surface);
  color:var(--tx2);
  font-size:.8rem;
  font-family:var(--fb);
  transition:background .15s, border-color .15s, color .15s;
}
.load-more-btn:hover { background:var(--w4); border-color:var(--w3); color:var(--w2); }
.load-more-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---- NOTIFICACIONES ---- */
.notif-badge {
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; border-radius:8px;
  background:var(--w1); color:#fff;
  font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; pointer-events:none;
}

/* Badge de nuevos posts en comunidad (nav móvil) */
.comm-dot {
  position: absolute;
  top: 6px; right: calc(50% - 14px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--w1);
  border: 2px solid var(--surface);
  pointer-events: none;
  display: none;
}
.comm-dot.visible { display: block; }

.notif-panel {
  position:fixed; top:calc(var(--header-h,58px) + 8px); right:1rem;
  width:min(320px,calc(100vw - 2rem));
  background:var(--surface); border:1px solid var(--bd);
  border-radius:var(--r); box-shadow:0 8px 28px rgba(44,24,16,.14);
  z-index:70; max-height:380px;
  display:flex; flex-direction:column; overflow:hidden;
}

.notif-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:.65rem .85rem; border-bottom:1px solid var(--bd);
  font-size:.8rem; font-weight:500; color:var(--tx2);
  flex-shrink:0; background:var(--surface);
}

.notif-list {
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.notif-clear {
  all:unset; box-sizing:border-box; cursor:pointer;
  font-size:.72rem; color:var(--tx3); font-family:var(--fb);
}
.notif-clear:hover { color:var(--w1); }

.notif-row {
  display:flex; align-items:flex-start; gap:.55rem;
  padding:.65rem .85rem; border-bottom:1px solid var(--bd);
  cursor:pointer; transition:background .15s;
}
.notif-row:hover { background:var(--w4); }
.notif-row:last-child { border-bottom:none; }

.notif-icon { font-size:.9rem; color:var(--w1); flex-shrink:0; margin-top:.1rem; }
.notif-body { flex:1; font-size:.78rem; color:var(--tx); line-height:1.4; }
.notif-name { font-weight:600; color:var(--w2); }
.notif-preview { font-size:.72rem; color:var(--tx3); margin-top:.2rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:200px; }
.notif-time { font-size:.68rem; color:var(--tx3); flex-shrink:0; }

/* ---- COMENTARIOS: TIEMPO Y ELIMINAR ---- */
.cma {
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-size:.75rem; font-weight:500; color:var(--w2); margin-bottom:.12rem;
}
.cmt-time { font-size:.68rem; color:var(--tx3); font-weight:400; }
.cmt-del {
  all:unset; box-sizing:border-box; cursor:pointer;
  font-size:.68rem; color:var(--tx3); margin-left:auto;
  padding:.1rem .3rem; border-radius:4px; font-family:var(--fb);
}
.cmt-del:hover { color:#a33; background:#fdf0f0; }

/* ---- HIGHLIGHT AL NAVEGAR DESDE NOTIF ---- */
@keyframes highlightPost { 0%,100%{background:var(--surface)} 30%{background:var(--w4)} }
.pcard.highlight { animation: highlightPost 1.8s ease; }

/* folder picker modal */
.folder-pick-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .65rem .85rem;
  border-radius: var(--r2);
  border: 1px solid var(--bd);
  margin-bottom: .45rem;
  font-size: .87rem;
  color: var(--tx);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: var(--fb);
}
.folder-pick-btn:hover { background: var(--w4); border-color: var(--w3); }
.folder-pick-btn.active { background: var(--w4); border-color: var(--w1); color: var(--w2); font-weight: 500; }
.fp-icon { font-size: 1rem; }
.fp-check { margin-left: auto; color: var(--w1); font-weight: 700; }

/* ======== MOBILE BOTTOM NAV ======== */
.mob-nav,
.mob-search-panel { display: none; }

/* feed-tabs visible en escritorio y móvil */
.feed-tabs {
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--bd);
  border-radius: 30px;
  padding: .25rem;
  margin-bottom: 1rem;
  gap: 0;
  max-width: 340px;
}
.feed-tab {
  flex: 1;
  padding: .5rem 1.2rem;
  border-radius: 24px;
  font-size: .83rem;
  font-family: var(--fb);
  color: var(--tx2);
  background: transparent;
  text-align: center;
  transition: background .18s, color .18s;
  white-space: nowrap;
  cursor: pointer;
}
.feed-tab.on {
  background: var(--w1);
  color: #fff;
  font-weight: 500;
}

@media (max-width: 640px) {

  /* Ocultar toda la nav de escritorio en móvil */
  .hnav-main,
  .hnav-actions,
  .hnav-divider {
    display: none !important;
  }
  .ppage {
    padding-top: 2.8rem; /* espacio para el botón salir arriba */
  }
  .mob-logout-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .42rem .85rem;
    border-radius: var(--r2);
    border: 1.5px solid var(--bd);
    background: var(--surface);
    color: var(--tx3);
    font-size: .78rem;
    font-family: var(--fb);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .mob-logout-btn:hover {
    background: var(--s2);
    color: var(--tx2);
    border-color: var(--tx3);
  }

  /* Padding inferior para que el contenido no quede tapado */
  #app {
    padding-bottom: 64px;
  }

  /* Toast sube para no quedar detrás del nav */
  .toast {
    bottom: 80px;
  }

  /* Ocultar footer en móvil */
  footer { display: none; }

  /* ---- Bottom nav bar ---- */
  .mob-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: var(--surface);
    border-top: 1px solid var(--bd);
    z-index: 80;
    align-items: stretch;
    box-shadow: 0 -2px 14px rgba(44,24,16,.07);
  }

  .mob-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;
    color: var(--tx3);
    padding: 0;
    border-radius: 0;
    transition: color .15s;
    cursor: pointer;
  }

  /* Hide text labels — icons only */
  .mob-nav-btn span {
    display: none;
  }

  .mob-nav-btn svg {
    stroke: currentColor;
    transition: stroke .15s;
  }

  .mob-nav-btn:hover,
  .mob-nav-btn.active { color: var(--w1); }

  .mob-nav-btn.active::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--w1);
    margin-top: 4px;
  }

  /* ---- Mobile search panel — rediseñado ---- */
  .mob-search-panel {
    position: fixed;
    bottom: 62px; /* encima del nav */
    left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--bd);
    box-shadow: 0 -4px 24px rgba(44,24,16,.13);
    z-index: 75;
    padding: .85rem .9rem .75rem;
    border-radius: 18px 18px 0 0;
  }

  .mob-search-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
  }

  .mob-search-input {
    flex: 1;
    padding: .65rem 1rem;
    border: 1.5px solid var(--bd);
    border-radius: 30px;
    background: var(--bg);
    color: var(--tx);
    font-size: .9rem;
    font-family: var(--fb);
    outline: none;
    transition: border-color .2s;
  }
  .mob-search-input:focus { border-color: var(--w1); }
  .mob-search-input::placeholder { color: var(--tx3); }

  .mob-search-close {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--s2);
    color: var(--tx2);
    font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .mob-search-close:hover { background: var(--w4); color: var(--w2); }

  /* Resultados en el panel móvil */
  #mobSearchResults {
    max-height: 220px;
    overflow-y: auto;
    padding: 0 !important;
  }
  #mobSearchResults .s-row {
    padding: .55rem .5rem;
  }
  #mobSearchResults .s-empty {
    padding: .8rem .5rem;
  }

  /* Drag handle decorativo encima del panel */
  .mob-search-panel::before {
    content: '';
    display: block;
    width: 36px; height: 3.5px;
    border-radius: 2px;
    background: var(--bd);
    margin: 0 auto .75rem;
  }
}

/* ---- Panel de notificaciones en móvil ---- */
@media (max-width: 640px) {
  .notif-panel {
    position: fixed;
    bottom: 62px; /* encima del mob-nav */
    top: auto;
    left: 0; right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    box-shadow: 0 -4px 24px rgba(44,24,16,.15);
    z-index: 90;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .notif-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   TEMAS DE COLOR
   ================================================================ */
[data-theme="durazno"] {
  --bg:#FBF6F0;--surface:#FFF9F4;--s2:#F5EDE3;
  --w1:#C9785A;--w2:#8B4A2A;--w3:#E8C5A8;--w4:#F2DBC8;
  --tx:#2C1810;--tx2:#7A5540;--tx3:#A07050;--bd:#E8D5C0;
}
[data-theme="medianoche"] {
  --bg:#0F0F14;--surface:#16161E;--s2:#1E1E2A;
  --w1:#8B7CF8;--w2:#B4A8FF;--w3:#2D2B4E;--w4:#201E38;
  --tx:#E8E6FF;--tx2:#A09CC0;--tx3:#6B6880;--bd:#2A2840;
}
[data-theme="bosque"] {
  --bg:#F2F5EE;--surface:#F8FAF5;--s2:#E8EEE0;
  --w1:#5A8A5C;--w2:#2F5C32;--w3:#B8D4B9;--w4:#D8EDD8;
  --tx:#1A2E1B;--tx2:#456647;--tx3:#7A9E7C;--bd:#C8DEC9;
}
[data-theme="cielo"] {
  --bg:#F0F5FB;--surface:#F8FAFE;--s2:#E3EDF8;
  --w1:#4A86C8;--w2:#1D5A9E;--w3:#A8C8EE;--w4:#D0E4F5;
  --tx:#0E2040;--tx2:#2C5080;--tx3:#6080A8;--bd:#C0D8EE;
}
[data-theme="rosa"] {
  --bg:#FDF0F5;--surface:#FFF5F8;--s2:#FAE0EC;
  --w1:#C45C80;--w2:#8A2848;--w3:#F0B8CC;--w4:#FAD8E8;
  --tx:#3A0E22;--tx2:#7A3050;--tx3:#A86080;--bd:#ECC0D4;
}
[data-theme="ambar"] {
  --bg:#FBF5E8;--surface:#FFFBF0;--s2:#F5EAD0;
  --w1:#C8880A;--w2:#8A5A00;--w3:#EED09A;--w4:#F8E8BE;
  --tx:#2C1C00;--tx2:#7A5010;--tx3:#A07820;--bd:#E8D098;
}
[data-theme="pizarra"] {
  --bg:#F2F3F5;--surface:#FAFBFC;--s2:#E8EAEE;
  --w1:#5A6E8A;--w2:#2E4260;--w3:#B0BED0;--w4:#D8E0EC;
  --tx:#0A1828;--tx2:#3A5070;--tx3:#6A80A0;--bd:#C8D4E4;
}
[data-theme="nocturno"] {
  --bg:#130E0A;--surface:#1C1410;--s2:#261C16;
  --w1:#D4956A;--w2:#F0B88A;--w3:#3A2618;--w4:#2A1C12;
  --tx:#F0E8DE;--tx2:#C0A080;--tx3:#806040;--bd:#3A2A1E;
}
[data-theme="lavanda"] {
  --bg:#F5F0FB;--surface:#FAF7FE;--s2:#EDE5F8;
  --w1:#8A5FC8;--w2:#5A2E9E;--w3:#D4B8F0;--w4:#EAD8FA;
  --tx:#1E0A3A;--tx2:#5A3A8A;--tx3:#9070C0;--bd:#D0B8EC;
}
[data-theme="menta"] {
  --bg:#F0FAF6;--surface:#F6FEFB;--s2:#E0F5EC;
  --w1:#2E9E7A;--w2:#0A6E50;--w3:#9EDED0;--w4:#C8F0E8;
  --tx:#092418;--tx2:#1A6048;--tx3:#508A78;--bd:#A0D8CC;
}
[data-theme="carbon"] {
  --bg:#111318;--surface:#1A1D24;--s2:#22262E;
  --w1:#E8C84A;--w2:#FFE070;--w3:#2E2A14;--w4:#201E0C;
  --tx:#F5F0E0;--tx2:#C0B870;--tx3:#807840;--bd:#2E2C1E;
}
[data-theme="vino"] {
  --bg:#FAF0F2;--surface:#FEF5F7;--s2:#F5E0E6;
  --w1:#8A1A3A;--w2:#620A28;--w3:#E8AABB;--w4:#F8D8E0;
  --tx:#280810;--tx2:#7A2A44;--tx3:#A86070;--bd:#E0B0C0;
}
[data-theme="cobre"] {
  --bg:#FAF2EC;--surface:#FEF8F4;--s2:#F5E6D8;
  --w1:#B05A20;--w2:#7A3000;--w3:#E8C4A0;--w4:#F8E2CC;
  --tx:#260E00;--tx2:#7A4020;--tx3:#A07048;--bd:#E0C0A0;
}
[data-theme="oceano"] {
  --bg:#080E1A;--surface:#0E1628;--s2:#141E32;
  --w1:#3AB8C8;--w2:#70D8E8;--w3:#0E2A38;--w4:#0A1E2E;
  --tx:#D0EEF5;--tx2:#70B8C8;--tx3:#406878;--bd:#143040;
}
[data-theme="limon"] {
  --bg:#FAFBF0;--surface:#FEFFF5;--s2:#F0F5D8;
  --w1:#7A9A0A;--w2:#506800;--w3:#D8E8A0;--w4:#EEF5C8;
  --tx:#1A2000;--tx2:#4A6010;--tx3:#788A30;--bd:#D0E090;
}
[data-theme="aurora"] {
  --bg:#0A0E18;--surface:#121828;--s2:#1A2038;
  --w1:#E870A8;--w2:#FF98C8;--w3:#2A1030;--w4:#1A0A20;
  --tx:#F8E0F0;--tx2:#C070A0;--tx3:#804870;--bd:#2E1040;
}

/* ================================================================
   PÁGINA DE CONFIGURACIÓN
   ================================================================ */
.settings-page { padding-top: 1rem; }
.settings-title { font-family:var(--fd);font-size:1.5rem;color:var(--tx);margin-bottom:.2rem; }
.settings-sub { font-size:.8rem;color:var(--tx3);margin-bottom:1.6rem; }
.settings-section {
  background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--r);padding:1.25rem 1.35rem;margin-bottom:1rem;
}
.settings-section-title {
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tx3);margin-bottom:1rem;
}

/* Grilla de temas */
.theme-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.65rem;
}
.theme-card {
  border:2px solid transparent;border-radius:var(--r2);
  overflow:hidden;cursor:pointer;
  transition:border-color .18s,transform .15s,box-shadow .18s;
}
.theme-card:hover { transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12); }
.theme-card.active { border-color:var(--w1);box-shadow:0 0 0 3px var(--w4); }
.theme-preview {
  height:58px;display:flex;flex-direction:column;
  gap:5px;padding:9px 10px;position:relative;
}
.theme-preview-bar { height:8px;border-radius:4px;opacity:.9; }
.theme-preview-dot {
  position:absolute;top:9px;right:10px;
  width:15px;height:15px;border-radius:50%;
}
.theme-label {
  font-size:.75rem;font-weight:500;
  padding:.4rem .65rem .45rem;
  display:flex;align-items:center;justify-content:space-between;
}
.theme-check { font-size:.8rem;font-weight:700;display:none; }
.theme-card.active .theme-check { display:inline; }

@media (max-width:640px) {
  .theme-grid { grid-template-columns:repeat(2,1fr); }
}


/* Contenedor de botones de acción en header móvil (búsqueda + chat) */
.mob-header-actions {
  display: none;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
  flex-shrink: 0;
}
.mob-header-btn {
  display: flex;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--tx3);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.mob-header-btn:hover {
  background: var(--w4);
  color: var(--w1);
}

@media (max-width: 640px) {
  .mob-header-actions { display: flex; }
  .chat-mob-btn {
    display: flex;
    margin-left: 0; /* ya no necesita empujar, lo hace el contenedor */
  }

  /* Fix bug visual: el header en móvil necesita espacio para los botones */
  header {
    justify-content: space-between;
    gap: .5rem;
  }
  /* Asegurarse de que el hnav no tape los botones */
  .hnav {
    flex: 0 1 auto;
  }
}

/* ---- Badge de mensajes no leídos ---- */
.chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #e03a3a;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  border: 1.5px solid var(--surface);
}
.chat-badge-mob {
  top: 1px;
  right: 1px;
}

/* ---- Panel de chat ---- */
.chat-panel {
  position: fixed;
  bottom: calc(1.5rem + 60px);
  right: 1.5rem;
  width: 320px;
  max-height: 440px;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  z-index: 199;
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.92);
  opacity: 0;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), opacity .18s ease;
}
.chat-panel-open {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* En móvil: panel ocupa la parte baja de la pantalla */
@media (max-width: 640px) {
  .chat-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    transform-origin: bottom center;
    /* Sube encima del bottom nav */
    bottom: 62px;
  }
}

/* ---- Header del chat ---- */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--bd);
  background: var(--surface);
  flex-shrink: 0;
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tx);
  font-family: var(--fb);
}
.chat-header-left svg {
  color: var(--w1);
  flex-shrink: 0;
}
.chat-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
  animation: chat-pulse 2.5s ease infinite;
}
@keyframes chat-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}
.chat-close-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx3);
  transition: background .15s, color .15s;
}
.chat-close-btn:hover { background: var(--w4); color: var(--w2); }

/* ---- Área de mensajes ---- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

.chat-loading, .chat-empty {
  text-align: center;
  font-size: .76rem;
  color: var(--tx3);
  padding: 1.2rem .5rem;
  font-family: var(--fb);
}

/* ---- Burbuja de mensaje ---- */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  max-width: 100%;
}
.chat-msg-own {
  flex-direction: row-reverse;
}

/* Animación de entrada */
@keyframes chat-msg-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg-in {
  animation: chat-msg-appear .2s ease;
}

.chat-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--w3);
  color: var(--w2);
  font-size: .72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.chat-av img { width: 100%; height: 100%; object-fit: cover; }
.chat-av-ini { user-select: none; }

.chat-msg-content {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 44px);
}
.chat-msg-own .chat-msg-content {
  align-items: flex-end;
}

.chat-msg-name {
  font-size: .68rem;
  font-weight: 600;
  color: var(--w2);
  margin-bottom: .18rem;
  cursor: pointer;
  transition: color .14s;
}
.chat-msg-name:hover { color: var(--w1); }

.chat-msg-bubble {
  position: relative;
  padding: .45rem .65rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--s2);
  color: var(--tx);
  font-size: .82rem;
  line-height: 1.45;
  word-break: break-word;
  border: 1px solid var(--bd);
  display: flex;
  align-items: flex-start;
  gap: .3rem;
  max-width: 100%;
}
.chat-msg-own .chat-msg-bubble {
  background: var(--w1);
  color: #fff;
  border-color: transparent;
  border-radius: 14px 14px 4px 14px;
}
.chat-msg-text {
  flex: 1;
  white-space: pre-wrap;
}

.chat-del-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  opacity: 0;
  color: rgba(255,255,255,.6);
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
  padding: 0 .1rem;
  margin-top: -.05rem;
}
.chat-msg-bubble:hover .chat-del-btn { opacity: 1; }
.chat-del-btn:hover { color: #fff; }

.chat-msg-time {
  font-size: .63rem;
  color: var(--tx3);
  margin-top: .22rem;
  padding: 0 .15rem;
}
.chat-msg-own .chat-msg-time { text-align: right; }

/* ---- Input de envío ---- */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .75rem .7rem;
  border-top: 1px solid var(--bd);
  background: var(--surface);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  border: 1.5px solid var(--bd);
  border-radius: 20px;
  padding: .48rem .9rem;
  font-size: .83rem;
  font-family: var(--fb);
  background: var(--bg);
  color: var(--tx);
  outline: none;
  transition: border-color .18s;
}
.chat-input:focus { border-color: var(--w1); }
.chat-input::placeholder { color: var(--tx3); }
.chat-input:disabled { opacity: .5; }

.chat-send-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--w1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.chat-send-btn:hover { background: var(--w2); transform: scale(1.05); }
.chat-send-btn:active { transform: scale(.95); }

/* ================================================================
   FEATURE: EXPLORAR / DESTACADOS
   ================================================================ */
.explore-banner {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.explore-banner:hover {
  border-color: var(--w3);
  box-shadow: 0 4px 16px rgba(44,24,16,.07);
}
.explore-banner-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--w4);
  color: var(--w1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.explore-banner-text { flex: 1; }
.explore-banner-title {
  font-size: .88rem; font-weight: 500; color: var(--tx);
  margin-bottom: .1rem;
}
.explore-banner-sub { font-size: .74rem; color: var(--tx3); }
.explore-banner-arrow { color: var(--tx3); font-size: .85rem; }

/* Página explorar */
.explore-page { }
.explore-header {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1.1rem;
}
.explore-back-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--s2);
  border: 1px solid var(--bd);
  color: var(--tx2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.explore-back-btn:hover { background: var(--w4); color: var(--w2); }
.explore-title { font-family: var(--fd); font-size: 1.5rem; color: var(--tx); }
.explore-sub { font-size: .8rem; color: var(--tx3); margin-bottom: 1.1rem; }
.explore-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--tx3);
}
.explore-empty .ei { font-size: 1.75rem; margin-bottom: .4rem; }
.explore-empty .el { font-size: .82rem; }

/* ================================================================
   FEATURE: LIKES EN COMENTARIOS
   ================================================================ */
.cm {
  position: relative;
}
.cmt-like-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  font-size: .68rem;
  color: var(--tx3);
  font-family: var(--fb);
  padding: .1rem .3rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
  margin-left: .2rem;
}
.cmt-like-btn:hover { color: var(--w1); background: var(--w4); }
.cmt-like-btn.liked { color: var(--w1); }
.cmt-like-btn i {
  font-size: .72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: transform .15s;
}
.cmt-like-btn.liked i { transform: scale(1.15); }

@keyframes cmt-like-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1.15); }
}
.cmt-like-btn.pop i { animation: cmt-like-pop .22s ease; }

/* ================================================================
   FEATURE: ANCLAR POSTS EN PERFIL
   ================================================================ */
.pin-indicator {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  color: var(--w1);
  font-weight: 500;
  margin-bottom: .5rem;
  padding: .2rem .55rem;
  background: var(--w4);
  border-radius: 10px;
  border: 1px solid var(--w3);
}
.pin-indicator i {
  font-size: .7rem;
  display: inline-flex;
  align-items: center;
}

.pinned-section {
  margin-bottom: .5rem;
}

.pinned-section .pcard {
  border-color: var(--w3);
  box-shadow: 0 2px 12px rgba(44,24,16,.06);
}

/* Botón anclar en menú */
.mi.pin-active {
  color: var(--w1);
}
.mi.pin-active i { color: var(--w1); }

/* Botón explorar en nav móvil — reemplaza alguno existente */
.mob-nav-btn.explore-active { color: var(--w1) !important; }

/* Destacados badge en explorar */
.explore-trending-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  color: var(--w1);
  background: var(--w4);
  border: 1px solid var(--w3);
  padding: .15rem .5rem;
  border-radius: 10px;
  margin-left: .4rem;
  vertical-align: middle;
}

/* Encabezado de sección explorar */
.explore-section-label {
  font-size: .72rem;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: .5rem 0 .8rem;
  padding-left: .2rem;
}

@media (max-width: 640px) {
  /* En móvil el banner de explorar tiene padding menor */
  .explore-banner { padding: .85rem 1rem; }

  /* Ocultar el explore-banner en móvil (reemplazado por feed-tabs) */
  .explore-banner { display: none; }

  /* comm-dot dentro del mob-nav */
  #mob-community .comm-dot {
    top: 4px;
    right: calc(50% - 15px);
  }

  /* ---- Feed tabs en móvil ---- */
  .feed-tabs {
    max-width: 100%;
  }
  .feed-tab {
    padding: .52rem .5rem;
    font-size: .82rem;
  }
}