/*
 * 7ly Social · vista previa en un iPhone (18 Pro Max, 440×956 pt) con el post nuevo dentro de cada red.
 * El teléfono se dibuja a tamaño lógico y se escala con transform para caber en la columna; cada red es una
 * "pantalla" deslizable (.iphone-slide) con la interfaz de esa aplicación y el feed real del cliente.
 */

.pp { position: relative; user-select: none; -webkit-user-select: none; outline: 0; }
.pp:focus-visible .iphone-frame { box-shadow: 0 0 0 3px var(--md-primary), 0 30px 60px -20px rgba(0, 0, 0, .45); }
.pp-stage { position: relative; width: 100%; min-height: 200px; }
.pp-stage.is-dragging .iphone-track { transition: none; }

/* ---------------------------------------------------------------- Teléfono */

.iphone { position: absolute; top: 0; left: 0; width: 468px; height: 984px; transform-origin: top left; }
.iphone-frame {
    position: absolute;
    inset: 0;
    border-radius: 78px;
    background: linear-gradient(150deg, #5b5f66 0%, #24272b 38%, #1a1c1f 62%, #3c4045 100%);
    box-shadow: 0 34px 60px -24px rgba(1, 45, 51, .55), 0 14px 28px -14px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}

.iphone-frame::before { content: ""; position: absolute; inset: 3px; border-radius: 75px; background: #07090a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.iphone-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6b6f76, #2c2f33 70%); }
.iphone-btn-action { left: -4px; top: 196px; height: 34px; }
.iphone-btn-vol1 { left: -4px; top: 258px; height: 66px; }
.iphone-btn-vol2 { left: -4px; top: 338px; height: 66px; }
.iphone-btn-power { right: -4px; top: 286px; height: 104px; background: linear-gradient(270deg, #6b6f76, #2c2f33 70%); }
.iphone-btn-camera { right: -3px; top: 572px; height: 58px; width: 3px; background: linear-gradient(270deg, #6b6f76, #2c2f33 70%); }

.iphone-screen { position: absolute; left: 14px; top: 14px; width: 440px; height: 956px; border-radius: 64px; overflow: hidden; overflow: clip; background: #000; touch-action: pan-y; cursor: grab; }
.iphone-screen:active { cursor: grabbing; }
.iphone-island { position: absolute; left: 50%; top: 12px; width: 126px; height: 37px; transform: translateX(-50%); background: #000; border-radius: 20px; z-index: 40; }
.iphone-island::after { content: ""; position: absolute; right: 12px; top: 12px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #1d2b3a, #060a0f 70%); }
.iphone-status { position: absolute; left: 0; right: 0; top: 0; height: 59px; display: flex; align-items: flex-start; justify-content: space-between; padding: 17px 42px 0 50px; z-index: 39; pointer-events: none; color: #000; font: 600 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif; transition: color 200ms; }
.iphone-status[data-theme="dark"] { color: #fff; }
.iphone-status-right { display: flex; align-items: center; gap: 7px; }
.iphone-status-right svg { display: block; }
.iphone-homebar { position: absolute; left: 50%; bottom: 9px; width: 144px; height: 5px; border-radius: 3px; background: #000; transform: translateX(-50%); z-index: 39; pointer-events: none; opacity: .92; transition: background-color 200ms; }
.iphone-homebar[data-theme="dark"] { background: #fff; }

.iphone-track { position: absolute; inset: 0; display: flex; will-change: transform; transition: transform 420ms cubic-bezier(.2, 0, 0, 1); }
.iphone-slide { position: relative; flex: 0 0 440px; width: 440px; height: 956px; overflow: hidden; }

/* Base de las aplicaciones */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #262626; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.35; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
.app svg { display: block; flex: 0 0 auto; }
.app strong { font-weight: 600; }
.app-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.app-scroll::-webkit-scrollbar { display: none; }
.app-pad { padding-top: 59px; }
.pv-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-media.fit-contain { object-fit: contain; }
.pv-fill { position: absolute; inset: 0; background: #000; overflow: hidden; }
.pv-fill .pv-blur { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) brightness(.55); }
.pv-fill .pv-media { position: absolute; inset: 0; }
.pv-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; min-height: 120px; color: #9aa0a6; background: linear-gradient(135deg, #e8edef, #f6f9fa); font-size: 14px; text-align: center; padding: 20px; }
.pv-placeholder.is-dark { background: linear-gradient(160deg, #1f2327, #0b0d0f); color: #8e9499; }
.pv-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.pv-new { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--brand, #0A5B66); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1; font-family: var(--font-sans); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pv-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #e3e3e3; color: #fff; font-weight: 600; font-family: var(--font-sans); }
.pv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-rich .tag, .pv-rich .at { color: #00376B; }
.pv-dark .pv-rich .tag, .pv-dark .pv-rich .at { color: #fff; font-weight: 600; }
.pv-caption-placeholder { color: #9aa0a6; font-style: italic; }
.pv-dots { display: flex; justify-content: center; gap: 4px; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.pv-dots i.is-active { background: #0095F6; }
.pv-slides { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.pv-slides-track { display: flex; height: 100%; transition: transform .28s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.pv-slides.is-dragging .pv-slides-track { transition: none; }
.pv-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.pv-slides-fill { position: absolute; inset: 0; background: #000; }
.pv-count { position: absolute; top: 14px; right: 14px; padding: 4px 9px; border-radius: 12px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; }
.pv-tile-badge { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.pv-empty-app { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 20% 10%, #1b7a89 0%, #0A5B66 45%, #012D33 100%); font-family: var(--font-sans); }
.pv-empty-app .ms { font-size: 64px; opacity: .9; }
.pv-empty-app strong { font-size: 22px; font-weight: 500; }
.pv-empty-app span { font-size: 15px; opacity: .8; line-height: 1.45; }
.pv-empty-app .pv-empty-time { position: absolute; top: 120px; left: 0; right: 0; font-size: 84px; font-weight: 300; letter-spacing: -.02em; opacity: .95; }
.pv-empty-app .pv-empty-date { position: absolute; top: 96px; left: 0; right: 0; font-size: 18px; font-weight: 500; opacity: .85; }
.pv-feed-note { padding: 18px 20px 30px; text-align: center; color: #8e8e8e; font-size: 13px; }

/* Barras inferiores (Instagram, Threads, TikTok) */
.pv-tabbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; height: 84px; padding: 8px 10px 30px; border-top: 1px solid #efefef; background: #fff; color: #262626; }
.pv-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: inherit; opacity: .9; }
.pv-tabbar small { font-size: 10px; font-weight: 500; }
.pv-tabbar .pv-avatar { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px #262626; }
.pv-tabbar.is-dark { background: #000; border-top-color: #262626; color: #fff; }
.pv-tabbar.is-dark .pv-avatar { box-shadow: 0 0 0 1.5px #fff; }

/* ---------------------------------------------------------------- Instagram */

.app-ig { color: #262626; }
.ig-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; }
.ig-topbar .ig-title { display: flex; flex-direction: column; line-height: 1.1; }
.ig-topbar .ig-title small { font-size: 11px; font-weight: 600; color: #8e8e8e; letter-spacing: .04em; text-transform: uppercase; }
.ig-topbar .ig-title strong { font-size: 16px; }
.ig-topbar .ig-spacer { flex: 1 1 auto; }
.ig-topbar .ig-handle { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; }
.ig-topbar .ig-icons { margin-left: auto; display: flex; gap: 20px; }
.ig-post { padding-bottom: 14px; }
.ig-post + .ig-post { border-top: 1px solid #f2f2f2; padding-top: 2px; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.ig-head .pv-avatar { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 1px #dbdbdb; }
.ig-head-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ig-head-text strong { font-size: 14px; }
.ig-head-text small { font-size: 12px; color: #262626; }
.ig-head .ig-more { margin-left: auto; }
.ig-head .pv-new { margin-left: auto; }
.ig-head .pv-new + .ig-more { margin-left: 0; }
.ig-media { position: relative; width: 100%; background: #fafafa; overflow: hidden; }
.ig-actions { display: flex; align-items: center; gap: 16px; padding: 10px 14px 6px; }
.ig-actions .ig-left { display: flex; gap: 16px; }
.ig-actions .pv-dots { flex: 1 1 auto; }
.ig-actions .ig-save { margin-left: auto; }
.ig-likes { padding: 0 14px; font-size: 14px; font-weight: 600; }
.ig-caption { padding: 4px 14px 0; font-size: 14px; word-break: break-word; white-space: pre-wrap; }
.ig-caption strong { margin-right: 4px; }
.ig-caption.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.ig-more-link { padding: 0 14px; color: #8e8e8e; font-size: 14px; cursor: pointer; }
.ig-comments { padding: 4px 14px 0; color: #8e8e8e; font-size: 14px; }
.ig-time { padding: 4px 14px 0; color: #8e8e8e; font-size: 11px; letter-spacing: .02em; }
.ig-profile { padding: 4px 0 0; }
.ig-profile-top { display: flex; align-items: center; gap: 20px; padding: 8px 20px; }
.ig-profile-top .pv-avatar { width: 88px; height: 88px; font-size: 32px; box-shadow: 0 0 0 1px #dbdbdb; }
.ig-stats { flex: 1 1 auto; display: flex; justify-content: space-around; }
.ig-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ig-stat b { font-size: 17px; font-weight: 700; }
.ig-stat span { font-size: 13px; }
.ig-profile-name { padding: 6px 20px 0; font-size: 14px; font-weight: 600; }
.ig-profile-bio { padding: 2px 20px 0; font-size: 14px; white-space: pre-wrap; }
.ig-profile-buttons { display: flex; gap: 8px; padding: 14px 20px 6px; }
.ig-profile-buttons .pv-btn, .fb-page-buttons .pv-btn, .th-profile-buttons .pv-btn, .tt-pbuttons .pv-btn { height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #efefef; color: #000; font-weight: 600; font-size: 14px; line-height: 1; font-family: inherit; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ig-profile-buttons .pv-btn.is-primary, .fb-page-buttons .pv-btn.is-primary { background: #0095F6; color: #fff; }
.ig-profile-buttons .pv-btn.is-icon, .fb-page-buttons .pv-btn.is-icon, .tt-pbuttons .pv-btn.is-icon { flex: 0 0 auto; padding: 0 10px; }
.ig-profile-tabs { display: flex; margin-top: 10px; border-top: 1px solid #efefef; }
.ig-profile-tabs span { flex: 1 1 0; display: flex; justify-content: center; padding: 12px 0; color: #8e8e8e; border-bottom: 1px solid transparent; }
.ig-profile-tabs span.is-active { color: #262626; border-bottom-color: #262626; }
.ig-grid, .tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-top: 2px; }
.ig-tile, .tt-tile { position: relative; aspect-ratio: 3 / 4; background: #f0f0f0; overflow: hidden; }
.ig-tile.is-new::after, .tt-tile.is-new::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--brand, #0A5B66); pointer-events: none; }
.ig-tile .pv-new, .tt-tile .pv-new { position: absolute; left: 8px; bottom: 8px; }
.ig-tile .pv-placeholder { font-size: 12px; }
.tt-views { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* Reels y historias (Instagram y Facebook) */
.app-reel, .app-story, .app-tt { background: #000; color: #fff; }
.reel-top { position: absolute; left: 0; right: 0; top: 59px; display: flex; align-items: center; justify-content: space-between; padding: 6px 18px; z-index: 5; font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.reel-rail { position: absolute; right: 12px; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 22px; z-index: 5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.reel-rail .rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.reel-disc { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #fff; overflow: hidden; }
.reel-disc .pv-avatar { width: 100%; height: 100%; border-radius: 0; }
.reel-foot { position: absolute; left: 16px; right: 76px; bottom: 104px; z-index: 5; display: flex; flex-direction: column; gap: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.reel-author { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.reel-author .pv-avatar { width: 34px; height: 34px; font-size: 13px; box-shadow: 0 0 0 1.5px #fff; }
.reel-author .pv-btn { height: 28px; padding: 0 12px; border: 1px solid #fff; border-radius: 8px; background: transparent; color: #fff; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; }
.reel-caption { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.reel-caption.is-expanded { display: block; max-height: 300px; overflow: auto; }
.reel-audio { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.reel-audio span { overflow: hidden; text-overflow: ellipsis; }
.story-bars { position: absolute; left: 10px; right: 10px; top: 62px; display: flex; gap: 4px; z-index: 5; }
.story-bars i { flex: 1 1 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.story-bars i.is-active::after { content: ""; display: block; width: 45%; height: 100%; background: #fff; border-radius: 3px; }
.story-head { position: absolute; left: 14px; right: 14px; top: 74px; display: flex; align-items: center; gap: 10px; z-index: 5; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.story-head .pv-avatar { width: 34px; height: 34px; font-size: 13px; }
.story-head strong { font-size: 14px; }
.story-head small { font-size: 13px; opacity: .85; }
.story-head .story-icons { margin-left: auto; display: flex; gap: 16px; }
.story-text { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); z-index: 5; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); word-break: break-word; }
.story-foot { position: absolute; left: 14px; right: 14px; bottom: 36px; display: flex; align-items: center; gap: 16px; z-index: 5; }
.story-input { flex: 1 1 auto; height: 44px; display: flex; align-items: center; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; font-size: 14px; color: rgba(255, 255, 255, .9); }

/* ---------------------------------------------------------------- Facebook */

.app-fb { background: #F0F2F5; color: #050505; }
.fb-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; background: #fff; }
.fb-logo { font-family: 'Google Sans Flex', 'Google Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 30px; font-weight: 700; color: #1877F2; letter-spacing: -.04em; line-height: 1; flex: 1 1 auto; }
.fb-topbar-icons { display: flex; gap: 10px; }
.fb-topbar-icons i { width: 38px; height: 38px; border-radius: 50%; background: #E4E6EB; display: flex; align-items: center; justify-content: center; color: #050505; }
.fb-topbar strong { flex: 1 1 auto; font-size: 17px; }
.fb-nav { flex: 0 0 auto; display: flex; justify-content: space-around; background: #fff; border-bottom: 1px solid #ced0d4; }
.fb-nav span { flex: 1 1 0; display: flex; justify-content: center; padding: 10px 0; color: #65676B; border-bottom: 3px solid transparent; }
.fb-nav span.is-active { color: #1877F2; border-bottom-color: #1877F2; }
.fb-feed { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.fb-composer { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; }
.fb-composer .pv-avatar { width: 40px; height: 40px; font-size: 15px; }
.fb-composer .fb-input { flex: 1 1 auto; height: 40px; display: flex; align-items: center; padding: 0 14px; border: 1px solid #ced0d4; border-radius: 20px; color: #65676B; font-size: 15px; }
.fb-post { background: #fff; padding-bottom: 4px; }
.fb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.fb-head .pv-avatar { width: 40px; height: 40px; font-size: 15px; }
.fb-head-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1 1 auto; }
.fb-head-text strong { font-size: 15px; }
.fb-head-text small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #65676B; }
.fb-head .fb-head-icons { display: flex; gap: 14px; color: #65676B; }
.fb-text { padding: 2px 14px 10px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.fb-text.is-big { font-size: 24px; line-height: 1.3; }
.fb-media { position: relative; width: 100%; background: #000; overflow: hidden; }
.fb-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fb-media-grid .fb-cell { position: relative; aspect-ratio: 1; background: #000; overflow: hidden; }
.fb-media-grid .fb-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 28px; font-weight: 600; }
.fb-link { margin: 0 14px 10px; border: 1px solid #ced0d4; border-radius: 10px; overflow: hidden; background: #F0F2F5; }
.fb-link small { display: block; padding: 10px 12px 0; color: #65676B; font-size: 12px; text-transform: uppercase; }
.fb-link strong { display: block; padding: 2px 12px 10px; font-size: 15px; }
.fb-meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; color: #65676B; font-size: 14px; }
.fb-react { display: inline-flex; align-items: center; gap: 6px; }
.fb-react i { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-style: normal; margin-right: -8px; box-shadow: 0 0 0 1.5px #fff; }
.fb-react i.fb-like { background: #1877F2; }
.fb-react i.fb-love { background: #F33E58; margin-right: 2px; }
.fb-actions { display: flex; justify-content: space-around; margin: 0 14px; padding: 4px 0 2px; border-top: 1px solid #ced0d4; color: #65676B; font-size: 14px; font-weight: 600; }
.fb-actions span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; }
.fb-cover { height: 150px; background: linear-gradient(135deg, var(--pv-client, #0A5B66), #012D33); background-size: cover; background-position: center; }
.fb-page-head { display: flex; flex-direction: column; align-items: center; margin-top: -64px; padding: 0 16px 12px; background: #fff; text-align: center; }
.fb-page-head .pv-avatar { width: 128px; height: 128px; font-size: 44px; box-shadow: 0 0 0 4px #fff; }
.fb-page-head h3 { margin: 10px 0 0; font-size: 24px; font-weight: 700; }
.fb-page-meta { color: #65676B; font-size: 15px; margin-top: 2px; }
.fb-page-bio { margin-top: 6px; font-size: 15px; }
.fb-page-buttons { display: flex; gap: 8px; width: 100%; margin-top: 12px; }
.fb-page-buttons .pv-btn { background: #E4E6EB; }
.fb-page-buttons .pv-btn.is-primary { background: #1877F2; }
.fb-page-tabs { display: flex; gap: 4px; padding: 0 12px; background: #fff; border-bottom: 1px solid #ced0d4; overflow: hidden; }
.fb-page-tabs span { padding: 12px 10px; color: #65676B; font-size: 15px; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.fb-page-tabs span.is-active { color: #1877F2; border-bottom-color: #1877F2; }

/* ---------------------------------------------------------------- TikTok */

.app-tt { background: #000; color: #fff; }
.tt-top { position: absolute; left: 0; right: 0; top: 62px; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 6px 18px; z-index: 5; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.tt-top span.is-active { color: #fff; position: relative; }
.tt-top span.is-active::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 28px; height: 3px; border-radius: 2px; background: #fff; transform: translateX(-50%); }
.tt-top .tt-search { position: absolute; right: 18px; top: 6px; color: #fff; }
.tt-rail { position: absolute; right: 10px; bottom: 136px; display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.tt-rail .rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.tt-avatar { position: relative; margin-bottom: 6px; }
.tt-avatar .pv-avatar { width: 48px; height: 48px; font-size: 18px; box-shadow: 0 0 0 1.5px #fff; }
.tt-avatar i { position: absolute; left: 50%; bottom: -10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #FE2C55; color: #fff; font-style: normal; font-weight: 700; font-size: 16px; line-height: 22px; text-align: center; }
.tt-disc { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #333 0 30%, #111 32% 100%); display: flex; align-items: center; justify-content: center; animation: tt-spin 4s linear infinite; }
.tt-disc .pv-avatar { width: 26px; height: 26px; font-size: 11px; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tt-foot { position: absolute; left: 14px; right: 84px; bottom: 100px; z-index: 5; display: flex; flex-direction: column; gap: 6px; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.tt-foot strong { font-size: 17px; }
.tt-foot .tt-title { font-size: 15px; font-weight: 600; }
.tt-caption { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tt-caption.is-expanded { display: block; max-height: 300px; overflow: auto; }
.tt-audio { display: flex; align-items: center; gap: 8px; font-size: 14px; overflow: hidden; white-space: nowrap; }
.tt-audio span { overflow: hidden; text-overflow: ellipsis; }
.tt-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; align-items: flex-start; justify-content: space-around; padding: 10px 6px 0; background: #000; color: #fff; z-index: 6; }
.tt-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: .8; }
.tt-tabbar span.is-active { opacity: 1; }
.tt-tabbar small { font-size: 10px; font-weight: 500; }
.tt-tabbar .tt-plus { opacity: 1; }
.tt-tabbar .tt-plus i { display: flex; align-items: center; justify-content: center; width: 44px; height: 30px; border-radius: 9px; background: #fff; color: #000; box-shadow: -4px 0 0 #25F4EE, 4px 0 0 #FE2C55; }
.tt-tabbar.is-light { background: #fff; color: #000; border-top: 1px solid #efefef; }
.tt-tabbar.is-light .tt-plus i { box-shadow: -4px 0 0 #25F4EE, 4px 0 0 #FE2C55; background: #000; color: #fff; }
.tt-photos-dots { position: absolute; left: 0; right: 0; bottom: 92px; z-index: 5; }
.tt-photos-dots i { background: rgba(255, 255, 255, .45); }
.tt-photos-dots i.is-active { background: #fff; }
.app-tt-profile { background: #fff; color: #161823; }
.tt-ptop { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; font-size: 17px; }
.tt-profile { display: flex; flex-direction: column; align-items: center; padding: 10px 16px 0; }
.tt-profile .pv-avatar { width: 96px; height: 96px; font-size: 34px; }
.tt-phandle { margin-top: 10px; font-size: 17px; font-weight: 600; }
.tt-pstats { display: flex; gap: 26px; margin-top: 14px; }
.tt-pstats div { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tt-pstats b { font-size: 17px; font-weight: 700; }
.tt-pstats span { font-size: 13px; color: #76797e; }
.tt-pbuttons { display: flex; gap: 6px; margin-top: 14px; }
.tt-pbuttons .pv-btn { flex: 0 0 auto; min-width: 160px; background: #FE2C55; color: #fff; }
.tt-pbuttons .pv-btn.is-icon { min-width: 0; background: #fff; color: #161823; border: 1px solid #d9d9d9; }
.tt-pbio { margin-top: 12px; font-size: 14px; text-align: center; color: #161823; }
.tt-ptabs { display: flex; width: 100%; margin-top: 14px; border-bottom: 1px solid #efefef; }
.tt-ptabs span { flex: 1 1 0; display: flex; justify-content: center; padding: 10px 0; color: #9a9a9a; border-bottom: 2px solid transparent; }
.tt-ptabs span.is-active { color: #161823; border-bottom-color: #161823; }
.tt-grid { width: 100%; }

/* ---------------------------------------------------------------- Threads */

.app-th { color: #000; }
.th-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 54px; }
.th-topbar svg { width: 34px; height: 34px; }
.th-post { display: flex; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid #ededed; }
.th-post .pv-avatar { width: 36px; height: 36px; font-size: 14px; }
.th-body { flex: 1 1 auto; min-width: 0; }
.th-head { display: flex; align-items: center; gap: 8px; }
.th-head strong { font-size: 15px; }
.th-head small { color: #999; font-size: 15px; }
.th-head .th-more { margin-left: auto; color: #999; }
.th-head .pv-new { margin-left: auto; }
.th-head .pv-new + .th-more { margin-left: 0; }
.th-text { margin-top: 2px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.th-media { position: relative; margin-top: 10px; border-radius: 12px; overflow: hidden; background: #f3f3f3; max-height: 520px; }
.th-media-row { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.th-media-row::-webkit-scrollbar { display: none; }
.th-media-row .th-cell { position: relative; flex: 0 0 auto; width: 220px; height: 260px; border-radius: 12px; overflow: hidden; background: #f3f3f3; }
.th-actions { display: flex; gap: 22px; margin-top: 12px; color: #000; }
.th-actions span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.th-profile { padding: 10px 16px 0; }
.th-profile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.th-profile-top h3 { margin: 0; font-size: 24px; font-weight: 700; }
.th-profile-handle { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 15px; }
.th-profile-handle i { font-style: normal; font-size: 11px; color: #999; padding: 3px 8px; border-radius: 12px; background: #f3f3f3; }
.th-profile-top .pv-avatar { width: 64px; height: 64px; font-size: 24px; }
.th-profile-bio { margin-top: 10px; font-size: 15px; white-space: pre-wrap; }
.th-profile-followers { margin-top: 10px; color: #999; font-size: 15px; }
.th-profile-buttons { display: flex; gap: 8px; margin-top: 14px; }
.th-profile-buttons .pv-btn { border: 1px solid #d9d9d9; background: #fff; }
.th-profile-buttons .pv-btn.is-primary { background: #000; color: #fff; border-color: #000; }
.th-profile-tabs { display: flex; margin: 12px -16px 0; border-bottom: 1px solid #ededed; }
.th-profile-tabs span { flex: 1 1 0; text-align: center; padding: 12px 0; color: #999; font-size: 15px; font-weight: 600; border-bottom: 1px solid transparent; }
.th-profile-tabs span.is-active { color: #000; border-bottom-color: #000; }

/* ---------------------------------------------------------------- Controles alrededor del teléfono */

.pp-controls { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 -6px 6px; }
.pp-arrow { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--dur-s) var(--ease); }
.pp-arrow:hover:not(:disabled) { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.pp-arrow:disabled { opacity: .3; cursor: default; }
.pp-pager { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pp-pager-item { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px; border: 0; border-radius: var(--shape-full); background: transparent; color: var(--muted); font: 500 .8125rem/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-m) var(--ease), color var(--dur-s) var(--ease), padding var(--dur-m) var(--ease); }
.pp-pager-item .label { display: none; white-space: nowrap; }
.pp-pager-item:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); color: var(--ink); }
.pp-pager-item.is-active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); padding-right: 14px; }
.pp-pager-item.is-active .label { display: inline; animation: app-fade-in var(--dur-m) var(--ease); }
.pp-pager-item .network-badge-sm { width: 24px; height: 24px; }
.pp-pager-item .network-badge-sm .network-icon { width: 13px; height: 13px; }
.pp-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pp-views { display: inline-flex; padding: 3px; border-radius: var(--shape-full); background: var(--md-surface-container); }
.pp-views button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--shape-full); background: transparent; color: var(--muted); font: 500 .8125rem/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease); }
.pp-views button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--elev-1); }
.pp-views button:disabled { opacity: .4; cursor: default; }
.pp-caption { color: var(--muted); font-size: .8125rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-hint { margin-top: 10px; color: var(--subtle); font-size: .75rem; text-align: center; }
.pp-hint .ms { font-size: 16px; vertical-align: -3px; }

/* Teléfono dentro de otras páginas (ficha del post, aprobación del cliente) */
.phone-preview { min-width: 0; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.review-layout .phone-preview { position: sticky; top: 12px; }
@media (max-width: 767.98px) { .review-layout { grid-template-columns: 1fr; } .review-layout .phone-preview { position: static; max-width: 380px; margin: 0 auto 8px; order: -1; } }