/* ZERO · Comunidad
   css/comunidad.css

   El feed de la comunidad y el selector de dia / noche.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

/* ===== comunidad ===== */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:13px 16px;transition:border-color 200ms var(--ease)}
.searchbar:focus-within{border-color:var(--sand)}
.searchbar svg{width:17px;height:17px;stroke:var(--ink-dim);fill:none;stroke-width:1.8;stroke-linecap:round;flex:0 0 auto}
.searchbar input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:16px}
.searchbar input::placeholder{color:var(--ink-dim)}
.searchbar input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
  width:15px;height:15px;cursor:pointer;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.avatar-sm{width:52px;height:52px;border-radius:50%;position:relative;overflow:hidden;flex:0 0 52px;border:1px solid rgba(255,255,255,.18)}
.avatar-xs{width:38px;height:38px;border-radius:50%;position:relative;overflow:hidden;flex:0 0 38px;border:1px solid rgba(255,255,255,.18)}
.avatar-me{background:var(--me-grad,conic-gradient(from 210deg,var(--t1),var(--t3),var(--t5),var(--t6),var(--t2),var(--t1)))}
.friend-row{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:2px 22px 6px;margin:0 -22px}
.friend-row::-webkit-scrollbar{display:none}
.friend-chip{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-align:center}
.friend-chip .avatar-sm{transition:box-shadow 200ms var(--ease)}
.friend-chip.following .avatar-sm{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--sand)}
.friend-chip b{font-size:11px;font-weight:600;line-height:1.2}
.friend-chip .fbtn{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-dim);padding:3px 10px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.friend-chip.following .fbtn{color:var(--sand);border-color:var(--sand);background:rgba(232,201,160,.1)}
.user-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.user-row b{font-size:14px;font-weight:600;display:block}
.user-row span{font-size:11.5px;color:var(--ink-dim)}
.ctag{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--teal);background:rgba(127,216,201,.12);
  padding:3px 8px;border-radius:12px;white-space:nowrap}
.followbtn{font-size:11px;font-weight:600;padding:7px 14px;border-radius:18px;border:1px solid var(--line);
  background:var(--card2);color:var(--ink);cursor:pointer;font-family:inherit;transition:transform 160ms var(--ease)}
.followbtn.on{background:var(--sand);color:#14100a;border-color:var(--sand)}
.followbtn:active{transform:scale(.94)}
.filter-pills{display:flex;align-items:center;gap:8px;padding:0 0 16px}
/* El "+" de Comunidad. `margin-left:auto` lo empuja hasta la orilla derecha sin
   necesidad de un contenedor extra: las pastillas se quedan a la izquierda y el
   hueco sobrante se lo come el botón. Es el mismo de "Di lo tuyo" y abre la
   misma hoja — subir tu opinión no debería obligarte a ir hasta tu perfil. */
.filter-pills .addrec{margin-left:auto;width:32px;height:32px;font-size:20px;flex:0 0 auto}
/* Un <h2> vacío seguiría ocupando su margen y abriría un hueco donde antes
   decía "Todo lo demás". Vacío no ocupa nada; con "Resultados" vuelve solo. */
#shopHead:empty{display:none}
/* interruptor de "colección pública" dentro de Editar colección */
.colpub{display:flex;align-items:flex-start;gap:11px;margin:0 0 18px;padding:13px 14px;cursor:pointer;
  background:var(--card2);border:1px solid var(--line);border-radius:14px}
.colpub input{width:19px;height:19px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--sand);cursor:pointer}
.colpub-txt b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.colpub-txt span{display:block;font-size:12px;color:var(--ink-dim);line-height:1.35}
/* etiqueta "Pública" en la lista de colecciones */
.col-pub-tag{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:8px;vertical-align:middle;
  font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--sand);background:color-mix(in srgb,var(--sand) 16%,transparent);border:1px solid var(--best-edge)}
.fpill{font-size:12px;font-weight:600;padding:7px 15px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:var(--ink-dim);cursor:pointer}
.fpill.sel{color:#0b0b0e;background:var(--sand);border-color:var(--sand)}
.feed-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:12px;cursor:pointer;transition:transform 160ms var(--ease)}
.feed-card:active{transform:scale(.98)}
.feed-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.feed-name{flex:1}
.feed-name b{font-size:13.5px;font-weight:600;display:block}
.feed-name span{font-size:11px;color:var(--ink-dim)}
/* 10px a peso 600 se leía como una mancha de color. Sube a 11 y lleva un borde
   del mismo color: sobre el lienzo claro, un velo al 16% solo no alcanza a
   dibujar la forma del chip y la etiqueta parecía texto suelto. */
.verdict-chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap;
  border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 28%,transparent)}
.feed-prod{display:flex;align-items:center;gap:12px;background:var(--card2);border-radius:14px;padding:10px 12px}
.fp-img{flex:0 0 46px;width:46px;height:46px;border-radius:12px;overflow:hidden;position:relative}
.fp-img img,.fp-img svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Con la foto de un catálogo cambian las reglas, igual que en la medalla de la
   nota: el dibujo se hizo para llenar su cuadro, pero una foto de estudio es un
   bote alto y angosto sobre fondo blanco, y recortarla a un cuadrito de 40
   puntos deja a la vista la barriga del envase y nada más. Entera y sobre
   claro, se reconoce. */
.fp-img.con-foto{background:#fbfaf7}
.fp-img.con-foto img{object-fit:contain;padding:4px}
.feed-prod .sc{font-weight:600;font-size:13px;flex:0 0 36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.feed-prod b{font-size:13px;font-weight:500;display:block}
.feed-prod span{font-size:10.5px;color:var(--ink-dim)}
.feed-note{font-size:12.5px;color:var(--ink-dim);line-height:1.55;margin-top:10px}

/* ===== selector día / noche ===== */
.mode-toggle{display:flex;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px;margin-bottom:20px}
.mode-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:none;border-radius:11px;
  background:none;color:var(--ink-dim);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all 220ms var(--ease)}
.mode-opt.sel{background:linear-gradient(120deg,var(--coral),var(--rose));color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--rose) 32%,transparent)}
.mode-opt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}