(GIF) or bare span.base-icon (Emoji/Encuesta/Reels) */ .p-dialog.post-status-modal .status-box-action-list > * > label, .p-dialog.post-status-modal .status-box-action-list > * > div, .p-dialog.post-status-modal .status-box-action-list > * > .base-icon, .p-dialog.post-status-modal .status-box-action-list > * > label > .base-icon, .p-dialog.post-status-modal .status-box-action-list > * > div > .base-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 1.5rem !important; height: 1.5rem !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; vertical-align: top !important; } .p-dialog.post-status-modal .status-box-action-list > * svg, .p-dialog.post-status-modal .status-box-action-list > * .mibbos-reel-ico, .p-dialog.post-status-modal .status-box-action-list > * .mibbos-poll-ico { display: block !important; width: 1.5rem !important; height: 1.5rem !important; flex: 0 0 auto !important; margin: 0 !important; } /* the file inputs behind Fotos/Video must never take part in the layout */ .p-dialog.post-status-modal .status-box-action-list > * > input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } .p-dialog.post-status-modal .status-box-action-list .mibbos-media-label { display: block !important; flex: 0 0 auto !important; height: 0.75rem !important; line-height: 0.75rem !important; font-size: 0.66rem !important; font-weight: 700 !important; text-align: center !important; white-space: nowrap !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; padding: 0 !important; } @media (max-width: 480px) { .p-dialog.post-status-modal .status-box-main > .status-box-action > .status-box-action-list { gap: 0.3rem !important; } .p-dialog.post-status-modal .status-box-action-list > * { flex-basis: 3.45rem !important; width: 3.45rem !important; min-width: 3.45rem !important; max-width: 3.45rem !important; padding: 0 0.1rem !important; } } /* ---- poll duration: iOS-style wheel (native PrimeVue Select stays mounted, hidden, in sync) ---- */ .p-dialog.post-status-modal .poll-section .mibbos-wheel-cell > .w-full { display: none !important; } .p-dialog.post-status-modal .poll-section .mibbos-wheel-cell > label { display: block; text-align: center; font-size: 0.85rem; font-weight: 650; color: var(--mibbos-compose-muted); margin-bottom: 0.3rem; } .post-status-modal .mibbos-wheel { position: relative; height: 102px; border-radius: 0.9rem; background: var(--mibbos-compose-chip-bg); border: 1px solid var(--mibbos-compose-chip-border); overflow: hidden; outline: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; margin-bottom: 0.7rem; } .post-status-modal .mibbos-wheel:focus-visible { box-shadow: 0 0 0 3px var(--mibbos-compose-accent-soft); } .post-status-modal .mibbos-wheel-band { position: absolute; left: 0.35rem; right: 0.35rem; top: 34px; height: 34px; border-radius: 0.6rem; background: var(--mibbos-compose-accent-soft); pointer-events: none; } .post-status-modal .mibbos-wheel-scroll { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 34px 0; box-sizing: border-box; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0, #000 36%, #000 64%, rgba(0, 0, 0, 0.18) 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0, #000 36%, #000 64%, rgba(0, 0, 0, 0.18) 100%); } .post-status-modal .mibbos-wheel-scroll::-webkit-scrollbar { display: none; } .post-status-modal .mibbos-wheel-item { height: 34px; line-height: 34px; text-align: center; scroll-snap-align: center; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mibbos-compose-muted); cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; } .post-status-modal .mibbos-wheel-item.is-sel { color: var(--mibbos-compose-glass-text); font-weight: 800; transform: scale(1.12); } .post-status-modal .mibbos-wheel.is-disabled { opacity: 0.45; pointer-events: none; } /* Publicación follows the media row in normal flow: a sticky button would sit on top of the right-most media chips while the sheet scrolls. */ .p-dialog.post-status-modal .status-box-main > .status-box-action > :not(.status-box-action-list) { position: relative !important; bottom: auto !important; margin: 0.55rem 0 0 auto !important; } /* ========== 20261007p — «Publicar» moved to the top (text action under the close X) ========== Pure CSS on the REAL native submit button (no DOM move, no proxy): it is taken out of the bottom flow with position:absolute. Its containing block is the native `div.relative.h-full` that wraps .status-box-main (the scroller), so it does not scroll or get clipped. The header is sticky inside the scroller, so X + name + «Publicar» always stay on the same top band. Disabled/loading = native (disabled attr, opacity-50 / pointer-events-none classes, spinner). The bottom keeps only the tools. */ .p-dialog.post-status-modal { --mibbos-publish-pt: 2.6rem; /* header top padding (room for the X above the name line) */ --mibbos-publish-side: 1rem; /* right edge, = header side padding */ --mibbos-publish-color: var(--mibbos-compose-accent, #2563eb); --mibbos-publish-color-hover: #1d4ed8; --mibbos-publish-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.16); } html.dark .p-dialog.post-status-modal { --mibbos-publish-color: #60a5fa; --mibbos-publish-color-hover: #93c5fd; --mibbos-publish-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } @media (min-width: 768px) { .p-dialog.post-status-modal { --mibbos-publish-side: 1.5rem; } } /* header: sticky top band, X in the top-right corner, name line below it */ .p-dialog.post-status-modal .status-box-main > .status-box-header { position: sticky !important; top: 0 !important; z-index: 5 !important; background-color: inherit !important; padding-top: var(--mibbos-publish-pt) !important; } .p-dialog.post-status-modal .status-box-main > .status-box-header > .flex-1 { min-width: 0 !important; padding-right: 5.6rem !important; /* the name never runs under «Publicar» */ } .p-dialog.post-status-modal .status-box-main > .status-box-header > button:last-child { position: absolute !important; top: 0.55rem !important; right: var(--mibbos-publish-side) !important; margin: 0 !important; z-index: 1; } /* the real submit button, as plain text on the name line, right-aligned under the X */ .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list) { order: 0 !important; position: absolute !important; top: calc(1px + var(--mibbos-publish-pt) + 20px) !important; /* 1px border + padding + half avatar */ right: calc(var(--mibbos-publish-side) - 0.35rem) !important; bottom: auto !important; left: auto !important; transform: translateY(-50%) !important; z-index: 7 !important; flex: 0 0 auto !important; margin: 0 !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 2.25rem !important; padding: 0.3rem 0.35rem !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0.5rem !important; box-shadow: none !important; outline: none; color: var(--mibbos-publish-color) !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.5rem !important; letter-spacing: 0.005em !important; text-shadow: var(--mibbos-publish-shadow) !important; white-space: nowrap !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, opacity 0.15s ease !important; } .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list):hover, .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list):active { background: transparent !important; color: var(--mibbos-publish-color-hover) !important; } .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list):focus-visible { box-shadow: 0 0 0 2px var(--mibbos-compose-accent-soft, rgba(37, 99, 235, 0.14)) !important; } /* native disabled logic (disabled attr + opacity-50 pointer-events-none): just dimmed text */ .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list):disabled, .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn.opacity-50:not(.status-box-action-list) { opacity: 0.42 !important; color: var(--mibbos-publish-color) !important; cursor: default; } .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list) > div { color: inherit !important; } /* loading: native spinner (absolute, centred) in the same blue */ .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list) .spinner, .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn:not(.status-box-action-list) .spinner svg { color: var(--mibbos-publish-color) !important; width: 1.25rem !important; height: 1.25rem !important; } /* «Publicación» (es translation of "Post") reads as «Publicar»: compose-ui only sets a data attribute when the native text is exactly «Publicación»; the native text stays in the DOM. */ .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn[data-mibbos-relabel="1"] > div:first-child { font-size: 0 !important; } .p-dialog.post-status-modal .status-box-main > .status-box-action > button.btn[data-mibbos-relabel="1"] > div:first-child::after { content: "Publicar"; font-size: 1rem; line-height: 1.5rem; } /* bottom: only the publishing tools */ .p-dialog.post-status-modal .status-box-main > .status-box-action > .status-box-action-list { margin-bottom: 0 !important; } /* desktop: the sheet scrolls inside .status-box-main (as on mobile/iPad), so the sticky header — and with it X + name + «Publicar» — stays visible in short windows instead of scrolling away with .p-dialog-content */ @media (min-width: 1024px) { .p-dialog.post-status-modal .status-box-main { max-height: 90vh !important; max-height: 90dvh !important; } } /* MIBBOS 2026-10-07 — check-in shows no map: hide the placeholder image the server now returns, keep room for the remove (X) button. */ .post-status-modal img[src*="checkin-ui/blank.png"] { display: none !important; } .post-status-modal div.relative:has(> img[src*="checkin-ui/blank.png"]) { min-height: 2.25rem; } .post-status-modal .status-box-header .mibbos-anon-on > div { display: none !important; } /* Audience stays on its own line immediately above Publicación/Avisos/Voces. */ .p-dialog.post-status-modal .status-box-main > .status-box-body > .mibbos-compose-audience-wrap { order: 39 !important; flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0.25rem 0 0.4rem !important; } .mibbos-compose-audience-wrap > button { max-width: 100%; } /* Composer captions stay on one line on narrow screens. Large browser text makes fewer columns instead of hiding actions outside a horizontal strip. */ .p-dialog.post-status-modal .status-box-main > .status-box-action > .status-box-action-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); column-gap: 0 !important; row-gap: 0.15rem !important; overflow: visible !important; scroll-snap-type: none; } .p-dialog.post-status-modal .status-box-action-list > * { width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 4rem !important; max-height: none !important; padding: 0.5rem 0.25rem !important; } .p-dialog.post-status-modal .status-box-action-list .mibbos-media-label { width: 100% !important; height: auto !important; min-height: 0.85rem; line-height: 1.2 !important; font-size: 0.6875rem !important; white-space: nowrap !important; } .p-dialog.post-status-modal .mibbos-compose-type { flex-direction: column; min-height: 4rem; padding: 0.5rem 0.25rem; } .p-dialog.post-status-modal .mibbos-compose-type > span { flex: 0 0 auto; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 20261008 — one publication editor, then settings; Vue upload/draft nodes stay mounted. */ html .p-dialog.post-status-modal .status-box-main[data-composer-flow] { flex-flow: column nowrap !important; align-items: stretch !important; min-height: 100% !important; row-gap: 12px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-body > *, html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-header, html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > * { flex: 0 0 auto !important; width: 100% !important; margin-inline: 0 !important; } .mibbos-composer-step-header { display: flex; align-items: center; gap: 12px; padding: 12px 0; position: sticky; top: 0; z-index: 12; background: inherit; flex-shrink: 0; } .mibbos-composer-step-header > button { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; background: transparent; border: 0; flex-shrink: 0; border-radius: 12px; } .mibbos-composer-step-header > button svg { width: 26px; height: 26px; } .mibbos-composer-step-header h2 { min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; overflow-wrap: anywhere; } .mibbos-composer-step-header > button:focus-visible, .mibbos-composer-next:focus-visible { outline: 2px solid #0088fd; outline-offset: 2px; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-header { position: static !important; padding: 0 !important; margin: 0 !important; order: 1 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-header > .flex-1 { padding-right: 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-header > button:last-child { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .mibbos-composer-step-header { order: 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-body > * { order: 30 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-body > .status-box-message { order: 10 !important; min-height: 180px; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-message-input textarea { min-height: 150px; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="1"] > .status-box-body > .mibbos-compose-host, html .p-dialog.post-status-modal .status-box-main[data-composer-step="1"] > .status-box-body > .mibbos-compose-audience-wrap, html .p-dialog.post-status-modal .status-box-main[data-composer-step="1"] > .status-box-body > .mibbos-compose-opt-inline, html .p-dialog.post-status-modal .status-box-main[data-composer-step="1"] > .status-box-body > .mibbos-composer-setting, html .p-dialog.post-status-modal .status-box-main[data-composer-step="1"] > .status-box-action > :is(.mibbos-composer-submit,[data-composer-submit]) { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-header, html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > *, html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-action > .status-box-action-list, html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-action > .mibbos-composer-next { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-compose-host, html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-compose-audience-wrap, html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-compose-opt-inline, html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-composer-setting { display: block !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-compose-host { order: 10 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-compose-audience-wrap { order: 20 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > .mibbos-composer-next, html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > :is(.mibbos-composer-submit,[data-composer-submit]) { display: flex !important; align-items: center !important; justify-content: center !important; position: sticky !important; top: auto !important; bottom: 0 !important; inset-inline: auto !important; transform: none !important; order: 100 !important; min-height: 52px !important; height: auto !important; padding: 14px 18px !important; width: 100% !important; margin: auto 0 0 !important; border: 1px solid #0088fd !important; border-radius: 18px !important; background: #0088fd !important; color: #fff !important; font-size: 18px !important; font-weight: 650 !important; line-height: 1.25 !important; text-shadow: none !important; z-index: 10 !important; } html.dark .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > .mibbos-composer-next, html.dark .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > :is(.mibbos-composer-submit,[data-composer-submit]) { background: #0088fd !important; border-color: #0088fd !important; color: #fff !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="1"] > .status-box-action > :is(.mibbos-composer-submit,[data-composer-submit]), html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-action > .mibbos-composer-next { display: none !important; } .mibbos-composer-next:disabled { opacity: .42; cursor: default; } /* Four thin media icons and More. Extra tools remain their real Vue controls. */ html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > .status-box-action-list { order: 20 !important; display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 4px !important; overflow: visible !important; position: relative; margin: 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool] { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; min-height: 44px !important; height: 44px !important; padding: 0 !important; position: relative; border: 0 !important; background: transparent !important; border-radius: 10px !important; color: inherit !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool="photo"] { order: 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool="gif"] { order: 1 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool="video"] { order: 2 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool="location"] { order: 3 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool="more"] { order: 4 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool]:is([data-composer-tool="photo"],[data-composer-tool="gif"],[data-composer-tool="video"],[data-composer-tool="location"],[data-composer-tool="more"]) > .base-icon, html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool]:is([data-composer-tool="photo"],[data-composer-tool="gif"],[data-composer-tool="video"],[data-composer-tool="location"],[data-composer-tool="more"]) > label > .base-icon, html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool] > .mibbos-media-label { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool] > label, html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool] > div:first-child { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .mibbos-composer-toolbar-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list .mibbos-composer-toolbar-icon svg { display: block !important; width: 26px !important; height: 26px !important; stroke-width: 1.65; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool]:not(:is([data-composer-tool="photo"],[data-composer-tool="gif"],[data-composer-tool="video"],[data-composer-tool="location"],[data-composer-tool="more"])) { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-more="true"] .status-box-action-list > [data-composer-tool]:not(:is([data-composer-tool="photo"],[data-composer-tool="gif"],[data-composer-tool="video"],[data-composer-tool="location"],[data-composer-tool="more"])) { display: flex !important; position: absolute; inset-inline-end: 0; bottom: calc(48px + var(--mibbos-tool-index, 0) * 46px); z-index: 15; width: 200px !important; min-height: 44px !important; padding: 8px 12px !important; flex-direction: row !important; justify-content: flex-start !important; gap: 10px !important; background: #fff !important; box-shadow: 0 2px 12px #0002; } html.dark .p-dialog.post-status-modal .status-box-main[data-composer-more="true"] .status-box-action-list > [data-composer-tool]:not(:is([data-composer-tool="photo"],[data-composer-tool="gif"],[data-composer-tool="video"],[data-composer-tool="location"],[data-composer-tool="more"])) { background: #1e293b !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-more="true"] .status-box-action-list > [data-composer-tool]:not(:is([data-composer-tool="photo"],[data-composer-tool="gif"],[data-composer-tool="video"],[data-composer-tool="location"],[data-composer-tool="more"])) > .mibbos-media-label { display: block !important; width: auto !important; font-size: 14px !important; } html .p-dialog.post-status-modal.mibbos-compose-is-special .status-box-main[data-composer-flow] .status-box-action-list > .mibbos-hide-for-special { display: none !important; } .mibbos-composer-old-entries { display: none !important; } .mibbos-composer-create-entry { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; width: 100%; text-align: start; background: transparent; } .mibbos-composer-create-entry > svg { width: 24px; height: 24px; flex-shrink: 0; } /* Reel retains its music/upload endpoint while sharing the two-step presentation. */ .mibbos-reel-composer { display: flex; flex-direction: column; min-height: min(80vh, 850px); gap: 12px; } .mibbos-reel-composer > .main-content-section-header { display: none; } .mibbos-reel-composer[data-composer-step="1"] > .mibbos-composer-setting, .mibbos-reel-composer[data-composer-step="1"] > :is(.mibbos-composer-submit,[data-composer-submit]), .mibbos-reel-composer[data-composer-step="2"] > :not(.mibbos-composer-setting):not(.mibbos-composer-step-header):not(:is(.mibbos-composer-submit,[data-composer-submit])):not(.mibbos-composer-status), .mibbos-reel-composer[data-composer-step="2"] > .mibbos-composer-next { display: none !important; } .mibbos-reel-composer > .mibbos-composer-next, .mibbos-reel-composer > :is(.mibbos-composer-submit,[data-composer-submit]) { min-height: 52px; border-radius: 18px; margin-top: auto; } .mibbos-reel-composer .mibbos-composer-setting { padding: 12px; border: 1px solid #64748b33; border-radius: 14px; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > .mibbos-composer-context-blocked { display: none !important; } [data-composer-busy="true"] .mibbos-composer-step-header > button { opacity: .42; cursor: default; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-step="2"] > .status-box-action > .status-box-action-list { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-step="2"] > .status-box-body > .mibbos-composer-status { display: block !important; } .mibbos-reel-composer[data-composer-step="2"] > .mibbos-composer-status { display: block !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-more] .status-box-action-list > [data-composer-tool].mibbos-composer-context-blocked { display: none !important; } html .p-dialog.post-status-modal.mibbos-compose-is-special .status-box-main[data-composer-flow][data-composer-more] .status-box-action-list > [data-composer-tool="reel"] { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-placeholder] { opacity: .28; cursor: default; } /* Neutral editor glyphs match the shared two-step composer. */ html:not(.dark) .p-dialog.post-status-modal [data-composer-flow] .mibbos-composer-toolbar-icon svg { color: #64748b !important; } html.dark .p-dialog.post-status-modal [data-composer-flow] .mibbos-composer-toolbar-icon svg { color: #cbd5e1 !important; } /* Keep the brand-blue footer in both themes, including hover and disabled states. */ html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > :is(.mibbos-composer-submit,[data-composer-submit]):is(:hover,:active,:disabled,.opacity-50) { background: #0088fd !important; color: #fff !important; } html.dark .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > :is(.mibbos-composer-submit,[data-composer-submit]):is(:hover,:active,:disabled,.opacity-50) { background: #0088fd !important; color: #fff !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > [data-composer-submit][data-mibbos-relabel="1"] > div:first-child::after { font-size: 18px; line-height: 1.25; } /* Desktop and PWA use a compact editor; content scrolls between a fixed header and footer. */ html .p-dialog.post-status-modal:has([data-composer-parity]) { width: min(680px, calc(100vw - 32px)) !important; max-width: 680px !important; height: min(660px, calc(100dvh - 48px)) !important; max-height: calc(100dvh - 48px) !important; border-radius: 20px !important; overflow: hidden !important; } html .p-dialog.post-status-modal:has([data-composer-parity]) .p-dialog-content { height: 100% !important; max-height: 100% !important; padding: 0 !important; overflow: hidden !important; } html .p-dialog.post-status-modal:has([data-composer-parity]) .p-dialog-content > [data-v-app], html .p-dialog.post-status-modal:has([data-composer-parity]) .p-dialog-content > div { height: 100%; min-height: 0; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] { position: relative; display: flex !important; height: 100% !important; min-height: 0 !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; color: #17212c; } html.dark .p-dialog.post-status-modal .status-box-main[data-composer-parity] { background: #111820 !important; color: #edf3fa; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .mibbos-composer-step-header { position: relative; padding: 10px 14px !important; gap: 6px; border-bottom: 1px solid #64748b24; background: inherit; flex: 0 0 auto; } [data-composer-parity] .mibbos-composer-step-header h2 { font-size: 17px; flex: 1; } .mibbos-parity-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .mibbos-parity-header-actions button { min-height: 40px; border-radius: 10px; font-size: 12px; padding: 8px; background: transparent; color: inherit; } .mibbos-parity-header-actions button svg { width: 23px; height: 23px; } .mibbos-parity-header-actions button:disabled { opacity: .4; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-header { padding: 12px 20px 0 !important; flex: 0 0 auto !important; width: 100%; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body { display: flex !important; flex-flow: column nowrap !important; flex: 1 1 0 !important; min-height: 0 !important; width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 12px 20px !important; gap: 10px !important; overscroll-behavior: contain; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body > .status-box-message { min-height: 120px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-message-input textarea { min-height: 100px !important; font-size: 16px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-action { position: relative !important; display: flex !important; flex-direction: column !important; gap: 8px !important; order: 90 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 8px 20px 14px !important; border-top: 1px solid #64748b24; background: inherit !important; width: 100% !important; overflow: visible !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-action > :is(.mibbos-composer-next,[data-composer-submit]) { min-height: 44px !important; padding: 10px 14px !important; font-size: 15px !important; border-radius: 12px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-action-list { justify-content: flex-start !important; gap: 10px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-action-list > [data-composer-tool="more"] { margin-inline-start: auto !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-items :is(img,video) { max-height: 200px !important; object-fit: contain; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .mibbos-compose-host { padding: 0 !important; margin: 0 !important; } [data-composer-parity] .mibbos-compose-types { gap: 6px !important; margin-bottom: 8px !important; } [data-composer-parity] .mibbos-compose-type { height: auto !important; min-height: 46px !important; padding: 8px 10px !important; flex-direction: row !important; gap: 6px !important; border-radius: 12px !important; font-size: 13px !important; } [data-composer-parity] .mibbos-compose-type svg { width: 20px !important; height: 20px !important; } [data-composer-parity] .mibbos-compose-row { min-height: 42px !important; padding: 8px 12px !important; margin-top: 6px !important; font-size: 13px !important; border-radius: 10px !important; } [data-composer-parity] .mibbos-compose-row .ico { width: 19px !important; height: 19px !important; } [data-composer-parity] .mibbos-compose-row .grow { overflow-wrap: anywhere; } [data-composer-parity] .mibbos-compose-row:disabled { opacity: .55; } [data-composer-parity] .mibbos-compose-switch { height: 24px !important; width: 42px !important; } [data-composer-parity] .mibbos-compose-switch:after { width: 18px !important; height: 18px !important; top: 2px !important; } [data-composer-parity] .mibbos-compose-switch.is-on:after { transform: translateX(18px) !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-body > .mibbos-parity-settings { display: grid !important; order: 20 !important; } [data-composer-parity] [data-parity-original-audience] { display: none !important; } .mibbos-parity-settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding: 0 !important; border: 0 !important; } .mibbos-parity-settings > :is(label,div) { min-width: 0; border: 1px solid #64748b28; border-radius: 12px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; } .mibbos-parity-settings label { font-weight: 600; } .mibbos-parity-settings input:not([type="checkbox"]), .mibbos-parity-settings select { min-width: 0; width: 100%; min-height: 38px; border: 1px solid #64748b30; background: transparent; color: inherit; border-radius: 8px; padding: 8px; font-size: 14px; font-weight: 400; box-sizing: border-box; } .mibbos-parity-settings select option { color: #17212c; background: #fff; } .mibbos-parity-settings button { font-size: 12px; padding: 6px 8px; border-radius: 8px; color: var(--mibbos-compose-accent); background: var(--mibbos-compose-accent-soft); min-height: 32px; } .mibbos-parity-settings small { font-size: 11px; font-weight: 400; color: var(--mibbos-compose-muted); } .mibbos-parity-tag-field { grid-column: 1/-1; } .mibbos-parity-tag-field > label { width: 100%; } .mibbos-parity-tag-input { display: flex; gap: 8px; width: 100%; } .mibbos-parity-tag-input input { flex: 1; } .mibbos-parity-tags, .mibbos-parity-suggestions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; } .mibbos-parity-tags:empty, .mibbos-parity-suggestions:empty { display: none; } .mibbos-parity-suggestions { max-height: 74px; overflow-y: auto; } .mibbos-parity-ai { background: #64748b0d; align-self: start; } .mibbos-parity-ai span { flex: 1; } .mibbos-parity-ai input { width: 20px; height: 20px; accent-color: #2583e2; } .mibbos-parity-schedule label { width: 100%; } .mibbos-parity-video-mode { display: flex; align-items: center; gap: 8px; font-size: 13px; } .mibbos-parity-video-mode span { flex: 1; } .mibbos-parity-video-mode button { padding: 8px 12px; border-radius: 9px; border: 1px solid #64748b40; } .mibbos-parity-video-mode [aria-pressed="true"] { background: var(--mibbos-compose-accent-soft); color: var(--mibbos-compose-accent); border-color: currentColor; } .mibbos-parity-message { font-size: 12px; margin: 0; color: var(--mibbos-compose-muted); } .mibbos-parity-message:empty { display: none !important; } .mibbos-parity-message[role="alert"] { color: #de544d; } .mibbos-parity-drawer { position: absolute; inset: 0; z-index: 30; background: #fff; color: #17212c; display: flex; flex-direction: column; padding: 16px; overflow: hidden; } html.dark .mibbos-parity-drawer { background: #111820; color: #edf3fa; } .mibbos-parity-drawer > header { display: flex; align-items: center; gap: 8px; } .mibbos-parity-drawer h3 { flex: 1; font-size: 18px; font-weight: 700; } .mibbos-parity-drawer nav { display: flex; gap: 8px; margin: 12px 0; } .mibbos-parity-drawer button { padding: 10px; border-radius: 10px; text-align: start; min-height: 40px; } .mibbos-parity-drawer nav button { background: var(--mibbos-compose-chip-bg); } .mibbos-parity-drawer [data-parity-items] { overflow-y: auto; min-height: 0; } .mibbos-parity-drawer article { display: flex; gap: 8px; border-bottom: 1px solid #64748b26; } .mibbos-parity-drawer article > button:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; } .mibbos-parity-drawer strong,.mibbos-parity-drawer small { display: block; } .mibbos-parity-drawer small { color: var(--mibbos-compose-muted); } [data-composer-parity] [hidden] { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] [data-parity-submit-label] > * { display: none !important; } [data-composer-parity] [data-parity-submit-label]::after { content: attr(data-parity-submit-label); font-size: 15px !important; line-height: 1.4; } [data-composer-parity][data-composer-busy="true"] [data-parity-submit-label] { opacity: .45; pointer-events: none; } .mibbos-reel-composer[data-composer-parity] { position: relative; min-height: 0; max-width: 680px; gap: 10px; } .mibbos-reel-composer[data-composer-parity] > .mibbos-composer-setting:has(.audience-overlay), .mibbos-reel-composer[data-composer-parity] > .mibbos-composer-setting:has(>button:not([data-parity-action])) { padding: 0; } .mibbos-reel-composer[data-composer-parity] > :is(.mibbos-composer-next,[data-composer-submit]) { position: sticky; bottom: 12px; min-height: 44px; border-radius: 12px; } [data-composer-parity] button:focus-visible,[data-composer-parity] input:focus-visible,[data-composer-parity] select:focus-visible { outline: 2px solid #2583e2; outline-offset: 2px; } @media(min-width:700px) { [data-composer-parity] .mibbos-compose-extra { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px 10px; } [data-composer-parity] .mibbos-compose-picker { grid-column: 1/-1; } [data-composer-parity] .mibbos-compose-toggle { grid-column: 1/-1; } } @media(max-width:699px) { html .p-dialog.post-status-modal:has([data-composer-parity]) { width: calc(100vw - 16px) !important; max-width: none !important; height: min(690px,var(--mibbos-compose-sheet-h,90dvh)) !important; max-height: calc(100dvh - var(--mibbos-kb-inset,0px) - 16px) !important; border-radius: 18px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body { padding: 10px 14px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-header { padding: 12px 14px 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-action { padding: 8px 14px max(12px,env(safe-area-inset-bottom)) !important; } [data-composer-parity] .mibbos-composer-step-header { padding: 8px !important; } [data-composer-parity] .mibbos-composer-step-header h2 { font-size: 15px; } .mibbos-parity-header-actions [data-parity-action="save"] { max-width: 68px; font-size: 11px; line-height: 1.2; } .mibbos-parity-settings { grid-template-columns: minmax(0,1fr); gap: 8px; } .mibbos-parity-settings > :is(label,div) { padding: 8px 10px; } .mibbos-parity-audience select { width: auto; max-width: 70%; margin-inline-start: auto; } .mibbos-parity-schedule { display: grid !important; grid-template-columns: minmax(0,1fr) auto; } .mibbos-parity-schedule > input { grid-column: 1/-1; } } @media(prefers-reduced-motion:reduce) { [data-composer-parity] * { scroll-behavior: auto !important; } } /* Keep all common settings in view on desktop, with one audience control. */ html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step] > .status-box-body > [data-parity-original-audience], html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step] > .status-box-body > .mibbos-compose-opt-paid, .mibbos-reel-composer[data-composer-parity][data-composer-step] > [data-parity-original-audience] { display:none !important; } .mibbos-parity-audience { order:1; } .mibbos-parity-ai { order:2; } .mibbos-parity-tag-field { order:3; } .mibbos-parity-schedule { order:4; grid-column:1/-1; } .mibbos-parity-header-actions button:hover { background:var(--mibbos-compose-chip-bg); } [data-composer-parity] .mibbos-composer-step-header h2:focus { outline:none; } @media(min-width:700px) { .mibbos-parity-audience select { width:auto; max-width:70%; margin-inline-start:auto; } .mibbos-parity-schedule > label { width:auto; flex:1; } .mibbos-parity-schedule > input { width:240px !important; } } [data-composer-parity] .mibbos-compose-types { display:flex; align-items:stretch; } [data-composer-parity] .mibbos-compose-type { display:flex; flex:1; align-items:center; justify-content:center; min-width:0; border:1px solid #64748b30; background:var(--mibbos-compose-chip-bg); } [data-composer-parity] .mibbos-compose-type.is-active { background:var(--mibbos-compose-accent); color:white; } [data-composer-parity] .mibbos-compose-row { display:flex; align-items:center; gap:8px; width:100%; background:var(--mibbos-compose-row-bg); } [data-composer-parity] .mibbos-compose-row .grow { flex:1; text-align:start; } .mibbos-reel-composer[data-composer-parity] .mibbos-parity-settings { background:transparent; } @media(max-width:380px) { [data-composer-parity] .mibbos-compose-type { padding:8px 4px !important; font-size:12px !important; gap:4px !important; } } /* 20261008: compact writing, complete tools, consistent settings and switches. */ html .p-dialog.post-status-modal:has([data-composer-parity][data-composer-step="1"]) { height: min(460px, calc(100dvh - 48px)) !important; } html .p-dialog.post-status-modal:has([data-composer-parity][data-composer-step="2"]) { height: min(720px, calc(100dvh - 48px)) !important; } [data-composer-parity] { --mibbos-compose-accent: #0088fd; --mibbos-compose-accent-soft: #0088fd12; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .mibbos-composer-step-header { order: 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-header { order: 1 !important; margin: 0 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body { order: 2 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body > * { flex: 0 0 auto !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body > .status-box-message { min-height: 96px !important; flex: 0 0 auto !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-message-input textarea { min-height: 86px !important; max-height: 200px !important; overflow-y: auto !important; font-size: 15px !important; line-height: 1.5 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity][data-composer-step] > .status-box-action > :is(.mibbos-composer-next,[data-composer-submit]), html .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity][data-composer-step] > .status-box-action > :is(.mibbos-composer-next,[data-composer-submit]):is(:hover,:active,:disabled,.opacity-50), html .mibbos-reel-composer[data-composer-parity] > :is(.mibbos-composer-next,[data-composer-submit]) { background: #0088fd !important; color: #fff !important; border: 0 !important; min-height: 44px !important; border-radius: 12px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-action > :is(.mibbos-composer-next,[data-composer-submit]):disabled { opacity: .4 !important; } /* Visible tools wrap instead of opening the old floating overflow list. */ html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-flow][data-composer-more] .status-box-action-list { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-height: 44px !important; height: auto !important; flex: 0 0 auto !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-flow][data-composer-more] .status-box-action-list > [data-composer-tool] { display: flex !important; position: relative !important; inset: auto !important; z-index: auto !important; width: auto !important; min-width: 58px !important; height: 52px !important; min-height: 52px !important; max-height: none !important; flex: 1 0 58px !important; flex-direction: column !important; justify-content: center !important; order: var(--mibbos-tool-order, 9) !important; padding: 4px 6px !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-flow][data-composer-more] .status-box-action-list > [data-composer-tool]:hover { background: var(--mibbos-compose-accent-soft) !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-flow][data-composer-more] .status-box-action-list > :is([data-composer-tool="more"],[data-composer-placeholder],.mibbos-composer-context-blocked,.mibbos-hide-for-special) { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-action > .status-box-action-list { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-action-list > [data-composer-tool] > :is(.base-icon,label > .base-icon,.mibbos-media-label), html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-action-list > [data-composer-tool] > label .base-icon, html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-action-list > [data-composer-tool] > div .base-icon { visibility: hidden !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .status-box-action-list > [data-composer-tool] > .mibbos-media-label { display: none !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .mibbos-composer-toolbar-icon { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; inset: 0 !important; gap: 4px !important; color: var(--mibbos-compose-accent) !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .mibbos-composer-toolbar-icon svg { width: 23px !important; height: 23px !important; position: static !important; flex: 0 0 auto !important; color: inherit !important; } .mibbos-composer-toolbar-icon[data-tool-label]::after { content: attr(data-tool-label); font-size: 11px; line-height: 1.1; font-weight: 600; white-space: nowrap; } /* Type glyph and title form one centered group. */ html .p-dialog.post-status-modal [data-composer-parity] .mibbos-compose-type > svg, html .mibbos-reel-composer[data-composer-parity] .mibbos-compose-type > svg { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; flex: 0 0 20px !important; } html .p-dialog.post-status-modal [data-composer-parity] .mibbos-compose-type > span, html .mibbos-reel-composer[data-composer-parity] .mibbos-compose-type > span { width: auto !important; flex: 0 1 auto !important; margin: 0 !important; text-align: center !important; } /* Flatten only our own wrapper; Vue warning nodes remain where Vue mounted them. */ html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-body > .mibbos-parity-settings { display: contents !important; } .mibbos-reel-composer[data-composer-parity] .mibbos-parity-settings { grid-template-columns: minmax(0,1fr); } .mibbos-reel-composer[data-composer-parity] > .mibbos-compose-host { order: 10; } .mibbos-reel-composer[data-composer-parity] > .mibbos-parity-settings { order: 20; } .mibbos-reel-composer[data-composer-parity] > :is(.mibbos-composer-next,[data-composer-submit]) { order: 90; } [data-composer-parity] .mibbos-parity-audience { order: 21 !important; } [data-composer-parity] .mibbos-parity-tag-field { order: 22 !important; } [data-composer-parity] .mibbos-parity-ai { order: 23 !important; } [data-composer-parity] .mibbos-compose-opt-warn { order: 24 !important; } [data-composer-parity] .mibbos-parity-schedule { order: 25 !important; } [data-composer-parity] .mibbos-parity-settings > :is(label,div) { flex: 0 0 auto; width: 100%; } [data-composer-parity] :is(.mibbos-parity-audience,.mibbos-parity-ai,.mibbos-compose-opt-chip,.mibbos-parity-schedule-heading) { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; min-height: 44px !important; padding: 9px 12px !important; font-size: 13px !important; font-weight: 550 !important; border: 1px solid var(--mibbos-compose-chip-border) !important; border-radius: 10px !important; background: var(--mibbos-compose-row-bg) !important; color: var(--mibbos-compose-glass-text) !important; } [data-composer-parity] :is(.mibbos-parity-audience,.mibbos-parity-ai,.mibbos-parity-schedule-heading) > svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--mibbos-compose-muted); } [data-composer-parity] :is(.mibbos-parity-audience,.mibbos-parity-ai,.mibbos-parity-schedule-heading) > span { flex: 1; min-width: 0; } [data-composer-parity] .mibbos-parity-audience select { width: auto !important; max-width: 58% !important; min-height: 24px !important; border: none !important; padding: 0 4px !important; text-align: end; font-size: 13px; } [data-composer-parity] .mibbos-parity-audience small { width: 100%; padding-inline-start: 27px; } [data-composer-parity] .mibbos-parity-schedule { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; } [data-composer-parity] .mibbos-parity-schedule-heading { cursor: pointer; } [data-composer-parity] .mibbos-parity-schedule-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding: 12px; border: 1px solid var(--mibbos-compose-chip-border); border-top: 0; border-radius: 0 0 10px 10px; } [data-composer-parity] .mibbos-parity-schedule:has(.mibbos-parity-switch:checked) .mibbos-parity-schedule-heading { border-radius: 10px 10px 0 0 !important; } [data-composer-parity] .mibbos-parity-schedule-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; color: var(--mibbos-compose-muted); } [data-composer-parity] .mibbos-parity-schedule-fields input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 38px; color-scheme: light; } html.dark [data-composer-parity] .mibbos-parity-schedule-fields input { color-scheme: dark; } [data-composer-parity] .mibbos-parity-schedule-fields button { grid-column: 1/-1; justify-self: end; } /* Accessible checkbox remains the actual control, drawn as the same switch as anonymous. */ [data-composer-parity] input.mibbos-parity-switch { -webkit-appearance: none; appearance: none; width: 42px !important; height: 24px !important; min-width: 42px !important; min-height: 24px !important; margin: 0 !important; flex: 0 0 42px !important; border: 0 !important; border-radius: 999px !important; padding: 0 !important; background: #64748b59 !important; cursor: pointer; background-image: radial-gradient(circle at center,white 0,white 8px,transparent 9px) !important; background-size: 22px 24px !important; background-repeat: no-repeat !important; background-position: left center !important; transition: background-color .15s, background-position .15s; } [data-composer-parity] input.mibbos-parity-switch:checked { background-color: #0088fd !important; background-position: right center !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] .mibbos-compose-opt-warn { display: block !important; width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity] > .status-box-body > .mibbos-compose-opt-warn { order: 24 !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="1"] > .status-box-body > .mibbos-compose-opt-warn { display: none !important; } [data-composer-parity] .mibbos-compose-opt-chip > .mibbos-compose-opt-ico { order: 0; color: var(--mibbos-compose-muted); width: 19px; height: 19px; } [data-composer-parity] .mibbos-compose-opt-chip > .mibbos-compose-opt-ico svg { width: 19px; height: 19px; } [data-composer-parity] .mibbos-compose-opt-chip > label { order: 1; flex: 1; font-weight: 550 !important; min-width: 0; } [data-composer-parity] .mibbos-compose-opt-chip > .p-checkbox { order: 2; position: relative !important; width: 42px !important; height: 24px !important; flex: 0 0 42px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; opacity: 1 !important; pointer-events: auto !important; } [data-composer-parity] .mibbos-compose-opt-chip .p-checkbox-box { display: block !important; position: absolute !important; inset: 0 !important; width: 42px !important; height: 24px !important; border: 0 !important; border-radius: 999px !important; margin: 0 !important; padding: 0 !important; background: #64748b59 !important; clip: auto !important; opacity: 1 !important; overflow: visible !important; } [data-composer-parity] .mibbos-compose-opt-chip .p-checkbox-box::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform .15s; } [data-composer-parity] .mibbos-compose-opt-chip:has(input:checked) .p-checkbox-box { background: #0088fd !important; } [data-composer-parity] .mibbos-compose-opt-chip:has(input:checked) .p-checkbox-box::after { transform: translateX(18px); } [data-composer-parity] .mibbos-compose-opt-chip .p-checkbox-input { position: absolute !important; inset: 0 !important; width: 42px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; clip: auto !important; opacity: 0 !important; pointer-events: auto !important; cursor: pointer !important; z-index: 1; } [data-composer-parity] .mibbos-compose-opt-chip .p-checkbox-icon { display: none !important; } [data-composer-parity] .mibbos-compose-opt-chip:has(input:focus-visible) { outline: 2px solid #0088fd; outline-offset: 2px; } [data-composer-parity] .mibbos-compose-opt-panel { margin: 8px 0 0 !important; width: 100% !important; } @media(max-width:699px) { html .p-dialog.post-status-modal:has([data-composer-parity][data-composer-step="1"]) { height: min(480px, calc(100dvh - var(--mibbos-kb-inset,0px) - 24px)) !important; } html .p-dialog.post-status-modal:has([data-composer-parity][data-composer-step="2"]) { height: min(740px, calc(100dvh - var(--mibbos-kb-inset,0px) - 24px)) !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-flow][data-composer-more] .status-box-action-list > [data-composer-tool] { min-width: 52px !important; flex-basis: 52px !important; } [data-composer-parity] .mibbos-parity-schedule-fields { gap: 8px; padding: 10px; } html .p-dialog.post-status-modal [data-composer-parity] .mibbos-compose-type { padding: 8px 4px !important; gap: 5px !important; } html .p-dialog.post-status-modal [data-composer-parity] .mibbos-compose-type > svg { width: 18px !important; height: 18px !important; flex-basis: 18px !important; } } @media(prefers-reduced-motion:reduce) { [data-composer-parity] :is(.mibbos-parity-switch,.p-checkbox-box)::after,[data-composer-parity] .mibbos-parity-switch { transition: none !important; } } /* Draft identification and optional private names. */ [data-composer-parity] .mibbos-draft-card{display:flex;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--mibbos-compose-glass-border)} [data-composer-parity] .mibbos-draft-card .mibbos-draft-open{display:flex;flex:1;align-items:center;gap:12px;min-width:0;padding:0;text-align:start;background:transparent;border:0;color:inherit} .mibbos-draft-thumb{display:flex;align-items:center;justify-content:center;position:relative;width:56px;height:56px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--mibbos-compose-accent-soft);color:var(--mibbos-compose-accent)} .mibbos-draft-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mibbos-draft-thumb svg{width:25px;height:25px}.mibbos-draft-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0003;color:white;font-size:17px} .mibbos-draft-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.mibbos-draft-info strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mibbos-draft-info :is(time,.mibbos-draft-details,.mibbos-draft-excerpt){font-size:12px;color:var(--mibbos-compose-muted);overflow-wrap:anywhere}.mibbos-draft-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} [data-composer-parity] .mibbos-draft-card .mibbos-draft-delete{align-self:flex-start;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:10px;flex-shrink:0} .mibbos-draft-name-dialog{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:#0007;border-radius:inherit} .mibbos-draft-name-dialog form{width:100%;max-width:430px;padding:22px;border-radius:18px;background:var(--mibbos-compose-row-bg);color:var(--mibbos-compose-glass-text);box-shadow:0 14px 50px #0004} .mibbos-draft-name-dialog h3{font-size:19px;font-weight:700;margin:0 0 16px}.mibbos-draft-name-dialog label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}.mibbos-draft-name-dialog input{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--mibbos-compose-glass-border);border-radius:10px;color:inherit;background:var(--mibbos-compose-chip-bg);font:inherit}.mibbos-draft-name-dialog p{margin:9px 0 18px;font-size:12px;color:var(--mibbos-compose-muted)}.mibbos-draft-name-dialog footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.mibbos-draft-name-dialog button{min-height:42px;padding:9px 12px;border-radius:10px;border:1px solid var(--mibbos-compose-glass-border);background:var(--mibbos-compose-chip-bg);color:inherit;font-weight:600}.mibbos-draft-name-dialog .mibbos-draft-save{background:#0088fd!important;color:white!important;border-color:#0088fd}.mibbos-draft-name-dialog input:focus-visible{outline:2px solid #0088fd;outline-offset:2px} @media(max-width:420px){.mibbos-draft-thumb{width:48px;height:48px}.mibbos-draft-name-dialog{padding:10px}.mibbos-draft-name-dialog form{padding:18px}.mibbos-draft-info strong{font-size:14px}} /* Editor attachment previews stay compact; published media keeps its own layout. */ html body :is(.post-status-modal .status-box-main,.mibbos-reel-composer[data-composer-flow]) { --composer-attachment-height: clamp(64px,min(20dvh,calc(var(--mibbos-compose-sheet-h,100dvh) / 4)),160px); --composer-attachment-list-height: clamp(64px,min(18dvh,calc(var(--mibbos-compose-sheet-h,100dvh) / 4)),128px); } html body .p-dialog.post-status-modal:has([data-composer-step="1"] :is(.status-box-image-upload-preview,.mibbos-local-media-preview,.post-quote-preview,.share_link_activity_content,.composer-checkin,.poll-section)) { height: min(680px,var(--mibbos-compose-sheet-h,100dvh),calc(100dvh - var(--mibbos-kb-inset,0px) - 24px)) !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-body { min-height: 0 !important; overscroll-behavior: contain; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-image-upload-preview, html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-image-upload-preview .vueperslides__inner, html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-image-upload-preview .vueperslides__parallax-wrapper { height: var(--composer-attachment-height) !important; max-height: var(--composer-attachment-height) !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-image-upload-preview :is(.vueperslide,.vueperslide__image), html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-body > .flex .bg-cover { background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .mibbos-local-media-preview { height: var(--composer-attachment-height) !important; max-height: var(--composer-attachment-height) !important; margin: 4px 0 !important; flex-shrink: 0 !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-items { max-height: calc(var(--composer-attachment-height) + 112px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-items :is(img,video,iframe), html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .composer-checkin img { display: block; max-width: 100% !important; max-height: var(--composer-attachment-height) !important; width: 100% !important; height: auto; object-fit: contain !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-body > .flex:has(> .add-images-icon,> .flex > .bg-cover), html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-items > .flex:has(.truncate), html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .poll-section { max-height: var(--composer-attachment-list-height); overflow: auto; overscroll-behavior: contain; flex-shrink: 0 !important; padding: 8px; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .post-quote-preview { max-height: 152px; margin: 4px 0; flex-shrink: 0; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .post-quote-thumbnail { object-fit: contain !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .activity_content_info { max-height: 92px; overflow: auto; overflow-wrap: anywhere; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] .composer-checkin { max-height: calc(var(--composer-attachment-height) + 64px); overflow: auto; overscroll-behavior: contain; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] :is(.post-quote-preview > button,.status-box-items button,.status-box-body > .flex .relative > button) { min-width: 32px; min-height: 32px; } html body .mibbos-reel-composer[data-composer-flow] > [class*="pb-["], html body .mibbos-reel-composer[data-composer-flow] > div > .h-full > [class*="pb-["] { height: var(--composer-attachment-height) !important; min-height: 0 !important; padding-bottom: 0 !important; flex-shrink: 0 !important; } html body .mibbos-reel-composer[data-composer-flow] :is(.mibbos-local-media-preview,img,video) { max-height: var(--composer-attachment-height) !important; object-fit: contain !important; } html body .mibbos-reel-composer[data-composer-flow] .mibbos-local-media-preview--inline { height: 100% !important; margin: 0 !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity] > .status-box-body > .status-box-message { min-height: min(96px,calc(var(--mibbos-compose-sheet-h,100dvh) / 6)) !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity] .status-box-message-input textarea { min-height: clamp(52px,calc(var(--mibbos-compose-sheet-h,100dvh) / 7),86px) !important; max-height: max(96px,calc(200px - var(--mibbos-kb-inset,0px))) !important; } @media(max-height:600px) { html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity] > .status-box-body > .status-box-message { min-height: 60px !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity] .status-box-message-input textarea { min-height: 52px !important; max-height: 96px !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity] > .status-box-header { padding-top: 6px !important; } } /* 20261009 — the native file-picker label owns the entire composer tool. The visible icon/caption overlay ignores pointer events; covering the tool with its existing label keeps one native picker activation everywhere. */ html .p-dialog.post-status-modal .status-box-main[data-composer-flow] .status-box-action-list > [data-composer-tool] > label[for] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* Encuentros: the conditional block uses the existing settings sheet. */ .mibbos-publication-heading{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:10px 2px;background:transparent;border:0;color:inherit} .mibbos-publication-heading>svg{width:24px;height:24px;flex:none}.mibbos-publication-heading>span:nth-child(2){flex:1}.mibbos-publication-heading strong{display:block;font-size:16px}.mibbos-publication-heading small,.mibbos-selector-help{display:block;font-size:13px;color:#718096;line-height:1.4;margin-top:5px}.mibbos-encounter-fields{display:flex;flex-direction:column;gap:12px;padding:8px 2px}.mibbos-encounter-fields>label{display:block;font-size:14px;font-weight:600}.mibbos-encounter-fields input:not([type=checkbox]),.mibbos-encounter-fields select{display:block;box-sizing:border-box;width:100%;margin-top:7px;min-height:44px;border:1px solid #64748b40;border-radius:12px;padding:10px;background:transparent;color:inherit;font:inherit}.mibbos-encounter-check{display:flex!important;align-items:center;gap:8px;padding:10px 2px;font-size:14px}.mibbos-encounter-check input{accent-color:#0088fd;width:18px;height:18px}.mibbos-option-help{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:7px;width:20px;height:20px;font-size:12px;font-weight:700;border-radius:50%;border:1px solid #94a3b8;color:#64748b;background:transparent}.mibbos-compose-type:disabled{opacity:.45}.mibbos-publication-heading:focus-visible,.mibbos-option-help:focus-visible{outline:2px solid #0088fd;outline-offset:2px} /* User feedback: the common permission sits immediately before Tags. */ [data-composer-parity] .mibbos-parity-allow-encounters{order:21!important;display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;min-height:44px!important;padding:9px 12px!important;border:1px solid var(--mibbos-compose-chip-border)!important;border-radius:10px!important;background:var(--mibbos-compose-row-bg)!important;color:var(--mibbos-compose-glass-text)!important;font-size:13px!important;font-weight:550!important} [data-composer-parity] .mibbos-parity-allow-encounters>svg{width:19px;height:19px;flex:0 0 19px;color:var(--mibbos-compose-muted)} [data-composer-parity] .mibbos-parity-allow-encounters>span{flex:1;min-width:0} [data-composer-parity] .mibbos-parity-allow-encounters[hidden]{display:none!important} /* Explanatory question buttons are removed from web and PWA. */ .mibbos-option-help{display:none!important} @media(min-width:768px){ html .p-dialog.post-status-modal:has([data-composer-parity]){width:min(600px,calc(100vw - 32px))!important;max-width:600px!important} .mibbos-encounter-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 2px} .mibbos-encounter-fields>label{min-width:0;font-size:13px;line-height:1.4} .mibbos-encounter-fields>.mibbos-encounter-name{grid-column:1/-1} .mibbos-encounter-fields>.mibbos-encounter-time{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px} .mibbos-encounter-fields input:not([type=checkbox]),.mibbos-encounter-fields select{min-width:0;min-height:38px;padding:8px 10px;font-size:13px;border-radius:10px} .mibbos-encounter-fields>.mibbos-encounter-time input{margin-top:0} .mibbos-encounter-fields>.mibbos-encounter-check,.mibbos-encounter-fields>.mibbos-selector-help{grid-column:1/-1} } @media(min-width:768px){.mibbos-compose-extra>.mibbos-encounter-fields{grid-column:1/-1}} /* Match activity/access controls and keep panel/voice together, including iPad. */ .mibbos-encounter-fields select{-webkit-appearance:none;appearance:none;padding-inline-end:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px} .mibbos-encounter-fields input:not([type=checkbox]),.mibbos-encounter-fields select{height:44px;min-height:44px;font-weight:400;line-height:1.25} .mibbos-encounter-fields>.mibbos-encounter-time{display:block;grid-column:auto} .mibbos-encounter-fields>.mibbos-encounter-time input{margin-top:7px} .mibbos-encounter-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;grid-column:1/-1;align-items:end} .mibbos-encounter-options>label{min-width:0;font-size:14px;font-weight:600} .mibbos-encounter-options>.mibbos-encounter-voice{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-weight:550} .mibbos-encounter-voice input.mibbos-parity-switch{-webkit-appearance:none;appearance:none;width:42px;height:24px;min-width:42px;min-height:24px;flex:0 0 42px;margin:0;padding:0;border:0;border-radius:999px;background:#64748b59 radial-gradient(circle at center,white 0,white 8px,transparent 9px) left center/22px 24px no-repeat;cursor:pointer;transition:background-color .15s,background-position .15s} .mibbos-encounter-voice input.mibbos-parity-switch:checked{background-color:#0088fd;background-position:right center} .mibbos-encounter-voice input:focus-visible{outline:2px solid #0088fd;outline-offset:3px} @media(min-width:768px){.mibbos-encounter-fields input:not([type=checkbox]),.mibbos-encounter-fields select{height:38px;min-height:38px}.mibbos-encounter-options>label{font-size:13px}.mibbos-encounter-options>.mibbos-encounter-voice{min-height:38px}} @media(prefers-reduced-motion:reduce){.mibbos-encounter-voice input.mibbos-parity-switch{transition:none}} /* The location editor is intentional and has its own completion action. */ .mibbos-location-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px} .mibbos-location-actions>.mibbos-compose-row{flex:1;width:auto;text-align:start} .mibbos-location-done{flex:none;min-height:36px;padding:6px 12px;border:1px solid var(--mibbos-compose-accent,#0088fd);border-radius:9px;background:transparent;color:var(--mibbos-compose-accent,#0088fd);font-size:13px;font-weight:600;cursor:pointer} .mibbos-location-done:focus-visible{outline:2px solid #0088fd;outline-offset:2px} /* Size to the current audience text, rather than the longest native option. */ [data-composer-parity] .mibbos-parity-audience select{-webkit-appearance:none!important;appearance:none!important;flex:0 0 auto!important;width:var(--mibbos-audience-width,90px)!important;min-width:44px!important;max-width:58%!important;height:32px!important;min-height:32px!important;padding:5px 24px 5px 8px!important;text-align:start!important;border:0!important;border-radius:8px!important;background-color:transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 5px center!important;background-size:16px 16px!important;color:inherit!important;line-height:1.25!important} [data-composer-parity] .mibbos-parity-audience select:focus-visible{outline:2px solid #0088fd;outline-offset:2px} /* Polls keep only the editable thumbnail and use the composer's main scroll. */ html body .p-dialog.post-status-modal .status-box-main[data-composer-has-poll="true"] .status-box-image-upload-block, html body .p-dialog.post-status-modal .status-box-main[data-composer-has-poll="true"] > .status-box-body > .relative:has(.status-box-items) { display: none !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-has-poll="true"] .poll-section { width: 100%; max-height: none !important; overflow: visible !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity][data-composer-has-poll="true"] > .status-box-body > .status-box-message { min-height: 60px !important; } html body .p-dialog.post-status-modal .status-box-main[data-composer-flow][data-composer-parity][data-composer-has-poll="true"] .status-box-message-input textarea { min-height: 52px !important; } /* Activity date/time must fit the same grid cell and size as encounter access. */ html body .p-dialog.post-status-modal .mibbos-encounter-fields { --mibbos-encounter-control-height: 44px; } html body .p-dialog.post-status-modal .mibbos-encounter-fields > label { min-width: 0; } html body .p-dialog.post-status-modal .mibbos-encounter-fields :is(input:not([type="checkbox"]), select) { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: var(--mibbos-encounter-control-height) !important; min-height: var(--mibbos-encounter-control-height) !important; max-height: var(--mibbos-encounter-control-height) !important; } html body .p-dialog.post-status-modal .mibbos-encounter-fields input[type="datetime-local"] { -webkit-appearance: none; appearance: none; padding-block: 0; line-height: normal; overflow: hidden; } html body .p-dialog.post-status-modal .mibbos-encounter-fields input[type="datetime-local"]::-webkit-datetime-edit { padding: 0; min-width: 0; min-height: 0; } html body .p-dialog.post-status-modal .mibbos-encounter-fields input[type="datetime-local"]::-webkit-date-and-time-value { min-height: 0; max-width: 100%; line-height: calc(var(--mibbos-encounter-control-height) - 2px); text-align: start; } @media (min-width: 768px) { html body .p-dialog.post-status-modal .mibbos-encounter-fields { --mibbos-encounter-control-height: 38px; } } /* Ordinary publications have no topic; location stays available. */ .p-dialog.post-status-modal .mibbos-compose-row[data-act="toggle-cat"]:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* A single footer color wins over the legacy header button and theme rules. */ html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > button:is(.mibbos-composer-next,.mibbos-composer-submit,[data-composer-submit]), html body .p-dialog.post-status-modal .status-box-main[data-composer-flow] > .status-box-action > button:is(.mibbos-composer-next,.mibbos-composer-submit,[data-composer-submit]):is(:hover,:active,:disabled,.opacity-50), html body .mibbos-reel-composer[data-composer-flow] > button:is(.mibbos-composer-next,.mibbos-composer-submit,[data-composer-submit]) { background: #0088fd !important; border-color: #0088fd !important; color: #fff !important; } .mibbos-compose-device-location{display:inline-flex;align-items:center;gap:7px;padding:6px 0;margin-bottom:10px;border:0;background:transparent;color:var(--primary-color,#0785df);font-size:.875rem;font-weight:500;line-height:1.4;text-align:start;cursor:pointer}.mibbos-compose-device-location .ico{width:16px;height:16px;flex:none}.mibbos-compose-device-location:disabled{opacity:.6;cursor:default}.mibbos-compose-device-location:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}.mibbos-compose-location-notice{margin:0 0 10px;font-size:.8rem;line-height:1.4;color:#64748b}.dark .mibbos-compose-location-notice{color:#cbd5e1} /* prod-compose-ruta: fila «Agregar ruta» (debajo de Permitir encuentros) + selector superpuesto */ [data-composer-parity] .mibbos-parity-ruta{order:21!important;display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--mibbos-compose-chip-border);border-radius:10px;background:var(--mibbos-compose-row-bg);color:var(--mibbos-compose-glass-text);font-size:13px;font-weight:550;box-sizing:border-box} [data-composer-parity] .mibbos-parity-ruta[hidden]{display:none!important} [data-composer-parity] .mibbos-parity-ruta>svg{width:19px;height:19px;flex:0 0 19px;color:var(--mibbos-compose-muted)} [data-composer-parity] .mibbos-parity-ruta>span:not(.mibbos-parity-ruta-chosen){flex:1;min-width:0} [data-composer-parity] .mibbos-parity-ruta button{background:none!important;border:0!important;box-shadow:none!important;padding:4px 2px;font:inherit;font-weight:650;cursor:pointer;min-height:0} [data-composer-parity] .mibbos-parity-ruta-add{color:#2583e2} [data-composer-parity] .mibbos-parity-ruta-chosen{display:inline-flex;align-items:center;gap:2px;max-width:60%} [data-composer-parity] .mibbos-parity-ruta-chosen[hidden]{display:none} [data-composer-parity] .mibbos-parity-ruta-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} [data-composer-parity] .mibbos-parity-ruta-x{color:var(--mibbos-compose-muted);font-size:18px!important;line-height:1;padding:2px 6px!important} .mibbos-ruta-pick-layer{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center} .mibbos-ruta-pick{width:min(420px,94vw);max-height:80vh;display:flex;flex-direction:column;background:#fff;color:#111;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)} .dark .mibbos-ruta-pick,[data-theme=dark] .mibbos-ruta-pick{background:#1c1f24;color:#eee} .mibbos-ruta-pick header{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(127,127,127,.2)} .mibbos-ruta-pick header h3{flex:1;text-align:center;margin:0;font-size:16px;font-weight:700} .mibbos-ruta-pick header button{background:none;border:0;font-size:24px;line-height:1;color:inherit;cursor:pointer;width:28px} .mibbos-ruta-pick header span{width:28px} .mibbos-ruta-pick-list{overflow:auto;padding:8px} .mibbos-ruta-pick-empty{padding:24px 12px;text-align:center;opacity:.7;margin:0} .mibbos-ruta-pick-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer} .mibbos-ruta-pick-item:hover{background:rgba(127,127,127,.1)} .mibbos-ruta-pick-item[aria-pressed=true]{background:rgba(37,131,226,.12)} .mibbos-ruta-pick-item i{width:12px;height:12px;border-radius:50%;flex:0 0 12px} .mibbos-ruta-pick-item span{flex:1;display:flex;flex-direction:column;min-width:0} .mibbos-ruta-pick-item b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mibbos-ruta-pick-item small{opacity:.65;font-size:12px} .mibbos-ruta-pick-item em{font-style:normal;color:#2583e2;visibility:hidden;font-weight:700} .mibbos-ruta-pick-item[aria-pressed=true] em{visibility:visible} .mibbos-ruta-pick footer{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(127,127,127,.2)} .mibbos-ruta-pick footer [data-clear]{background:none;border:0;color:#e5484d;font-weight:600;cursor:pointer} .mibbos-ruta-pick footer [data-go]{margin-left:auto;background:#2583e2;color:#fff;border:0;border-radius:999px;padding:9px 22px;font-weight:700;cursor:pointer} .mibbos-ruta-pick footer [data-go]:disabled{opacity:.45;cursor:default} @media (max-width:640px){.mibbos-ruta-pick-layer{align-items:flex-end}.mibbos-ruta-pick{width:100%;border-radius:16px 16px 0 0;max-height:75vh}} /* prod-compose-ruta-edit: fila en Editar publicación */ .mibbos-edit-ruta{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:0 0 10px;padding:9px 12px;border:1px solid rgba(127,127,127,.25);border-radius:10px;font-size:13px;font-weight:550;box-sizing:border-box} .mibbos-edit-ruta[hidden]{display:none!important} .mibbos-edit-ruta>svg{width:19px;height:19px;flex:0 0 19px;opacity:.7} .mibbos-edit-ruta>span:not(.mibbos-parity-ruta-chosen){flex:1;min-width:0} .mibbos-edit-ruta button{background:none!important;border:0!important;box-shadow:none!important;padding:4px 2px;font:inherit;font-weight:650;cursor:pointer} .mibbos-edit-ruta .mibbos-parity-ruta-add{color:#2583e2} .mibbos-edit-ruta .mibbos-parity-ruta-chosen{display:inline-flex;align-items:center;gap:2px;max-width:60%} .mibbos-edit-ruta .mibbos-parity-ruta-chosen[hidden]{display:none} .mibbos-edit-ruta .mibbos-parity-ruta-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mibbos-edit-ruta .mibbos-parity-ruta-x{opacity:.6;font-size:18px!important;line-height:1;padding:2px 6px!important} /* prod-compose-ruta-excl */ .mibbos-parity-ruta.is-disabled>span:not(.mibbos-parity-ruta-chosen),.mibbos-parity-ruta.is-disabled button{opacity:.45;cursor:not-allowed!important} .mibbos-parity-ruta-hint{flex-basis:100%;order:9;font-size:11px;font-weight:500;opacity:.7} [data-composer-parity] .mibbos-parity-ruta{flex-wrap:wrap} .mibbos-marketplace-composer-control.mibbos-ruta-locked{opacity:.45;pointer-events:none} .mibbos-ruta-pick-layer{z-index:2147482900} .mibbos-ruta-pick-empty button.mibbos-ruta-pick-create{margin-top:10px;background:#2583e2;color:#fff;border:0;border-radius:999px;padding:9px 22px;font-weight:700;cursor:pointer} /* prod-compose-ruta-excl: «Agregar» idéntico al de Etiquetas */ [data-composer-parity] .mibbos-parity-ruta .mibbos-parity-ruta-add,.mibbos-edit-ruta .mibbos-parity-ruta-add{color:var(--mibbos-compose-glass-text,#fff)!important;background:rgba(0,136,253,.07)!important;font-size:12px!important;font-weight:400!important;border-radius:8px!important;padding:6px 8px!important} /* prod-compose-ruta-create: «+ Crear ruta» siempre en la cabecera del selector */ .mibbos-ruta-pick header button.mibbos-ruta-pick-new{width:auto;font-size:14px;font-weight:600;line-height:1.2;padding:4px 2px;background:none!important;border:0;color:#0088FD;white-space:nowrap} html.dark .mibbos-ruta-pick header button.mibbos-ruta-pick-new,[data-theme=dark] .mibbos-ruta-pick header button.mibbos-ruta-pick-new{color:#fff} .mibbos-ruta-pick header h3{padding-left:64px} html.dark .mibbos-ruta-pick{background:#1c1f24;color:#eee} /* ========== prod-compose-align: flat right controls + shared right edge ========== */ [data-composer-parity] { --mibbos-settings-pad-x: 14px; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-body { padding-inline: 16px !important; } html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-header, html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-action { padding-inline: 16px !important; } [data-composer-parity] .mibbos-composer-step-header { padding-inline: 8px 10px !important; } /* Shared settings row: same L/R pad, vertical center with labels */ [data-composer-parity] :is( .mibbos-parity-audience, .mibbos-parity-ai, .mibbos-parity-allow-encounters, .mibbos-parity-ruta, .mibbos-parity-schedule-heading, .mibbos-parity-promote, .mibbos-compose-opt-chip ) { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; min-height: 48px !important; padding: 10px var(--mibbos-settings-pad-x) !important; box-sizing: border-box !important; margin: 0 !important; } [data-composer-parity] :is( .mibbos-parity-audience, .mibbos-parity-ai, .mibbos-parity-allow-encounters, .mibbos-parity-ruta, .mibbos-parity-schedule-heading, .mibbos-parity-promote, .mibbos-compose-opt-chip ) > span { flex: 1 1 auto !important; min-width: 0 !important; line-height: 1.3 !important; display: flex !important; align-items: center !important; } [data-composer-parity] .mibbos-parity-audience small, [data-composer-parity] .mibbos-parity-ruta-hint { flex-basis: 100% !important; width: 100% !important; padding-inline-start: 27px !important; } [data-composer-parity] .mibbos-parity-audience:has(small:not([hidden])), [data-composer-parity] .mibbos-parity-ruta:has(.mibbos-parity-ruta-hint:not([hidden])) { flex-wrap: wrap !important; } /* Audiencia «Todos»: flat plain text, no pill / border / chevron box */ [data-composer-parity] .mibbos-parity-audience select { -webkit-appearance: none !important; appearance: none !important; flex: 0 0 auto !important; width: var(--mibbos-audience-width, 64px) !important; min-width: 0 !important; max-width: 55% !important; height: auto !important; min-height: 0 !important; margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: end !important; cursor: pointer; } [data-composer-parity] .mibbos-parity-audience select:focus { outline: none; } [data-composer-parity] .mibbos-parity-audience select:focus-visible { outline: 2px solid #0088fd; outline-offset: 3px; border-radius: 4px !important; } [data-composer-parity] .mibbos-parity-audience [data-parity-action="manage"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; margin-inline-start: 8px; color: inherit !important; font-size: 13px !important; font-weight: 400 !important; } /* «Agregar» (ruta + etiquetas): plain text, shared right edge */ [data-composer-parity] .mibbos-parity-ruta .mibbos-parity-ruta-add, [data-composer-parity] .mibbos-parity-tag-field > .mibbos-parity-tag-add, .mibbos-edit-ruta .mibbos-parity-ruta-add { color: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-height: 0 !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0 !important; cursor: pointer; } [data-composer-parity] .mibbos-parity-ruta-chosen { margin-inline-start: auto !important; max-width: 58% !important; } /* Switches sit on the shared right edge, vertically centered */ [data-composer-parity] input.mibbos-parity-switch, [data-composer-parity] .mibbos-compose-opt-chip > .p-checkbox, [data-composer-parity] .mibbos-parity-promote input[type="checkbox"], [data-composer-parity] .mp-promotion-toggle input { margin: 0 0 0 auto !important; align-self: center !important; } /* Etiquetas: label + Agregar on one row; search below */ [data-composer-parity] .mibbos-parity-tag-field { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 10px var(--mibbos-settings-pad-x) !important; border: 1px solid var(--mibbos-compose-chip-border) !important; border-radius: 10px !important; background: var(--mibbos-compose-row-bg) !important; color: var(--mibbos-compose-glass-text) !important; box-sizing: border-box !important; font-size: 13px !important; font-weight: 550 !important; } [data-composer-parity] .mibbos-parity-tag-field > label { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; font-weight: 550 !important; line-height: 1.3 !important; } [data-composer-parity] .mibbos-parity-tag-field > .mibbos-parity-tag-add { flex: 0 0 auto !important; margin-inline-start: auto !important; } [data-composer-parity] .mibbos-parity-tag-field > .mibbos-parity-tags, [data-composer-parity] .mibbos-parity-tag-field > .mibbos-parity-tag-input, [data-composer-parity] .mibbos-parity-tag-field > .mibbos-parity-suggestions { flex: 1 1 100% !important; width: 100% !important; } [data-composer-parity] .mibbos-parity-tag-input { display: flex !important; gap: 8px !important; } [data-composer-parity] .mibbos-parity-tag-input input { flex: 1 !important; min-width: 0 !important; } [data-composer-parity] .mibbos-parity-tag-input [data-parity-action="add-tag"] { display: none !important; /* header Agregar owns the action */ } /* Location (+ topic) on step 2: flat, no bordered chip; right edge matches Agregar */ [data-composer-parity][data-composer-step="2"] .mibbos-compose-extra { align-items: center; column-gap: 8px; row-gap: 4px; margin: 0 0 8px !important; padding: 0 !important; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-cat"], [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; min-height: 44px !important; margin-top: 0 !important; padding: 8px var(--mibbos-settings-pad-x) !important; align-items: center !important; gap: 8px !important; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] .grow { text-align: end !important; font-weight: 400 !important; font-size: 13px !important; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] .action { color: inherit !important; font-weight: 400 !important; font-size: 13px !important; margin: 0 !important; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] .ico { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; opacity: .75; } @media (min-width: 700px) { [data-composer-parity][data-composer-step="2"] .mibbos-compose-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-cat"] { padding-inline-end: 6px !important; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] { padding-inline-start: 6px !important; justify-content: flex-end !important; } } @media (max-width: 699px) { html .p-dialog.post-status-modal .status-box-main[data-composer-parity][data-composer-step="2"] > .status-box-body { padding-inline: 14px !important; } [data-composer-parity] { --mibbos-settings-pad-x: 12px; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] .grow { text-align: start !important; } [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] { justify-content: flex-start !important; } } /* Promote / marketplace row inherits the same pad + switch edge */ [data-composer-parity] .mibbos-marketplace-composer-control { padding: 0 !important; } [data-composer-parity] .mp-composer-promotion .mp-promotion-toggle, [data-composer-parity] .mibbos-parity-promote { min-height: 48px !important; padding: 10px var(--mibbos-settings-pad-x) !important; align-items: center !important; box-sizing: border-box !important; } /* prod-compose-align: beat dark-controls + older pill rules on Audiencia */ html body [data-composer-parity] .mibbos-parity-audience select[data-parity-audience], html.dark body [data-composer-parity] .mibbos-parity-audience select[data-parity-audience], html body [data-composer-parity] select[data-parity-audience], html.dark body [data-composer-parity] select[data-parity-audience] { -webkit-appearance: none !important; appearance: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; outline: none; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 0 0 auto !important; color: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: end !important; width: var(--mibbos-audience-width, 64px) !important; } html body [data-composer-parity] .mibbos-parity-audience select[data-parity-audience]:focus-visible, html.dark body [data-composer-parity] select[data-parity-audience]:focus-visible { outline: 2px solid #0088fd !important; outline-offset: 3px !important; border-radius: 4px !important; } /* Shared right inset for switches / Agregar / Todos */ html body [data-composer-parity] :is( .mibbos-parity-audience, .mibbos-parity-ai, .mibbos-parity-allow-encounters, .mibbos-parity-ruta, .mibbos-parity-schedule-heading, .mibbos-parity-promote, .mibbos-compose-opt-chip, .mibbos-parity-tag-field ) { padding-inline-end: var(--mibbos-settings-pad-x, 14px) !important; } html body [data-composer-parity] :is( input.mibbos-parity-switch, .mibbos-parity-ruta-add, .mibbos-parity-tag-add, select[data-parity-audience], .mibbos-compose-opt-chip > .p-checkbox, .mp-promotion-toggle input ) { margin-inline-end: 0 !important; } /* Topic + location stay flat (no chip band) on step 2 */ @media (min-width: 700px) { html body [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-cat"], html body [data-composer-parity][data-composer-step="2"] .mibbos-compose-row[data-act="toggle-loc"] { border: 0 !important; background: transparent !important; box-shadow: none !important; } } /* prod-compose-align: chosen ruta must stay gone when [hidden]; Agregar owns the right edge */ html body [data-composer-parity] .mibbos-parity-ruta-chosen[hidden], html.dark body [data-composer-parity] .mibbos-parity-ruta-chosen[hidden], html body [data-composer-parity] .mibbos-parity-ruta .mibbos-parity-ruta-chosen[hidden] { display: none !important; } html body [data-composer-parity] .mibbos-parity-ruta .mibbos-parity-ruta-add { margin-inline-start: auto !important; } html body [data-composer-parity] .mibbos-parity-ruta-chosen:not([hidden]) { margin-inline-start: auto !important; display: inline-flex !important; align-items: center; max-width: 58%; } /* When chosen is visible, hide the empty Agregar */ html body [data-composer-parity] .mibbos-parity-ruta:has(.mibbos-parity-ruta-chosen:not([hidden])) .mibbos-parity-ruta-add { display: none !important; } /* /sidebar-ui/sidebar-ui.css */ /* * mibbos — sidebar UI overlay v4 — prod-feed-sidebar-polish-20261006 * Floating chips (soft light shadows), gray active, no sidebar +, no Ver más, * section titles, lupa search. Desktop ≥1024. Dark mostly preserved. * Leaves compose/reels/mobile-bars alone. * prod-header-align-20261009: center desktop search/actions on the logo row. * prod-search-explorar-20261007: route-aware header search (hidden only on * Inicio + Reels), Explorar items floating (no chip/button chrome). * prod-sidebar-float-20261007: profile + wallet airy thin-border «botes * finiticos» (same spirit as Explorar; desktop ≥1024 only). */ :root { --mibbos-sb-glass-bg: rgba(255, 255, 255, 0.42); --mibbos-sb-glass-bg-strong: rgba(255, 255, 255, 0.88); --mibbos-sb-surface: #ffffff; --mibbos-sb-chip: rgba(255, 255, 255, 0.94); --mibbos-sb-chip-border: rgba(15, 23, 42, 0.07); /* Soft single-layer elevation — no harsh stacked hover/active artifacts */ --mibbos-sb-chip-shadow: 0 2px 10px rgba(15, 23, 42, 0.055); --mibbos-sb-chip-shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.08); --mibbos-sb-chip-active: #e2e8f0; --mibbos-sb-chip-active-text: #0f172a; --mibbos-sb-chip-active-shadow: 0 2px 8px rgba(15, 23, 42, 0.07); --mibbos-sb-glass-border: rgba(15, 23, 42, 0.08); --mibbos-sb-glass-text: #0f172a; --mibbos-sb-glass-muted: #64748b; --mibbos-sb-glass-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); --mibbos-sb-accent: #2563eb; --mibbos-sb-accent-soft: rgba(37, 99, 235, 0.14); --mibbos-sb-radius: 1.25rem; --mibbos-sb-radius-sm: 0.95rem; --mibbos-sb-cover-h: 5.85rem; --mibbos-sb-cover-fallback: linear-gradient(135deg, #93c5fd 0%, #6366f1 45%, #a855f7 100%); /* Thin floating «botes» for profile + wallet */ --mibbos-sb-bote-bg: rgba(255, 255, 255, 0.22); --mibbos-sb-bote-bg-soft: rgba(255, 255, 255, 0.12); --mibbos-sb-bote-border: rgba(15, 23, 42, 0.11); --mibbos-sb-bote-shadow: 0 2px 10px rgba(15, 23, 42, 0.045); --mibbos-sb-bote-shadow-hover: 0 3px 12px rgba(15, 23, 42, 0.07); --mibbos-sb-bote-radius: 1.05rem; } html.dark { --mibbos-sb-glass-bg: rgba(18, 20, 26, 0.35); --mibbos-sb-glass-bg-strong: rgba(30, 32, 40, 0.92); --mibbos-sb-surface: #1c1e26; --mibbos-sb-chip: rgba(36, 38, 48, 0.94); --mibbos-sb-chip-border: rgba(255, 255, 255, 0.10); --mibbos-sb-chip-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --mibbos-sb-chip-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45); --mibbos-sb-chip-active: #3f4454; --mibbos-sb-chip-active-text: #f8fafc; --mibbos-sb-chip-active-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06); --mibbos-sb-glass-border: rgba(255, 255, 255, 0.10); --mibbos-sb-glass-text: #f8fafc; --mibbos-sb-glass-muted: rgba(226, 232, 240, 0.62); --mibbos-sb-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); --mibbos-sb-accent: #3b82f6; --mibbos-sb-accent-soft: rgba(59, 130, 246, 0.22); --mibbos-sb-cover-fallback: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #701a75 100%); --mibbos-sb-bote-bg: rgba(255, 255, 255, 0.03); --mibbos-sb-bote-bg-soft: rgba(255, 255, 255, 0.02); --mibbos-sb-bote-border: rgba(255, 255, 255, 0.12); --mibbos-sb-bote-shadow: none; --mibbos-sb-bote-shadow-hover: none; --mibbos-sb-bote-radius: 1.05rem; } @media (min-width: 1024px) { .sidebar-user-menu.mibbos-sidebar-ui { background: transparent !important; background-color: transparent !important; display: flex !important; flex-direction: column !important; gap: 0.55rem; padding-top: 0.7rem !important; padding-bottom: 0.85rem !important; overflow: hidden !important; height: 100vh !important; max-height: 100vh !important; } html.dark .sidebar-user-menu.mibbos-sidebar-ui { background: transparent !important; } .sidebar-user-menu.mibbos-sidebar-ui::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 55% at 10% 0%, rgba(37, 99, 235, 0.07), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 0.4), rgba(241, 245, 249, 0.2)); } html.dark .sidebar-user-menu.mibbos-sidebar-ui::before { background: radial-gradient(120% 55% at 10% 0%, rgba(59, 130, 246, 0.12), transparent 55%), linear-gradient(180deg, rgba(10, 12, 18, 0.5), rgba(10, 12, 18, 0.2)); } /* ----- Logo (v3 sizes kept) ----- */ .sidebar-user-menu.mibbos-sidebar-ui > .site-logo, .sidebar-user-menu.mibbos-sidebar-ui > button.site-logo { display: flex !important; align-items: center; margin-top: -0.05rem !important; margin-bottom: 0.2rem !important; padding: 0.1rem 0.15rem; align-self: flex-start; flex-shrink: 0; } .sidebar-user-menu.mibbos-sidebar-ui > .site-logo.mb-6 { margin-bottom: 0.2rem !important; } .sidebar-user-menu.mibbos-sidebar-ui > .site-logo .site-logo-img, .sidebar-user-menu.mibbos-sidebar-ui > .site-logo img, /* prod-logo-responsive: tras pasar por móvil, mobile-menu-ui deja el logo dentro de * .mibbos-mm-hero; sin estas reglas el logo quedaba al 100% (310px) al volver a escritorio. */ .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-mm-hero > .site-logo .site-logo-img, .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-mm-hero > .site-logo img { height: 2.5rem !important; width: auto !important; max-width: 11.5rem !important; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.10)); } html.dark .sidebar-user-menu.mibbos-sidebar-ui > .site-logo img, html.dark .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-mm-hero > .site-logo img { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5)); } /* ----- Profile unit — airy thin «botes finiticos» (prod-sidebar-float) ----- * Same spirit as Explorar: float in air, no heavy chip fills. * Keep layout (taller cover, name/@, wallet docked) inside hairline shells. */ .mibbos-sb-profile-unit { display: flex; flex-direction: column; flex-shrink: 0; width: 100%; gap: 0.38rem; filter: none; } html.dark .mibbos-sb-profile-unit { filter: none; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card { position: relative !important; overflow: hidden !important; padding: 0 !important; width: 100% !important; min-height: 10.4rem; border-radius: var(--mibbos-sb-bote-radius) !important; border: 1px solid var(--mibbos-sb-bote-border) !important; background: var(--mibbos-sb-bote-bg) !important; background-color: var(--mibbos-sb-bote-bg) !important; box-shadow: var(--mibbos-sb-bote-shadow) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .mibbos-sb-cover { position: absolute; top: 0; left: 0; right: 0; height: var(--mibbos-sb-cover-h); background-size: cover; background-position: center; background-repeat: no-repeat; background-image: var(--mibbos-sb-cover-fallback); pointer-events: none; z-index: 0; opacity: 0.92; } .mibbos-sb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.18) 100%); } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card > .flex.items-center { position: relative; z-index: 1; margin-top: var(--mibbos-sb-cover-h) !important; padding: 0.85rem 0.95rem 0.95rem !important; gap: 0.75rem !important; align-items: flex-start !important; background: transparent; min-height: 4.7rem; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .flex.items-center > [style*="width"], .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .flex.items-center > .flex-shrink-0 { margin-top: -2rem; flex-shrink: 0; } /* Avatar: hairline ring, soft float — no thick solid plate */ .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card img.rounded-full { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(15, 23, 42, 0.10); } html.dark .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card img.rounded-full { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35); } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-name { font-weight: 750 !important; font-size: 1rem !important; line-height: 1.25; color: var(--mibbos-sb-glass-text) !important; text-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.08); } html.dark .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-name { text-shadow: none; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-sub-text, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link { color: var(--mibbos-sb-glass-muted) !important; font-size: 0.8rem !important; position: relative; z-index: 2; background: transparent !important; text-shadow: 0 1px 1px rgba(15, 23, 42, 0.06); } html.dark .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-sub-text, html.dark .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link { text-shadow: none; } /* Profile links: Explorar-style — no fill; light up / go bolder when active */ .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link:not(.mibbos-sb-wallet-hidden) { color: var(--mibbos-sb-glass-muted) !important; font-weight: 600; transition: color 0.14s ease, font-weight 0.14s ease; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link:not(.mibbos-sb-wallet-hidden):hover { color: var(--mibbos-sb-glass-text) !important; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link.router-link-exact-active:not(.mibbos-sb-wallet-hidden), .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link.router-link-active:not(.mibbos-sb-wallet-hidden), .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card a.router-link-exact-active .sidebar-user-menu-name { color: var(--mibbos-sb-glass-text) !important; font-weight: 800; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .sidebar-user-menu-link[href*="wallet"], .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card a.mibbos-sb-wallet-hidden, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card .mibbos-sb-wallet-inline { display: none !important; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card > .mt-2 { position: relative; z-index: 1; margin: 0 !important; padding: 0.5rem 0.95rem 0.75rem; border-top: 1px solid var(--mibbos-sb-bote-border); background: transparent; font-size: 0.8rem; } /* Wallet — separate thin bote under profile (hairline, no heavy fill) */ .mibbos-sb-profile-unit .mibbos-sb-wallet-btn { display: flex !important; align-items: center; gap: 0.65rem; width: 100%; margin: 0; padding: 0.62rem 0.9rem; border-radius: var(--mibbos-sb-bote-radius); border: 1px solid var(--mibbos-sb-bote-border); background: var(--mibbos-sb-bote-bg-soft); background-color: var(--mibbos-sb-bote-bg-soft); color: var(--mibbos-sb-glass-text); box-shadow: var(--mibbos-sb-bote-shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 650; font-size: 0.88rem; cursor: pointer; text-decoration: none !important; text-shadow: 0 1px 1px rgba(15, 23, 42, 0.06); transition: color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } html.dark .mibbos-sb-profile-unit .mibbos-sb-wallet-btn { text-shadow: none; } .mibbos-sb-profile-unit .mibbos-sb-wallet-btn:hover { background: transparent; background-color: transparent; color: var(--mibbos-sb-glass-text); border-color: rgba(15, 23, 42, 0.18); box-shadow: var(--mibbos-sb-bote-shadow-hover); } html.dark .mibbos-sb-profile-unit .mibbos-sb-wallet-btn:hover { border-color: rgba(255, 255, 255, 0.22); } /* Active wallet: no fill — bolder / brighter like Explorar */ .mibbos-sb-profile-unit .mibbos-sb-wallet-btn.is-active, .mibbos-sb-profile-unit .mibbos-sb-wallet-btn[aria-current="page"] { background: transparent !important; background-color: transparent !important; color: #020617 !important; font-weight: 800; border-color: rgba(15, 23, 42, 0.22); } html.dark .mibbos-sb-profile-unit .mibbos-sb-wallet-btn.is-active, html.dark .mibbos-sb-profile-unit .mibbos-sb-wallet-btn[aria-current="page"] { color: #ffffff !important; font-weight: 700; border-color: rgba(255, 255, 255, 0.28); } /* Wallet icon: float glyph only — hairline circle, no chunky accent chip */ .mibbos-sb-wallet-ico { display: inline-flex; width: 1.55rem; height: 1.55rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--mibbos-sb-bote-border); background: transparent; color: currentColor; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.10)); } html.dark .mibbos-sb-wallet-ico { filter: none; } .mibbos-sb-profile-unit .mibbos-sb-wallet-btn.is-active .mibbos-sb-wallet-ico, .mibbos-sb-profile-unit .mibbos-sb-wallet-btn[aria-current="page"] .mibbos-sb-wallet-ico { border-color: currentColor; filter: drop-shadow(0 0 0.45px currentColor) drop-shadow(0 0 0.3px currentColor); } html.dark .mibbos-sb-profile-unit .mibbos-sb-wallet-btn.is-active .mibbos-sb-wallet-ico, html.dark .mibbos-sb-profile-unit .mibbos-sb-wallet-btn[aria-current="page"] .mibbos-sb-wallet-ico { filter: none; } .mibbos-sb-wallet-ico svg { width: 0.95rem; height: 0.95rem; } .mibbos-sb-wallet-label { flex: 1; min-width: 0; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mibbos-sb-wallet-chevron { width: 1rem; height: 1rem; opacity: 0.35; flex-shrink: 0; } /* ----- Publish zone: HIDDEN from sidebar (kept in DOM for feed create +) ----- */ .sidebar-user-menu.mibbos-sidebar-ui > .mt-3.mibbos-sb-publish-hidden:not(.mibbos-sb-publish-docked), .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-sb-publish-zone.mibbos-sb-publish-hidden:not(.mibbos-sb-publish-docked), .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-hidden:not(.mibbos-sb-publish-docked) { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; overflow: visible !important; pointer-events: none !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; flex-shrink: 0 !important; z-index: -1 !important; left: -9999px !important; top: 0 !important; } /* Docked: position/size come from JS inline !important — never force left:auto */ .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked { clip: auto !important; pointer-events: auto !important; z-index: 10050 !important; } .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked .dropdown-menu-box { z-index: 10060 !important; pointer-events: auto !important; opacity: 1 !important; } /* ----- Search lupa (after cover / under profile unit) ----- */ .mibbos-sb-search { position: relative; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; width: 100%; min-height: 2.65rem; margin: 0.05rem 0 0.15rem; z-index: 25; } .mibbos-sb-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: 9999px; border: 1px solid var(--mibbos-sb-chip-border); background: var(--mibbos-sb-chip); color: var(--mibbos-sb-glass-text); box-shadow: var(--mibbos-sb-chip-shadow); cursor: pointer; flex-shrink: 0; transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } .mibbos-sb-search-toggle:hover { box-shadow: var(--mibbos-sb-chip-shadow-hover); color: var(--mibbos-sb-accent); } .mibbos-sb-search-ico { display: inline-flex; width: 1.2rem; height: 1.2rem; } .mibbos-sb-search-ico svg { width: 100%; height: 100%; } .mibbos-sb-search-form { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2.65rem; opacity: 0; pointer-events: none; overflow: hidden; transition: width 0.22s ease, opacity 0.18s ease; z-index: 2; } .mibbos-sb-search.is-open .mibbos-sb-search-form { width: 100%; opacity: 1; pointer-events: auto; } .mibbos-sb-search.is-open .mibbos-sb-search-toggle { opacity: 0; pointer-events: none; } .mibbos-sb-search-input { width: 100%; height: 2.65rem; padding: 0 1rem 0 2.65rem; border-radius: 9999px; border: 1px solid var(--mibbos-sb-chip-border); background: var(--mibbos-sb-chip); color: var(--mibbos-sb-glass-text); box-shadow: var(--mibbos-sb-chip-shadow); font-size: 0.9rem; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16.2 16.2 4.3 4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.75rem center; background-size: 1.15rem 1.15rem; } .mibbos-sb-search-input:focus { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), var(--mibbos-sb-chip-shadow-hover); } html.dark .mibbos-sb-search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16.2 16.2 4.3 4.3'/%3E%3C/svg%3E"); } /* Hide long header search on desktop when sidebar lupa exists */ .header-site .global-search-header, header .global-search-header, .site-header .global-search-header, .lg\:block .global-search-header, .main-header .global-search-header { /* scoped below with body class fallback */ } } /* prod-search-explorar-20261007: header search is ROUTE-AWARE on desktop. * sidebar-ui.js toggles html.mibbos-hdr-search-hide only on Inicio (/, route "home") * and Reels (route "vibb"/"vibb_create", /clips). Every other page keeps the * original core GlobalSearch in .main-header, untouched (original style). */ @media (min-width: 1024px) { html.mibbos-hdr-search-hide .main-header .global-search-header { display: none !important; } /* prod-mkt-search: Marketplace keeps ONLY «Buscar en Mercado»; header search stays * hidden there via marketplace-filters (html.mkt-route). No override here. */ /* keep mobile search overlay if somehow shown */ .global-search-header-mobile .global-search-header { display: block !important; } } @media (min-width: 1024px) { /* ----- Menus stack ----- */ .sidebar-user-menu.mibbos-sidebar-ui > .sidebar-main-menu, .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-sb-menus-stack { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 0.55rem; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* One continuous panel: nav + account chips share the same scroll */ .mibbos-sb-nav-card, .mibbos-sb-account-card { position: relative; display: flex; flex-direction: column; padding: 0; border-radius: 0; border: none; background: transparent; box-shadow: none; overflow: visible; } .mibbos-sb-nav-card { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Account items fold into the same continuous list — no separate panel cut */ .mibbos-sb-account-card { flex: 0 0 auto; max-height: none; overflow: visible; padding: 0; margin: 0; } .mibbos-sb-section-title, .mibbos-sb-nav-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.85rem 0.45rem; color: var(--mibbos-sb-glass-muted); flex-shrink: 0; } /* Remove Cuenta title / cut */ .mibbos-sb-account-title { display: none !important; } .mibbos-sb-native-title-hide { display: none !important; } /* Menus stack fills leftover height; does NOT scroll itself */ .sidebar-user-menu.mibbos-sidebar-ui > .sidebar-main-menu.mibbos-sb-menus-stack, .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-sb-menus-stack { overflow: hidden !important; overscroll-behavior: contain; } .mibbos-sb-nav-head { display: none !important; } .mibbos-sb-ver-mas { display: none !important; } /* THE independent Explorar scroller — must reach Invite etc. without scrolling feed */ .mibbos-sb-nav-card .mibbos-sb-nav-scroll, .mibbos-sb-nav-scroll { flex: 1 1 auto !important; min-height: 0 !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; overscroll-behavior-y: contain; display: flex !important; flex-direction: column !important; padding-bottom: 0.5rem; touch-action: pan-y; } .mibbos-sb-nav-card { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } /* ===== prod-search-explorar-20261007: FLOATING ITEMS — no chip/button chrome ===== * Icon + name only, same layout/order. Light: tiny shadow. Dark: no shadow. * Active: no background; dark = brighter white, light = blacker + bolder. */ .sidebar-user-menu.mibbos-sidebar-ui { --mibbos-sb-item-text: #334155; --mibbos-sb-item-hover: #0f172a; --mibbos-sb-item-active: #020617; --mibbos-sb-item-text-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.10); --mibbos-sb-item-icon-shadow: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12)); } html.dark .sidebar-user-menu.mibbos-sidebar-ui { --mibbos-sb-item-text: rgba(226, 232, 240, 0.74); --mibbos-sb-item-hover: rgba(241, 245, 249, 0.92); --mibbos-sb-item-active: #ffffff; --mibbos-sb-item-text-shadow: none; --mibbos-sb-item-icon-shadow: none; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; padding: 0.05rem 0 0.2rem; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li { list-style: none; margin: 0; padding: 0; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > a.sidebar-user-menu-list-item-wrap, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > button.sidebar-user-menu-list-item-wrap, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:hover, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:focus, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap.router-link-exact-active, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap.router-link-active, .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active { display: flex !important; align-items: center !important; gap: 0.85rem !important; width: 100% !important; margin: 0 !important; padding: 0.62rem 0.9rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; transition: color 0.14s ease !important; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap { color: var(--mibbos-sb-item-text) !important; text-shadow: var(--mibbos-sb-item-text-shadow); } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap .sidebar-main-menu-item-icon { background: var(--mibbos-sb-item-text) !important; background-color: var(--mibbos-sb-item-text) !important; filter: var(--mibbos-sb-item-icon-shadow); transition: background-color 0.14s ease, filter 0.14s ease !important; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap .flex-1 { font-weight: 600; } /* Hover: subtle color change only */ .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:hover, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap.lg\:hover\:text-primary-color:hover, .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > a.lg\:hover\:text-primary-color:hover { color: var(--mibbos-sb-item-hover) !important; } .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap:hover .sidebar-main-menu-item-icon { background: var(--mibbos-sb-item-hover) !important; background-color: var(--mibbos-sb-item-hover) !important; } /* Active: NO background. Light = blacker + bolder (thicker icon), dark = brighter white */ .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active, .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active:hover, .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active a { color: var(--mibbos-sb-item-active) !important; } .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .flex-1 { font-weight: 800; } .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .sidebar-main-menu-item-icon { background: var(--mibbos-sb-item-active) !important; background-color: var(--mibbos-sb-item-active) !important; /* mask icons have no stroke: hairline same-color halo = thicker stroke look */ filter: drop-shadow(0 0 0.45px var(--mibbos-sb-item-active)) drop-shadow(0 0 0.3px var(--mibbos-sb-item-active)) var(--mibbos-sb-item-icon-shadow); } html.dark .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .flex-1 { font-weight: 700; } html.dark .sidebar-user-menu.mibbos-sidebar-ui ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .sidebar-main-menu-item-icon { filter: none; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:focus-visible { outline: 2px solid rgba(100, 116, 139, 0.45); outline-offset: 1px; } .mibbos-sb-nav-card .mibbos-sb-menu-overflow { display: list-item !important; } .mibbos-sb-account-card > .p-3 { padding: 0.15rem 0.25rem 0.05rem !important; } .sidebar-user-menu.mibbos-sidebar-ui > .border-t, .sidebar-user-menu.mibbos-sidebar-ui > footer { flex-shrink: 0; margin-top: 0.1rem; border-top: none !important; opacity: 0.8; font-size: 0.72rem; } } /* Create-menu nav icons — same mask style as barra, black/white, NO blue balls */ .mibbos-sb-create-nav-ico.sidebar-main-menu-item-icon, .dropdown-menu-box .mibbos-sb-create-nav-ico, .dropdown-menu-box.mibbos-compose-menu .mibbos-sb-create-nav-ico { width: 1.5rem !important; height: 1.5rem !important; flex-shrink: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: #0f172a !important; background: #0f172a !important; color: #0f172a !important; } html.dark .mibbos-sb-create-nav-ico.sidebar-main-menu-item-icon, html.dark .dropdown-menu-box .mibbos-sb-create-nav-ico, html.dark .dropdown-menu-box.mibbos-compose-menu .mibbos-sb-create-nav-ico { background-color: #f8fafc !important; background: #f8fafc !important; color: #f8fafc !important; } .mibbos-compose-menu-ico.mibbos-sb-hide-compose-ico { display: none !important; } /* Ensure create menu labels always visible (sidebar must not kill them) */ .dropdown-menu-box.mibbos-compose-menu > ul > li > button > .flex-1, .dropdown-menu-box .mibbos-compose-menu > ul > li > button > .flex-1 { display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 0.9rem !important; } /* Lupa moved to feed composer strip — never show in sidebar */ .mibbos-sb-search { display: none !important; } @media (max-width: 1023.98px) { .mibbos-sb-wallet-btn { display: none !important; } .mibbos-sb-search { display: none !important; } } /* Docked create menu from feed strip — clickable; position from JS inline */ .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked { clip: auto !important; pointer-events: auto !important; } .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked .dropdown-menu-box, .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked .dropdown-menu-box * { pointer-events: auto !important; opacity: 1 !important; } .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked button, .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-publish-zone.mibbos-sb-publish-docked [role="button"] { pointer-events: auto !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; opacity: 0 !important; } /* Share the sidebar logo row and its 2.5rem height with the actual search input. */ @media (min-width: 1024px) { .main-header > .max-w-container { padding-top: 0; padding-bottom: 0; } .main-header > .max-w-container > .flex { min-height: 4rem; } .main-header .global-search-header-input input { min-height: 2.5rem; } .main-header .global-search-header-input .p-inputtext-icon { margin-top: 0; transform: translateY(-50%); } .main-header .header-icons-list-item > [role="button"], .main-header button.header-icons-list-item { display: flex; align-items: center; justify-content: center; } } /* Web/PWA: a separate action row below the Explore menu, never an overlay. */ .sidebar-user-menu .mibbos-sb-more-step { position: relative; z-index: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; touch-action: pan-y; color: #0088fd; font: inherit; font-size: 14px; text-align: start; cursor: pointer; } .sidebar-user-menu > .mibbos-sb-more-step { background: transparent; margin: 0; width: 100%; box-sizing: border-box; justify-content: center; min-height: 40px; padding: 8px 12px; flex-shrink: 0; } @media (min-width: 1024px) { .sidebar-user-menu.mibbos-sidebar-ui { height: 100dvh !important; max-height: 100dvh !important; } } .sidebar-user-menu .mibbos-sb-more-step[hidden] { display: none !important; } .sidebar-user-menu .mibbos-sb-more-step svg { width: 18px; height: 18px; flex: 0 0 18px; } .sidebar-user-menu .mibbos-sb-more-step:focus-visible { outline: 2px solid #0088fd; outline-offset: -3px; border-radius: 10px; } /* Keep full-height menu rows reachable in short desktop windows. */ @media (min-width: 1024px) and (max-height: 700px) { .sidebar-user-menu.mibbos-sidebar-ui { --mibbos-sb-cover-h: 3rem; } .sidebar-user-menu.mibbos-sidebar-ui .sidebar-user-menu-box.mibbos-sb-user-card { min-height: 0; } .sidebar-user-menu.mibbos-sidebar-ui > .main-footer-menu { padding-top: 8px; padding-bottom: 8px; } } /* Desktop zoom can select the drawer layout without changing the mouse. Keep native wheel/scrollbar input and a single scroll area in short windows. */ @media (pointer: fine) { .sidebar-user-menu, .sidebar-user-menu .mibbos-sb-nav-scroll, .sidebar-user-menu .mibbos-mm-scroll { scrollbar-width: auto; scrollbar-color: #8292a8 transparent; scrollbar-gutter: stable; } .sidebar-user-menu { scrollbar-gutter: auto; } .sidebar-user-menu::-webkit-scrollbar, .sidebar-user-menu .mibbos-sb-nav-scroll::-webkit-scrollbar, .sidebar-user-menu .mibbos-mm-scroll::-webkit-scrollbar { width: 12px; } .sidebar-user-menu::-webkit-scrollbar-thumb, .sidebar-user-menu .mibbos-sb-nav-scroll::-webkit-scrollbar-thumb, .sidebar-user-menu .mibbos-mm-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 12px; background: #8292a8; background-clip: padding-box; } .sidebar-user-menu a, .sidebar-user-menu button, .header-mobile > .flex-shrink-0 { cursor: pointer; } } .mibbos-sb-drawer-close { display: none; } @media (max-width: 1023.98px) and (pointer: fine) { .sidebar-user-menu .mibbos-sb-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; } .sidebar-user-menu .mibbos-sb-drawer-close:hover { background: var(--mibbos-sb-accent-soft); } .sidebar-user-menu .mibbos-sb-drawer-close:focus-visible { outline: 2px solid #0088fd; outline-offset: 2px; } .sidebar-user-menu .mibbos-sb-drawer-close svg { width: 20px; height: 20px; } .sidebar-user-menu.mibbos-sidebar-ui:not(.mibbos-mm-off) > .mibbos-mm-hero > .base-icon.absolute { display: none !important; } } @media (max-height: 700px) and (pointer: fine), (max-height: 500px) { .sidebar-user-menu.mibbos-sidebar-ui:not(.mibbos-mm-off) { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain; min-height: 0; --mibbos-sb-cover-h: 2rem; --mibbos-mm-cover-h: 2rem; } .sidebar-user-menu.mibbos-sidebar-ui:not(.mibbos-mm-off) > .sidebar-main-menu, .sidebar-user-menu.mibbos-sidebar-ui > .mibbos-sb-menus-stack, .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-nav-card, .sidebar-user-menu.mibbos-sidebar-ui .mibbos-sb-nav-scroll, .sidebar-user-menu.mibbos-sidebar-ui .mibbos-mm-scroll { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; } .sidebar-user-menu > .mibbos-sb-profile-unit, .sidebar-user-menu > .sidebar-user-menu-box { flex-shrink: 0; } .sidebar-user-menu .sidebar-user-menu-box.mibbos-sb-user-card, .sidebar-user-menu .sidebar-user-menu-box.mibbos-mm-user-card { min-height: 0 !important; } .sidebar-user-menu .mibbos-sb-nav-scroll, .sidebar-user-menu .mibbos-mm-scroll { scrollbar-gutter: auto; } } /* The account card shares space with its avatar and account switcher. Let names and badges wrap and keep enough line height for accented text. */ .sidebar-user-menu .sidebar-user-menu-box { flex-shrink: 0; } .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-name { flex-wrap: wrap; row-gap: 0.3rem; line-height: 1.4 !important; } .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-name .base-username, .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-name .truncate, .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-sub-text { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; } .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-sub-text, .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-link { line-height: 1.5 !important; } .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-link { max-width: 100%; overflow-wrap: anywhere; } /* Keep the alias prefix on the first text line even for a long, unbroken alias. */ .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-name .base-username, .sidebar-user-menu .sidebar-user-menu-box .sidebar-user-menu-name .truncate { word-break: break-all; } /* /mobile-menu-ui/mobile-menu-ui.css */ /* * mibbos — mobile side menu (drawer) overlay * prod-mobile-menu-20261006 → prod-tabs-menu-splash-20261007 (v2): * Mismo estilo que el sidebar desktop (public/sidebar-ui ≥1024): * - ítems flotantes: sin fondo de botón, solo icono + nombre; claro = sombra mínima, oscuro = sin sombra; * activo sin relleno: claro más negro + más grueso, oscuro blanco más brillante. * - perfil + billetera: «botes» finos de 1px, aire, sin rellenos pesados (cover dentro del bote). * Solo <1024px. Prefijo mibbos-mm-. No toca feed-bar / reels-ui / mobile-bars / compose-ui. * prod-drawer-strip-fix-20261007: los selectores ya NO dependen de la clase .mibbos-mobile-menu-ui * (Vue reescribe el atributo class de .sidebar-user-menu al abrir/cerrar y la borraba → drawer sin * estilos: chevron gigante, billetera duplicada, sin cover). Ahora: .sidebar-user-menu:not(.mibbos-mm-off) * (misma especificidad) + límites duros de tamaño para svg/img/pseudo-elementos dentro del drawer. */ :root { --mibbos-mm-surface: #f4f6f8; --mibbos-mm-text: #0f172a; --mibbos-mm-muted: #64748b; --mibbos-mm-cover-h: 5.6rem; --mibbos-mm-cover-fallback: linear-gradient(135deg, #93c5fd 0%, #6366f1 45%, #a855f7 100%); --mibbos-mm-drawer-shadow: 8px 0 32px rgba(15, 23, 42, 0.14), 2px 0 8px rgba(15, 23, 42, 0.06); --mibbos-mm-ease: cubic-bezier(0.22, 1, 0.36, 1); /* botes (= desktop --mibbos-sb-bote-*) */ --mibbos-mm-bote-bg: rgba(255, 255, 255, 0.22); --mibbos-mm-bote-bg-soft: rgba(255, 255, 255, 0.12); --mibbos-mm-bote-border: rgba(15, 23, 42, 0.11); --mibbos-mm-bote-shadow: 0 2px 10px rgba(15, 23, 42, 0.045); --mibbos-mm-bote-radius: 1.05rem; /* ítems (= desktop --mibbos-sb-item-*) */ --mibbos-mm-item-text: #334155; --mibbos-mm-item-hover: #0f172a; --mibbos-mm-item-active: #020617; --mibbos-mm-item-text-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.10); --mibbos-mm-item-icon-shadow: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12)); } html.dark { --mibbos-mm-surface: #000000; --mibbos-mm-text: #f8fafc; --mibbos-mm-muted: rgba(226, 232, 240, 0.62); --mibbos-mm-cover-fallback: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #701a75 100%); --mibbos-mm-drawer-shadow: 10px 0 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); --mibbos-mm-bote-bg: rgba(255, 255, 255, 0.03); --mibbos-mm-bote-bg-soft: rgba(255, 255, 255, 0.02); --mibbos-mm-bote-border: rgba(255, 255, 255, 0.12); --mibbos-mm-bote-shadow: none; --mibbos-mm-item-text: rgba(226, 232, 240, 0.74); --mibbos-mm-item-hover: rgba(241, 245, 249, 0.92); --mibbos-mm-item-active: #ffffff; --mibbos-mm-item-text-shadow: none; --mibbos-mm-item-icon-shadow: none; } @media (max-width: 1023.98px) { /* ----- Drawer shell ----- */ .sidebar-user-menu:not(.mibbos-mm-off) { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; max-width: min(86vw, 21.5rem) !important; width: min(86vw, 21.5rem) !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; background: var(--mibbos-mm-surface) !important; background-color: var(--mibbos-mm-surface) !important; color: var(--mibbos-mm-text) !important; border-radius: 0 1.15rem 1.15rem 0 !important; /* prod-strip-align-20261007: cerrado (aparcado fuera de pantalla) SIN sombra — antes se veía una sombra tenue en el borde izquierdo de todas las páginas móviles. La sombra solo con el drawer abierto (.show). */ box-shadow: none !important; transition: transform 0.36s var(--mibbos-mm-ease), box-shadow 0.36s ease !important; } .sidebar-user-menu:not(.mibbos-mm-off).show { box-shadow: var(--mibbos-mm-drawer-shadow) !important; } .backdrop-modal.show { background: rgba(15, 23, 42, 0.38) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } html.dark .backdrop-modal.show { background: rgba(0, 0, 0, 0.6) !important; } /* ----- Top row: logo + close (cover now lives inside the profile bote, like desktop) ----- */ .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; min-height: 0; padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 0.9rem 0.55rem 1rem; } .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero > .mibbos-mm-cover { display: none !important; } .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero > .site-logo, .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero > button.site-logo { display: flex !important; align-items: center; margin: 0 !important; padding: 0 !important; } .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero .site-logo img { height: 1.75rem !important; width: auto !important; max-width: 9rem !important; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.10)); } html.dark .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero .site-logo img { filter: none; } /* close: floating glyph, hairline circle */ .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero > .base-icon.absolute, .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-hero > .absolute.top-8 { position: static !important; display: inline-flex !important; align-items: center; justify-content: center; width: 2.25rem !important; height: 2.25rem !important; padding: 0.45rem !important; border-radius: 9999px !important; border: 1px solid var(--mibbos-mm-bote-border); background: transparent !important; color: var(--mibbos-mm-text) !important; box-shadow: var(--mibbos-mm-bote-shadow); cursor: pointer; } /* ----- Profile bote (1px hairline, airy, cover inside) ----- */ .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card { position: relative !important; flex-shrink: 0; overflow: hidden !important; margin: 0.15rem 0.9rem 0 !important; padding: 0 !important; border-radius: var(--mibbos-mm-bote-radius) !important; border: 1px solid var(--mibbos-mm-bote-border) !important; background: var(--mibbos-mm-bote-bg) !important; background-color: var(--mibbos-mm-bote-bg) !important; box-shadow: var(--mibbos-mm-bote-shadow) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card > .mibbos-mm-cover { position: absolute; top: 0; left: 0; right: 0; height: var(--mibbos-mm-cover-h); background-size: cover; background-position: center; background-repeat: no-repeat; background-image: var(--mibbos-mm-cover-fallback); pointer-events: none; z-index: 0; opacity: 0.92; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card > .mibbos-mm-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.18) 100%); } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card > .flex.items-center { position: relative; z-index: 1; margin-top: var(--mibbos-mm-cover-h) !important; padding: 0.75rem 0.9rem 0.85rem !important; gap: 0.7rem !important; align-items: flex-start !important; background: transparent; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card > .flex.items-center > .flex-shrink-0, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card > .flex.items-center > [style*="width"] { margin-top: -1.9rem; flex-shrink: 0; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card img.rounded-full { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(15, 23, 42, 0.10) !important; } html.dark .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card img.rounded-full { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35) !important; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-name { font-weight: 750 !important; font-size: 0.98rem !important; line-height: 1.25; color: var(--mibbos-mm-text) !important; text-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.08); } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-sub-text, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-link { color: var(--mibbos-mm-muted) !important; font-size: 0.8rem !important; font-weight: 600; background: transparent !important; text-shadow: 0 1px 1px rgba(15, 23, 42, 0.06); } html.dark .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-name, html.dark .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-sub-text, html.dark .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-link { text-shadow: none; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-link[href*="wallet"], .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card a.mibbos-mm-wallet-hidden { display: none !important; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card .sidebar-user-menu-icon { color: var(--mibbos-mm-item-text) !important; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box.mibbos-mm-user-card > .mt-2 { position: relative; z-index: 1; margin: 0 !important; padding: 0.5rem 0.9rem 0.75rem; border-top: 1px solid var(--mibbos-mm-bote-border); background: transparent; font-size: 0.8rem; } /* ----- Wallet bote (thin, under profile) ----- */ .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-wallet { display: flex !important; align-items: center; gap: 0.65rem; flex-shrink: 0; width: calc(100% - 1.8rem); margin: 0.4rem 0.9rem 0.2rem; padding: 0.62rem 0.9rem; min-height: 2.75rem; border-radius: var(--mibbos-mm-bote-radius); border: 1px solid var(--mibbos-mm-bote-border); background: var(--mibbos-mm-bote-bg-soft); color: var(--mibbos-mm-text); box-shadow: var(--mibbos-mm-bote-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 650; font-size: 0.88rem; cursor: pointer; text-decoration: none !important; text-shadow: 0 1px 1px rgba(15, 23, 42, 0.06); -webkit-tap-highlight-color: transparent; transition: color 0.14s ease, border-color 0.14s ease; } html.dark .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-wallet { text-shadow: none; } .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-wallet:active { border-color: rgba(15, 23, 42, 0.22); } html.dark .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-wallet:active { border-color: rgba(255, 255, 255, 0.24); } .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-wallet.is-active { color: #020617; font-weight: 800; border-color: rgba(15, 23, 42, 0.22); } html.dark .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-wallet.is-active { color: #ffffff; font-weight: 700; border-color: rgba(255, 255, 255, 0.28); } .mibbos-mm-wallet-ico { display: inline-flex; width: 1.55rem; height: 1.55rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--mibbos-mm-bote-border); background: transparent; color: currentColor; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.10)); } html.dark .mibbos-mm-wallet-ico { filter: none; } .mibbos-mm-wallet.is-active .mibbos-mm-wallet-ico { border-color: currentColor; } .mibbos-mm-wallet-ico svg { width: 0.95rem; height: 0.95rem; } .mibbos-mm-wallet-label { flex: 1; min-width: 0; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mibbos-mm-wallet-chevron { width: 1rem; height: 1rem; opacity: 0.35; flex-shrink: 0; } /* Native Agregar nuevo is lg-only; hide any desktop leftovers */ .sidebar-user-menu:not(.mibbos-mm-off) > .mt-3.hidden, .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-sb-publish-zone:not(.mibbos-sb-publish-docked) { display: none !important; } /* ----- One continuous scrollable list ----- */ .sidebar-user-menu:not(.mibbos-mm-off) > .sidebar-main-menu, .sidebar-user-menu:not(.mibbos-mm-off) > .mibbos-mm-menus { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; margin: 0.3rem 0 0 !important; padding: 0 !important; background: transparent !important; } .mibbos-mm-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0.3rem 0.4rem 1rem; touch-action: pan-y; } .mibbos-mm-section-label, .mibbos-mm-profile-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mibbos-mm-muted); padding: 0.2rem 0.95rem 0.35rem; } .sidebar-user-menu:not(.mibbos-mm-off) .mibbos-mm-native-title-hide { display: none !important; } /* ===== FLOATING ITEMS — same as desktop sidebar: no chip/button chrome ===== */ .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list { display: flex; flex-direction: column; gap: 0.05rem; margin: 0; padding: 0.05rem 0 0.2rem; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li { list-style: none; margin: 0; padding: 0; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > a.sidebar-user-menu-list-item-wrap, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > button.sidebar-user-menu-list-item-wrap, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:hover, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:focus, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:active, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap.router-link-exact-active, .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap.router-link-active, .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active { display: flex !important; align-items: center !important; gap: 0.9rem !important; width: 100% !important; min-height: 2.85rem !important; margin: 0 !important; padding: 0.6rem 0.95rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; -webkit-tap-highlight-color: transparent; transition: color 0.14s ease !important; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap { color: var(--mibbos-mm-item-text) !important; text-shadow: var(--mibbos-mm-item-text-shadow); } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap .sidebar-main-menu-item-icon { background: var(--mibbos-mm-item-text) !important; background-color: var(--mibbos-mm-item-text) !important; filter: var(--mibbos-mm-item-icon-shadow); transition: background-color 0.14s ease, filter 0.14s ease !important; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap .flex-1 { font-weight: 600; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-list > li > .sidebar-user-menu-list-item-wrap:active { color: var(--mibbos-mm-item-hover) !important; } .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap:hover .sidebar-main-menu-item-icon, .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap:active .sidebar-main-menu-item-icon { background: var(--mibbos-mm-item-hover) !important; background-color: var(--mibbos-mm-item-hover) !important; } .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap:hover, .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap:hover a { color: var(--mibbos-mm-item-hover) !important; } /* Active: NO background. Light = blacker + bolder (thicker icon), dark = brighter white */ .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active, .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active:hover, .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active a { color: var(--mibbos-mm-item-active) !important; } .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .flex-1 { font-weight: 800; } .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .sidebar-main-menu-item-icon { background: var(--mibbos-mm-item-active) !important; background-color: var(--mibbos-mm-item-active) !important; filter: drop-shadow(0 0 0.45px var(--mibbos-mm-item-active)) drop-shadow(0 0 0.3px var(--mibbos-mm-item-active)) var(--mibbos-mm-item-icon-shadow); } html.dark .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .flex-1 { font-weight: 700; } html.dark .sidebar-user-menu:not(.mibbos-mm-off) ul.sidebar-user-menu-list li .sidebar-user-menu-list-item-wrap.router-link-exact-active .sidebar-main-menu-item-icon { filter: none; } /* Footer soft */ .sidebar-user-menu:not(.mibbos-mm-off) > .main-footer-menu, .sidebar-user-menu:not(.mibbos-mm-off) > footer, .sidebar-user-menu:not(.mibbos-mm-off) > .border-t { flex-shrink: 0; margin: 0 !important; padding: 0.55rem 1rem 0.75rem !important; border-top: 1px solid var(--mibbos-mm-bote-border) !important; opacity: 0.8; font-size: 0.7rem !important; background: transparent !important; } /* ----- Guard rails: nothing inside the drawer may render oversized ----- */ .sidebar-user-menu:not(.mibbos-mm-off) svg { max-width: 1.75rem !important; max-height: 1.75rem !important; } .sidebar-user-menu:not(.mibbos-mm-off) img { max-width: 100% !important; } .sidebar-user-menu:not(.mibbos-mm-off) .site-logo img, .sidebar-user-menu:not(.mibbos-mm-off) .site-logo-img { height: 1.75rem !important; max-height: 1.75rem !important; width: auto !important; max-width: 9rem !important; } .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box img.rounded-full { max-width: 3.5rem !important; max-height: 3.5rem !important; } .sidebar-user-menu:not(.mibbos-mm-off) *::before, .sidebar-user-menu:not(.mibbos-mm-off) *::after { max-width: 100%; } .sidebar-user-menu:not(.mibbos-mm-off) .mibbos-mm-wallet-ico svg, .sidebar-user-menu:not(.mibbos-mm-off) .mibbos-mm-wallet-chevron svg { display: block; width: 1rem !important; height: 1rem !important; } .mibbos-mm-wallet-chevron { display: inline-flex; align-items: center; justify-content: center; } /* the original Mibs link inside the profile card is replaced by the single wallet bote */ .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box a[href="/wallet"], .sidebar-user-menu:not(.mibbos-mm-off) .sidebar-user-menu-box a[href$="/wallet"] { display: none !important; } } /* Desktop: never apply mobile drawer chrome */ @media (min-width: 1024px) { .mibbos-mm-wallet, .mibbos-mm-cover, .mibbos-mm-section-label { display: none !important; } } /* /mobile-header-ui/mobile-header-ui.css */ /* * mibbos — mobile header/bottom-bar touch-ups — prod-mobile-header-20261006 * Solo < 1024px (escritorio intacto). Se carga DESPUÉS de mobile-bars / compose-ui / * sidebar-ui / mobile-menu-ui y solo sobreescribe: * 1) barra inferior: + limpio (SVG trazo) y sin disco blanco tras + y chat * 2) header: avatar izquierdo -> hamburguesa (mismo elemento => mismo click, abre el drawer) * 3) header: menú a la izquierda, logo centrado y buscador a la derecha, incluido el inicio * 4) menú Crear (desde el + inferior): sin panel/caja translúcida, solo píldoras flotantes * 5) top bar ~10% más grande (prod-drawer-strip-fix-20261007) * 6) oscuro: banner de apps + aro del avatar de perfil con el color de las pestañas (prod-strip-align-20261007) * No toca reels-ui, feed-bar ni estilos >= 1024px (salvo 6: el banner de apps, que solo existe con UA móvil). */ @media (max-width: 1023.98px) { /* ---------- 1) Bottom bar: quitar disco "glass" de compose-ui en + y chat ---------- */ html body .footer-mobile .footer-mobile-item > .relative > [role="button"], html body .footer-mobile .footer-mobile-item > button { width: 56px !important; height: 36px !important; border-radius: 18px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* conservar la píldora de activo de mobile-bars para el chat (button) */ html:not(.dark) body .footer-mobile .footer-mobile-item > button.router-link-exact-active { background-color: rgba(102, 199, 244, .18) !important; } html.dark body .footer-mobile .footer-mobile-item > button.router-link-exact-active { background-color: rgba(102, 199, 244, .16) !important; } /* + nuevo: ocultar el SVG original (cuadro relleno) y pintar un + con el mismo trazo (Phosphor bold, viewBox 256, igual que casa/enviar/campana) usando currentColor */ html body .footer-mobile .create-post-btn-mobile, html body .footer-mobile .create-post-btn-mobile.text-base-red { position: relative; display: inline-block !important; width: 24px !important; height: 24px !important; line-height: 0 !important; background: none !important; box-shadow: none !important; } html:not(.dark) body .footer-mobile .create-post-btn-mobile { color: #475569 !important; } html.dark body .footer-mobile .create-post-btn-mobile { color: #c4c8cc !important; } html body .footer-mobile .create-post-btn-mobile > svg { display: none !important; } html body .footer-mobile .create-post-btn-mobile::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E") center / 24px 24px no-repeat; } /* ---------- 2) Header: avatar -> hamburguesa (mismo contenedor clicable) ---------- */ html body .header-mobile > .flex-shrink-0 { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; margin-inline-start: -4px; border-radius: 9999px; cursor: pointer; -webkit-tap-highlight-color: transparent; } html body .header-mobile > .flex-shrink-0:active { background-color: rgba(100, 116, 139, .14); } html body .header-mobile > .flex-shrink-0 > * { visibility: hidden !important; opacity: 0 !important; } html body .header-mobile > .flex-shrink-0::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); background-color: currentColor; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat; } html:not(.dark) body .header-mobile > .flex-shrink-0 { color: #0f172a; } html.dark body .header-mobile > .flex-shrink-0 { color: #fff; } /* ---------- 4) Menú Crear del + inferior: sin panel translúcido ---------- */ html body .footer-mobile .dropdown-menu-box, html body .footer-mobile .dropdown-menu-box.mibbos-compose-menu { background: transparent !important; background-color: transparent !important; border: 0 !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* píldoras flotantes: sombra un poco más marcada al no tener caja detrás */ html:not(.dark) body .footer-mobile .dropdown-menu-box > ul > li > button { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08) !important; } html.dark body .footer-mobile .dropdown-menu-box > ul > li > button { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } } /* ---------- 5) prod-drawer-strip-fix-20261007: top bar ~10% más grande ---------- alto 44→48px (vía --mbx-header-h de mobile-bars: el padding del contenido y los sticky que usan --mobile-header-h se ajustan solos), logo 24→26.5px, iconos 22→24px, botones 36→40px. */ @media (max-width: 1023.98px) { :root { --mbx-header-h: calc(48px + env(safe-area-inset-top, 0px)); } html body .header-mobile .logo-mobile { top: calc(env(safe-area-inset-top, 0px) + 24px); height: 36px; } html body .header-mobile .logo-mobile-img { height: 26.5px !important; } html body .header-mobile > .flex-shrink-0 { width: 40px !important; height: 40px !important; } html body .header-mobile > .flex-shrink-0::before { width: 24px; height: 24px; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; } html body .header-mobile > button:last-of-type { width: 40px; height: 40px; } html body .header-mobile .header-mobile-icon, html body .header-mobile .header-mobile-icon svg { width: 24px !important; height: 24px !important; } } /* ---------- 6) prod-strip-align-20261007: vista "app" (web móvil / UA móvil) en oscuro = color de las pestañas ---------- rgba(22,24,28,.9) + borde rgba(255,255,255,.10) + sombra 0 2px 10px rgba(0,0,0,.45), en vez del slate #1e293b (dark:bg-slate-800). .app-suggest = hoja "¡Prueba nuestras aplicaciones móviles!" que el core solo muestra a UAs móviles (cualquier ancho, p. ej. iPad horizontal). */ html.dark body .app-suggest { background-color: rgba(22, 24, 28, 0.9) !important; border-top: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); } @media (max-width: 1023.98px) { /* aro del avatar en la cabecera del perfil (dark:bg-slate-800) */ html.dark body .header-profile-avatar { background-color: rgba(22, 24, 28, 0.9) !important; } } /* /reels-ui/reels-feedback.css */ /* mibbos — Reels feedback prompt */ .mibbos-reel-fb{position:absolute;inset:auto 12px 96px 12px;z-index:40;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .35s ease,transform .38s cubic-bezier(.2,.9,.3,1.2)} .mibbos-reel-fb.is-in{opacity:1;transform:none} .mibbos-reel-fb.is-out{opacity:0;transform:translateY(16px) scale(.96);transition-duration:.3s} .mibbos-reel-fb__card{pointer-events:auto;position:relative;width:100%;max-width:340px;padding:22px 18px 14px;border-radius:24px;text-align:center;color:#0f172a;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden} .dark .mibbos-reel-fb__card,html.dark .mibbos-reel-fb__card{color:#f8fafc;background:rgba(15,23,42,.58);border-color:rgba(255,255,255,.14)} @media (prefers-color-scheme:dark){html:not(.light) .mibbos-reel-fb__card{color:#f8fafc;background:rgba(15,23,42,.58);border-color:rgba(255,255,255,.14)}} .mibbos-reel-fb__x{position:absolute;top:8px;inset-inline-end:10px;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:inherit;opacity:.6;font-size:22px;line-height:30px;cursor:pointer} .mibbos-reel-fb__x:hover{opacity:1;background:rgba(127,127,127,.15)} .mibbos-reel-fb__q{margin:0 18px 4px;font-size:17px;font-weight:700;line-height:1.3} .mibbos-reel-fb__sub{margin:0 0 16px;font-size:13px;opacity:.72} .mibbos-reel-fb__row{display:flex;justify-content:center;gap:28px} .mibbos-reel-fb__btn{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;color:inherit;font-size:12.5px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent} .mibbos-reel-fb__btn svg{box-sizing:content-box;padding:17px;border-radius:50%;background-color:rgba(127,127,127,.16);transition:transform .18s ease,background-color .22s ease,color .22s ease,box-shadow .22s ease} .mibbos-reel-fb__btn:hover svg{transform:scale(1.06)} .mibbos-reel-fb__btn:active svg{transform:scale(.88)} .mibbos-reel-fb__btn.is-up.is-picked svg{background-color:#22c55e;color:#fff;box-shadow:0 0 0 6px rgba(34,197,94,.18),0 8px 24px rgba(34,197,94,.5)} .mibbos-reel-fb__btn.is-down.is-picked svg{background-color:#3b82f6;color:#fff;box-shadow:0 0 0 6px rgba(59,130,246,.18),0 8px 24px rgba(59,130,246,.5)} .mibbos-reel-fb__btn.is-picked svg{animation:mibbosFbPop .42s cubic-bezier(.2,.9,.3,1.4)} .mibbos-reel-fb__skip{margin-top:12px;border:0;background:none;color:inherit;opacity:.6;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .mibbos-reel-fb__skip:hover{opacity:.9} .mibbos-reel-fb__body{transition:opacity .25s,transform .25s} .mibbos-reel-fb__thanks{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transform:scale(.9);pointer-events:none;transition:opacity .3s .1s,transform .35s .1s cubic-bezier(.2,.9,.3,1.3)} .mibbos-reel-fb__thanks p{margin:0 20px;font-size:15px;font-weight:600} .mibbos-reel-fb__check svg{box-sizing:content-box;padding:12px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#3b82f6);color:#fff} .mibbos-reel-fb__card.is-done .mibbos-reel-fb__body,.mibbos-reel-fb.is-done .mibbos-reel-fb__body{opacity:0;transform:scale(.95)} .mibbos-reel-fb.is-done .mibbos-reel-fb__thanks{opacity:1;transform:none} @keyframes mibbosFbPop{0%{transform:scale(.85)}55%{transform:scale(1.18)}100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.mibbos-reel-fb,.mibbos-reel-fb__btn svg,.mibbos-reel-fb__thanks,.mibbos-reel-fb__body{transition:none;animation:none}} .mibbos-reel-fb.is-fixed{position:fixed;inset:auto 12px 96px 12px;z-index:9999} /* 2026-10-14 v4-layout: la tarjeta nunca cambia el layout ni el zoom del visor. - fija sobre , con margenes seguros (sin vh), contenida (contain) y sin tocar body/html. - touch-action:manipulation: en iPad un doble toque en los botones hacia zoom de la pagina. */ .mibbos-reel-fb.is-fixed{position:fixed;top:auto;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));margin:0;width:auto;height:auto;max-height:calc(100% - 140px);z-index:9999;contain:layout paint style} .mibbos-reel-fb,.mibbos-reel-fb *{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%} .mibbos-reel-fb__card{max-height:inherit;overflow:hidden;box-sizing:border-box} /* 2026-10-14 v5: encuesta a pantalla completa en su propia capa (como la referencia). No toca el feed. */ .mibbos-reel-fbx{position:fixed;top:0;left:0;right:0;width:100%;z-index:10000;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:rgba(10,10,12,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;opacity:0;transition:opacity .22s ease;touch-action:none;overscroll-behavior:contain;contain:layout paint style;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-family:inherit} .mibbos-reel-fbx.is-in{opacity:1}.mibbos-reel-fbx.is-out{opacity:0} .mibbos-reel-fbx *{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box} .mibbos-reel-fbx__in{position:relative;width:100%;max-width:420px;max-height:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden} .mibbos-reel-fbx__thumb{flex:none;border-radius:16px;overflow:hidden;background:#222 center/cover no-repeat;box-shadow:0 8px 30px rgba(0,0,0,.5);margin-bottom:18px} .mibbos-reel-fbx__thumb canvas{display:block;width:100%;height:100%;object-fit:cover} .mibbos-reel-fbx__body{width:100%;display:flex;flex-direction:column;gap:10px;transition:opacity .2s} .mibbos-reel-fbx__q{margin:0;font-size:20px;font-weight:700;line-height:1.3;text-align:center} .mibbos-reel-fbx__sub{margin:0 0 6px;font-size:14px;opacity:.65;text-align:center} .mibbos-reel-fbx__btn{width:100%;min-height:50px;border:0;border-radius:12px;background:#2c2c2e;color:#fff;font-size:16px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .1s} .mibbos-reel-fbx__btn:active{transform:scale(.98)} .mibbos-reel-fbx__btn.is-picked{background:#48484a} .mibbos-reel-fbx__skip{align-self:center;margin-top:4px;padding:8px 14px;border:0;background:none;color:#fff;opacity:.6;font-size:14px;cursor:pointer} .mibbos-reel-fbx__thanks{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;min-height:120px;opacity:0;pointer-events:none;transition:opacity .25s .1s} .mibbos-reel-fbx__thanks p{margin:0;font-size:17px;font-weight:600;text-align:center} .mibbos-reel-fbx.is-done .mibbos-reel-fbx__body{opacity:0}.mibbos-reel-fbx.is-done .mibbos-reel-fbx__thanks{opacity:1} @media (prefers-reduced-motion:reduce){.mibbos-reel-fbx,.mibbos-reel-fbx__body,.mibbos-reel-fbx__thanks{transition:none}} /* 2026-10-14 v6: tarjeta compacta arriba del reel (NO pantalla completa). Fija, ancho/posicion por JS, sin tocar body ni el feed. */ .mibbos-reel-fbx.mibbos-reel-fbc{position:fixed;top:0;left:12px;right:auto;bottom:auto;width:300px;height:auto;max-height:none;margin:0;padding:0;margin-top:max(10px,env(safe-area-inset-top));background:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:block;touch-action:manipulation;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .22s ease;z-index:10000;contain:layout paint style} .mibbos-reel-fbc.is-in{opacity:1;transform:none}.mibbos-reel-fbc.is-out{opacity:0;transform:translateY(-8px)} .mibbos-reel-fbc .mibbos-reel-fbx__in{max-width:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 12px 8px;border-radius:16px;background:rgba(20,20,22,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,0,0,.35);color:#fff} .mibbos-reel-fbc .mibbos-reel-fbx__thumb{width:40px!important;height:64px!important;margin:0;border-radius:8px;box-shadow:none} .mibbos-reel-fbc .mibbos-reel-fbx__body{gap:6px;align-items:center} .mibbos-reel-fbc .mibbos-reel-fbx__q{font-size:14px;font-weight:600} .mibbos-reel-fbc .mibbos-reel-fbx__row{display:flex;gap:8px;width:100%} .mibbos-reel-fbc .mibbos-reel-fbx__btn{flex:1;min-height:36px;padding:0 8px;font-size:13.5px;border-radius:10px;background:rgba(255,255,255,.14)} .mibbos-reel-fbc .mibbos-reel-fbx__btn.is-picked{background:rgba(255,255,255,.3)} .mibbos-reel-fbc .mibbos-reel-fbx__skip{margin:0;padding:4px 10px;font-size:12.5px} .mibbos-reel-fbc .mibbos-reel-fbx__thanks{top:0;min-height:0} .mibbos-reel-fbc .mibbos-reel-fbx__thanks p{font-size:14px} /* v9 2026-10-14: tarjeta a pantalla completa sobre el reel, botones abajo. El fondo deja pasar gestos. */ .mibbos-reel-fbx.mibbos-reel-fbf{position:fixed;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;margin:0;padding:0 0 max(18px,env(safe-area-inset-bottom));background:rgba(8,8,10,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:none;touch-action:auto;opacity:0;transform:none;transition:opacity .2s ease;z-index:10000;contain:layout paint style;box-sizing:border-box;overflow:hidden} .mibbos-reel-fbx.mibbos-reel-fbf.is-in{opacity:1} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__in{pointer-events:auto;width:auto;max-width:440px;margin:0 auto;align-self:stretch;padding:18px 16px 10px;gap:12px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0} @media (min-width:480px){.mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__in{width:calc(100% - 32px)}} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__q{font-size:20px;font-weight:700;line-height:1.3;margin-bottom:6px;text-shadow:0 1px 6px rgba(0,0,0,.4)} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__body{gap:10px} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__row{flex-direction:column;gap:10px} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn{min-height:48px;font-size:16px;border-radius:12px;background:rgba(255,255,255,.18)} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn.is-picked{background:rgba(255,255,255,.36)} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__skip{font-size:14px;padding:8px 14px} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__thanks{top:auto;bottom:0;min-height:140px} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__thanks p{font-size:17px} /* v9 modo claro (html sin .dark): fondo claro del sitio, texto y botones oscuros. Modo oscuro sigue negro. */ html:not(.dark) .mibbos-reel-fbx.mibbos-reel-fbf{background:rgba(255,255,255,.78);color:#0f172a} html:not(.dark) .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__q{color:#0f172a;text-shadow:none} html:not(.dark) .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn{background:rgba(15,23,42,.08);color:#0f172a;border:1px solid rgba(15,23,42,.12)} html:not(.dark) .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn.is-picked{background:rgba(15,23,42,.18)} html:not(.dark) .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__skip{color:#334155;opacity:.85} html:not(.dark) .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__thanks p{color:#0f172a} /* v9: los tres botones azul del logo (#0088FD) con texto blanco, en claro y oscuro */ html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn,html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__skip{background:#0088FD;color:#fff;border:0;opacity:1;width:100%;min-height:48px;border-radius:12px;font-size:16px;font-weight:600;padding:0 12px;margin:0} html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn.is-picked{background:#006fd0} html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__btn:hover,html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__skip:hover{background:#0079e0} /* v9: miniatura pequeña del reel arriba (póster, sin canvas) y 3 botones grandes en fila abajo */ html .mibbos-reel-fbx.mibbos-reel-fbf{justify-content:space-between} html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__in{flex:1;justify-content:space-between;padding-top:max(24px,env(safe-area-inset-top))} html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__thumb{display:block;width:96px!important;height:170px!important;border-radius:14px;background:#222 center/cover no-repeat;box-shadow:0 8px 30px rgba(0,0,0,.35);margin:0 auto} html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__row{flex-direction:row;gap:8px} html .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__row>button{flex:1;width:auto;min-height:56px;font-size:15px;line-height:1.15;padding:0 6px} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__row>button{background:#0088FD!important;color:#fff!important;border:0!important;opacity:1!important} .mibbos-reel-fbx.mibbos-reel-fbf .mibbos-reel-fbx__row>button.is-picked{background:#006fd0!important} /* v10 2026-10-14: diseño boceto. Fondo sólido del sitio (claro/oscuro con html.dark), vista previa arriba, título, subtítulo y 3 botones grises a todo el ancho apilados. El fondo deja pasar gestos. */ .mibbos-reel-fbx.mibbos-reel-fbm{position:fixed;display:flex;flex-direction:column;margin:0;padding:0;background:#fff;color:#050505;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;touch-action:auto;opacity:0;transform:none;transition:opacity .2s ease;z-index:10000;contain:layout paint style;box-sizing:border-box;overflow:hidden} html.dark .mibbos-reel-fbx.mibbos-reel-fbm{background:#18191a;color:#fff} .mibbos-reel-fbx.mibbos-reel-fbm.is-in{opacity:1} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__in{pointer-events:auto;flex:1;min-height:0;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:max(20px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;color:inherit} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__thumb{display:block;flex:0 1 auto;width:50%!important;height:auto!important;max-height:52%;aspect-ratio:9/15;min-height:120px;border-radius:16px;background:#2a2a2a center/cover no-repeat;box-shadow:none;margin:0 auto 14px} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__body{flex:none;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__q{margin:0 0 4px;font-size:21px;font-weight:700;line-height:1.25;text-align:center;color:inherit;text-shadow:none} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__sub{margin:0 0 14px;font-size:15px;opacity:.75;text-align:center;color:inherit} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__row{display:flex;flex-direction:column;gap:8px;width:100%} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__row>button{flex:none;width:100%;min-height:46px;margin:0;padding:0 12px;border:0!important;border-radius:10px;background:#e4e6eb!important;color:#050505!important;opacity:1!important;font-size:16px;font-weight:600;cursor:pointer} html.dark .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__row>button{background:#3a3b3c!important;color:#fff!important} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__row>button.is-picked{background:#d0d3d9!important} html.dark .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__row>button.is-picked{background:#4e4f50!important} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__thanks{position:absolute;left:0;right:0;top:auto;bottom:0;min-height:160px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__thanks p{font-size:17px;font-weight:600;color:inherit} .mibbos-reel-fbx.mibbos-reel-fbm.is-done .mibbos-reel-fbx__body{opacity:0} .mibbos-reel-fbx.mibbos-reel-fbm.is-done .mibbos-reel-fbx__thanks{opacity:1} /* v12: fondo opaco sin transición de opacidad (el reel siguiente nunca se ve detrás) y miniatura sobre todo */ .mibbos-reel-fbx.mibbos-reel-fbm{opacity:1;transition:none} .mibbos-reel-fbx.mibbos-reel-fbm.is-out{opacity:0;transition:opacity .2s ease} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__thumb{position:relative;z-index:2;will-change:transform} /* v13 2026-10-14: tapa opaca a pantalla completa en el INICIO del gesto (fuera del contenedor que scrollea, en ), con el fotograma ya capturado; la tarjeta bloquea los gestos (el reel siguiente nunca se ve); miniatura arriba, botones abajo; la parte de preguntas entra desde abajo mientras el reel sube encogiéndose. */ .mibbos-reel-fbcover{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;z-index:2147483647;background:#fff center/cover no-repeat;pointer-events:auto;touch-action:none;transform:none;contain:strict} html.dark .mibbos-reel-fbcover{background-color:#18191a} .mibbos-reel-fbcover.is-out{opacity:0;transition:opacity .2s ease} .mibbos-reel-fbx.mibbos-reel-fbm{z-index:2147483646;pointer-events:auto;touch-action:none;overscroll-behavior:contain;width:100vw;height:100vh;height:100dvh} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__in{justify-content:space-between} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__thumb{margin:0 auto} .mibbos-reel-fbx.mibbos-reel-fbm .mibbos-reel-fbx__body{animation:mibbosFbUp .38s cubic-bezier(.2,.8,.2,1) both} @keyframes mibbosFbUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}} /* v14: la tapa ya no pinta el fotograma a pantalla completa (causaba el «pestañazo»): fondo sólido y el fotograma en el rect exacto del