/* Compact story rail and press-to-react controls, designed first for touch. */
.reactions-wrapper { touch-action: pan-y; -webkit-touch-callout: none; }
.reactions-wrapper:focus-visible { outline: 2px solid #00abbd; outline-offset: 3px; border-radius: 10px; }
.reactions-container.cs-reaction-picker { position: fixed; z-index: 1080; align-items: center; gap: 0; padding: 8px; border: 1px solid #dce7eb; border-radius: 999px; background: #fff; box-shadow: 0 12px 38px #06131e26; touch-action: none; }
.cs-reaction-picker .reactions_item { position: relative; flex: 0 0 var(--cs-reaction-size, 44px); width: var(--cs-reaction-size, 44px); height: var(--cs-reaction-size, 44px); float: none; animation: none; transform-origin: center bottom; transition: transform .12s, background .12s; }
.cs-reaction-picker .reactions_item.cs-reaction-selected { z-index: 1; border-radius: 50%; background: #00abbd12; transform: translateY(-8px) scale(1.3); }
.cs-reaction-picker .reactions_item.cs-reaction-selected::after { opacity: 1; visibility: visible; }
body.night-mode .reactions-container.cs-reaction-picker { background: var(--card-dark-input); border-color: var(--card-dark-divider); }
.cs-stories-rail { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 10px 8px 8px; border-bottom: 1px solid #dce7eb; }
.cs-stories-scroller { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 3px 0 5px; scrollbar-width: thin; scrollbar-color: #c0dce0 transparent; overscroll-behavior-x: contain; }
.cs-story-add { position: relative; display: flex; flex: 0 0 65px; flex-direction: column; align-items: center; gap: 6px; min-height: 80px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cs-story-avatar { position: relative; display: block; width: 58px; height: 58px; padding: 3px; border: 1px solid #dce7eb; border-radius: 50%; }
.cs-story-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cs-story-avatar b { position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid #fff; border-radius: 50%; background: #00abbd; color: #052631; font-size: 18px; font-weight: 400; line-height: 1; }
.cs-story-add > span:last-child { font-size: 10px; line-height: 1.5; white-space: nowrap; }
.cs-stories-rail #stories { display: flex; flex: 0 0 auto; gap: 12px; min-width: 0; margin: 0; font-size: inherit; }
.cs-stories-rail #stories .story { display: block; flex: 0 0 65px; width: 65px; max-width: none; margin: 0; opacity: 1; }
.cs-stories-rail #stories .story > .item-link { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 65px; }
.cs-stories-rail #stories .story > .item-link > .item-preview { display: block; width: 58px; height: 58px; max-height: none; padding: 3px; border-radius: 50%; background: linear-gradient(140deg, #00abbd, #f955a1); }
.cs-stories-rail #stories .story > .item-link > .item-preview > img { display: block; width: 100%; height: 100%; padding: 0; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.cs-stories-rail #stories .story.seen > .item-link > .item-preview { background: #c0ccd4; }
.cs-stories-rail #stories .story > .item-link > .info { width: 65px; padding: 0; font-size: 10px; line-height: 1.5; }
.cs-stories-rail #stories .story .name { display: block; overflow: hidden; color: inherit; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.cs-story-delete { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #ad4a6f; cursor: pointer; }
.cs-story-empty { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cs-story-empty-add { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 5px 14px 5px 6px; border: 1px solid #dce7eb; border-radius: 999px; background: #fff; color: #233b46; font: inherit; font-size: 12px; cursor: pointer; }
.cs-story-empty-add .cs-story-avatar { width: 34px; height: 34px; padding: 0; border: 0; }
.cs-story-empty-add .cs-story-avatar b { width: 16px; height: 16px; font-size: 12px; }
.cs-stories-rail button:focus-visible, .cs-story-empty button:focus-visible { outline: 3px solid #f955a1; outline-offset: 2px; }
body.night-mode .cs-stories-rail { border-color: var(--card-dark-divider); }
body.night-mode .cs-story-avatar { border-color: var(--card-dark-divider); }
body.night-mode .cs-story-avatar b, body.night-mode .cs-stories-rail #stories .story > .item-link > .item-preview > img { border-color: var(--body-bg-color-dark); }
body.night-mode .cs-story-empty-add { border-color: var(--card-dark-divider); background: var(--card-dark-color); color: var(--body-color-dark); }
body.night-mode .cs-story-delete { color: #ff86ba; }
@media (prefers-reduced-motion: reduce) { .cs-reaction-picker .reactions_item { transition: none; } }

/* Espacio trans: filtro compacto, accesible y adaptable */
.posts-filter.cs-trans-posts-filter{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;line-height:normal}.posts-filter.cs-trans-posts-filter .cs-post-filter-controls{float:none!important;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-left:auto;line-height:normal}
.cs-trans-feed-filter{display:inline-flex;vertical-align:middle;margin:0}
.cs-trans-filter-button{display:flex;align-items:center;gap:11px;min-width:230px;min-height:54px;padding:8px 11px;border:1px solid #dce6e8;border-radius:15px;background:linear-gradient(135deg,#fff,#f6fbfc);color:#233b42;text-align:left;box-shadow:0 5px 16px rgba(25,55,65,.07);transition:transform .18s,border-color .18s,box-shadow .18s;cursor:pointer;line-height:1.25}
.cs-trans-filter-button:hover{transform:translateY(-1px);border-color:#00abbd88;box-shadow:0 9px 22px rgba(0,129,143,.14)}
.cs-trans-filter-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:linear-gradient(135deg,#00abbd,#07818d);color:#fff;font-size:17px}
.cs-trans-filter-copy{display:flex;flex:1;flex-direction:column;gap:2px}.cs-trans-filter-copy strong{font-size:13px;font-weight:750}.cs-trans-filter-copy small{font-size:10px;color:#718186;line-height:1.3}
.cs-trans-switch{position:relative;width:38px;height:22px;flex:none;border-radius:20px;background:#c9d3d6;transition:background .18s}.cs-trans-switch span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:transform .18s}
.cs-trans-filter-button.is-active{border-color:#08a7a8;background:linear-gradient(135deg,#effdfb,#f8fbff)}.cs-trans-filter-button.is-active .cs-trans-filter-icon{background:linear-gradient(135deg,#f955a1,#a948ad)}.cs-trans-filter-button.is-active .cs-trans-switch{background:#00a9aa}.cs-trans-filter-button.is-active .cs-trans-switch span{transform:translateX(16px)}
.cs-trans-search-filter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px;margin-bottom:14px;border:1px solid #dce6e8;border-radius:16px;background:linear-gradient(110deg,#f4fbfb,#fff);color:#233b42}.cs-trans-search-filter span{display:flex;flex-direction:column;gap:2px}.cs-trans-search-filter strong{font-size:13px}.cs-trans-search-filter small{font-size:11px;color:#718186}.cs-trans-search-filter input{width:20px;height:20px;accent-color:#00a7a9;flex:none}
.cs-trans-filter-button:focus-visible{outline:3px solid #f955a188;outline-offset:3px}.night-mode .cs-trans-filter-button,.night-mode .cs-trans-search-filter,body[data-bs-theme="dark"] .cs-trans-filter-button,body[data-bs-theme="dark"] .cs-trans-search-filter{background:#202a30;border-color:#35444a;color:#edf4f5}.night-mode .cs-trans-filter-copy small,.night-mode .cs-trans-search-filter small,body[data-bs-theme="dark"] .cs-trans-filter-copy small,body[data-bs-theme="dark"] .cs-trans-search-filter small{color:#aebec2}
@media(max-width:575.98px){.posts-filter.cs-trans-posts-filter .cs-post-filter-controls{width:100%;justify-content:flex-start;margin-top:6px}.cs-trans-feed-filter{display:flex;flex:1 1 100%;width:100%;margin:0}.cs-trans-filter-button{width:100%;min-width:0}.cs-trans-filter-copy small{font-size:10px}}