/* ── Reset & tokens ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ═══════════════════════════════════════════════════════════════ v0.16.1 — DESIGN SYSTEM FOUNDATIONS Tokens semánticos completos. Los componentes legacy (2145 selectores) leen los aliases del final del bloque — cero ruptura. Migración panel a panel en v0.16.4-9. Light tema en [data-theme="light"]: solo redefine tokens semánticos (surfaces/text/borders/shadows); ~100 overrides legacy [data-theme="light"] .X seguirán activos abajo hasta que cada componente migre. Ratio surface-base/raised dark = 5.71:1 (rango Linear/Vercel). ═══════════════════════════════════════════════════════════════ */ :root { /* ── PALETTE: gray (12 tonos, Stripe-like jerarquía fina) ── */ --gray-25: #fbfbfd; --gray-50: #f7f8fa; --gray-100: #eef0f5; --gray-150: #e3e6ed; --gray-200: #d6dae3; --gray-300: #aab1c0; --gray-400: #8b92a5; --gray-500: #6b7283; --gray-600: #4b5161; --gray-700: #353a47; --gray-800: #262a36; --gray-850: #21242e; --gray-900: #1c1f29; /* ── PALETTE: brand (Signal blue — frío monocromo, espeja la isla .rs) ── */ --brand-50: #eef3ff; --brand-100: #dde6ff; --brand-200: #c2d2ff; --brand-300: #97b2ff; --brand-400: #6f93ff; --brand-500: #4f7cff; --brand-600: #3a63ec; --brand-700: #2f4fc8; --brand-800: #2941a0; --brand-900: #22357c; /* ── SEMÁNTICOS (3 niveles: base / -bg / -fg / -border) ── */ --success: #22c55e; --success-bg: rgba(34,197,94,.10); --success-fg: #4ade80; --success-border: rgba(34,197,94,.30); --danger: #ef4444; --danger-bg: rgba(239,68,68,.10); --danger-fg: #f87171; --danger-border: rgba(239,68,68,.30); --warning: #f59e0b; --warning-bg: rgba(245,158,11,.10); --warning-fg: #fbbf24; --warning-border: rgba(245,158,11,.30); --info: #3b82f6; --info-bg: rgba(59,130,246,.10); --info-fg: #60a5fa; --info-border: rgba(59,130,246,.30); /* ── SURFACES (dark premium — v0.16.x restyle: near-black neutro tipo Linear/Vercel, jerarquía de elevación más marcada) ── */ --surface-base: #08090b; --surface-raised: #121317; --surface-overlay: #1b1d22; --surface-sunken: #050506; /* ── TEXTO (v0.16.x: blanco crisp + secundario más legible) ── */ --text-primary: #f6f7f9; --text-secondary: #9aa0ad; --text-tertiary: #838a95; --text-disabled: #474d59; --text-inverse: #07080b; /* ── BORDES (v0.16.x: hairlines más finos, look premium) ── */ --border-subtle: rgba(255,255,255,.05); --border-default: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.16); /* ── SPACING (escala base 4px) ── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --space-48: 192px; --space-64: 256px; /* ── RADII ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── SHADOWS (v0.16.x premium: más profundidad sobre near-black) ── */ --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.25); --shadow-lg: 0 8px 24px rgba(0,0,0,.45), 0 16px 48px rgba(0,0,0,.30); --shadow-xl: 0 12px 32px rgba(0,0,0,.55), 0 28px 72px rgba(0,0,0,.40); --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--brand-500) 50%, transparent), 0 0 32px rgba(79,124,255,.20); /* ── TIPOGRAFÍA ── */ /* v2 "Editorial" — Instrument Serif (hero) · Space Grotesk (estructural) · Hanken Grotesk (UI/cuerpo) · JetBrains Mono (datos/eyebrows). */ --font-display: 'Instrument Serif', serif; --font-display-2: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* v0.16.3: escala con más contraste H1↔body (Stripe-fingerprint). */ /* T7 (IDI): escala en rem (base 16px) — respeta el tamaño de fuente del SO/navegador (accesibilidad). Valores visuales idénticos a los px previos. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-lg: 1.0625rem; /* 17px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.625rem; /* 42px */ --text-5xl: 3.5rem; /* 56px */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ── Z-INDEX ── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-toast: 2000; /* ── TRANSICIONES ── */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 400ms; --ease-default: cubic-bezier(.4, 0, .2, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* ═══════════════════════════════════════════════════════════ ALIASES LEGACY (v0.14.x). NO BORRAR hasta migrar componentes en v0.16.4-9. Cada uno apunta a su token semántico nuevo o conserva valor literal cuando no encaja exacto en la escala. ═══════════════════════════════════════════════════════════ */ /* Surfaces legacy */ --bg: var(--surface-base); --surf: var(--surface-raised); --surf2: var(--surface-overlay); /* Texto legacy */ --text: var(--text-primary); --text2: var(--text-secondary); --text3: var(--text-tertiary); /* Borde legacy */ --border: var(--border-default); /* Brand legacy */ --brand: var(--brand-500); --brand-cta: var(--brand-700); /* Acentos legacy (--pink renombrado de amarillo a azul claro, mantener nombre) */ --pink: #6f93ff; --green: var(--success); /* Gradientes legacy (rebrand a azul Signal monocromo) */ --grad: linear-gradient(135deg, #4f7cff 0%, #6f93ff 100%); --grad2: linear-gradient(135deg, #3a63ec 0%, #4f7cff 100%); /* Glow legacy (neutralizado a blanco en v0.14.35; NO usar --shadow-glow que es brand-acento — son glows distintos por diseño). */ --glow: 0 0 0 3px rgba(255,255,255,.15), 0 0 24px rgba(255,255,255,.08); /* Radii legacy */ --r: 14px; --rsm: var(--radius-md); /* Shadows legacy */ --sh: var(--shadow-lg); --sh-lg: var(--shadow-xl); /* Spacing legacy — xs/sm no encajan exactos en 4px-base, literales para evitar regresión visual; md/lg/xl/2xl apuntan a tokens nuevos. */ --space-xs: 6px; --space-sm: 10px; --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --space-2xl: var(--space-12); } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME — solo redefine variables semánticas. Los ~100 overrides explícitos [data-theme="light"] .X { ... } más abajo (líneas ~226-330+) se mantienen activos: son deuda v0.16.4-9 que se borrará panel a panel al migrar componentes a tokens. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Surfaces */ --surface-base: #f0ede8; --surface-raised: #f7f5f1; --surface-overlay: #ffffff; --surface-sunken: #eae7e1; /* Texto */ --text-primary: #0a0a0a; --text-secondary: #555555; --text-tertiary: #646464; --text-disabled: #aaaaaa; --text-inverse: #ffffff; /* Bordes */ --border-subtle: rgba(0,0,0,.04); --border-default: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.15); /* Semánticos: fg más oscuro en light para contraste WCAG */ --success-fg: #16a34a; --danger-fg: #dc2626; --warning-fg: #d97706; --info-fg: #2563eb; /* Shadows (más suaves en light) */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 2px 4px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.04); --shadow-lg: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); --shadow-xl: 0 2px 8px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.12); --shadow-glow: 0 0 0 3px rgba(79,124,255,.20), 0 0 24px rgba(79,124,255,.12); /* Glow legacy en light (neutralizado a oscuro) */ --glow: 0 0 0 3px rgba(0,0,0,.08), 0 0 20px rgba(0,0,0,.06); } /* ═══════════════════════════════════════════════════════════════ v0.16.2 — PRIMITIVOS DEL DESIGN SYSTEM Componentes base reutilizables. Las clases legacy (.cta-btn, .comp-reel-card, etc.) siguen vivas en paralelo y se migran panel a panel en v0.16.4-9. Esto solo CREA los primitivos. Demo visual aislada: /static/design-system.html ═══════════════════════════════════════════════════════════════ */ /* ── BUTTON ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--transition-fast) var(--ease-default); white-space: nowrap; user-select: none; } .btn:disabled { cursor: not-allowed; pointer-events: none; } /* v0.16.3: focus ring estilo Stripe — outline gris discreto + halo brand sutil. */ .btn:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(79,124,255,.20); } .btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); } .btn-md { height: 40px; padding: 0 var(--space-4); font-size: var(--text-sm); } .btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); } .btn-primary { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); } .btn-primary:active { background: var(--brand-800); } .btn-primary:disabled { background: var(--surface-raised); color: var(--text-disabled); border-color: var(--border-subtle); } .btn-secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); } .btn-secondary:hover { background: var(--surface-overlay); border-color: var(--border-strong); } .btn-secondary:disabled { background: var(--surface-raised); color: var(--text-disabled); border-color: var(--border-subtle); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--surface-overlay); color: var(--text-primary); border-color: var(--border-default); } [data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,.06); border-color: var(--border-strong); } .btn-ghost:disabled { color: var(--text-disabled); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: var(--danger-fg); } .btn-danger:disabled { background: var(--surface-raised); color: var(--text-disabled); border-color: var(--border-subtle); } .btn-block { width: 100%; } /* ── CARD ────────────────────────────────────────────────── */ .card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); /* v0.16.3: sombra base sutil (Stripe cards siempre tienen mínima). */ box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast) var(--ease-default); } .card-interactive { cursor: pointer; } .card-interactive:hover { border-color: var(--border-strong); } .card-flat { box-shadow: none; } .card-elevated { box-shadow: var(--shadow-md); } .card-sunken { background: var(--surface-sunken); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .card-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); } .card-subtitle { font-size: var(--text-sm); color: var(--text-secondary); } .card-body { color: var(--text-primary); line-height: var(--leading-normal); } .card-footer { display: flex; gap: var(--space-2); margin-top: var(--space-4); } /* ── CHIP (interactivo: filtros, selecciones) ──────────────── */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border: 1px solid var(--border-default); background: transparent; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast) var(--ease-default); } .chip:hover { color: var(--text-primary); border-color: var(--border-strong); } .chip.is-active { background: var(--surface-overlay); color: var(--text-primary); border-color: var(--border-strong); box-shadow: inset 2px 0 0 var(--brand-500); } [data-theme="light"] .chip.is-active { background: rgba(0,0,0,.06); border-color: var(--border-default); } /* ── BADGE (informativo estático: status, contador) ────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; } .badge-neutral { background: var(--surface-overlay); color: var(--text-secondary); } .badge-success { background: var(--success-bg); color: var(--success-fg); } .badge-danger { background: var(--danger-bg); color: var(--danger-fg); } .badge-warning { background: var(--warning-bg); color: var(--warning-fg); } .badge-info { background: var(--info-bg); color: var(--info-fg); } /* v0.16.3: badge brand sutil — crema sobre dark, palish sobre light. */ .badge-brand { background: var(--brand-100); color: var(--brand-700); } /* ── FIELD (input/textarea/select unificados) ──────────────── */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); } .field-helper { font-size: var(--text-xs); color: var(--text-tertiary); } .field-error { font-size: var(--text-xs); color: var(--danger-fg); } .field-input, .field-textarea, .field-select { width: 100%; background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--transition-fast) var(--ease-default); } .field-input:hover, .field-textarea:hover, .field-select:hover { border-color: var(--border-strong); } .field-input:focus, .field-textarea:focus, .field-select:focus { outline: none; border-color: var(--brand-500); /* v0.16.3: glow más sutil — alpha .10 (era .15). */ box-shadow: 0 0 0 3px rgba(79,124,255,.10); } .field-select-inline { width: auto; } .field-textarea { min-height: 80px; resize: vertical; } .field.has-error .field-input, .field.has-error .field-textarea, .field.has-error .field-select { border-color: var(--danger); } /* ═══════════════════════════════════════════════════════════════ v0.16.4 — UTILIDADES DE COMPOSICIÓN Clases para componer paneles con jerarquía y densidad correctas. Stripe-like: headings grandes, body fino, whitespace generoso. Migración a paneles ocurre en v0.16.6-9. ═══════════════════════════════════════════════════════════════ */ /* ── TIPOGRAFÍA UTILITARIA ─────────────────────────────────── */ .heading-display { font-family: var(--font-display); font-size: var(--text-5xl); line-height: var(--leading-tight); font-weight: var(--weight-regular); letter-spacing: -0.02em; color: var(--text-primary); } .heading-1 { font-family: var(--font-body); font-size: var(--text-4xl); line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--text-primary); } .heading-2 { font-family: var(--font-body); font-size: var(--text-3xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--text-primary); } .heading-3 { font-family: var(--font-body); font-size: var(--text-2xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); color: var(--text-primary); } .heading-4 { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--weight-medium); color: var(--text-primary); } .body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-primary); } .body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); } .body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); } .body-xs { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-tertiary); } .eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--weight-medium); color: var(--text-tertiary); } .muted { color: var(--text-secondary); } .subtle { color: var(--text-tertiary); } /* ── SECCIONES Y LAYOUT ─────────────────────────────────────── */ .section { padding-top: var(--space-12); padding-bottom: var(--space-12); } .section-tight { padding-top: var(--space-8); padding-bottom: var(--space-8); } .section-loose { padding-top: var(--space-16); padding-bottom: var(--space-16); } .stack-xs > * + * { margin-top: var(--space-1); } .stack-sm > * + * { margin-top: var(--space-2); } .stack > * + * { margin-top: var(--space-4); } .stack-md > * + * { margin-top: var(--space-6); } .stack-lg > * + * { margin-top: var(--space-8); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .cluster-sm { gap: var(--space-2); } .cluster-lg { gap: var(--space-6); } .divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; } .divider-tight { margin: var(--space-4) 0; } /* ── HEADER DE PANEL (patrón Stripe) ────────────────────────── */ .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); } .panel-header-content { flex: 1; min-width: 0; } .panel-header-actions { flex-shrink: 0; } .panel-header .heading-1 { margin-bottom: var(--space-2); } .panel-header .body-sm { max-width: 60ch; } /* ── METRIC (números grandes Stripe-style) ──────────────────── */ .metric { display: flex; flex-direction: column; gap: var(--space-1); } .metric-label { font-size: var(--text-sm); color: var(--text-tertiary); letter-spacing: 0.02em; } .metric-value { font-size: var(--text-4xl); font-weight: var(--weight-bold); font-family: var(--font-body); letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); } .metric-delta { font-size: var(--text-xs); font-weight: var(--weight-medium); } .metric-delta.up { color: var(--success-fg); } .metric-delta.down { color: var(--danger-fg); } .metric-delta.flat { color: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════════ v0.16.5 — CHROME (sidebar/header) Sidebar Stripe-like con Hooks marca arriba + iconos Tabler. Convive con .prof-sidebar legacy (wrapper se mantiene para que breakpoints mobile sigan funcionando). El CSS viejo de .prof-sidebar-identity/-nav/-footer queda como deuda v0.16.10. ═══════════════════════════════════════════════════════════════ */ /* ── BRAND (Hooks + texto Reelscript arriba del sidebar) ──── */ .chrome-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-3) var(--space-5); } .chrome-brand-mark { width: 28px; height: 28px; flex-shrink: 0; } .chrome-brand-text { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--text-primary); } /* ── DIVIDER del sidebar (más sutil que .divider general) ── */ .chrome-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-3) var(--space-3); } /* ── NAV ITEMS ────────────────────────────────────────────── */ .chrome-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-2); } .chrome-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 0; background: transparent; border-radius: var(--radius-md); color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left; cursor: pointer; transition: background var(--transition-fast) var(--ease-default), color var(--transition-fast) var(--ease-default); width: 100%; } .chrome-nav-item:hover { background: var(--surface-overlay); color: var(--text-primary); } .chrome-nav-item.on { background: var(--surface-overlay); color: var(--text-primary); } [data-theme="light"] .chrome-nav-item.on { background: rgba(0,0,0,.06); } .chrome-nav-item .chrome-icon { color: var(--text-tertiary); flex-shrink: 0; } .chrome-nav-item:hover .chrome-icon { color: var(--text-secondary); } .chrome-nav-item.on .chrome-icon { color: var(--brand-500); } .chrome-icon { width: 18px; height: 18px; stroke-width: 1.5; transition: color var(--transition-fast) var(--ease-default); } /* ── BLOQUE INFERIOR (usage + user + theme) ───────────────── */ .chrome-bottom { margin-top: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); } .chrome-usage { display: flex; flex-direction: column; gap: var(--space-2); } .chrome-usage-head { display: flex; justify-content: space-between; align-items: baseline; } .chrome-usage-bar { height: 4px; background: var(--surface-overlay); border-radius: var(--radius-full); overflow: hidden; } .chrome-usage-fill { height: 100%; background: var(--brand-500); border-radius: var(--radius-full); width: 0%; transition: width var(--transition-slow) var(--ease-default); } .chrome-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast) var(--ease-default); } .chrome-user:hover { background: var(--surface-overlay); } .chrome-user-av { width: 32px; height: 32px; border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; background: var(--surface-overlay); display: flex; align-items: center; justify-content: center; } .chrome-user-av img { width: 100%; height: 100%; object-fit: cover; } .chrome-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .chrome-user-email { font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chrome-user-plan { line-height: 1; } .chrome-theme { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); align-self: stretch; justify-content: center; } .chrome-theme button { padding: 4px var(--space-3); background: transparent; color: var(--text-tertiary); border: none; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer; transition: all var(--transition-fast) var(--ease-default); } .chrome-theme button:hover:not(.on) { color: var(--text-primary); } .chrome-theme button.on { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); } [data-theme="light"] .hero-badge { color: #7c3a00; border-color: rgba(180,80,0,0.3); background: rgba(255,140,0,0.1); } [data-theme="light"] nav { background: rgba(240,237,232,.75); } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); } [data-theme="light"] ::selection { background: rgba(79,124,255,.15); color: var(--brand-700); } /* Light mode — surfaces, cards, profile */ /* .profile-overlay light mode — moved to "Light mode — profile" block below */ [data-theme="light"] .prof-sidebar { background: rgba(247,245,241,.85); border-color: rgba(0,0,0,.06); } [data-theme="light"] .prof-stat-card, [data-theme="light"] .prof-card, [data-theme="light"] .asst-card-v2, [data-theme="light"] .script-stripe-card { background: var(--surf); } [data-theme="light"] .prof-header { background: var(--surf); backdrop-filter: none; } [data-theme="light"] .ig-card { border: 1px solid rgba(0,0,0,.1); box-shadow: 0 1px 4px rgba(0,0,0,.06); } [data-theme="light"] .ig-card:hover { border-color: color-mix(in srgb, var(--brand-500) 35%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-500) 10%, transparent); } [data-theme="light"] .ig-stat-card { background: #fff; border-color: rgba(0,0,0,.08); } [data-theme="light"] .ig-perf-badge { box-shadow: 0 1px 4px rgba(0,0,0,.15); } [data-theme="light"] .ig-chart-tab { background: #fff; } [data-theme="light"] .ig-card-overlay { background: linear-gradient(transparent 70%, rgba(0,0,0,.25)); } [data-theme="light"] .prof-tabs { background: rgba(79,124,255,.08); } [data-theme="light"] .avatar-picker { background: var(--surf); border-color: rgba(0,0,0,.1); } /* Light mode — sections, pricing, cards */ [data-theme="light"] .price-card { background: var(--surf); } [data-theme="light"] .price-card.featured { background: rgba(79,124,255,.04); border-color: rgba(79,124,255,.25); } [data-theme="light"] .rs-card { background: var(--surf); } [data-theme="light"] .modal { background: var(--surf); border-color: rgba(0,0,0,.08); } [data-theme="light"] .overlay { background: rgba(240,237,232,.7); } [data-theme="light"] .drawer { background: var(--surf); } [data-theme="light"] .topup-opt { background: var(--surf); } [data-theme="light"] .flow-node { background: var(--surf); } [data-theme="light"] .tour-tooltip { background: var(--surf); border-color: rgba(79,124,255,.15); } /* Light mode — text contrast */ [data-theme="light"] .grad-txt { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } [data-theme="light"] .s-label { color: var(--brand-700); background: rgba(79,124,255,.08); border-color: rgba(79,124,255,.15); } [data-theme="light"] .counter-num { color: var(--text2); } [data-theme="light"] .badge-bal { color: var(--brand-700); background: rgba(79,124,255,.08); border-color: rgba(79,124,255,.2); } /* Light mode — inputs */ [data-theme="light"] .input-glow-wrap input { background: var(--surf); border-color: rgba(79,124,255,.3); } [data-theme="light"] .input-glow-wrap input::placeholder { color: #999; } [data-theme="light"] .input-glow-wrap input:focus { background: #fefefe; } [data-theme="light"] .script-ta { background: var(--surf); } [data-theme="light"] .script-ta:focus { background: #fff; } [data-theme="light"] .style-search { background: var(--surf); } [data-theme="light"] .field input { background: var(--surf); } [data-theme="light"] .custom-row input { background: var(--surf); } /* Light mode — style pills */ [data-theme="light"] .style-pill { background: var(--surf); } [data-theme="light"] .style-pill:hover { background: #fff; } [data-theme="light"] .style-pill .sp-hint { color: #777; } [data-theme="light"] .style-pill .sp-name { color: #333; } /* Light mode — preview card */ [data-theme="light"] .preview-card { background: var(--surf); border-color: rgba(0,0,0,.08); } [data-theme="light"] .preview-content::after { background: linear-gradient(transparent, var(--surf)); } [data-theme="light"] .preview-text { color: #333; } [data-theme="light"] .hook-card { background: #f9fafb; border-color: #e5e7eb; } [data-theme="light"] .script-section.closing .script-section-content { color: #555; } /* Light mode — project detail */ [data-theme="light"] .proj-detail-overlay { background: rgba(240,237,232,.97); } [data-theme="light"] .script-card { background: var(--surf); } [data-theme="light"] .script-card-perf input, [data-theme="light"] .script-card-perf textarea { background: var(--surf2); } /* Light mode — buttons */ [data-theme="light"] .btn-sm:hover { color: var(--brand-700); } [data-theme="light"] .style-chip:hover, [data-theme="light"] .style-chip.act { color: var(--brand-700); } [data-theme="light"] .style-pill { box-shadow: 0 4px 0 rgba(0,0,0,.08); } [data-theme="light"] .style-pill:hover { box-shadow: 0 6px 0 rgba(0,0,0,.08), var(--sh); } [data-theme="light"] .style-chip { box-shadow: 0 3px 0 rgba(0,0,0,.1); } [data-theme="light"] .topup-opt { box-shadow: 0 4px 0 rgba(0,0,0,.1); } [data-theme="light"] .btn-google-auth { box-shadow: 0 4px 0 #d1d5db; } [data-theme="light"] .rs-card-act:hover { color: var(--brand-700); } /* Light mode — hover borders on cards */ [data-theme="light"] .prof-stat-card:hover, [data-theme="light"] .rs-card:hover, [data-theme="light"] .script-stripe-card:hover, [data-theme="light"] .asst-card-v2:hover { border-color: rgba(0,0,0,.15); } /* Light mode — profile */ [data-theme="light"] .profile-overlay { background: var(--bg); background-image: radial-gradient(ellipse at 15% -5%, rgba(79,124,255,.06) 0%, transparent 45%), radial-gradient(ellipse at 85% 95%, rgba(139,92,246,.04) 0%, transparent 45%); } [data-theme="light"] .prof-main::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); } /* Light mode — separators */ [data-theme="light"] div[style*="linear-gradient(90deg,transparent,rgba(249"] { opacity: .5; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; } /* Sticky footer pattern: main expands to fill, footer stays at bottom */ main { flex: 1 0 auto; } body > footer { flex-shrink: 0; } h1, h2, h3, h4, .s-title, .hero-h1, .cta-h2, .price-title, .price-amount { font-family: var(--font-display); } /* v0.14.36 — Fade-in al cambiar de panel workspace. Aplica al panel cuando profTab() lo activa: opacity 0→1 + translateY(4px→0) en 200ms. */ /* OJO: nada de transform aquí. Un transform en el contenedor del workspace (#profPanelIdeas.panel-fade-in) crea un containing-block que rompe el position:fixed del rail inferior → hueco negro bajo la barra en móvil. Solo opacidad. */ @keyframes panelFadeIn { from { opacity: 0; } to { opacity: 1; } } .panel-fade-in { animation: panelFadeIn 200ms ease-out; } /* v2 "SIGNAL" — consola fría monocromo con un solo acento (azure #4f7cff). Cero serif: titulares en Space Grotesk (--font-display-2). Cuerpo Hanken, datos JetBrains Mono. Tras el rebrand (2026-06-03) la escala brand-* es azul Signal de forma GLOBAL (:root); el isotipo naranja es la única ancla de marca. El bloque #profilePage de abajo quedó redundante con :root pero se conserva. */ #profilePage { --font-display: var(--font-display-2); /* Space Grotesk — sin serif */ --font-editorial: var(--font-display-2); /* Acento azul Signal (remapea brand-* en el workspace) */ --brand-50: #eef3ff; --brand-100: #dde6ff; --brand-200: #c2d2ff; --brand-300: #97b2ff; --brand-400: #6f93ff; --brand-500: #4f7cff; /* --accent del prototipo */ --brand-600: #3a63ec; --brand-700: #2f4fc8; --brand-800: #2941a0; --brand-900: #22357c; --brand: #4f7cff; --brand-cta: #3a63ec; /* Gradientes legacy → azul monocromo (Signal no usa naranja/fucsia) */ --grad: linear-gradient(135deg, #4f7cff 0%, #6f93ff 100%); --grad2: linear-gradient(135deg, #3a63ec 0%, #4f7cff 100%); --shadow-glow: 0 0 0 1px color-mix(in srgb, #4f7cff 50%, transparent), 0 0 32px rgba(79,124,255,.20); } /* Modales viven en , no en #profilePage. Cuando el user está en workspace (body.workspace), los modales también pasan a sans para coherencia. */ body.workspace .modal h2 { font-family: var(--font-body); } ::selection { background: rgba(79,124,255,.15); color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ── Scrollbar ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); } /* ── In-app browser banner ──────────────────────────────── */ #rsInAppBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 201; background: linear-gradient(90deg, var(--brand-600), #3a63ec); color: #fff; font-family: var(--font-body); box-shadow: 0 2px 8px rgba(0,0,0,.25); } .rs-iab-inner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; max-width: 1200px; margin: 0 auto; } .rs-iab-icon { flex: 0 0 auto; font-size: .95rem; line-height: 1; } .rs-iab-text { flex: 1 1 auto; font-size: .82rem; line-height: 1.3; } .rs-iab-cta { flex: 0 0 auto; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 6px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .15s; font-family: inherit; } .rs-iab-cta:hover { background: rgba(255,255,255,.3); } .rs-iab-close { flex: 0 0 auto; background: transparent; color: #fff; border: none; font-size: 1rem; padding: 4px 8px; cursor: pointer; opacity: .85; line-height: 1; } .rs-iab-close:hover { opacity: 1; } .rs-iab-tip { padding: 7px 14px 9px; text-align: center; font-size: .76rem; color: rgba(255,255,255,.95); border-top: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.08); } body.rs-iab-on { padding-top: 44px; } body.rs-iab-on nav { top: 44px; } body.rs-iab-on.rs-iab-tip-on { padding-top: 74px; } body.rs-iab-on.rs-iab-tip-on nav { top: 74px; } @media (max-width: 640px) { .rs-iab-text { font-size: .76rem; } .rs-iab-cta { font-size: .72rem; padding: 5px 10px; } .rs-iab-inner { padding: 8px 12px; gap: 8px; } body.rs-iab-on { padding-top: 46px; } body.rs-iab-on nav { top: 46px; } body.rs-iab-on.rs-iab-tip-on { padding-top: 78px; } body.rs-iab-on.rs-iab-tip-on nav { top: 78px; } } /* ── Nav ─────────────────────────────────────────────────── */ nav { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 56px; background: rgba(10,11,15,.55); backdrop-filter: blur(14px) saturate(1.15); border-bottom: 1px solid transparent; transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease; } nav.scrolled { background: rgba(10,11,15,.88); backdrop-filter: blur(24px) saturate(1.2); border-bottom-color: rgba(255,255,255,.06); box-shadow: 0 2px 16px rgba(0,0,0,.18); } [data-theme="light"] nav { background: rgba(255,250,243,.6); } [data-theme="light"] nav.scrolled { background: rgba(255,250,243,.92); border-bottom-color: rgba(0,0,0,.08); } /* Landing-only center nav */ .nav-c-landing { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .nav-c-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--text2); font-family: var(--font-body); font-weight: 500; font-size: .85rem; padding: 8px 14px; border-radius: 10px; text-decoration: none; transition: color .15s, background .15s; white-space: nowrap; } .nav-c-link:hover { color: var(--text); background: rgba(255,255,255,.04); } [data-theme="light"] .nav-c-link:hover { background: rgba(0,0,0,.04); } .nav-c-link .chev { width: 10px; height: 10px; opacity: .6; transition: transform .2s; } .nav-c-dropdown { position: relative; } .nav-c-dropdown.open .nav-c-link .chev { transform: rotate(180deg); } .nav-c-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 280px; padding: 8px; background: var(--surf); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; display: flex; flex-direction: column; gap: 2px; } .nav-c-dropdown.open .nav-c-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-c-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text2); font-size: .82rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; } .nav-c-menu-item:hover { background: rgba(79,124,255,.08); color: var(--text); } .nav-c-menu-item .arr { margin-left: auto; opacity: 0; transition: opacity .15s, transform .15s; } .nav-c-menu-item:hover .arr { opacity: 1; transform: translateX(2px); color: var(--brand); } @media (max-width: 900px) { .nav-c-landing { display: none; } } .brand-link { display: inline-flex; align-items: center; gap: 6px; line-height: 1; color: inherit; } .brand-logo { height: 44px; width: 44px; display: block; flex-shrink: 0; transform: scale(1.25); transform-origin: center; } .brand-text { font-family: var(--font-display-2), 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text); line-height: 1; } @media (max-width: 640px) { .brand-logo { height: 36px; width: 36px; } .brand-text { font-size: 17px; } } .nav-r { display: flex; align-items: center; gap: 8px; } .badge-bal { display: none; align-items: center; gap: 6px; background: rgba(79,124,255,.08); border: 1px solid rgba(79,124,255,.2); color: var(--brand-300); font-size: .75rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all .2s; font-family: var(--font-body); } .badge-bal:hover { background: rgba(79,124,255,.15); border-color: rgba(79,124,255,.35); } .badge-bal.on { display: flex; } .user-pill { display: none; align-items: center; gap: 7px; font-size: .82rem; color: var(--text2); } .user-pill.on { display: flex; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 800; overflow: hidden; } .btn-ghost { background: none; border: none; color: var(--text3); font-size: .75rem; cursor: pointer; transition: color .2s; padding: 3px; } .btn-ghost:hover { color: #f87171; } .user-menu-wrap { position: relative; } .user-menu-chevron { font-size: .6rem; color: var(--text3); transition: transform .15s; line-height: 1; } .user-pill.menu-open .user-menu-chevron { transform: rotate(180deg); } /* v0.14.9a — Avatar menu (popover desktop / sheet mobile) */ .av-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 1099; opacity: 0; transition: opacity .2s ease; } .av-menu-overlay.on { display: block; opacity: 1; } .av-menu { position: fixed; width: 320px; max-width: calc(100vw - 32px); background: var(--surf); border: 1px solid var(--border); border-radius: 14px; padding: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25); z-index: 1100; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .18s ease, transform .18s ease; pointer-events: none; max-height: calc(100vh - 80px); overflow-y: auto; } .av-menu.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } [data-theme="light"] .av-menu { background: var(--surf); box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08); } .av-menu-handle { display: none; } .av-menu-header { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; } .av-menu-av { width: 56px; height: 56px; border-radius: 14px; background: var(--surf2); border: 1px solid var(--border); flex-shrink: 0; overflow: hidden; background-size: cover; background-position: center; } .av-menu-info { flex: 1; min-width: 0; } .av-menu-email { font-family: var(--font-body); font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .av-menu-plan-row { display: flex; align-items: center; gap: 6px; } .av-menu-close { background: transparent; border: 0; color: var(--text3); font-size: 1rem; cursor: pointer; padding: 6px 8px; flex-shrink: 0; border-radius: 8px; transition: background .15s, color .15s; } .av-menu-close:hover { background: var(--surf2); color: var(--text); } .av-menu-usage { padding: 8px 10px; margin-bottom: 8px; background: var(--surf2); border-radius: 10px; } .av-menu-usage-row { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: var(--text2); margin-bottom: 6px; } .av-menu-usage-num { font-family: var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; } .av-menu-usage-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; } [data-theme="light"] .av-menu-usage-bar { background: rgba(0,0,0,.08); } .av-menu-usage-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-300)); transition: width .3s ease; } .av-menu-sep { height: 1px; background: var(--border); margin: 4px 0; } .av-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; background: transparent; border: 0; cursor: pointer; color: var(--text2); font-family: var(--font-body); font-size: .9rem; font-weight: 500; text-align: left; text-decoration: none; border-radius: 8px; transition: background .15s, color .15s; } .av-menu-item:hover { background: var(--surf2); color: var(--text); } .av-menu-item.av-menu-logout { color: #f87171; } .av-menu-item.av-menu-logout:hover { background: rgba(220,38,38,.08); color: #fca5a5; } [data-theme="light"] .av-menu-item.av-menu-logout { color: #b91c1c; } .av-menu-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.04); display: inline-flex; align-items: center; justify-content: center; color: var(--text3); flex-shrink: 0; } [data-theme="light"] .av-menu-icon { background: rgba(0,0,0,.04); } .av-menu-item:hover .av-menu-icon { color: var(--brand); } .av-menu-logout .av-menu-icon { color: #f87171; } .av-menu-logout:hover .av-menu-icon { color: #fca5a5; } .av-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px; } .av-menu-row-toggle .av-menu-row-label { display: inline-flex; align-items: center; gap: 12px; color: var(--text2); font-size: .9rem; font-weight: 500; } .av-menu-row-toggle .theme-seg { padding: 2px; gap: 2px; } .av-menu-row-toggle .theme-seg-opt { font-size: .8rem; padding: 4px 10px; } /* Mobile bottom sheet */ @media (max-width: 768px) { .av-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; padding: 6px 14px 24px; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); } .av-menu.on { transform: translateY(0); } .av-menu-handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--text3); opacity: .35; margin: 6px auto 8px; } .av-menu-header { padding: 4px 4px 12px; } .av-menu-av { width: 64px; height: 64px; } .av-menu-email { font-size: 1rem; } } .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--surf); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; min-width: 200px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 999; animation: menuIn .15s ease; } [data-theme="light"] .user-menu-dropdown { border-color: rgba(0,0,0,.1); box-shadow: 0 8px 24px rgba(0,0,0,.12); } .user-menu-dropdown.on { display: block; } @keyframes menuIn { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:translateY(0) } } .user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text2); font-size: .83rem; border-radius: 7px; cursor: pointer; text-align: left; transition: background .15s, color .15s; } .user-menu-item:hover { background: rgba(255,255,255,.06); color: var(--text1); } [data-theme="light"] .user-menu-item:hover { background: rgba(0,0,0,.05); } .user-menu-logout { color: #f87171; } .user-menu-logout:hover { background: rgba(248,113,113,.1) !important; color: #f87171 !important; } .user-menu-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; } [data-theme="light"] .user-menu-divider { background: rgba(0,0,0,.08); } .user-menu-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; color: var(--text2); font-size: .83rem; } .user-menu-row-label { flex: 1; } .theme-seg { display: inline-flex; padding: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); gap: 2px; } [data-theme="light"] .theme-seg { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.04); } .theme-seg-opt { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; padding: 0; border: none; background: transparent; color: var(--text3); font-size: .8rem; border-radius: 999px; cursor: pointer; transition: background .18s, color .18s, transform .18s; } .theme-seg-opt:hover { color: var(--text); } .theme-seg-opt.on { background: rgba(79,124,255,.18); color: var(--text); box-shadow: inset 0 0 0 1px rgba(79,124,255,.3); } [data-theme="light"] .theme-seg-opt.on { background: rgba(79,124,255,.14); box-shadow: inset 0 0 0 1px rgba(79,124,255,.35); } .mob-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surf); font-size: .82rem; color: var(--text2); } .mob-theme-row .theme-seg-opt { width: 34px; height: 26px; font-size: .9rem; } .prof-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: .78rem; color: var(--text3); } .prof-theme-label { font-weight: 500; } .btn-nav { padding: 7px 14px; border-radius: var(--rsm); font-size: .82rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surf); color: var(--text2); transition: all .2s; } .btn-nav:hover { border-color: var(--brand); color: var(--text); } .btn-nav.hi { /* v0.14.35.a: consistencia CTA — antes var(--grad), ahora --brand-cta. */ background: var(--brand-cta); color: #fff; border-color: transparent; box-shadow: 0 4px 0 #22357c; transform: translateY(0); transition: transform .12s, box-shadow .12s, opacity .2s; } .btn-nav.hi:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #22357c; } .btn-nav.hi:active { transform: translateY(3px); box-shadow: 0 1px 0 #22357c; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 20px 48px; text-align: center; } .hero > * { position: relative; z-index: 1; } /* Global aurora canvas — single fixed layer behind everything */ #globalAurora { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; } /* light mode: canvas is transparent, body bg shows through */ /* Badge */ .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(79,124,255,.08); border: 1px solid rgba(79,124,255,.2); color: var(--brand-200); font-size: .75rem; font-weight: 600; padding: 5px 14px; border-radius: 20px; margin-bottom: 24px; letter-spacing: .3px; } .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-300); } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} } @keyframes badge-in { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} } /* H1 */ .hero-h1 { font-size: clamp(2.8rem, 6.5vw, 4.8rem); font-weight: 400; line-height: 1.08; letter-spacing: -1.5px; margin-bottom: 20px; max-width: 820px; animation: fade-up .5s ease both; } .hero-h1 .grad-txt { color: var(--brand-300); -webkit-text-fill-color: var(--brand-300); font-style: italic; } [data-theme="light"] .hero-h1 .grad-txt { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } .hero-sub { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--text2); line-height: 1.6; max-width: 520px; margin-bottom: 32px; animation: fade-up .5s ease .1s both; } .hero-sub strong { color: var(--text); font-weight: 600; } @keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } /* ── Hero v2 (centered, v0.14.11a) ───────────────────────── */ .hero-v2 { padding: 56px 24px 40px; text-align: center; max-width: 1240px; margin: 0 auto; } .hero-grid { display: flex; flex-direction: column; gap: 32px; align-items: center; width: 100%; } .hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 760px; width: 100%; } @media (max-width: 980px) { .hero-grid { gap: 28px; } .hero-v2 { padding: 36px 20px 24px; } } @media (max-width: 640px) { .hero-v2 { padding: 24px 16px 16px; } .hero-grid { gap: 24px; } .hero-h1-v2 { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.1; letter-spacing: -1px; } .hero-sub-v2 { font-size: .98rem; max-width: 100%; } .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; } .hero-cta-primary, .hero-cta-secondary { width: 100%; justify-content: center; padding: 14px; } .hero-cta-secondary { gap: 6px; } } /* Pill prueba social (v0.14.11a) — sustituye eyebrow */ .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(31,26,34,.6); border: 1px solid rgba(241,234,217,.15); color: rgba(241,234,217,.85); font-family: var(--font-body); font-size: .82rem; font-weight: 500; margin-bottom: 24px; backdrop-filter: blur(6px); } [data-theme="light"] .hero-pill { background: rgba(255,255,255,.55); border-color: rgba(60,40,20,.18); color: var(--text2); } .hero-pill-pulse { /* v0.14.35: pulse dot a neutro (era naranja, decoración). */ width: 7px; height: 7px; border-radius: 50%; background: var(--text3); box-shadow: 0 0 0 0 rgba(255,255,255,.15); animation: heroEyePulse 2s ease infinite; flex-shrink: 0; } @keyframes heroEyePulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.15); } 70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .hero-h1-v2 { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -1.5px; color: var(--text); margin: 0 0 16px; text-wrap: balance; } .hero-h1-v2 em { font-style: italic; color: var(--brand-300); -webkit-text-fill-color: var(--brand-300); } [data-theme="light"] .hero-h1-v2 em { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } .hero-sub-v2 { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text2); line-height: 1.5; max-width: 640px; margin: 0 auto 32px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 0; } .hero-cta-primary { /* v0.14.35: --brand-cta cumple WCAG AA con #fff (5.18:1). Hover sigue en var(--brand-600). */ background: var(--brand-cta); color: #fff; border: 0; padding: 16px 32px; border-radius: 12px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform .12s, box-shadow .15s, opacity .15s, background .15s; box-shadow: 0 5px 0 #22357c, 0 8px 32px rgba(79,124,255,.4); } .hero-cta-primary:hover { transform: translateY(-1px); background: #3a63ec; box-shadow: 0 6px 0 #22357c, 0 10px 36px rgba(79,124,255,.18); } /* v0.14.36: :active modernizado a scale + opacity. */ .hero-cta-primary:active { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } .hero-cta-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 16px 28px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; transition: border-color .15s, background .15s, color .15s; } .hero-cta-secondary:hover { border-color: var(--brand); color: var(--brand); background: rgba(79,124,255,.06); } /* ── Hero rotator (v0.14.11b) — vídeo 16:9 + 3 pill tabs ─── */ .hero-rotator { --rot-acc: 79,124,255; position: relative; width: 100%; max-width: 820px; margin: 0 auto; } .hero-rotator-video { position: relative; aspect-ratio: 8 / 5; width: 100%; border-radius: 18px; overflow: hidden; background: #0a0a0c; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.55), 0 0 80px rgba(var(--rot-acc), .18); transition: box-shadow .4s ease; } [data-theme="light"] .hero-rotator-video { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 16px 48px rgba(60,40,20,.18), 0 0 60px rgba(var(--rot-acc), .12); } .hr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .2s ease; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .hr-video.on { opacity: 1; pointer-events: auto; } .hero-rotator-tabs { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 24px 0 0; list-style: none; padding: 0; } .hr-tab { padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(241,234,217,.1); background: rgba(31,26,34,.6); color: rgba(241,234,217,.6); font-family: var(--font-body); font-weight: 600; font-size: .9rem; cursor: pointer; transition: opacity .15s, background .25s, border-color .18s, color .2s, box-shadow .25s; backdrop-filter: blur(6px); } [data-theme="light"] .hr-tab { background: rgba(255,255,255,.5); border-color: rgba(60,40,20,.14); color: var(--text3); } .hr-tab:hover { color: var(--text); border-color: rgba(var(--tab-acc, 79,124,255), .55); opacity: 1; } .hr-tab.on { background: rgb(var(--tab-acc, 79,124,255)); border-color: rgb(var(--tab-acc, 79,124,255)); color: #1a1217; box-shadow: 0 6px 24px rgba(var(--tab-acc, 79,124,255), .35); } [data-theme="light"] .hr-tab.on { color: #fff; } @media (max-width: 880px) { .hero-rotator { padding: 0 4px; } .hr-tab { padding: 10px 16px; font-size: .82rem; min-height: 44px; display: inline-flex; align-items: center; } } /* ── How it works (v0.14.11c) — 3 pasos con micro-vídeos ───── */ .how-section { max-width: 1100px; margin: 0 auto; padding: 56px 24px 40px; position: relative; z-index: 1; } .how-head { text-align: center; margin-bottom: 48px; } .how-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } .how-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--brand); display: inline-block; } .how-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -.5px; margin: 0 auto 12px; max-width: 640px; text-wrap: balance; } .how-h2 em { font-style: italic; color: var(--brand-300); -webkit-text-fill-color: var(--brand-300); } [data-theme="light"] .how-h2 em { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } .how-sub { color: var(--text2); font-size: 1rem; line-height: 1.55; margin: 0 auto; max-width: 540px; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } @media (max-width: 880px) { .how-section { padding: 40px 20px 24px; } .how-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .how-head { margin-bottom: 32px; } } .how-step { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; background: linear-gradient(135deg, #1f1a22 0%, #171218 100%); border: 1px solid rgba(241,234,217,.06); border-left: 3px solid rgb(var(--step-acc, 79,124,255)); border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.25); } [data-theme="light"] .how-step { background: linear-gradient(135deg, #fffaf0 0%, #f6efe1 100%); border-color: rgba(60,40,20,.08); box-shadow: 0 6px 18px rgba(60,40,20,.08); } .how-step-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 3.6rem); line-height: 1; color: rgb(var(--step-acc, 79,124,255)); letter-spacing: -1px; } .how-step-video { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 320px; border-radius: 12px; overflow: hidden; background: #0c0a10; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .how-step-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .how-step-title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--text); margin: 4px 0 0; } .how-step-desc { font-family: var(--font-body); font-size: .9rem; line-height: 1.55; color: var(--text2); margin: 0; } /* ── Try Free (preview transcribe) ──────────────────────── */ .try-free-section { max-width: 1100px; margin: 0 auto; padding: 64px 24px 48px; position: relative; z-index: 1; } .try-free-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 56px; align-items: center; } .try-free-left { text-align: left; } .try-free-right { position: relative; } @media (max-width: 880px) { .try-free-section { padding: 40px 20px; } .try-free-grid { grid-template-columns: 1fr; gap: 32px; } .try-free-left { text-align: center; } .try-free-right { display: none; } } /* v0.14.8a: refuerzo mobile <640px */ @media (max-width: 640px) { .try-free-section { padding: 32px 16px 24px; } .try-free-h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.15; } .try-free-sub { font-size: .95rem; } .try-form { padding: 12px; } .try-form-actions { flex-direction: column; gap: 10px; } .try-form-actions > * { width: 100%; } .try-btn { width: 100%; padding: 13px; justify-content: center; } .try-input { font-size: .9rem; } } .try-free-section .s-label { display: inline-block; } .try-free-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.5px; margin: 12px 0 14px; } .try-free-h2 em { font-style: italic; color: var(--brand-300); -webkit-text-fill-color: var(--brand-300); } [data-theme="light"] .try-free-h2 em { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } .try-free-sub { color: var(--text2); font-size: 1rem; line-height: 1.55; max-width: 540px; margin: 0 auto 8px; } .try-free-hooks-line { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text3); margin: 0 0 28px; } .try-free-hooks-line img { width: 22px; height: 22px; } .try-form { display: flex; flex-direction: column; gap: 10px; background: var(--surf); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.12); } .try-form-row { display: flex; gap: 8px; align-items: stretch; } .try-input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: .92rem; outline: none; transition: border-color .15s, box-shadow .15s; } .try-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,124,255,.18); } .try-input::placeholder { color: var(--text3); } .try-form-actions { display: flex; gap: 8px; } .try-lang-select { flex: 1; padding: 11px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: .85rem; outline: none; } .try-btn { flex: 0 0 auto; padding: 11px 22px; border-radius: 10px; background: var(--brand-cta); color: #fff; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: .88rem; box-shadow: 0 5px 0 #22357c; transition: transform .12s, box-shadow .15s, opacity .15s; } .try-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 #22357c, 0 4px 16px rgba(79,124,255,.3); } .try-btn:active:not(:disabled) { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } .try-btn:disabled { opacity: .65; cursor: default; } .try-output { margin-top: 14px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .35s ease; } .try-output.on { opacity: 1; max-height: 800px; } .try-loading { display: flex; gap: 6px; justify-content: center; padding: 24px; } .try-loading .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: mockBounce .8s infinite alternate; } .try-loading .dot:nth-child(2) { animation-delay: .15s; } .try-loading .dot:nth-child(3) { animation-delay: .3s; } .try-error { padding: 18px; color: var(--text2); font-size: .92rem; line-height: 1.5; background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); border-radius: 12px; text-align: center; } .try-result { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 22px 22px 0; text-align: left; overflow: hidden; } .try-result-text { font-size: .98rem; line-height: 1.65; color: var(--text); min-height: 90px; padding-bottom: 60px; white-space: pre-wrap; } .try-result-mask { position: absolute; left: 0; right: 0; bottom: 116px; height: 70px; background: linear-gradient(to bottom, transparent, var(--bg) 80%); pointer-events: none; } .try-result-cta { position: relative; z-index: 1; margin: 0 -22px; padding: 18px 22px 22px; background: linear-gradient(135deg, rgba(79,124,255,.08), rgba(125,91,184,.06)); border-top: 1px solid var(--border); text-align: center; } .try-result-cta p { margin: 0 0 12px; color: var(--text2); font-size: .88rem; line-height: 1.5; } /* v0.14.11f: bloque pilares editoriales eliminado (sustituidos por hero rotator + how-it-works). */ /* Hooks mascot peek — overlay corner del hero rotator */ .hero-mascot-peek { position: absolute; top: -32px; right: -24px; width: 96px; height: 96px; pointer-events: none; z-index: 3; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); animation: heroMascotFloat 3.4s ease-in-out infinite; } [data-theme="light"] .hero-mascot-peek { filter: drop-shadow(0 6px 16px rgba(60,40,20,.18)); } @keyframes heroMascotFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(2deg); } } @media (max-width: 640px) { .hero-mascot-peek { width: 64px; height: 64px; top: -22px; right: -10px; } } /* ── Social proof (counter) ─────────────────────────────── */ .social-proof-section { max-width: 880px; margin: 0 auto; padding: 56px 24px 80px; text-align: center; position: relative; } .social-proof-counter { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.2rem, 11vw, 6rem); color: var(--brand); line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; margin-bottom: 8px; } [data-theme="light"] .social-proof-counter { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } .social-proof-label { font-family: var(--font-mono); font-size: .85rem; color: var(--text3); letter-spacing: .04em; } .social-proof-secondary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text3); font-size: .82rem; } .social-proof-secondary b { color: var(--text2); font-variant-numeric: tabular-nums; } /* Phone frame (try-free side visual) */ .phone-frame { position: relative; aspect-ratio: 9/18; max-width: 280px; margin: 0 auto; border-radius: 36px; padding: 10px; background: linear-gradient(160deg, #1a1a1f, #0a0a0f); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 12px 24px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.04); transform: rotate(-3deg); transition: transform .3s ease; } .phone-frame:hover { transform: rotate(-1deg) translateY(-4px); } [data-theme="light"] .phone-frame { background: linear-gradient(160deg, #2a2a2f, #1a1a1f); } .phone-frame::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; border-radius: 12px; background: #050507; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; } .phone-screen-header { flex-shrink: 0; padding: 36px 14px 10px; border-bottom: 1px solid var(--border); font-size: .68rem; color: var(--text3); display: flex; align-items: center; gap: 6px; } .phone-screen-header .ph-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .phone-url-bar { margin: 8px 14px 12px; padding: 8px 10px; background: var(--surf); border: 1px solid var(--border); border-radius: 8px; font-size: .62rem; color: var(--text2); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phone-reel-card { margin: 0 14px 12px; aspect-ratio: 9/14; border-radius: 12px; background: linear-gradient(140deg, var(--brand-500) 0%, var(--brand-700) 35%, #7d5bb8 75%, #4c1d95 100%); position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(124,45,18,.35); } .phone-reel-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.3) 0%, transparent 45%), radial-gradient(ellipse at 70% 80%, rgba(0,0,0,.45) 0%, transparent 55%); } .phone-reel-card::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; text-shadow: 0 4px 16px rgba(0,0,0,.5); } .phone-reel-meta { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; color: #fff; font-size: .58rem; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .phone-reel-meta .av { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-300), var(--brand-700)); border: 1.5px solid rgba(255,255,255,.5); flex-shrink: 0; } .phone-reel-meta .h { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phone-reel-meta .t { font-family: var(--font-mono); opacity: .9; } .phone-transcript { flex: 1; padding: 10px 14px 14px; overflow: hidden; position: relative; } .phone-transcript-label { font-size: .58rem; color: var(--brand); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; } .phone-transcript-text { font-size: .68rem; color: var(--text); line-height: 1.55; } .phone-transcript::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--bg) 80%); pointer-events: none; } .phone-mascot { position: absolute; right: -34px; bottom: -10px; width: 96px; height: 96px; transform: rotate(8deg); filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); pointer-events: none; z-index: 4; animation: phoneMascotFloat 4s ease-in-out infinite; } @keyframes phoneMascotFloat { 0%,100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-6px); } } /* Platform tabs */ .plat-tabs { display: flex; gap: 8px; margin-bottom: 24px; animation: fade-up .5s ease .12s both; } .plat-tab { display: flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 20px; font-size: .8rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surf); color: var(--text2); transition: all .2s; } .plat-tab.active { border-color: var(--brand); color: var(--brand-200); background: rgba(79,124,255,.12); } .plat-tab .check { color: var(--green); font-size: .7rem; } .plat-tab .soon { font-size: .62rem; background: var(--surf2); padding: 1px 5px; border-radius: 4px; color: var(--text3); } /* Input area */ .hero-input-wrap { width: 100%; max-width: 640px; animation: fade-up .5s ease .15s both; } .input-glow-wrap { position: relative; margin-bottom: 12px; } @keyframes input-pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(79,124,255,.25), 0 0 18px rgba(79,124,255,.12); border-color: rgba(79,124,255,.45); } 50% { box-shadow: 0 0 0 3px rgba(79,124,255,.4), 0 0 28px rgba(79,124,255,.22); border-color: rgba(79,124,255,.75); } } .input-glow-wrap input { width: 100%; padding: 18px 56px 18px 20px; background: var(--surf); border: 1.5px solid var(--border); border-radius: var(--r); font-size: 1rem; color: var(--text); font-family: var(--font-body); outline: none; transition: border-color .2s, box-shadow .2s; } [data-theme="light"] .input-glow-wrap input { background: var(--surf); } .input-glow-wrap input::placeholder { color: var(--text3); font-size: .92rem; } [data-theme="light"] .input-glow-wrap input::placeholder { color: #999; } .input-glow-wrap input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,124,255,.15); background: var(--surf2); } .btn-queue-add { width: 52px; flex-shrink: 0; background: var(--surf); border: 1.5px solid var(--border); border-radius: var(--r); color: var(--brand); font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; } .btn-queue-add:hover { border-color: var(--brand); background: rgba(79,124,255,.1); } /* Style carousel dots (mobile only) */ .style-dots { display: none; justify-content: center; gap: 6px; padding: 8px 0 4px; } .style-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all .2s; cursor: pointer; border: none; padding: 0; } .style-dot.on { background: var(--brand); width: 16px; border-radius: 3px; } @media (max-width: 768px) { .style-dots { display: flex; } } @keyframes errBounce { 0% { transform: scale(.8); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } } .queue-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 160px; overflow-y: auto; } .queue-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--rsm); font-size: .82rem; color: var(--text2); } .queue-item-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-item-status { font-size: .75rem; color: var(--text3); white-space: nowrap; } .queue-item-status.done { color: #22c55e; } .queue-item-status.err { color: #ef4444; } .queue-item-rm { background: none; border: none; color: var(--text3); cursor: pointer; font-size: .9rem; padding: 0 2px; } .queue-item-rm:hover { color: #ef4444; } [data-theme="light"] .input-glow-wrap input:focus { background: #fefefe; } .input-plat-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: 0; transition: opacity .2s; pointer-events: none; } .input-plat-icon.on { opacity: 1; } /* Shimmer button */ .btn-shimmer { width: 100%; padding: 16px; /* v0.14.35.b: CTA plano consistente. */ background: var(--brand-cta); color: #fff; border: none; border-radius: var(--r); font-family: var(--font-body); font-size: .92rem; font-weight: 600; cursor: pointer; letter-spacing: .2px; transition: background .2s, box-shadow .2s, transform .1s; box-shadow: 0 1px 2px rgba(0,0,0,.2); transform: translateY(0); } .btn-shimmer:hover { background: var(--brand-600); box-shadow: 0 2px 8px rgba(79,124,255,.3); } .btn-shimmer:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); } .btn-shimmer:disabled { background: var(--surf2); color: var(--text3); cursor: not-allowed; box-shadow: none; opacity: .6; } @keyframes shimmer { to { background-position: 250% center; } } /* Counter */ .hero-demo-line { margin-top: 8px; display: flex; justify-content: center; } .hero-demo-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text2); font-size: .78rem; font-weight: 500; text-decoration: none; padding: 4px 10px; border-radius: 999px; transition: color .15s, background .15s; } .hero-demo-link:hover { color: var(--brand); background: rgba(79,124,255,.08); } .hero-demo-play { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 1px; } .hero-demo-time { color: var(--text3); font-size: .72rem; } .hero-counter { margin-top: 20px; font-size: .78rem; color: var(--text3); display: flex; align-items: center; justify-content: center; gap: 6px; animation: fade-up .5s ease .2s both; } .counter-num { color: var(--text2); font-weight: 600; font-variant-numeric: tabular-nums; } .counter-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); } /* Spinner */ .spinner { display: none; align-items: center; justify-content: center; gap: 8px; /* v0.14.35: spinner text a neutro (era var(--brand-300) — distractivo durante carga). */ padding: 18px 0 4px; color: var(--text2); font-size: .88rem; font-weight: 600; } .spinner.on { display: flex; } .dot-b { width: 7px; height: 7px; background: var(--brand); border-radius: 50%; animation: bounce .55s infinite alternate; } .dot-b:nth-child(2) { animation-delay: .18s; background: var(--pink); } .dot-b:nth-child(3) { animation-delay: .36s; background: var(--brand); } @keyframes bounce { to { opacity:.2; transform: translateY(-6px); } } /* Result box (legacy, hidden when feed is active) */ .result-box { display: none; margin-top: 16px; text-align: left; } .result-box.on { display: block; } .result-text { padding: 18px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); font-size: .92rem; line-height: 1.75; white-space: pre-wrap; word-break: break-word; color: var(--text); max-height: 280px; overflow-y: auto; } .result-text.err { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #f87171; } .result-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .btn-sm { padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--rsm); background: var(--surf); color: var(--text2); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .2s; } .btn-sm:hover { border-color: var(--brand); color: var(--brand-200); } /* v0.14.36: añadido :active feedback que faltaba. */ .btn-sm:active { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } /* ── 3D raised buttons ─────────────────────────────── */ .btn-3d { position: relative; transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, opacity .2s; box-shadow: 0 5px 0 rgba(255,255,255,.08); border-bottom: none; } .btn-3d:hover { transform: translateY(-1px); box-shadow: 0 6px 0 rgba(255,255,255,.08); } /* v0.14.36: :active modernizado scale + opacity. */ .btn-3d:active { transform: scale(.98) !important; opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out !important; } [data-theme="light"] .btn-3d { box-shadow: 0 5px 0 rgba(0,0,0,.15); } [data-theme="light"] .btn-3d:hover { box-shadow: 0 6px 0 rgba(0,0,0,.15); } [data-theme="light"] .btn-3d:active { /* v0.14.36: shadow press-down eliminada. */ } .btn-3d-primary { box-shadow: 0 5px 0 var(--brand-800); } .btn-3d-primary:hover { box-shadow: 0 6px 0 var(--brand-800); } .btn-3d-primary:active { box-shadow: 0 1px 0 var(--brand-800) !important; } .btn-3d-secondary { box-shadow: 0 5px 0 var(--border-subtle); } .btn-3d-secondary:hover { box-shadow: 0 6px 0 var(--border-subtle); } .btn-3d-secondary:active { box-shadow: 0 1px 0 var(--border-subtle) !important; } .btn-3d-danger { box-shadow: 0 5px 0 #991b1b; } .btn-3d-danger:hover { box-shadow: 0 6px 0 #991b1b; } .btn-3d-danger:active { box-shadow: 0 1px 0 #991b1b !important; } .btn-3d-circle { border-radius: 50%; } .cost-tag { margin-left: auto; font-size: .75rem; color: var(--text3); display: flex; align-items: center; } /* ── Result panel (appears beside input after transcription) ─ */ .hero-input-wrap.has-result { max-width: 1100px; display: flex; gap: 24px; align-items: flex-start; } .hero-input-wrap.has-result .hero-input-left { flex: 0 0 480px; } .hero-result-panel { display: none; flex: 1; min-width: 0; flex-direction: column; gap: 14px; } .hero-input-wrap.has-result .hero-result-panel { display: flex; } /* Result card */ .rs-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; animation: rs-in .3s ease both; transition: border-color .2s; } .rs-card:hover { border-color: rgba(255,255,255,.12); } @keyframes rs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .rs-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; } .rs-card-plat { background: rgba(79,124,255,.1); color: var(--brand); font-size: .65rem; font-weight: 700; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; flex-shrink: 0; } .rs-card-title { flex: 1; font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-card-copy { background: none; border: none; color: var(--text3); cursor: pointer; padding: 4px 6px; border-radius: var(--rsm); transition: all .2s; flex-shrink: 0; position: relative; } .rs-card-copy:hover { color: var(--brand); background: rgba(79,124,255,.08); } .rs-card-copy.ok { color: #22c55e; } .rs-card-copy .rs-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--surf2); color: var(--text); font-size: .68rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; } .rs-card-copy:hover .rs-tip { opacity: 1; } .rs-card-body { padding: 12px 16px; font-size: .86rem; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 350px; overflow-y: auto; } .rs-card-body::-webkit-scrollbar { width: 3px; } .rs-card-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .rs-card.collapsed .rs-card-body, .rs-card.collapsed .rs-card-actions { display: none; } .rs-card-head { cursor: pointer; } .rs-card-toggle { color: var(--text3); font-size: .7rem; transition: transform .2s; margin-right: 4px; } .rs-card.collapsed .rs-card-toggle { transform: rotate(-90deg); } .rs-card-actions { padding: 0 16px 14px; display: flex; gap: 8px; } .rs-card-act { padding: 6px 14px; border-radius: var(--rsm); font-size: .75rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surf); color: var(--text2); transition: all .2s; } .rs-card-act:hover { border-color: var(--brand); color: var(--brand-200); } /* Inline transform in result cards */ .rs-card-transform { display: none; padding: 0 16px 14px; flex-direction: column; gap: 10px; } .rs-card-transform.on { display: flex; } .rs-card-transform-chips { display: flex; gap: 6px; flex-wrap: wrap; } .rs-card-chip { padding: 6px 12px; border-radius: 20px; font-size: .72rem; font-weight: 600; border: 1px solid var(--border); background: var(--surf); color: var(--text2); cursor: pointer; transition: all .15s; white-space: nowrap; } .rs-card-chip:hover { border-color: var(--brand); color: var(--text); } .rs-card-chip.loading { opacity: .5; pointer-events: none; } .rs-card-transform-result { padding: 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--rsm); font-size: .84rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 250px; overflow-y: auto; position: relative; } .rs-card-transform-result .rs-card-copy { position: absolute; top: 8px; right: 8px; } .rs-card.collapsed .rs-card-transform { display: none; } /* Loading card */ .rs-card-loading { padding: 20px 16px; display: flex; align-items: center; gap: 12px; } .rs-card-loading .dot-b { width: 5px; height: 5px; } .rs-card-loading-msg { color: var(--text2); font-size: .84rem; } @media (max-width: 768px) { .hero-input-wrap.has-result { flex-direction: column; } .hero-input-wrap.has-result .hero-input-left { flex: none; width: 100%; } } /* Free bar */ .free-bar { display: none; align-items: center; gap: 8px; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2); border-radius: var(--rsm); padding: 9px 14px; font-size: .8rem; color: var(--text2); margin-top: 10px; } .free-bar.on { display: flex; } .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .fdot.u { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; } /* ── Section wrapper ─────────────────────────────────────── */ .section { padding: 96px 24px; max-width: 1100px; margin: 0 auto; } .section-sm { padding: 64px 24px; max-width: 900px; margin: 0 auto; } .s-label { display: inline-flex; align-items: center; gap: 6px; background: rgba(79,124,255,.06); border: 1px solid rgba(79,124,255,.15); /* v0.14.35: eyebrow text a neutro (era var(--brand-300)). */ color: var(--text2); font-size: .68rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; font-family: var(--font-body); } .s-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; margin-bottom: 16px; } .s-sub { color: var(--text2); font-size: 1.02rem; line-height: 1.6; max-width: 520px; font-weight: 300; } /* ── Hazlo tuyo — full viewport ────────────────────────────── */ .adapt-section { /* v0.14.19: now inside #profPanelAdapt — full-screen styles removed */ position: relative; overflow: hidden; } .adapt-inner { max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 0 64px; align-items: stretch; position: relative; z-index: 1; } /* Grid areas */ .adapt-header { grid-column: 1; grid-row: 1; margin-bottom: 28px; } .preview-label-wrap { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; padding-bottom: 28px; } .adapt-left { grid-column: 1; grid-row: 2; } .adapt-right { grid-column: 2; grid-row: 2; } .adapt-header h2 { font-family: var(--font-display); font-size: clamp(1.8rem,3.5vw,2.6rem); font-weight: 400; letter-spacing: -.5px; margin-bottom: 10px; line-height: 1.1; } .adapt-header h2 span { font-style: italic; } .adapt-header p { color: var(--text2); font-size: .92rem; line-height: 1.6; font-weight: 300; max-width: 420px; } .script-ta { width: 100%; max-width: 100%; min-height: 200px; padding: 16px; background: var(--surf2); border: 1px solid var(--border); border-radius: 12px; font-size: .9rem; color: var(--text); resize: vertical; outline: none; font-family: var(--font-body); line-height: 1.7; transition: border-color .2s; box-sizing: border-box; } .script-ta:focus { border-color: var(--brand); } .script-ta::placeholder { color: var(--text3); } /* Style grid */ .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; } .style-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surf); cursor: pointer; text-align: left; min-height: 110px; position: relative; overflow: hidden; box-shadow: 0 4px 0 rgba(255,255,255,.07); transform: translateY(0); transition: transform .12s, box-shadow .12s, border-color .18s, background .18s; } .style-pill[data-s="viral"] { --sc: #ef4444; --scr: 239,68,68; } .style-pill[data-s="divertido"] { --sc: #eab308; --scr: 234,179,8; } .style-pill[data-s="linkedin"] { --sc: #3b82f6; --scr: 59,130,246; } .style-pill[data-s="storytelling"] { --sc: #a855f7; --scr: 168,85,247; } .style-pill[data-s="hooks"] { --sc: var(--brand-500); --scr: 79,124,255; } .style-pill[data-s="custom"] { --sc: #14b8a6; --scr: 20,184,166; } .style-pill:hover { border-color: rgba(var(--scr), .3); background: var(--surf2); transform: translateY(-2px); box-shadow: 0 6px 0 rgba(255,255,255,.07), var(--sh); } .style-pill:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.07); } .style-pill.act { border-color: var(--sc); background: var(--surf2); box-shadow: 0 4px 0 rgba(var(--scr), .25), 0 0 20px rgba(var(--scr), .15); } .style-pill.act::after { content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background: radial-gradient(circle at top right, rgba(var(--scr), .2), transparent 70%); pointer-events: none; } .style-pill .sp-emoji { width: 44px; height: 44px; border-radius: 10px; background: rgba(var(--scr), .1); display: flex; align-items: center; justify-content: center; } .style-pill .sp-emoji svg { flex-shrink: 0; } .style-pill .sp-name { font-family: var(--font-display); font-size: .82rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text); transition: color .2s; } .style-pill .sp-hint { font-size: .72rem; font-weight: 300; color: var(--text3); line-height: 1.4; transition: color .2s; } [data-theme="light"] .style-pill .sp-hint { color: #555; } .style-pill.act .sp-name { color: var(--sc); } .style-pill.act .sp-hint { color: var(--text2); } .custom-row { display: none; margin-top: 12px; gap: 8px; } .custom-row.on { display: flex; } .custom-row input { flex: 1; padding: 10px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--rsm); font-size: .88rem; color: var(--text); outline: none; transition: border-color .2s; } .custom-row input:focus { border-color: var(--sc); } .btn-grad { /* v0.14.35.a: consistencia CTA — antes var(--grad), ahora --brand-cta. */ padding: 10px 20px; background: var(--brand-cta); color: #fff; border: none; border-radius: var(--rsm); font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 0 #22357c; transform: translateY(0); transition: transform .12s, box-shadow .12s, opacity .2s; } .btn-grad:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 0 #22357c; } .btn-grad:active { transform: translateY(3px); box-shadow: 0 1px 0 #22357c; } .adapt-run-btn { margin-top: 16px; width: 100%; padding: 16px; /* v0.14.35.a: consistencia CTA — antes var(--grad) brillante, ahora --brand-cta plano WCAG. */ background: var(--brand-cta); color: #fff; border: none; border-radius: var(--r); font-size: 1rem; font-weight: 800; cursor: pointer; letter-spacing: .3px; box-shadow: 0 5px 0 #22357c; transform: translateY(0); transition: transform .12s, box-shadow .12s, opacity .2s; } .adapt-run-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 0 #22357c; } .adapt-run-btn:active { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } /* Desktop: hide left button, show right. Mobile: opposite */ .adapt-run-desktop { display: none !important; } @media (min-width: 769px) { #btnRunAdapt { display: none !important; } .adapt-run-desktop { display: block !important; } } .adapt-run-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } /* Mobile inline result */ .mobile-adapt-result { margin-top: 12px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .mobile-adapt-result-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 0; } .mobile-adapt-result-label { font-size: .72rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; } .mobile-adapt-result-body { padding: 10px 14px 14px; font-size: .86rem; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; } .adapt-res { display: none; margin-top: 16px; } .adapt-res.on { display: block; } .adapt-res-txt { padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--rsm); font-size: .9rem; line-height: 1.8; white-space: pre-wrap; word-break: break-word; color: var(--text); max-height: 300px; overflow-y: auto; } .adapt-res-txt.err { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #f87171; } /* Right column — live preview */ .adapt-right { display: flex; flex-direction: column; } .preview-label { font-family: var(--font-body); font-size: .68rem; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 0; display: flex; align-items: center; gap: 10px; } .preview-label::after { content: ""; flex: 1; height: 1px; background: var(--border); } .preview-card { background: var(--surf); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 24px; transition: border-color .35s ease, box-shadow .35s ease; min-height: 0; flex: 0 1 auto; display: flex; flex-direction: column; position: relative; overflow: hidden; } .preview-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); border-radius: 20px 20px 0 0; transition: background .35s; } .preview-card[data-active="viral"] .preview-top-bar { background: linear-gradient(90deg,#ef4444,var(--brand-500)); } .preview-card[data-active="divertido"] .preview-top-bar { background: linear-gradient(90deg,#fbbf24,#f59e0b); } .preview-card[data-active="linkedin"] .preview-top-bar { background: linear-gradient(90deg,#3b82f6,#6366f1); } .preview-card[data-active="storytelling"] .preview-top-bar { background: linear-gradient(90deg,#22c55e,#10b981); } .preview-card[data-active="hooks"] .preview-top-bar { background: linear-gradient(90deg,#a78bfa,#8b5cf6); } .preview-card[data-active="custom"] .preview-top-bar { background: linear-gradient(90deg,#94a3b8,#64748b); } .preview-card[data-active="viral"] { border-color: rgba(239,68,68,.4); box-shadow: 0 0 50px rgba(239,68,68,.1); } .preview-card[data-active="divertido"] { border-color: rgba(251,191,36,.4); box-shadow: 0 0 50px rgba(251,191,36,.1); } .preview-card[data-active="linkedin"] { border-color: rgba(59,130,246,.4); box-shadow: 0 0 50px rgba(59,130,246,.1); } .preview-card[data-active="storytelling"] { border-color: rgba(34,197,94,.4); box-shadow: 0 0 50px rgba(34,197,94,.1); } .preview-card[data-active="hooks"] { border-color: rgba(167,139,250,.4); box-shadow: 0 0 50px rgba(167,139,250,.1); } .preview-card[data-active="custom"] { border-color: rgba(148,163,184,.4); box-shadow: 0 0 50px rgba(148,163,184,.1); } .preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .pc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-family: var(--font-body); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; border: 1px solid var(--border); color: var(--text3); transition: all .3s; } .pc-badge[data-s="viral"] { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.3); } .pc-badge[data-s="divertido"] { background: rgba(251,191,36,.15); color: #fbbf24; border-color: rgba(251,191,36,.3); } .pc-badge[data-s="linkedin"] { background: rgba(59,130,246,.15); color: #60a5fa; border-color: rgba(59,130,246,.3); } .pc-badge[data-s="storytelling"] { background: rgba(34,197,94,.15); color: #4ade80; border-color: rgba(34,197,94,.3); } .pc-badge[data-s="hooks"] { background: rgba(167,139,250,.15); color: #a78bfa; border-color: rgba(167,139,250,.3); } .pc-badge[data-s="custom"] { background: rgba(148,163,184,.15); color: #94a3b8; border-color: rgba(148,163,184,.3); } .preview-content { position: relative; min-height: 180px; } .preview-content::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--surf)); pointer-events: none; z-index: 2; } .preview-content:has(.preview-result-text.on)::after { display: none; } .preview-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: none; } .preview-slide.on { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } .preview-text { font-family: var(--font-body); font-size: .92rem; line-height: 1.8; color: var(--text); white-space: pre-line; } .preview-text .ph { color: var(--text); font-weight: 600; } .preview-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text3); display: flex; align-items: center; gap: 8px; font-weight: 300; position: relative; z-index: 3; flex-wrap: wrap; } .pf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); animation: pulse 2s infinite; flex-shrink: 0; } .pf-copy { padding: 7px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .2px; color: var(--text2); cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .08s; white-space: nowrap; } .pf-copy:first-of-type { margin-left: auto; } .pf-copy:hover { background: rgba(79,124,255,.12); border-color: rgba(79,124,255,.4); color: var(--brand-300); } .pf-copy:active { transform: translateY(1px); } [data-theme="light"] .pf-copy { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); } /* Preview card — loading & result states */ .preview-card-spinner { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: absolute; inset: 0; border-radius: 20px; background: var(--bg); z-index: 2; } .preview-card-spinner.on { display: flex; } .preview-card-spinner .sq-loader { width: 44px; height: 44px; } .preview-card-spinner p { font-size: .82rem; color: var(--text2); font-weight: 600; } .preview-result-text { display: none; font-size: .93rem; line-height: 1.85; color: var(--text); word-break: break-word; animation: fadeSlideIn .35s ease; } .preview-result-text.on { display: block; } .preview-result-text.plain { white-space: pre-wrap; } /* Structured script sections */ .script-section { margin-bottom: 16px; } .script-section:last-child { margin-bottom: 0; } .script-section-label { font-size: .65rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .script-section-label::before { content: ""; display: inline-block; width: 3px; height: 12px; border-radius: 2px; } .script-section.hook .script-section-label { color: var(--brand-500); } .script-section.hook .script-section-label::before { background: var(--brand-500); } .script-section.body .script-section-label { color: var(--text3); } .script-section.body .script-section-label::before { background: var(--text3); } .script-section.closing .script-section-label { color: #a78bfa; } .script-section.closing .script-section-label::before { background: #a78bfa; } .script-section-content { font-size: .9rem; line-height: 1.75; color: var(--text); } .script-section.hook .script-section-content { font-weight: 600; font-size: .95rem; } .script-section.closing .script-section-content { font-style: italic; color: var(--text2); } .script-section.body .script-section-content p { margin: 0 0 6px; } /* Hook cards (for hooks style) */ .hook-card { background: var(--surf2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; transition: border-color .2s; } .hook-card:last-child { margin-bottom: 0; } .hook-card:hover { border-color: rgba(79,124,255,.3); } .hook-card-type { font-size: .62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-500); margin-bottom: 4px; } .hook-card-text { font-size: .88rem; line-height: 1.6; color: var(--text); } .hook-card-copy { background: none; border: none; color: var(--text3); cursor: pointer; font-size: .72rem; padding: 2px 6px; float: right; margin-top: -2px; transition: color .2s; } .hook-card-copy:hover { color: var(--brand); } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 900px) { .adapt-inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 24px; } .adapt-header { grid-column: 1; grid-row: 1; margin-bottom: 0; } .preview-label-wrap { grid-column: 1; grid-row: 3; padding-bottom: 0; } .adapt-left { grid-column: 1; grid-row: 2; } .adapt-right { grid-column: 1; grid-row: 4; display: block; } .preview-card { min-height: 0; flex: none; } } @media (max-width: 520px) { .style-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .style-pill { padding: 10px 12px; } } /* ── Language switcher ──────────────────────────────────────── */ .lang-switch { display: flex; align-items: center; gap: 2px; background: var(--surf2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } /* ── Pillar SEO block ──────────────────────────────────────── */ .pillar-seo { background: rgba(0,0,0,.35); border-top: 1px solid var(--border); padding: 72px 24px 80px; } .pillar-container { max-width: 780px; margin: 0 auto; } .pillar-container h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--text); margin-bottom: 28px; line-height: 1.25; } .pillar-container > p { color: var(--text2); font-size: .97rem; line-height: 1.75; margin-bottom: 18px; } .pillar-howto { margin: 40px 0; } .pillar-howto h3, .pillar-faq h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--text3); } .pillar-steps { list-style: none; display: flex; flex-direction: column; gap: 12px; } .pillar-steps li { display: flex; gap: 14px; align-items: flex-start; color: var(--text2); font-size: .93rem; line-height: 1.6; } .step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--amber, #fbbf24)); color: #000; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .pillar-faq { margin: 40px 0; } .pillar-faq details { border-bottom: 1px solid var(--border); padding: 14px 0; } .pillar-faq summary { cursor: pointer; font-weight: 500; color: var(--text); font-size: .93rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .pillar-faq summary::-webkit-details-marker { display: none; } .pillar-faq summary::after { content: '+'; color: var(--text3); font-size: 1.1rem; flex-shrink: 0; transition: transform .2s; } .pillar-faq details[open] summary::after { transform: rotate(45deg); } .pillar-faq details p { margin-top: 10px; color: var(--text2); font-size: .88rem; line-height: 1.65; } .pillar-closing { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .pillar-closing p { color: var(--text2); font-size: .95rem; flex: 1; } .pillar-cta { display: inline-block; padding: 10px 22px; background: linear-gradient(135deg, var(--brand), var(--amber, #fbbf24)); color: #000; font-weight: 700; font-size: .85rem; border-radius: var(--rsm); text-decoration: none; white-space: nowrap; transition: opacity .15s; } .pillar-cta:hover { opacity: .85; } /* Footer use cases */ .footer-usecases { margin-bottom: 24px; display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; text-align: left; } .footer-usecases-col h4 { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; } .footer-usecases-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .footer-usecases-col a { color: var(--text2); text-decoration: none; font-size: .78rem; transition: color .15s; } .footer-usecases-col a:hover { color: var(--brand); } .lang-btn { padding: 4px 10px; border: none; background: none; cursor: pointer; font-size: .7rem; font-weight: 800; color: var(--text3); border-radius: 5px; transition: all .2s; letter-spacing: .8px; text-transform: uppercase; text-decoration: none; display: inline-block; } .lang-btn.active { background: var(--brand); color: #fff; } /* ── Light mode orange blobs — sutiles ───────────────────────── */ /* (old blob rules removed — aurora canvas handles both themes) */ /* ── Flow diagram ───────────────────────────────────────────── */ .flow-section { padding: 80px 24px; background: transparent; position: relative; overflow: hidden; } .flow-container { max-width: 980px; margin: 0 auto; } .flow-header { text-align: center; margin-bottom: 56px; } .flow-nodes { display: flex; align-items: center; justify-content: center; gap: 0; } .flow-node { flex: 1; max-width: 200px; background: var(--surf); border: 1.5px solid var(--border); border-radius: 18px; padding: 28px 18px 22px; text-align: center; position: relative; transition: border-color .3s, transform .3s, box-shadow .3s; z-index: 1; } .flow-node:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh); } .flow-node.final { border-color: rgba(79,124,255,.4); background: rgba(79,124,255,.06); } .flow-node-step { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .62rem; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(79,124,255,.5); } .flow-node-icon { font-size: 2.2rem; margin-bottom: 12px; line-height: 1; } .flow-node-title { font-size: .92rem; font-weight: 800; margin-bottom: 6px; } .flow-node-desc { font-size: .76rem; color: var(--text2); line-height: 1.45; } .flow-arrow { flex-shrink: 0; width: 52px; position: relative; display: flex; align-items: center; z-index: 0; } .flow-arrow-track { width: 100%; height: 2px; background: var(--border); position: relative; overflow: visible; } .flow-arrow-pulse { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--brand-500) 50%, #FBBF24 80%, transparent 100%); background-size: 200% 100%; animation: arrowFlow 2s ease-in-out infinite; border-radius: 2px; } .flow-arrow-head { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--brand); } @keyframes arrowFlow { 0% { background-position: -200% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 200% 0; opacity: 0; } } @media (max-width: 700px) { .flow-nodes { flex-direction: column; align-items: stretch; gap: 0; } .flow-node { max-width: 100%; } .flow-arrow { width: auto; height: 36px; justify-content: center; } .flow-arrow-track { width: 2px; height: 100%; } } /* ── Demo animado ─────────────────────────────────────────── */ .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .demo-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; position: relative; overflow: hidden; } .demo-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(79,124,255,.05) 0%, transparent 60%); pointer-events: none; } .demo-card-label { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; } .demo-card-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; } .demo-transcript { font-size: .88rem; line-height: 1.75; color: var(--text2); min-height: 90px; } .cursor { display: inline-block; width: 2px; height: 1em; background: var(--brand); margin-left: 2px; vertical-align: middle; animation: blink .8s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } .style-cards { display: flex; flex-direction: column; gap: 10px; } .style-card { padding: 14px 16px; border-radius: var(--rsm); border: 1px solid var(--border); background: var(--surf2); font-size: .82rem; line-height: 1.6; transition: all .4s ease; opacity: 0; transform: translateX(12px); } .style-card.reveal { opacity: 1; transform: translateX(0); } .style-card-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; color: #fff; } .style-card-tag.viral { background: #dc2626; } .style-card-tag.linkedin { background: #2563eb; } .style-card-tag.storytelling{ background: var(--brand-500); } .style-card-txt { color: var(--text2); } /* ── Pricing ──────────────────────────────────────────────── */ .pricing-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; padding-bottom: 6px; } .price-card { background: var(--surf); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; transition: all .2s ease; display: flex; flex-direction: column; gap: 6px; position: relative; } .price-card:hover { border-color: rgba(255,255,255,.12); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.3); } .price-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(79,124,255,.1); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 8px; } .price-icon svg { width: 22px; height: 22px; color: var(--brand-500, #2F5BFF); } .price-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; margin-bottom: 2px; } .price-desc { font-size: .82rem; color: var(--text2); line-height: 1.6; font-weight: 300; } .price-features { list-style: none; padding: 0; margin: 10px 0 16px; text-align: left; font-size: .8rem; color: var(--text2); line-height: 1.7; } .price-features li::before { content: "✓ "; color: var(--brand); font-weight: 700; } .price-badge { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--grad); color: #fff; padding: 4px 10px; border-radius: 20px; display: inline-block; margin-bottom: 8px; } .price-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; margin-bottom: 4px; } .price-amount span { font-family: var(--font-body); } .btn-plan { margin-top: auto; width: 100%; padding: 12px; border: none; border-radius: var(--rsm); background: var(--brand-cta); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .84rem; box-shadow: 0 5px 0 #22357c; transform: translateY(0); cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .2s; } .btn-plan:hover { transform: translateY(-1px); box-shadow: 0 6px 0 #22357c, 0 4px 16px rgba(79,124,255,.3); opacity: .95; } .btn-plan:active { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } .btn-plan:disabled { cursor: default; background: transparent; border: 1px solid var(--border); color: var(--text3); box-shadow: none; } .btn-plan.active { background: transparent; border: 1px solid var(--brand); color: var(--brand); box-shadow: none; transform: none; } .btn-plan.active:disabled { background: transparent; border: 1px solid var(--brand); color: var(--brand); opacity: .9; box-shadow: none; } .price-card.featured { border-color: var(--brand); background: var(--surf2); box-shadow: 0 0 32px rgba(79,124,255,.12); } .price-card.featured::before { content: "MOST POPULAR"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-family: var(--font-body); font-size: .65rem; font-weight: 600; padding: 4px 14px; border-radius: 20px; letter-spacing: .05em; white-space: nowrap; } /* En el modal de upgrade ya hay un badge i18n (.price-badge "Más elegido") → evita el doble. */ .upgrade-modal .price-card.featured::before { display: none; } /* Badge «Más elegido» como LAZO sobre el borde de la card (no empuja el contenido). */ .upgrade-modal .upgrade-card .price-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; z-index: 3; box-shadow: 0 4px 14px rgba(79,124,255,.35); } .upgrade-modal .upgrade-card.featured { padding-top: 26px; } /* Billing toggle */ .billing-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--surf); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 14px auto 4px; } .billing-toggle { display: flex; width: max-content; } .pricing-cards + .billing-toggle, #pricingSection .billing-toggle { margin-left: auto; margin-right: auto; } #pricingSection .billing-toggle { display: flex; justify-content: center; margin: 18px auto 0; } .billing-toggle-opt { background: transparent; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-family: var(--font-body); font-size: .82rem; color: var(--text2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background .18s, color .18s; } .billing-toggle-opt:hover { color: var(--text); } .billing-toggle-opt.on { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(79,124,255,.25); } .billing-toggle-save { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(34,197,94,.16); color: #22c55e; padding: 2px 7px; border-radius: 999px; } .billing-toggle-opt.on .billing-toggle-save { background: rgba(255,255,255,.22); color: #fff; } .price-billed { font-size: .72rem; color: var(--text3); margin-top: -2px; margin-bottom: 4px; } .price-ideal { font-size: .78rem; color: var(--text2); line-height: 1.5; font-style: italic; margin-bottom: 6px; min-height: 36px; } /* Nav Upgrade button */ .nav-upgrade-btn { background: var(--grad); color: #fff; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 8px rgba(79,124,255,.25); transition: transform .12s, box-shadow .18s, opacity .18s; } .nav-upgrade-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,124,255,.35); } .nav-upgrade-btn:active { transform: translateY(0); } /* Upgrade modal — layout horizontal y compacto: planes lado a lado, features en 2 columnas */ /* .modal.upgrade-modal (2 clases) para ganar a .modal{max-width:420px}, definido después en el fuente */ .modal.upgrade-modal { max-width: 1000px; width: 96vw; max-height: calc(100vh - 40px); overflow-y: auto; } .upgrade-modal h2 { text-align: center; } .upgrade-modal > p { text-align: center; color: var(--text2); } /* Eslogan de marca unificado (Fathom 18/06) — mismo de la landing. */ .upgrade-modal .upgrade-slogan { text-align: center; font-weight: 700; letter-spacing: .01em; color: var(--brand-500); margin: 2px 0 -2px; font-size: .92rem; } .upgrade-modal .billing-toggle { display: flex; justify-content: center; margin: 8px auto 18px; width: max-content; } /* #5 (feedback David): planes lado a lado en columnas según nº de planes (3 si free, 2 si creator…), ordenados barato→caro. La clase cards-N la pone renderUpgradeCards. */ .upgrade-cards-grid { display: grid; gap: 16px; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .upgrade-cards-grid.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .upgrade-cards-grid.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin: 0 auto; } .upgrade-cards-grid.cards-1 { grid-template-columns: minmax(0, 380px); justify-content: center; } /* Tarjeta compacta dentro del modal (override solo aquí, no toca el landing) */ .upgrade-card { padding: 22px 20px 20px; } .upgrade-card .price-icon { margin-bottom: 4px; } .upgrade-card .price-ideal { min-height: 0; margin-bottom: 8px; } /* Con 3 columnas las cards son estrechas → features en 1 columna (legibilidad). */ .upgrade-card .price-features { margin: 6px 0 16px; columns: 1; } .upgrade-card .price-features li { break-inside: avoid; margin-bottom: 3px; } .upgrade-card.is-current { opacity: .7; filter: saturate(.7); } .upgrade-card.is-current .price-icon { background: var(--surf2); } .upgrade-card .btn-plan:disabled { background: transparent; border: 1px solid var(--brand); color: var(--brand); opacity: .9; box-shadow: none; } @media (max-width: 760px) { .upgrade-cards-grid, .upgrade-cards-grid.cards-3, .upgrade-cards-grid.cards-2, .upgrade-cards-grid.cards-1 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } } /* #5 oferta MÁS notoria: badge «2 meses gratis» destacado en verde + glow + pulso. */ .billing-toggle-save { background: var(--success-fg, #3FE0A0); color: #06281c; font-weight: 800; padding: 3px 11px; border-radius: 999px; font-size: .76rem; margin-left: 8px; letter-spacing: .01em; box-shadow: 0 0 0 0 rgba(63,224,160,.5); animation: ucmpOfferPulse 2.2s ease-out infinite; } @keyframes ucmpOfferPulse { 0% { box-shadow: 0 0 0 0 rgba(63,224,160,.45); } 70% { box-shadow: 0 0 0 8px rgba(63,224,160,0); } 100% { box-shadow: 0 0 0 0 rgba(63,224,160,0); } } /* #5 comparativa en tabla vertical (features × planes) bajo las cards. */ .upgrade-compare { margin-top: 22px; } .ucmp-title { font-weight: 700; font-size: 1rem; margin: 0 0 12px; color: var(--text); } .ucmp-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .ucmp-table th, .ucmp-table td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--border); } .ucmp-table thead th { font-weight: 700; color: var(--text); font-size: .92rem; border-bottom: 2px solid var(--border); } .ucmp-table td.ucmp-feat, .ucmp-table th.ucmp-feat { text-align: left; color: var(--text2); font-weight: 500; } /* Columna destacada: tinte translúcido (var(--brand-50) resolvía a casi BLANCO en tema oscuro → tapaba los valores). Translúcido funciona en claro y oscuro. */ .ucmp-table .ucmp-on { background: rgba(79,124,255,.12); } .ucmp-table thead th.ucmp-on { color: var(--brand-500, #4f7cff); border-bottom-color: var(--brand); } .ucmp-table tbody tr:last-child td { border-bottom: none; } .ucmp-yes { color: var(--success-fg, #3FE0A0); font-weight: 700; } .ucmp-no { color: var(--text3); } @media (max-width: 700px) { .ucmp-table th, .ucmp-table td { padding: 9px 6px; font-size: .82rem; } } /* Settings: billing card */ .settings-billing-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .settings-billing-info { display: flex; flex-direction: column; gap: 4px; } .settings-billing-label { font-size: .72rem; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; } .settings-billing-plan { display: flex; align-items: center; gap: 8px; } .settings-billing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } /* v0.14.16 — Subscription detail */ .sub-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle); margin-bottom: 4px; } @media (max-width: 540px) { .sub-detail-grid { grid-template-columns: 1fr; gap: 10px; } } .sub-detail-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sub-detail-label { font-size: .68rem; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; } .sub-detail-value { font-size: .92rem; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; } .sub-detail-foot { font-size: .72rem; color: var(--text3); margin-top: 8px; } .sub-cancel-banner { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning-fg); font-size: var(--text-sm); line-height: 1.4; margin-bottom: 14px; } [data-theme="light"] .sub-cancel-banner { color: var(--warning-fg); } .sub-free-state, .sub-comp-state { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sub-free-info { display: flex; flex-direction: column; gap: 4px; } .sub-free-label { font-size: .68rem; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; } .sub-free-plan { display: flex; align-items: center; gap: 8px; } .sub-free-msg, .sub-comp-msg { font-size: .85rem; color: var(--text2); } /* ── Marquee ─────────────────────────────────────────────── */ .marquee-section { padding: 0 0 80px; overflow: hidden; } .marquee-wrap { position: relative; } .marquee-wrap::before, .marquee-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; } .marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .marquee-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); } .marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 30s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } .marquee-item { display: flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--surf); border: 1px solid var(--border); border-radius: 20px; padding: 10px 20px; font-size: .82rem; color: var(--text2); } .marquee-item span { font-size: .9rem; } /* ── Testimonials ─────────────────────────────────────────── */ .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; } .testi-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; transition: border-color .25s, transform .25s; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s, border-color .25s; } .testi-card.reveal { opacity: 1; transform: translateY(0); } .testi-card:hover { border-color: rgba(79,124,255,.4); } .testi-stars { color: #fbbf24; font-size: .9rem; margin-bottom: 12px; } .testi-quote { font-size: .88rem; color: var(--text2); line-height: 1.7; margin-bottom: 16px; font-style: italic; } .testi-quote strong { color: var(--brand-200); font-style: normal; } .testi-user { display: flex; align-items: center; gap: 10px; } .testi-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; color: #fff; flex-shrink: 0; } .testi-name { font-size: .85rem; font-weight: 700; } .testi-role { font-size: .75rem; color: var(--text3); } /* ── CTA final ────────────────────────────────────────────── */ .cta-section { padding: 64px 24px 48px; text-align: center; background: transparent; position: relative; overflow: hidden; } .cta-mascot { width: 120px; height: 120px; margin: 0 auto 18px; display: block; filter: drop-shadow(0 8px 24px rgba(0,0,0,.25)); animation: ctaMascotFloat 3s ease-in-out infinite; } @keyframes ctaMascotFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .cta-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -1px; margin-bottom: 14px; } .cta-h2 em { font-style: italic; color: var(--brand-300); -webkit-text-fill-color: var(--brand-300); } [data-theme="light"] .cta-h2 em { color: var(--brand-700); -webkit-text-fill-color: var(--brand-700); } .cta-sub { color: var(--text2); font-size: 1.05rem; margin-bottom: 28px; line-height: 1.5; max-width: 520px; margin-left: auto; margin-right: auto; } .cta-pills { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; } .cta-pill { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text2); font-weight: 600; } .cta-pill .ck { color: var(--green); } .cta-btn-final { display: inline-block; background: var(--brand-cta); color: #fff; border: 0; padding: 16px 32px; border-radius: 14px; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 1rem; box-shadow: 0 6px 0 #22357c, 0 8px 32px rgba(79,124,255,.4); transition: transform .12s, box-shadow .15s, background .15s; } .cta-btn-final:hover { transform: translateY(-1px); background: #3a63ec; box-shadow: 0 7px 0 #22357c, 0 10px 36px rgba(79,124,255,.18); } .cta-btn-final:active { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } /* ── FAQ section ──────────────────────────────────────────── */ .faq-section-v2 { max-width: 720px; margin: 24px auto 32px; padding: 0 24px; } .faq-section-v2 .s-label { display: block; text-align: center; margin-bottom: 8px; } .faq-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; letter-spacing: -.5px; text-align: center; margin: 0 0 36px; } .faq-item { border-bottom: 1px solid var(--border); padding: 18px 0; } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 500; color: var(--text); font-size: .98rem; line-height: 1.4; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); color: var(--text3); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 400; transition: transform .2s, color .2s, border-color .2s; } .faq-item[open] summary::after { content: "−"; color: var(--brand); border-color: var(--brand); } .faq-item p { margin: 12px 0 0; padding-right: 42px; color: var(--text2); font-size: .9rem; line-height: 1.6; } /* ── History ──────────────────────────────────────────────── */ .history-section { padding: 0 24px 80px; } .hist-inner { max-width: 720px; margin: 0 auto; background: var(--surf); border: 1px solid var(--border); border-radius: 20px; padding: 28px; } .hist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .hist-header h2 { font-size: 1rem; font-weight: 800; } .count-badge { background: var(--brand); color: #fff; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 10px; } .hist-list { list-style: none; } .hist-item { padding: 13px 0; border-bottom: 1px solid var(--border); } .hist-item:last-child { border-bottom: none; } .hist-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .ptag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 4px; color: #fff; } .ptag.instagram { background: #e1306c; } .ptag.tiktok { background: #010101; } .ptag.otro { background: #6b7280; } .hist-date { font-size: .72rem; color: var(--text3); } .hist-cost { font-size: .7rem; color: var(--text3); margin-left: auto; } .hist-prev { font-size: .83rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-acts { display: flex; gap: 5px; margin-top: 7px; } .btn-ico { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; font-size: .7rem; color: var(--text3); cursor: pointer; transition: all .2s; } .btn-ico:hover { border-color: var(--brand); color: var(--brand-200); } .btn-ico.del:hover { border-color: #f87171; color: #f87171; } .empty-state { text-align: center; color: var(--text3); padding: 28px 0; font-size: .88rem; } /* ── Modals ───────────────────────────────────────────────── */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); /* z-index 300→10050 (fix #235 «Ver más»): el confirmModal quedaba POR DEBAJO de los overlays de la isla, loaders de fondo y el tour-overlay (z 10000) → el clic no llegaba y parecía que «no funcionaba». Un modal debe estar por encima de todo. */ z-index: 10050; align-items: center; justify-content: center; padding: 20px; } .overlay.on { display: flex; } .modal { background: var(--surf); border: 1px solid rgba(255,255,255,.06); border-radius: 20px; box-shadow: var(--sh-lg); width: 100%; max-width: 420px; padding: 36px; position: relative; animation: modal-in .25s ease; } @keyframes modal-in { from{opacity:0;transform:translateY(14px)scale(.97)} } .modal-x { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text3); font-size: 1.1rem; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all .2s; } .modal-x:hover { background: var(--surf2); color: var(--text); } .modal h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 5px; } .modal > p { color: var(--text2); font-size: .84rem; margin-bottom: 22px; line-height: 1.5; font-weight: 300; } .tabs { display: flex; gap: 3px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--rsm); padding: 3px; margin-bottom: 20px; } .tab { flex: 1; padding: 8px; border-radius: 6px; border: none; font-size: .83rem; font-weight: 700; cursor: pointer; background: none; color: var(--text3); transition: all .15s; } .tab.on { background: var(--surf); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); } .field { margin-bottom: 14px; } .field label { display: block; font-size: .75rem; font-weight: 700; color: var(--text3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; } .field input { width: 100%; padding: 11px 14px; background: var(--surf2); border: 1.5px solid var(--border); border-radius: var(--rsm); font-size: .9rem; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; } .field input:focus { border-color: var(--brand); box-shadow: var(--glow); } .btn-full { /* v0.14.35.a: consistencia CTA — antes var(--grad), ahora --brand-cta. */ width: 100%; padding: 13px; background: var(--brand-cta); color: #fff; border: none; border-radius: var(--rsm); font-size: .95rem; font-weight: 800; cursor: pointer; margin-top: 4px; box-shadow: 0 5px 0 #22357c; transform: translateY(0); transition: transform .12s, box-shadow .12s, opacity .2s; } .btn-full:hover { transform: translateY(-1px); box-shadow: 0 6px 0 #22357c; opacity: .9; } .btn-full:active { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } .btn-full:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; } .form-err { color: #f87171; font-size: .78rem; margin-top: 10px; display: none; } .form-err.on { display: block; } .btn-google-auth { width: 100%; padding: 12px 16px; background: var(--surf2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .9rem; color: var(--text); font-family: var(--font-body); margin-bottom: 4px; box-shadow: 0 4px 0 rgba(255,255,255,.06); transform: translateY(0); transition: transform .12s, box-shadow .12s; } .btn-google-auth:hover { transform: translateY(-1px); box-shadow: 0 5px 0 rgba(255,255,255,.06); border-color: var(--brand); } .btn-google-auth:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.06); } [data-theme="light"] .btn-google-auth { background: #fff; border-color: #dadce0; color: #3c4043; box-shadow: 0 4px 0 #d1d5db; } [data-theme="light"] .btn-google-auth:hover { box-shadow: 0 5px 0 #d1d5db; border-color: #dadce0; } [data-theme="light"] .btn-google-auth:active { box-shadow: 0 1px 0 #d1d5db; } /* Topup */ .topup-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 20px 0; } .topup-opt { border: 2px solid var(--border); border-radius: var(--rsm); padding: 16px 10px; text-align: center; cursor: pointer; background: var(--surf2); transition: transform .12s, box-shadow .12s, border-color .2s, background .2s; box-shadow: 0 4px 0 rgba(255,255,255,.07); transform: translateY(0); } .topup-opt:hover, .topup-opt.on { border-color: var(--brand); background: rgba(79,124,255,.1); } .topup-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.07); } .topup-amt { font-size: 1.4rem; font-weight: 900; } .topup-cred { font-size: .7rem; color: var(--text3); margin-top: 3px; } .topup-note { font-size: .77rem; color: var(--text3); text-align: center; margin-bottom: 14px; } /* #5 empuje a suscripción dentro del modal de packs */ .topup-sub-nudge { display:flex; flex-direction:column; gap:9px; align-items:flex-start; margin:14px 0 4px; padding:12px 14px; border-radius:12px; border:1px solid rgba(79,124,255,.3); background:rgba(79,124,255,.08); font-size:.82rem; line-height:1.45; color:var(--text2); } .topup-sub-nudge b { color:var(--text); font-weight:700; } .topup-sub-nudge button { align-self:stretch; padding:9px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700; font-size:.82rem; background:var(--brand-cta); color:#fff; box-shadow:0 3px 0 #22357c; transition:transform .12s; } .topup-sub-nudge button:active { transform:translateY(2px); box-shadow:0 1px 0 #22357c; } /* ── Button active/inactive state ────────────────────────── */ .btn-shimmer.inactive { animation: none; background: var(--surf2); color: var(--text3); cursor: not-allowed; pointer-events: none; } .btn-shimmer.wake { animation: btn-wake .4s ease, shimmer 4s linear infinite .4s; } @keyframes btn-wake { 0% { transform: scale(.97); opacity: .6; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } } /* ── Input valid micro-anim ───────────────────────────────── */ @keyframes input-confirm { 0% { transform: scale(1); } 30% { transform: scale(1.012) translateX(2px); } 60% { transform: scale(1.012) translateX(-2px); } 100% { transform: scale(1); } } .input-confirm { animation: input-confirm .35s ease !important; } /* ── Inline transform section ─────────────────────────────── */ .transform-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; animation: fade-up .4s ease both; } .transform-divider { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; color: var(--text3); margin-bottom: 14px; letter-spacing: .3px; } .transform-divider::before, .transform-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .transform-divider span { white-space: nowrap; color: var(--brand-300); } .style-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .style-chip { position: relative; padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surf2); color: var(--text2); font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 0 rgba(255,255,255,.07); transform: translateY(0); transition: transform .12s, box-shadow .12s, border-color .2s, color .2s, background .2s; } .style-chip:hover { border-color: var(--brand); color: var(--brand-200); background: rgba(79,124,255,.1); transform: translateY(-1px); box-shadow: 0 4px 0 rgba(255,255,255,.07); } .style-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.07); } .style-chip.act { border-color: var(--brand); color: var(--brand-200); background: rgba(79,124,255,.15); box-shadow: 0 3px 0 rgba(79,124,255,.3); } /* Tooltip preview on hover */ .style-chip::after { content: attr(data-preview); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--surf); border: 1px solid var(--border); color: var(--text2); font-size: .72rem; font-weight: 500; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: var(--sh); } .style-chip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .custom-chip-row { display: none; gap: 8px; margin-bottom: 12px; } .custom-chip-row.on { display: flex; } .custom-chip-row input { flex: 1; padding: 9px 14px; background: var(--surf2); border: 1.5px solid var(--border); border-radius: var(--rsm); font-size: .85rem; color: var(--text); outline: none; transition: border-color .2s; } .custom-chip-row input:focus { border-color: var(--brand); } .inline-spinner { display: none; align-items: center; gap: 7px; /* v0.14.35: spinner text a neutro. */ padding: 10px 0; font-size: .82rem; color: var(--text2); font-weight: 600; } .inline-spinner.on { display: flex; } .transform-result { display: none; margin-top: 14px; border-radius: var(--rsm); overflow: hidden; animation: fade-up .4s ease both; } .transform-result.on { display: block; } .transform-result-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: linear-gradient(135deg, rgba(79,124,255,.2), rgba(251,191,36,.12)); font-size: .75rem; font-weight: 800; color: var(--brand-200); letter-spacing: .3px; } .transform-result-body { padding: 16px 14px; background: rgba(79,124,255,.06); border: 1px solid rgba(79,124,255,.2); border-top: none; border-radius: 0 0 var(--rsm) var(--rsm); font-size: .9rem; line-height: 1.8; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; } /* ── Scroll hint ──────────────────────────────────────────── */ .scroll-hint { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; opacity: .7; transition: opacity .2s; } .scroll-hint:hover { opacity: 1; } .scroll-hint-txt { /* v0.14.35: hint text a neutro. */ font-size: .8rem; color: var(--text2); font-weight: 600; letter-spacing: .3px; } .scroll-arrow { font-size: 1.2rem; color: var(--text2); animation: bounce-arrow 1.4s ease-in-out infinite; } @keyframes bounce-arrow { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(7px); opacity: 1; } } /* ── Inline loading indicator (squeeze loader) ───────────────── */ .inline-loading { display: none; align-items: center; gap: 14px; padding: 14px 18px; margin-top: 10px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); animation: loading-slide-in .2s ease; } .inline-loading.on { display: flex; } @keyframes loading-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Squeeze animation */ .sq-loader { width: 36px; height: 36px; position: relative; flex-shrink: 0; animation: sq-spin 10s infinite linear; } .sq-el { position: absolute; } .sq-el1 { background: var(--brand-500); animation: sq-squeeze 3s infinite; } .sq-el2 { background: #FBBF24; border-radius: 50%; animation: sq-squeeze 3s infinite; animation-delay: -1.25s; } @keyframes sq-squeeze { 0% { inset: 0 2em 2em 0; } 12.5% { inset: 0 2em 0 0; } 25% { inset: 2em 2em 0 0; } 37.5% { inset: 2em 0 0 0; } 50% { inset: 2em 0 0 2em; } 62.5% { inset: 0 0 0 2em; } 75% { inset: 0 0 2em 2em; } 87.5% { inset: 0 0 2em 0; } 100% { inset: 0 2em 2em 0; } } @keyframes sq-spin { to { transform: rotate(-360deg); } } .loading-msg { font-size: .88rem; font-weight: 600; color: var(--text2); transition: opacity .3s ease; line-height: 1.4; } .loading-msg.fade { opacity: 0; } /* v0.14.22 BUG 6: helper para inyectar fade en spans existentes (transcribe inline status) sin pisar tipografía del padre. */ .loading-msg-rot { transition: opacity .3s ease; } .loading-msg-rot.fade { opacity: 0; } /* Reutilizado por previewSpinner p y resultBlock para fade entre frases. */ .preview-card-spinner p { transition: opacity .3s ease; } .preview-card-spinner p.fade { opacity: 0; } .loading-progress-wrap { flex: 1; height: 3px; background: var(--border); border-radius: 4px; overflow: hidden; } .loading-progress-bar { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-500), #FBBF24, var(--brand-500)); background-size: 200% auto; animation: shimmer 2s linear infinite; transition: width .4s ease; } .loading-pct { font-size: .75rem; color: var(--text3); font-weight: 700; } /* ── Global input/select hover ───────────────────────────── */ input:not([type="submit"]):hover, select:hover, textarea:hover { border-color: var(--text3) !important; } input:not([type="submit"]):focus, select:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: var(--glow) !important; } .btn-sm:hover, .btn-ico:hover, .btn-nav:hover { background: rgba(79,124,255,.08); } /* ── View full modal ──────────────────────────────────────── */ .view-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); z-index: 350; align-items: center; justify-content: center; padding: 20px; } .view-overlay.on { display: flex; } .view-modal { background: var(--surf); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-lg); width: 100%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; animation: modal-in .2s ease; } .view-modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .view-modal-head h3 { font-size: 1rem; font-weight: 800; } .view-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; font-size: .92rem; line-height: 1.8; color: var(--text); white-space: pre-wrap; word-break: break-word; } .view-modal-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; } /* ── Theme toggle ─────────────────────────────────────────── */ .theme-btn { width: 34px; height: 34px; border-radius: var(--rsm); border: 1px solid var(--border); background: var(--surf); cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; flex-shrink: 0; } .theme-btn:hover { border-color: var(--brand); } /* ── Profile drawer ───────────────────────────────────────── */ .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 250; } .drawer-overlay.on { display: block; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; background: var(--surf); border-left: 1px solid var(--border); box-shadow: -8px 0 40px rgba(0,0,0,.4); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 251; } .drawer.on { transform: translateX(0); } .drawer-head { padding: 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .drawer-av { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; } .drawer-user-info { flex: 1; min-width: 0; } .drawer-email { font-size: .88rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer-since { font-size: .75rem; color: var(--text3); margin-top: 2px; } .drawer-close { background: none; border: none; color: var(--text3); font-size: 1.1rem; cursor: pointer; padding: 4px; border-radius: 6px; transition: background .2s; } .drawer-close:hover { background: var(--surf2); } .drawer-balance { margin: 16px; padding: 16px; background: linear-gradient(135deg, rgba(79,124,255,.12), rgba(251,191,36,.08)); border: 1px solid rgba(79,124,255,.25); border-radius: var(--r); display: flex; align-items: center; gap: 12px; } .drawer-balance-amt { font-size: 1.6rem; font-weight: 900; color: var(--text); } .drawer-balance-lbl { font-size: .75rem; color: var(--text3); margin-top: 2px; } .btn-topup-sm { margin-left: auto; padding: 8px 16px; /* v0.14.35.a: consistencia CTA — antes var(--grad), ahora --brand-cta. */ background: var(--brand-cta); color: #fff; border: none; border-radius: var(--rsm); font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 0 #22357c; transform: translateY(0); transition: transform .12s, box-shadow .12s, opacity .2s; } .btn-topup-sm:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 0 #22357c; } .btn-topup-sm:active { transform: translateY(3px); box-shadow: 0 1px 0 #22357c; } .drawer-stats { margin: 0 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 12px; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--rsm); text-align: center; } .stat-num { font-size: 1.3rem; font-weight: 900; color: var(--text); } .stat-lbl { font-size: .7rem; color: var(--text3); margin-top: 2px; } .drawer-hist-title { padding: 0 16px 10px; font-size: .78rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; justify-content: space-between; } .drawer-hist-list { flex: 1; overflow-y: auto; padding: 0 16px 16px; } .d-hist-item { padding: 12px 0; border-bottom: 1px solid var(--border); } .d-hist-item:last-child { border-bottom: none; } .d-hist-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .d-hist-prev { font-size: .82rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-hist-acts { display: flex; gap: 5px; margin-top: 6px; } .drawer-logout { margin: 0 16px 20px; padding: 11px; background: none; border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text3); font-size: .85rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; width: calc(100% - 32px); } .drawer-logout:hover { border-color: #f87171; color: #f87171; } /* ── Profile Hub — full width sidebar + content ───────────── */ .profile-overlay { display: none; position: fixed; inset: 0; background: #0a0b0f; z-index: 300; overflow: hidden; background-image: radial-gradient(ellipse at 15% -5%, rgba(79,124,255,.1) 0%, transparent 45%), radial-gradient(ellipse at 85% 95%, rgba(139,92,246,.07) 0%, transparent 45%), radial-gradient(ellipse at 60% 30%, rgba(79,124,255,.04) 0%, transparent 50%), radial-gradient(ellipse at 30% 70%, rgba(139,92,246,.03) 0%, transparent 50%); } .profile-overlay.on { display: block; } /* ── ADMIN PANEL (v0.20) ───────────────────────────────────────────── Superficie admin separada (#adminPage). Vive en , full-screen overlay como #profilePage. Estética Signal reutilizando los tokens del :root (azul #4f7cff, Space Grotesk / Hanken / JetBrains Mono). Todo el CSS está scopeado bajo #adminPage para no colisionar con las clases globales (.card, .btn, .tab, .panel). NO toca el gating JS. */ #adminPage { display: none; position: fixed; inset: 0; background: var(--surface-base); color: var(--text-primary); z-index: 400; overflow-y: auto; font-family: var(--font-body); background-image: radial-gradient(ellipse at 15% -5%, rgba(79,124,255,.08) 0%, transparent 45%), radial-gradient(ellipse at 85% 100%, rgba(79,124,255,.05) 0%, transparent 45%); } #adminPage.on { display: block; } #adminPage .adm-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px 96px; } #adminPage .adm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } #adminPage .adm-header h1 { font-family: var(--font-display-2); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); line-height: 1.1; } #adminPage .adm-header .adm-sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 6px; } #adminPage .adm-header-actions { display: flex; gap: 8px; align-items: center; } #adminPage .adm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; } #adminPage .adm-tab { padding: 12px 16px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; } #adminPage .adm-tab:hover { color: var(--text-primary); } #adminPage .adm-tab.on { color: var(--brand-500); border-bottom-color: var(--brand-500); } #adminPage .adm-panel { display: none; animation: panelFadeIn 200ms ease-out; } #adminPage .adm-panel.on { display: block; } #adminPage .adm-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); } #adminPage .adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } #adminPage .adm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; } #adminPage .adm-stat-num { font-family: var(--font-display-2); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; color: var(--text-primary); margin-top: 4px; } #adminPage .adm-stat-num.accent { color: var(--brand-500); } #adminPage .adm-field { margin-bottom: 16px; } #adminPage .adm-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; } #adminPage .adm-input { width: 100%; padding: 10px 12px; background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-sm); transition: border-color .15s, box-shadow .15s; } #adminPage .adm-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(79,124,255,.2); } #adminPage .adm-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); } #adminPage .adm-check input { width: 16px; height: 16px; accent-color: var(--brand-500); } #adminPage .adm-btn { padding: 10px 16px; background: var(--brand-600); color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; transition: background .15s; white-space: nowrap; } #adminPage .adm-btn:hover { background: var(--brand-500); } #adminPage .adm-btn:disabled { background: var(--text-disabled); cursor: not-allowed; opacity: .6; } #adminPage .adm-btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); } #adminPage .adm-btn-secondary:hover { background: var(--surface-overlay); color: var(--text-primary); } #adminPage .adm-table { width: 100%; border-collapse: collapse; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } #adminPage .adm-table thead th { padding: 12px 14px; background: var(--surface-overlay); font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-align: left; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-default); } #adminPage .adm-table td { padding: 11px 14px; font-size: var(--text-sm); color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); vertical-align: middle; } #adminPage .adm-table tbody tr:last-child td { border-bottom: none; } #adminPage .adm-table tbody tr:hover td { background: rgba(255,255,255,.02); } #adminPage .adm-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); } /* Feedback: filtro + texto truncado + modal de detalle */ #adminPage .adm-fb-filter { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } #adminPage .adm-fb-txt { max-width: 360px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #adminPage .adm-fb-modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); } #adminPage .adm-fb-modal.on { display: flex; } #adminPage .adm-fb-modal-card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 24px; } #adminPage .adm-fb-modal-card img { max-width: 100%; margin-top: 14px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); display: block; } #adminPage .adm-pill { display: inline-block; padding: 2px 9px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; font-family: var(--font-body); background: rgba(79,124,255,.14); color: var(--brand-300); } #adminPage .adm-pill.muted { background: rgba(255,255,255,.06); color: var(--text-tertiary); } #adminPage .adm-source { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } #adminPage .adm-source .adm-src-tag { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-overlay); border: 1px solid var(--border-default); } #adminPage .adm-msg { padding: 11px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: 16px; } #adminPage .adm-msg.error { background: rgba(239,68,68,.14); color: #f87171; } #adminPage .adm-msg.ok { background: rgba(34,197,94,.14); color: #4ade80; } #adminPage .adm-msg.info { background: rgba(79,124,255,.14); color: var(--brand-300); } #adminPage .adm-loading { text-align: center; padding: 48px 0; color: var(--text-secondary); } #adminPage .adm-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--brand-500); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #adminPage .adm-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 20px; font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-lg); z-index: 410; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } #adminPage .adm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } #adminPage .adm-toast.error { border-color: rgba(239,68,68,.5); } #adminPage .adm-toast.ok { border-color: rgba(34,197,94,.5); } /* Floating entry chip (solo visible para admins, lo activa el boot JS) */ #adminEntry { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 350; padding: 9px 14px; border-radius: var(--radius-full); background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: var(--shadow-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; gap: 7px; align-items: center; transition: border-color .15s, background .15s; } #adminEntry.on { display: inline-flex; } #adminEntry:hover { border-color: var(--brand-500); background: var(--surface-raised); } #adminEntry .adm-entry-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); } @media (max-width: 640px) { #adminPage .adm-wrap { padding: 24px 14px 80px; } #adminPage .adm-header h1 { font-size: var(--text-2xl); } } /* v0.14.31.d: .prof-mob-hamburger eliminada. Mobile usa bottom-bar 5 items. */ .prof-layout { display: grid; grid-template-columns: 260px 1fr; height: 100vh; overflow: hidden; } /* Sidebar */ .prof-sidebar { background: var(--surf); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } /* Main content area */ .prof-main { overflow-y: auto; padding: var(--space-xl) calc(var(--space-xl) + 8px) 60px; } .prof-main::-webkit-scrollbar { width: 4px; } .prof-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; } .panel-back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; margin: 0 0 14px -6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted, var(--text2)); text-decoration: none; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: color .18s ease, background .18s ease; } .panel-back-btn:hover { color: var(--brand-500); background: rgba(79, 124, 255, 0.06); } .panel-back-arrow { display: inline-block; font-size: 14px; line-height: 1; transition: transform .18s ease; } .panel-back-btn:hover .panel-back-arrow { transform: translateX(-2px); } [data-theme="light"] .panel-back-btn:hover { background: rgba(79, 124, 255, 0.08); } @media (max-width: 768px) { .panel-back-btn { font-size: 11.5px; margin-bottom: 10px; } } /* The adapt-section back button only makes sense inside /app */ .panel-back-btn-adapt { display: none; } body.workspace .panel-back-btn-adapt { display: inline-flex; } /* v0.14.32: Overview hero decorativo eliminado (eyebrow, waves, greeting mascot, glow). */ /* v0.14.5b — Overview rich widgets */ /* v0.14.40: tras eliminar cards F2/F3, .ov-grid solo contiene el hero F1 (transcribir). Mantenemos grid 1col por simplicidad. */ .ov-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: var(--space-md) 0 var(--space-xl); } .ov-card-f1 { grid-column: 1 / -1; } @media (max-width: 640px) { .ov-grid { gap: 12px; } .ov-spark-wrap { overflow: hidden; } } /* F1: input row dentro de la card */ .ov-hero-input-row { display: flex; gap: 8px; align-items: center; margin: 12px 0 8px; flex-wrap: wrap; } .ov-hero-input-wrap { flex: 1; min-width: 180px; position: relative; } /* v0.14.23: agrupador select+btn — alineación correcta en mobile (orden 2). */ .ov-hero-controls-wrapper { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .ov-hero-input-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: .9rem; pointer-events: none; } .ov-hero-input { width: 100%; padding: 8px 10px 8px 32px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-size: .84rem; outline: none; } .ov-hero-input:focus { border-color: rgba(79,124,255,.6); } /* v0.14.40.b: hero F1 (acción principal) — sobrecarga tamaños para destacar. Override sobre .ov-card, .ov-hero-input, .ov-empty-lang, .ov-empty-btn. */ .ov-card-f1 { padding: var(--space-xl); } .ov-card-f1 .ov-card-label { font-size: 1.6rem; } .ov-card-f1 .ov-hero-input-row { gap: 12px; margin: var(--space-md) 0 var(--space-sm); } .ov-card-f1 .ov-hero-input { padding: 16px 18px 16px 40px; font-size: 1.05rem; border-radius: 12px; /* v0.14.40.c: borde marcado permanente (no solo en focus) para señalizar input principal. */ border: 2px solid var(--brand); background: var(--surf); } .ov-card-f1 .ov-hero-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent); } .ov-card-f1 .ov-hero-input-icon { left: 14px; font-size: 1rem; } .ov-card-f1 .ov-empty-lang { padding: 14px 16px; font-size: .95rem; border-radius: 10px; } .ov-card-f1 .ov-empty-btn { padding: 16px 28px; font-size: 1rem; font-weight: 700; border-radius: 12px; } @media (max-width: 640px) { .ov-card-f1 { padding: var(--space-lg); } .ov-card-f1 .ov-card-label { font-size: 1.3rem; } .ov-card-f1 .ov-hero-input { padding: 13px 14px 13px 36px; font-size: .95rem; } .ov-card-f1 .ov-empty-lang { padding: 11px 13px; font-size: .85rem; } .ov-card-f1 .ov-empty-btn { padding: 13px 22px; font-size: .9rem; } } .ov-hero-status { font-size: var(--text-xs); color: var(--text3); margin-top: 4px; } [data-theme="light"] .ov-hero-input { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: var(--text); } .ov-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-height: 160px; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); color: var(--text); text-align: left; cursor: pointer; font-family: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .2s ease-out, box-shadow .2s, border-color .2s; } .ov-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: var(--border-strong); } [data-theme="light"] .ov-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); } .ov-card:active { transform: translateY(0); } .ov-card:focus-visible { outline: 2px solid rgba(var(--ov-acc), .6); outline-offset: 2px; } .ov-card-head { display: flex; align-items: center; gap: 10px; } .ov-card-hooks { width: 24px; height: 24px; flex-shrink: 0; transition: transform .2s; } .ov-card:hover .ov-card-hooks { transform: translateY(-1px); } .ov-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .ov-card-label { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text); line-height: 1.15; letter-spacing: -.015em; } .ov-card-sub { font-family: var(--font-mono); font-size: .76rem; color: var(--text3); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-card-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; } .ov-empty { font-size: .78rem; color: var(--text3); line-height: 1.45; } .ov-card-count { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text3); letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* v0.14.20 — clickable count link en F1 (transcripciones) */ .ov-count-link { display: inline-block; margin-top: 10px; padding-top: 8px; border: none; background: none; cursor: pointer; border-top: 1px solid rgba(255,255,255,.05); width: 100%; text-align: left; font-family: var(--font-mono); font-size: .68rem; color: rgb(var(--ov-acc, 79,124,255)); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: color .15s, opacity .15s; } .ov-count-link:hover { opacity: .8; } [data-theme="light"] .ov-count-link { border-top-color: rgba(0,0,0,.05); } /* ── v0.14.40 — Dashboard rediseño visual ─────────────────── Sustituye cards F2/F3 por módulos focales (Últimas transcripciones, Métricas, Apunta una idea). Hero F1 (transcribir) sigue usando .ov-card. */ .dash-row-2col { display: grid; /* v0.14.40.c: minmax(0, 1fr) garantiza 50/50 real (contenido largo no empuja la columna porque min-width default es auto). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); } @media (max-width: 820px) { .dash-row-2col { grid-template-columns: 1fr; } } .dash-module { background: var(--surf); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); min-height: 200px; } #dashModUltTransc { border-left-color: var(--brand); } #dashModMetrics { border-left-color: var(--success); } .dash-module-head { display: flex; justify-content: space-between; align-items: center; } .dash-module-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .dash-module-mascot { width: 24px; height: 24px; flex-shrink: 0; } .dash-module-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); } .dash-module-link { font-size: .82rem; color: var(--brand); cursor: pointer; text-decoration: none; } .dash-module-link:hover { text-decoration: underline; } .dash-module-body { flex: 1; } .dash-mini-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: opacity .15s; } .dash-mini-row:last-child { border-bottom: 0; } .dash-mini-row:hover { opacity: .8; } .dash-mini-row.dash-mini-skel { cursor: default; } .dash-mini-row.dash-mini-skel:hover { opacity: 1; } .dash-mini-row-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--surf2); } .dash-mini-row-body { flex: 1; min-width: 0; } .dash-mini-row-title { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-bottom: 2px; } .dash-mini-row-meta { font-size: var(--text-xs); color: var(--text3); } .dash-metrics-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.1; letter-spacing: -0.02em; } .dash-metrics-label { font-size: .78rem; color: var(--text3); margin-bottom: var(--space-md); } .dash-metrics-sparkline { width: 100%; height: 50px; display: block; } .dash-metrics-sparkline .ov-spark { height: 50px; } .dash-metrics-toprell { font-size: .76rem; color: var(--text2); margin-top: var(--space-sm); line-height: 1.4; } .dash-module-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-lg) 0; gap: var(--space-sm); height: 100%; } .dash-module-empty-msg { font-size: .88rem; color: var(--text2); line-height: 1.4; } .dash-module-empty-hint { font-size: .76rem; color: var(--text3); } .dash-module-empty-cta { background: var(--brand-cta); color: #fff; border: 0; padding: 8px 16px; border-radius: 8px; font-size: .82rem; font-weight: 600; cursor: pointer; margin-top: 4px; } .dash-module-empty-cta:hover { background: var(--brand-800); } .dash-idea-card { display: flex; align-items: center; gap: var(--space-md); background: var(--surf); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius-lg); padding: var(--space-lg); margin-top: var(--space-lg); cursor: pointer; transition: transform .15s ease-out, box-shadow .15s ease-out; } .dash-idea-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); } [data-theme="light"] .dash-idea-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); } .dash-idea-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .dash-idea-icon { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-idea-text { flex: 1; min-width: 0; } .dash-idea-title { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text-primary); margin-bottom: 4px; } .dash-idea-sub { font-size: .88rem; color: var(--text2); line-height: 1.4; } .dash-idea-cta { background: var(--brand-cta); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: .88rem; font-weight: 600; flex-shrink: 0; } @media (max-width: 560px) { .dash-idea-card { flex-wrap: wrap; } .dash-idea-cta { width: 100%; text-align: center; } } /* ── v0.14.44 — Onboarding gamificado en Dashboard ───────── Card debajo del hero F1. Visible solo si scripts.total === 0. */ .ob-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-left: 3px solid var(--brand-500); border-radius: var(--radius-xl); padding: var(--space-8); margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } .ob-header { display: flex; flex-direction: column; gap: var(--space-sm); } .ob-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ob-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); line-height: 1.2; letter-spacing: -.015em; } .ob-progress-count { font-size: var(--text-sm); font-weight: 700; color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 10%, transparent); padding: 4px 12px; border-radius: 20px; font-variant-numeric: tabular-nums; flex-shrink: 0; } .ob-sub { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4; } .ob-progress-bar { height: 6px; background: var(--border-default); border-radius: 3px; overflow: hidden; margin-top: var(--space-sm); } .ob-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-500) 0%, var(--warning-fg) 100%); border-radius: 3px; transition: width .6s ease-out; } .ob-steps { display: flex; flex-direction: column; gap: var(--space-md); } .ob-step { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); transition: opacity .15s, border-color .15s; } .ob-step-icon { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--text-tertiary); flex-shrink: 0; position: relative; } .ob-step--active .ob-step-icon { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 8%, transparent); } .ob-step--done .ob-step-icon { border-color: var(--success); background: var(--success); } .ob-step--done .ob-step-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%) rotate(45deg); width: 7px; height: 12px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; } .ob-step-body { flex: 1; min-width: 0; } .ob-step-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); line-height: 1.3; } .ob-step-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.4; } .ob-step--future { opacity: .55; } .ob-step--future .ob-step-title { color: var(--text-tertiary); } .ob-step--active { border-left: 3px solid var(--brand-500); } .ob-step--done .ob-step-title { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--border-strong); } .ob-step-btn { background: var(--brand-cta); color: #fff; border: 0; padding: 8px 16px; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; flex-shrink: 0; font-family: var(--font-body); transition: background .15s, transform .12s; } .ob-step-btn:hover { background: var(--brand-800); } .ob-step-btn:active { transform: scale(.98); } .ob-step--future .ob-step-btn, .ob-step--done .ob-step-btn { display: none; } @media (max-width: 640px) { .ob-card { padding: var(--space-6); } .ob-step { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .ob-step-btn { width: 100%; } } /* ── v0.14.15 — Empty state Resumen ──────────────────────── */ #ovEmptyState { display: flex; flex-direction: column; gap: 16px; } .ov-empty-card { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 6%, transparent), color-mix(in srgb, var(--brand-500) 2%, transparent)); border: 1px solid color-mix(in srgb, var(--brand-500) 18%, transparent); border-left: 3px solid var(--brand-500); border-radius: var(--radius-xl); padding: var(--space-7) var(--space-7) var(--space-6); box-shadow: 0 6px 22px rgba(0,0,0,.18); } .ov-empty-h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 400; line-height: 1.25; letter-spacing: -.3px; margin: 0 0 18px; color: var(--text); text-wrap: balance; } /* v0.14.17 — input row split en 2 wrappers para mobile responsive */ .ov-empty-input-row { display: flex; align-items: stretch; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px 4px 4px 14px; transition: border-color .15s, box-shadow .15s; } .ov-empty-input-row:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent); } .ov-empty-input-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .ov-empty-controls-wrapper { flex: 0 0 auto; display: flex; align-items: stretch; gap: 8px; } .ov-empty-input-icon { font-size: .9rem; opacity: .7; flex-shrink: 0; } .ov-empty-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-family: var(--font-body); font-size: .95rem; padding: 12px 0; } .ov-empty-input::placeholder { color: var(--text3); font-family: var(--font-mono); font-size: .82rem; } .ov-empty-lang { flex: 0 0 auto; background: var(--surf); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font-body); font-size: .8rem; padding: 8px 10px; outline: none; } .ov-empty-btn { flex: 0 0 auto; padding: 12px 22px; border-radius: 10px; background: var(--brand-cta); color: #fff; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: .9rem; box-shadow: 0 4px 0 var(--brand-800), 0 6px 20px color-mix(in srgb, var(--brand-500) 30%, transparent); transition: transform .12s, box-shadow .15s, background .15s, opacity .15s; } .ov-empty-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--brand-800); box-shadow: 0 5px 0 var(--brand-800), 0 8px 26px color-mix(in srgb, var(--brand-500) 18%, transparent); } .ov-empty-btn:active:not(:disabled) { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } .ov-empty-btn:disabled { opacity: .65; cursor: default; } .ov-empty-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; margin-top: 12px; background: color-mix(in srgb, var(--brand-500) 6%, transparent); border: 1px solid color-mix(in srgb, var(--brand-500) 20%, transparent); font-size: .85rem; color: var(--text-secondary); } .ov-empty-status.is-error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger-fg); } .ov-empty-status.is-ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 25%, transparent); color: var(--success-fg); } .ov-empty-status .panel-transc-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand-500) 30%, transparent); border-top-color: var(--brand-500); animation: ovSpin .7s linear infinite; flex-shrink: 0; } @keyframes ovSpin { to { transform: rotate(360deg); } } .ov-empty-example { display: inline-block; margin-top: 14px; background: none; border: 0; padding: 0; color: color-mix(in srgb, var(--brand-500) 85%, transparent); font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer; transition: color .15s; } .ov-empty-example:hover { color: var(--brand-500); text-decoration: underline; } /* v0.14.17 — mobile: input fila completa arriba, controls debajo */ @media (max-width: 640px) { .ov-empty-input-row { flex-direction: column; gap: 12px; padding: 12px; align-items: stretch; } .ov-empty-input-wrap { width: 100%; order: 1; } .ov-empty-controls-wrapper { width: 100%; order: 2; } .ov-empty-input-row .ov-empty-input { padding: 6px 0; font-size: 1rem; } .ov-empty-input-row .ov-empty-lang { flex: 0 0 auto; min-width: 110px; } .ov-empty-input-row .ov-empty-btn { flex: 1; min-height: 48px; } } /* v0.14.23 BUG 1 — hero F1 Estado 1 mobile: input fila 1 / select+btn fila 2 */ @media (max-width: 640px) { .ov-hero-input-row { flex-direction: column; gap: 10px; align-items: stretch; flex-wrap: nowrap; } .ov-hero-input-wrap { width: 100%; min-width: 0; order: 1; } .ov-hero-controls-wrapper { width: 100%; order: 2; } .ov-hero-input-row .ov-empty-lang { flex: 0 0 auto; min-width: 110px; } .ov-hero-input-row .ov-empty-btn { flex: 1; min-height: 48px; } } /* v0.14.40: reglas .ov-card-f2/.ov-card-f3 eliminadas (cards retiradas). */ /* Locked rows */ .ov-empty-row2, .ov-empty-row6 { display: grid; gap: 12px; } .ov-empty-row2 { grid-template-columns: 1fr 1fr; } .ov-empty-row6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 880px) { .ov-empty-row2 { grid-template-columns: 1fr; } .ov-empty-row6 { grid-template-columns: repeat(3, 1fr); gap: 8px; } } @media (max-width: 480px) { .ov-empty-row6 { grid-template-columns: repeat(2, 1fr); } } .ov-empty-locked { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text-primary) 2%, transparent); border: 1px solid var(--border-subtle); cursor: not-allowed; text-align: left; font-family: var(--font-body); transition: opacity .2s, border-color .2s; } .ov-locked-md { opacity: .42; min-height: 110px; padding: 18px 18px 16px; } .ov-locked-sm { opacity: .32; align-items: center; flex-direction: column; min-height: 80px; padding: 14px 8px 12px; gap: 6px; font-size: .78rem; color: var(--text2); } .ov-empty-locked:hover { opacity: .55; border-color: rgba(var(--ov-acc, 79,124,255), .25); } .ov-locked-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .ov-locked-badge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); background: var(--border-subtle); border: 1px solid var(--border-default); padding: 3px 8px; border-radius: 999px; } .ov-locked-hooks { width: 36px; height: 36px; opacity: .85; flex-shrink: 0; } .ov-locked-hooks-sm { width: 26px; height: 26px; opacity: .7; } .ov-locked-label { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--text-primary); } .ov-locked-sub { font-size: var(--text-xs); color: var(--text-tertiary); } /* v0.14.16 — mockups internos en cards locked Hazlo tuyo + Métricas */ .ov-mock-adapt, .ov-mock-metrics { margin-top: 12px; padding: 10px 12px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } /* Hazlo tuyo mockup */ .ov-mock-adapt { display: flex; flex-direction: column; gap: 6px; } .ov-mock-box { background: color-mix(in srgb, var(--text-primary) 4%, transparent); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; } [data-theme="light"] .ov-mock-box { background: rgba(255,255,255,.7); } .ov-mock-box-orig { border-left: 2px solid var(--border-strong); } .ov-mock-box-out { border-left: 2px solid rgba(var(--ov-acc, 192,132,252), .65); } .ov-mock-box-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; color: var(--text3); text-transform: uppercase; margin-bottom: 3px; } .ov-mock-box-text { font-size: .72rem; line-height: 1.4; color: var(--text2); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ov-mock-arrow { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); padding: 2px 8px; border: 1px dashed rgba(var(--ov-acc, 192,132,252), .35); border-radius: 999px; } .ov-mock-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .ov-mock-pill { font-family: var(--font-body); font-size: .58rem; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(var(--ov-acc, 192,132,252), .12); color: rgba(var(--ov-acc, 192,132,252), 1); border: 1px solid rgba(var(--ov-acc, 192,132,252), .22); } /* Métricas mockup */ .ov-mock-metrics { display: flex; flex-direction: column; gap: 6px; } .ov-mock-metrics-row { display: flex; align-items: baseline; gap: 10px; } .ov-mock-metrics-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .ov-mock-metrics-meta { display: flex; flex-direction: column; gap: 2px; } .ov-mock-metrics-lbl { font-size: .58rem; color: var(--text3); letter-spacing: .04em; text-transform: uppercase; } .ov-mock-metrics-up { font-size: .68rem; font-weight: 700; color: var(--success-fg); font-variant-numeric: tabular-nums; } .ov-mock-spark { width: 100%; height: 36px; display: block; } .ov-mock-metrics-foot { font-size: .62rem; color: var(--text3); line-height: 1.3; font-family: var(--font-mono); } /* Mobile: ocultar mockup interno (caben mal en cards <540px) */ @media (max-width: 540px) { .ov-mock-adapt, .ov-mock-metrics { display: none; } } /* First-success modal */ .first-success-icon { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--success) 15%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); color: #4ade80; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .first-success-title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.25; text-align: center; margin: 0 0 14px; color: var(--text); } .first-success-preview { background: var(--surf2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; font-family: var(--font-body); font-size: .88rem; line-height: 1.55; color: var(--text2); font-style: italic; max-height: 110px; overflow: hidden; } .first-success-cta-row { display: flex; gap: 10px; flex-wrap: wrap; } .first-success-cta-primary { flex: 1 1 auto; padding: 13px 18px; border-radius: 12px; background: var(--brand-cta); color: #fff; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: .92rem; box-shadow: 0 4px 0 var(--brand-800), 0 6px 20px rgba(79,124,255,.3); transition: transform .12s, box-shadow .15s, background .15s; } .first-success-cta-primary:hover { transform: translateY(-1px); background: var(--brand-800); } .first-success-cta-secondary { flex: 0 1 auto; padding: 13px 18px; border-radius: 12px; background: transparent; color: var(--text); border: 1px solid var(--border); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: .9rem; transition: border-color .15s, color .15s; } .first-success-cta-secondary:hover { border-color: var(--brand-500); color: var(--brand-500); } /* v0.14.37: skeleton loaders unificados (pulse). Aplicados a listados workspace. */ @keyframes skelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .skel { background: rgba(255,255,255,.04); border-radius: 6px; animation: skelPulse 1.4s ease-in-out infinite; } [data-theme="light"] .skel { background: rgba(0,0,0,.04); } .skel-line { height: 12px; } .skel-circle { border-radius: 50%; } .skel-thumb { aspect-ratio: 9 / 16; } .skel-button { height: 36px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: .7; } } /* v0.14.37: .ov-skel refactorizado a pulse uniforme (era shimmer ovSkelShine). */ .ov-skel { height: 12px; border-radius: 4px; background: rgba(255,255,255,.04); animation: skelPulse 1.4s ease-in-out infinite; } [data-theme="light"] .ov-skel { background: rgba(0,0,0,.04); } @media (prefers-reduced-motion: reduce) { .ov-skel { animation: none; opacity: .7; } } /* v0.14.37: skeleton cards específicas por panel (match estructura real, evita layout shift). */ .trans-skel-card { display: flex; gap: 16px; padding: 22px 24px; background: var(--surf); border: 1px solid var(--border); border-radius: 14px; margin-bottom: var(--space-md); } .trans-skel-body { flex: 1; min-width: 0; } .scr-skel-card { padding: 22px 24px 20px; background: var(--surf); border: 1px solid var(--border); border-radius: 16px; margin-bottom: var(--space-md); } .scr-skel-card .skel-meta-row { display: flex; gap: 12px; margin-top: 10px; } .ideas-skel-card { padding: var(--space-5); background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius-xl); margin-bottom: var(--space-md); } .proj-skel-card { padding: 22px 22px 20px; background: var(--surf); border: 1px solid var(--border); border-radius: 16px; } .proj-skel-card .skel-stats-row { display: flex; gap: 10px; margin-top: 20px; } .asst-skel-card { padding: 20px; background: var(--surf); border: 1px solid var(--border); border-radius: 14px; } .asst-skel-card .asst-skel-header { display: flex; gap: 12px; align-items: center; } .asst-skel-card .asst-skel-name { flex: 1; } /* Widget specific bits */ .ov-thumb-row { display: flex; gap: 10px; align-items: flex-start; } .ov-thumb-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surf2); border: 1px solid var(--border); } .ov-thumb-text { flex: 1; min-width: 0; } .ov-thumb-title { font-size: .82rem; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ov-thumb-time { font-family: var(--font-mono); font-size: .66rem; color: var(--text3); margin-top: 4px; } .ov-line { font-size: .82rem; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ov-line.italic { font-style: italic; font-family: var(--font-display); font-size: .92rem; } .ov-mini-prefix { font-family: var(--font-mono); font-size: .64rem; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; } .ov-status { display: inline-block; margin-top: 6px; font-size: .58rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; } .ov-status.s-draft { background: rgba(148,163,184,.15); color: #cbd5e1; border: 1px solid rgba(148,163,184,.3); } .ov-status.s-developed { background: rgba(34,197,94,.14); color: #4ade80; border: 1px solid rgba(34,197,94,.3); } .ov-status.s-scripted { background: rgba(125,91,184,.14); color: #a78bfa; border: 1px solid rgba(125,91,184,.3); } .ov-proj-list { display: flex; flex-direction: column; gap: 6px; } .ov-proj-row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text); } .ov-proj-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.25); } .ov-proj-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-proj-more { font-size: .7rem; color: var(--text3); margin-top: 4px; } .ov-spark-wrap { display: flex; flex-direction: column; gap: 6px; } .ov-spark { width: 100%; height: 40px; } .ov-spark polyline { stroke: rgb(var(--ov-acc)); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ov-spark-fill { fill: rgba(var(--ov-acc), .12); } .ov-spark-meta { display: flex; align-items: baseline; gap: 6px; } .ov-spark-num { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; } .ov-spark-lbl { font-size: .72rem; color: var(--text3); } .ov-cta-inline { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: rgb(var(--ov-acc)); font-weight: 600; margin-top: 4px; } .ov-team-stack { display: flex; align-items: center; gap: 0; margin-bottom: 4px; } .ov-team-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, var(--brand-500)); border: 2px solid var(--surf); margin-left: -8px; } .ov-team-av:first-child { margin-left: 0; } .ov-team-more { width: 32px; height: 32px; border-radius: 50%; background: var(--surf2); border: 2px solid var(--surf); display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: var(--text2); margin-left: -8px; } .ov-pending-pill { display: inline-block; margin-top: 2px; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(79,124,255,.14); color: var(--brand-300); border: 1px solid rgba(79,124,255,.3); } /* Stats cards */ .prof-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } .prof-stat-card { background: var(--surf); position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; align-items: flex-start; gap: 14px; transition: all .2s; overflow: hidden; box-shadow: 0 4px 0 rgba(255,255,255,.04); transform: translateY(0); } .prof-stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--stat-accent, var(--brand)); opacity: .7; } .prof-stat-card:hover { border-color: var(--stat-accent, var(--brand)); transform: translateY(-2px); box-shadow: 0 6px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.15); } [data-theme="light"] .prof-stat-card { box-shadow: 0 4px 0 rgba(0,0,0,.04); } [data-theme="light"] .prof-stat-card:hover { box-shadow: 0 6px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); } .prof-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .prof-stat-icon.orange { background: rgba(79,124,255,.1); color: var(--brand-500); } .prof-stat-icon.purple { background: rgba(167,139,250,.1); color: #a78bfa; } .prof-stat-icon.green { background: rgba(34,197,94,.1); color: #22c55e; } .prof-stat-val { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; line-height: 1; margin-bottom: 4px; } .prof-stat-label { font-size: .68rem; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; } /* Script cards with color stripe */ .script-stripe-card { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; transition: all .2s; margin-bottom: 10px; box-shadow: 0 3px 0 rgba(255,255,255,.04); transform: translateY(0); } .script-stripe-card:hover { border-color: rgba(79,124,255,.15); transform: translateY(-1px); box-shadow: 0 5px 0 rgba(255,255,255,.04); } [data-theme="light"] .script-stripe-card { box-shadow: 0 3px 0 rgba(0,0,0,.04); } [data-theme="light"] .script-stripe-card:hover { box-shadow: 0 5px 0 rgba(0,0,0,.04); } .script-stripe { width: 4px; flex-shrink: 0; } .script-stripe-body { padding: 14px 18px; flex: 1; min-width: 0; } .script-stripe-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .script-stripe-title { font-family: var(--font-display); font-size: .92rem; font-weight: 400; } .script-stripe-preview { font-size: .82rem; color: var(--text2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .script-stripe-footer { display: flex; gap: 8px; margin-top: 10px; align-items: center; } .script-stripe-badge { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 4px; font-weight: 600; } /* Project cards grid */ .proj-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } /* Assistant cards in profile */ .asst-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); } .asst-card-v2 { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 20px; position: relative; transition: all .18s; box-shadow: 0 4px 0 var(--border-subtle); transform: translateY(0); } .asst-card-v2:hover { border-color: color-mix(in srgb, var(--brand-500) 20%, transparent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); } [data-theme="light"] .asst-card-v2 { box-shadow: 0 4px 0 rgba(0,0,0,.04); } [data-theme="light"] .asst-card-v2:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); } .asst-card-v2.is-default { border-color: var(--brand); box-shadow: 0 0 20px color-mix(in srgb, var(--brand-500) 10%, transparent); } .asst-card-v2-default-badge { position: absolute; top: -9px; left: 16px; background: var(--brand); color: #fff; font-size: .6rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; letter-spacing: .05em; } .asst-card-v2-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .asst-card-v2-head img { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); } .asst-card-v2-name { font-family: var(--font-display); font-size: .92rem; } .asst-card-v2-sub { font-size: .68rem; color: var(--text-tertiary); } .asst-card-v2-preview { font-size: .78rem; color: var(--text2); font-style: italic; line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .asst-card-v2-acts { display: flex; gap: 6px; } /* Section headers in main content */ .prof-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); } .prof-section-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; } .prof-section-sub { font-size: .82rem; color: var(--text3); margin-top: 2px; } /* v0.14.33.a: tagline neutra bajo el H1 de cada panel. Clase NUEVA para no chocar con .prof-section-sub que ya usaba #profAsstCount (count pequeño/muted). */ .prof-section-tagline { font-family: var(--font-body); font-size: 0.92rem; color: var(--text2); margin-top: 6px; font-weight: 400; } /* v0.14.41: mascota Hooks junto al título de panel (Scripts, Ideas, ...). */ .prof-section-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .prof-section-mascot { width: 32px; height: 32px; flex-shrink: 0; } /* v0.14.43: título + count pill (Asistentes). */ .prof-section-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .prof-section-count { font-size: .72rem; font-weight: 600; color: var(--text3); background: var(--surf2); padding: 2px 10px; border-radius: 20px; font-variant-numeric: tabular-nums; } /* v0.14.43: empty state genérico (mascota + título + sub + cta). Comparte .empty-cta. */ .prof-empty-mascot { width: 80px; height: 80px; image-rendering: pixelated; margin: 0 auto 16px; display: block; filter: drop-shadow(0 0 18px rgba(79, 124, 255, 0.22)); } /* Enhanced empty states */ .prof-empty { text-align: center; padding: 48px 24px; color: var(--text3); font-size: .88rem; } .prof-empty-icon { margin-bottom: 14px; opacity: .4; } /* v0.14.43: empty title/sub alineados con patrón v0.14.42 (Métricas empty). */ .prof-empty-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); margin-bottom: 8px; line-height: 1.2; letter-spacing: -.015em; } .prof-empty-sub { font-size: .92rem; color: var(--text2); line-height: 1.5; margin-bottom: 16px; max-width: 420px; margin-left: auto; margin-right: auto; } .prof-empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: var(--brand-cta); color: #fff; border: none; border-radius: var(--rsm); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .2s; box-shadow: 0 4px 0 #22357c; transform: translateY(0); } .prof-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #22357c; } .prof-empty-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #22357c; } /* DiceBear avatar in profile */ .prof-av { width: 72px; height: 72px; border-radius: 50%; background: var(--surf2); border: 2px solid rgba(79,124,255,.25); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; color: #fff; flex-shrink: 0; cursor: pointer; transition: border-color .2s, box-shadow .2s; overflow: hidden; position: relative; box-shadow: 0 0 20px rgba(79,124,255,.1), 0 0 40px rgba(79,124,255,.05); } .prof-av:hover { border-color: var(--brand); box-shadow: 0 0 24px rgba(79,124,255,.2), 0 0 48px rgba(79,124,255,.1); } .prof-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .prof-av-edit { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; font-size: .7rem; color: #fff; font-weight: 700; pointer-events: none; } .prof-av:hover .prof-av-edit { opacity: 1; } /* Avatar picker grid */ .avatar-picker { display: none; position: absolute; top: calc(100% + 10px); left: 0; background: var(--surf); border: 1px solid rgba(79,124,255,.15); border-radius: 14px; padding: 14px; z-index: 10; box-shadow: var(--sh-lg); animation: modal-in .15s ease; backdrop-filter: blur(16px); } .avatar-picker.on { display: block; } .avatar-picker-title { font-size: .72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .avatar-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .avatar-option { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: border-color .2s, transform .2s; overflow: hidden; background: var(--surf2); } .avatar-option img { width: 100%; height: 100%; object-fit: cover; } .avatar-option:hover { border-color: var(--brand); transform: scale(1.1); } .avatar-option.selected { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79,124,255,.3); } /* Plan badge */ .plan-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-family: var(--font-body); font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; } .plan-badge.free { background: rgba(148,163,184,.15); color: var(--text3); border: 1px solid var(--border); } .plan-badge.pro { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); } .plan-badge.creator { background: rgba(79,124,255,.15); color: var(--brand-200); border: 1px solid rgba(79,124,255,.3); } .plan-badge.agency { background: rgba(167,139,250,.15); color: #a78bfa; border: 1px solid rgba(167,139,250,.3); } /* Usage bar */ .usage-bar-wrap { margin-top: 10px; } .usage-bar-label { font-size: .75rem; color: var(--text3); margin-bottom: 5px; display: flex; justify-content: space-between; } .usage-bar-track { height: 4px; background: var(--border); border-radius: 3px; overflow: hidden; } .usage-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--pink)); transition: width .4s ease; } .prof-list { display: flex; flex-direction: column; gap: 8px; } .prof-card { padding: 16px 18px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 14px; transition: all .2s; min-width: 0; box-sizing: border-box; box-shadow: 0 3px 0 var(--border-subtle); transform: translateY(0); } .prof-card:hover { border-color: color-mix(in srgb, var(--brand-500) 20%, transparent); transform: translateY(-1px); box-shadow: 0 5px 0 var(--border-subtle), 0 0 16px color-mix(in srgb, var(--brand-500) 5%, transparent); } [data-theme="light"] .prof-card { box-shadow: 0 3px 0 rgba(0,0,0,.04); } [data-theme="light"] .prof-card:hover { box-shadow: 0 5px 0 rgba(0,0,0,.04), 0 0 16px color-mix(in srgb, var(--brand-500) 4%, transparent); } .prof-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .prof-card-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--brand-500) 15%, transparent); color: var(--brand); } .prof-card-date { font-size: .72rem; color: var(--text3); margin-left: auto; } .prof-card-text { font-size: .88rem; line-height: 1.6; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .prof-card-text:hover { color: var(--text); } .prof-card-acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .prof-card-acts button { padding: 5px 12px; border: 1px solid var(--border); background: none; border-radius: 7px; font-size: .72rem; font-weight: 600; color: var(--text3); cursor: pointer; transition: all .2s; font-family: var(--font-body); } .prof-card-acts button { box-shadow: 0 2px 0 var(--border-subtle); transform: translateY(0); transition: transform .1s, box-shadow .1s, border-color .2s, color .2s; } .prof-card-acts button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border-subtle); } [data-theme="light"] .prof-card-acts button { box-shadow: 0 2px 0 rgba(0,0,0,.1); } [data-theme="light"] .prof-card-acts button:active { box-shadow: 0 0 0 rgba(0,0,0,.1); } .prof-card-acts button:hover { border-color: var(--text2); color: var(--text2); } .prof-card-acts button.del:hover { border-color: var(--danger-fg); color: var(--danger-fg); } @media (max-width: 640px) { .prof-card-acts button.mob-hide { display: none; } .prof-card-acts .btn-more-acts { display: inline-flex; } } @media (min-width: 641px) { .prof-card-acts .btn-more-acts { display: none; } } /* Card actions bottom sheet */ #cardActionsSheet { position: fixed; inset: 0; z-index: 600; display: none; } #cardActionsSheet.on { display: flex; flex-direction: column; justify-content: flex-end; } .cas-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .cas-panel { position: relative; z-index: 1; background: var(--bg); border-radius: 20px 20px 0 0; padding: 12px 16px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s ease-out; max-height: 70vh; overflow-y: auto; } #cardActionsSheet.on .cas-panel { transform: translateY(0); } .cas-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 12px; } .cas-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: none; border-radius: 12px; font-size: .9rem; font-weight: 500; color: var(--text); cursor: pointer; font-family: var(--font-body); transition: background .12s; } .cas-btn:hover, .cas-btn:active { background: rgba(255,255,255,.06); } .cas-btn.danger { color: #f87171; } .prof-empty { text-align: center; padding: 40px 20px; color: var(--text3); font-size: .9rem; } .prof-empty-icon { font-size: 2rem; margin-bottom: 8px; } /* ── Project detail view ───────────────────────────── */ .proj-detail-overlay { position: fixed; inset: 0; background: #0a0b0f; z-index: 310; overflow-y: auto; display: none; background-image: radial-gradient(ellipse at 15% -5%, rgba(79,124,255,.09) 0%, transparent 45%), radial-gradient(ellipse at 85% 95%, rgba(139,92,246,.06) 0%, transparent 45%), radial-gradient(ellipse at 50% 40%, rgba(79,124,255,.03) 0%, transparent 50%); } .proj-detail-overlay.on { display: block; } .proj-detail-inner { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; } .proj-detail-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .proj-detail-back { background: none; border: 1px solid var(--border); color: var(--text2); padding: 6px 12px; border-radius: var(--rsm); cursor: pointer; font-size: .85rem; } .proj-detail-back:hover { border-color: var(--brand); color: var(--text); } .proj-detail-name { font-size: 1.3rem; font-weight: 900; color: var(--text); background: none; border: none; border-bottom: 2px solid transparent; outline: none; flex: 1; min-width: 0; } .proj-detail-name:focus { border-bottom-color: var(--brand); } .proj-detail-del { background: none; border: 1px solid rgba(239,68,68,.3); color: #f87171; padding: 6px 14px; border-radius: var(--rsm); cursor: pointer; font-size: .8rem; } .proj-detail-del:hover { background: rgba(239,68,68,.1); } .proj-detail-style { margin-bottom: 20px; } .proj-detail-style label { font-size: .78rem; color: var(--text3); font-weight: 600; display: block; margin-bottom: 6px; } .proj-detail-style textarea { width: 100%; padding: 10px 14px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-size: .85rem; resize: vertical; min-height: 60px; outline: none; } .proj-detail-style textarea:focus { border-color: var(--brand); } .proj-detail-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .proj-detail-toolbar select { padding: 7px 12px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-size: .8rem; outline: none; } .proj-detail-toolbar .count { font-size: .8rem; color: var(--text3); margin-left: auto; } /* Script cards in project */ .script-grid { display: flex; flex-direction: column; gap: 12px; } .script-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color .2s; } .script-card:hover { border-color: rgba(79,124,255,.3); } .script-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; } .script-card-title { flex: 1; font-weight: 700; font-size: .9rem; color: var(--text); } .script-card-date { font-size: .72rem; color: var(--text3); } .script-card-toggle { color: var(--text3); font-size: .7rem; transition: transform .2s; } .script-card.collapsed .script-card-toggle { transform: rotate(-90deg); } .script-card-preview { padding: 0 16px 12px; font-size: .82rem; color: var(--text2); line-height: 1.5; white-space: pre-wrap; } .script-card.collapsed .script-card-preview, .script-card.collapsed .script-card-perf, .script-card.collapsed .script-card-acts { display: none; } .script-card-perf { padding: 0 16px 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .script-card-perf .perf-field { display: flex; flex-direction: column; gap: 3px; } .script-card-perf .perf-field label { font-size: .68rem; color: var(--text3); font-weight: 600; } .script-card-perf .perf-field input, .script-card-perf .perf-field textarea { padding: 6px 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: .8rem; outline: none; } .script-card-perf .perf-field input { width: 90px; } .script-card-perf .perf-field textarea { width: 220px; min-height: 40px; resize: vertical; } .script-card-perf .perf-field input:focus, .script-card-perf .perf-field textarea:focus { border-color: var(--brand); } .perf-save { padding: 5px 12px; background: var(--grad); border: none; color: #fff; border-radius: 4px; font-size: .75rem; font-weight: 700; cursor: pointer; } .script-card-acts { padding: 0 16px 14px; display: flex; gap: 6px; } /* Inline title editing */ .script-card-title-edit { font-family: var(--font-display); font-size: .9rem; font-weight: 400; background: none; border: none; border-bottom: 1px solid transparent; color: var(--text); outline: none; flex: 1; min-width: 0; padding: 2px 0; transition: border-color .2s; } .script-card-title-edit:focus { border-bottom-color: var(--brand); } /* Script editor textarea */ .script-editor-ta { width: 100%; min-height: 200px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: var(--font-body); font-size: .88rem; line-height: 1.7; resize: vertical; outline: none; transition: border-color .2s; } .script-editor-ta:focus { border-color: var(--brand); } .script-card-editor { padding: 0 16px 12px; } .script-editor-bar { display: flex; gap: 8px; margin-top: 8px; align-items: center; } .script-editor-status { font-size: .75rem; color: var(--green); margin-left: auto; } /* Script metrics */ .script-card-text { padding: 0 16px 12px; font-size: .84rem; color: var(--text2); line-height: 1.6; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; transition: all .2s; } .script-card-text:hover { color: var(--text); } .script-card-text.expanded { -webkit-line-clamp: unset !important; max-height: none; } .script-metrics-chips { padding: 0 16px 10px; display: flex; gap: 8px; flex-wrap: wrap; cursor: pointer; } .metric-chip { font-size: .72rem; padding: 3px 8px; border-radius: 6px; background: var(--surf2); color: var(--text2); border: 1px solid var(--border); } .script-metrics-panel { padding: 0 16px 14px; } .metrics-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .metric-field label { display: block; font-size: .65rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; } .metric-field input, .metric-field textarea { width: 100%; padding: 7px 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: .82rem; outline: none; font-family: var(--font-body); } .metric-field input:focus, .metric-field textarea:focus { border-color: var(--brand); } .metric-field textarea { resize: vertical; min-height: 40px; } /* v0.14.42: ig-link-box rediseñado con mascota + microcopy cálido. */ .ig-link-box { max-width: 480px; margin: var(--space-2xl) auto; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .ig-link-mascot { width: 80px; height: 80px; image-rendering: pixelated; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--success) 20%, transparent)); } .ig-link-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); line-height: 1.2; letter-spacing: -.015em; } .ig-link-desc { font-size: .95rem; color: var(--text2); line-height: 1.5; max-width: 380px; } .ig-link-box input { width: 100%; max-width: 320px; padding: 14px 16px; background: var(--surf2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 1rem; font-family: var(--font-body); outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .ig-link-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent); } .ig-link-cta { background: var(--brand-cta); color: #fff; border: 0; padding: 14px 28px; border-radius: 12px; font-size: 1rem; font-weight: 700; font-family: var(--font-body); cursor: pointer; transition: background .15s, transform .12s; } .ig-link-cta:hover:not(:disabled) { background: var(--brand-800); transform: translateY(-1px); } .ig-link-cta:active:not(:disabled) { transform: scale(.98); } .ig-link-cta:disabled { opacity: .65; cursor: default; } .ig-link-disclaimer { font-size: .78rem; color: var(--text3); margin-top: var(--space-sm); } /* v0.14.42: skeleton específicos del panel Métricas. Heredan animación de .skel. */ .ig-skel-stat { height: 80px; border-radius: 12px; } .ig-skel-chart { height: 260px; border-radius: 12px; } .ig-skel-card { height: 200px; border-radius: 12px; } @media (max-width: 640px) { .ig-skel-chart { height: 180px; } } .ig-linked-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .ig-linked-user { font-family: var(--font-display); font-size: 1.1rem; } .ig-linked-actions { display: flex; gap: 8px; margin-left: auto; } .ig-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; transition: grid-template-columns .2s; } .ig-stat-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; padding: 14px; text-align: center; position: relative; overflow: hidden; } .ig-stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--stat-accent, var(--brand)); border-radius: 12px 12px 0 0; } .ig-stat-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; color: var(--text); } .ig-stat-label { font-size: .7rem; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; } .ig-best-reel { font-size: .78rem; color: var(--text2); margin-bottom: 18px; padding: 10px 14px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 10px; display: flex; align-items: center; gap: 8px; } .ig-best-reel a { color: var(--brand); text-decoration: none; } .ig-best-reel a:hover { text-decoration: underline; } .ig-sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .ig-sort-btn { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surf); color: var(--text2); font-size: .75rem; cursor: pointer; transition: all .15s; font-family: var(--font-body); } .ig-sort-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); } .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .ig-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; transition: border-color .2s; } .ig-card:hover { border-color: color-mix(in srgb, var(--brand-500) 30%, transparent); } .ig-card-thumb { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--surf2); max-height: 200px; border-radius: 12px 12px 0 0; } .ig-thumb-placeholder { width: 100%; aspect-ratio: 4/5; max-height: 200px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 15%, transparent), color-mix(in srgb, var(--brand-500) 5%, transparent)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text3); opacity: .5; border-radius: 12px 12px 0 0; } .ig-card-overlay { position: absolute; inset: 0; border-radius: 12px 12px 0 0; background: linear-gradient(transparent 70%, rgba(0,0,0,.3)); pointer-events: none; } .ig-card-body { padding: 12px 14px; } .ig-card-caption { font-size: .78rem; color: var(--text); line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; min-height: 2.1em; } .ig-card-stats { display: flex; gap: 12px; font-size: .72rem; color: var(--text3); margin-bottom: 10px; } .ig-card-stats span { display: flex; align-items: center; gap: 3px; } .ig-card-actions { display: flex; gap: 6px; } .ig-card-btn { flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surf); color: var(--text2); font-size: .74rem; cursor: pointer; transition: all .15s; font-family: var(--font-body); } .ig-card-btn:hover { border-color: var(--brand); color: var(--brand); } .ig-card-btn.primary { background: var(--brand-cta); color: #fff; border-color: var(--brand-cta); } .ig-card-btn.primary:hover { opacity: .85; } .ig-card-transcript { margin-top: 10px; padding: 10px 12px; background: var(--surf2); border-radius: 8px; font-size: .78rem; color: var(--text2); line-height: 1.5; max-height: 120px; overflow-y: auto; white-space: pre-wrap; } .ig-tag-btn { height: 24px; border-radius: 6px; border: none; background: var(--surf2); color: var(--text2); font-size: .65rem; cursor: pointer; padding: 0 8px; display: inline-flex; align-items: center; gap: 3px; transition: all .15s; } .ig-tag-btn:hover { border-color: var(--brand); } .ig-delete-btn { width: 26px; height: 26px; border-radius: 6px; border: none; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); color: #fff; font-size: .7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, transform .15s; z-index: 2; } .ig-card:hover .ig-delete-btn { opacity: 1; } .ig-delete-btn:hover { background: color-mix(in srgb, var(--danger) 80%, transparent); transform: scale(1.1); } .ig-tag-picker { position: absolute; top: 100%; left: 0; z-index: 10; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; width: 240px; box-shadow: 0 6px 24px rgba(0,0,0,.22); margin-top: 4px; } .ig-tag-opt { padding: 7px 12px; border-radius: 8px; border: 1.5px solid transparent; background: var(--surf2); font-size: .75rem; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .15s; color: var(--text2); box-shadow: 0 1px 3px rgba(0,0,0,.06); } .ig-tag-opt:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.1); } .ig-tag-opt:active { transform: translateY(0); } .ig-tag-opt.on { border-color: var(--brand); background: rgba(168,85,247,.1); box-shadow: 0 1px 4px rgba(168,85,247,.2); } .ig-perf-badge { border-radius: 4px; font-size: .6rem; font-weight: 700; padding: 2px 8px; letter-spacing: .03em; text-transform: uppercase; display: inline-block; } .ig-badges-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .ig-chart-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; } .ig-chart-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surf); color: var(--text2); font-size: .72rem; cursor: pointer; transition: all .15s; font-family: var(--font-body); } .ig-chart-tab.on { background: var(--brand); color: #fff; border-color: var(--brand); } .ig-filter-bar { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; } .ig-filter-chip { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--surf); color: var(--text3); font-size: .68rem; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 3px; } .ig-filter-chip:hover { border-color: var(--brand); } .ig-filter-chip.on { border-color: var(--brand); color: var(--brand); background: rgba(168,85,247,.08); } .ig-detail-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fadeIn .2s ease; } .ig-detail-modal { background: var(--surf); border: 1px solid var(--border); border-radius: 16px; max-width: 520px; width: 92vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.25); animation: slideUp .25s ease; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } .ig-detail-header { position: relative; overflow: hidden; border-radius: 16px 16px 0 0; } .ig-detail-header img { width: 100%; max-height: 280px; object-fit: cover; display: block; } .ig-detail-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .ig-detail-close:hover { background: rgba(0,0,0,.7); } .ig-detail-body { padding: 20px; } .ig-detail-caption { font-size: .88rem; color: var(--text); line-height: 1.5; margin-bottom: 16px; white-space: pre-wrap; } .ig-detail-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .ig-detail-metric { background: var(--surf2); border-radius: 10px; padding: 12px; text-align: center; } .ig-detail-metric-val { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; } .ig-detail-metric-label { font-size: .65rem; color: var(--text3); text-transform: uppercase; letter-spacing: .03em; } .ig-detail-transcript { background: var(--surf2); border-radius: 10px; padding: 14px; font-size: .82rem; color: var(--text2); line-height: 1.6; max-height: 200px; overflow-y: auto; white-space: pre-wrap; } .ig-detail-actions { display: flex; gap: 8px; margin-top: 14px; } .ig-detail-actions .ig-card-btn { flex: 1; padding: 12px 16px; font-size: .85rem; font-weight: 600; border-radius: 10px; } .ig-save-btn { width: 100%; padding: 14px 20px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--brand), #7c3aed); color: #fff; font-size: .9rem; font-weight: 700; font-family: var(--font-display); cursor: pointer; transition: all .2s; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(168,85,247,.3), 0 2px 4px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; gap: 8px; } .ig-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(168,85,247,.4), 0 3px 6px rgba(0,0,0,.12); } .ig-save-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(168,85,247,.2); } .ig-save-btn.saved { background: linear-gradient(135deg, var(--success), #16a34a); box-shadow: 0 4px 12px rgba(34,197,94,.3); } .ig-save-btn:disabled { opacity: .6; cursor: default; transform: none; } .ig-manual-section { border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 12px; } .ig-manual-label { font-size: .68rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; } .ig-manual-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .ig-manual-field { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--text2); } .ig-manual-field label { font-size: .7rem; color: var(--text3); white-space: nowrap; } .ig-manual-input { width: 70px; padding: 8px 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: .85rem; font-family: var(--font-display); outline: none; text-align: center; transition: border-color .15s, box-shadow .15s; } .ig-manual-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(168,85,247,.1); } .ig-manual-input.wide { width: 90px; } .ig-retention-widget { display: flex; flex-direction: column; gap: 8px; width: 100%; } .ig-ret-display { display: flex; align-items: center; gap: 10px; } .ig-ret-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text); min-width: 50px; text-align: center; line-height: 1; } .ig-ret-val small { font-size: .65rem; font-weight: 400; color: var(--text3); } .ig-ret-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: var(--surf2); border-radius: 3px; outline: none; cursor: pointer; } .ig-ret-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); cursor: grab; border: 2px solid var(--surf); box-shadow: 0 1px 4px rgba(0,0,0,.25); } .ig-ret-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); cursor: grab; border: 2px solid var(--surf); box-shadow: 0 1px 4px rgba(0,0,0,.25); } .ig-ret-presets { display: flex; gap: 4px; flex-wrap: wrap; } .ig-ret-preset { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surf); color: var(--text2); font-size: .75rem; cursor: pointer; transition: all .15s; font-family: var(--font-display); box-shadow: 0 1px 3px rgba(0,0,0,.06); } .ig-ret-preset:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .ig-ret-preset:active { transform: translateY(0); } .ig-ret-preset.on { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 2px 6px rgba(168,85,247,.25); } .ig-manual-check { color: var(--success); font-size: .7rem; opacity: 0; transition: opacity .3s; } .ig-manual-check.show { opacity: 1; } .ig-manual-note { width: 100%; padding: 8px 10px; background: var(--surf2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font-body); font-size: .78rem; line-height: 1.4; resize: none; outline: none; min-height: 28px; max-height: 100px; transition: min-height .2s, border-color .15s; box-sizing: border-box; } .ig-manual-note:focus { border-color: var(--brand); min-height: 60px; } .ig-manual-hint { font-size: .65rem; color: var(--text3); margin-top: 8px; padding: 8px 10px; background: var(--surf2); border-radius: 6px; display: flex; align-items: start; gap: 6px; line-height: 1.4; } .ig-manual-hint-x { background: none; border: none; color: var(--text3); cursor: pointer; font-size: .7rem; padding: 0; margin-left: auto; flex-shrink: 0; } @media (max-width: 768px) { /* Prevent overflow on metrics panel */ #profPanelMetrics { max-width: 100%; overflow-x: hidden; box-sizing: border-box; } /* 1. Stats header — 3×2 grid, ultra-compact */ .ig-stats-row { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; } .ig-stat-card { padding: 8px 6px; border-radius: 8px; } .ig-stat-val { font-size: .95rem; } .ig-stat-label { font-size: .55rem; } /* 2. Chart — scrollable container */ .ig-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 3. Scale tabs — second row */ .ig-chart-toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } .ig-chart-toolbar .ig-chart-tabs { margin-bottom: 0; } .ig-chart-toolbar .ig-chart-tab { padding: 4px 10px; font-size: .65rem; } .ig-chart-toolbar .ig-scale-group { margin-left: 0 !important; } .ig-chart-toolbar .ig-scale-group .ig-chart-tab { font-size: .6rem; padding: 3px 8px; } /* v0.14.22: 2-col en mobile, alineado con Dashboard */ .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ig-card { border-radius: 10px; } .ig-card-thumb { max-height: 220px; border-radius: 10px 10px 0 0; } .ig-thumb-placeholder { max-height: 220px; border-radius: 10px 10px 0 0; } .ig-card-overlay { border-radius: 10px 10px 0 0; } .ig-card-body { padding: 10px 12px; } .ig-card-caption { font-size: .78rem; -webkit-line-clamp: 2; min-height: 1em; margin-bottom: 6px; } .ig-card-stats { gap: 8px; font-size: .7rem; flex-wrap: wrap; margin-bottom: 6px; } .ig-card-actions { flex-direction: row; gap: 6px; } .ig-card-btn { font-size: .75rem; padding: 7px 10px; border-radius: 8px; } .ig-card .ig-badges-row { gap: 4px; margin-bottom: 6px; } /* 5. Filters — horizontal scroll */ .ig-filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; gap: 6px; scrollbar-width: none; } .ig-filter-bar::-webkit-scrollbar { display: none; } .ig-filter-chip { white-space: nowrap; flex-shrink: 0; font-size: .7rem; padding: 4px 10px; } /* 6. Top reel — truncate */ .ig-best-reel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; padding: 8px 10px; margin-bottom: 12px; } .ig-best-reel .ig-best-full { display: none; } .ig-best-reel .ig-best-short { display: inline; } /* Sort bar — horizontal scroll so "Ordenar por…" no se corta */ .ig-sort-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; margin-bottom: 10px; padding-bottom: 4px; scrollbar-width: none; } .ig-sort-bar::-webkit-scrollbar { display: none; } .ig-sort-btn { padding: 4px 10px; font-size: .7rem; white-space: nowrap; flex-shrink: 0; } /* Other */ .ig-linked-header { gap: 6px; margin-bottom: 12px; } .ig-linked-user { font-size: .9rem; } .ig-linked-actions { margin-left: 0; width: 100%; } .ig-linked-actions .ig-card-btn { flex: 1; text-align: center; font-size: .65rem; } .ig-link-box { padding: 20px 14px; margin: 16px auto; } #igAnalyzeBar { flex-direction: column; align-items: stretch; gap: 6px; } #igAnalyzeBar .ig-card-btn { width: 100%; font-size: .7rem; } #igAnalyzeBar select { width: 100%; font-size: .7rem; } .ig-delete-btn { opacity: 1; } .ig-detail-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; } .ig-detail-modal { max-width: 95vw; } } @media (min-width: 769px) { .ig-best-reel .ig-best-short { display: none; } .ig-best-reel .ig-best-full { display: inline; } } @media (max-width: 420px) { .ig-card-caption { -webkit-line-clamp: 2; min-height: 2em; } .ig-detail-metrics { grid-template-columns: repeat(2, 1fr); } } /* Idea cards */ .idea-card { background: var(--surf); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 10px; transition: border-color .2s; } .idea-card:hover { border-color: rgba(255,255,255,.12); } .idea-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .idea-card-cat { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 4px; background: rgba(79,124,255,.1); color: var(--brand); } .idea-card-title { font-family: var(--font-display); font-size: .95rem; flex: 1; } .idea-card-date { font-size: .72rem; color: var(--text3); } .idea-card-draft { font-size: .84rem; color: var(--text2); line-height: 1.6; margin-bottom: 12px; } .idea-card-draft strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .idea-card-acts { display: flex; gap: 6px; flex-wrap: wrap; } .idea-card-loading { text-align: center; padding: 24px; color: var(--text2); font-size: .85rem; } /* ── Ideas panel redesign (v0.14.0) ─────────────────────────── */ :root { --ideas-accent: #ff6b3d; --ideas-dev: #5dcaa5; --ideas-dev-soft: rgba(93, 202, 165, 0.12); --ideas-dev-border: rgba(93, 202, 165, 0.25); --ink-editorial: #f1ead9; --ink-muted: #8a7e72; --ink-cream: #c4b896; --ink-ghost: #6a6258; --ink-body: #d4c9a9; /* v0.14.44.d: subidos para superar --surf #1c1f29 (L=0.01388). Promedio del gradient L=0.01601 (+15% sobre --surf). Hue púrpura ~286-290° conservado. Restaura jerarquía: cards 'ricas' > cards planas. */ --ideas-card-top: #2d2532; --ideas-card-bot: #1e1923; /* v0.16.2: Fraunces y JetBrains Mono ya no se cargan (v0.16.1). --font-editorial cae a Instrument Serif vía --font-display. --font-mono usa la del design system base (ui-monospace fallback). */ --font-editorial: var(--font-display); } #profPanelIdeas { position: relative; } /* v0.14.32: Ideas hero decorativo eliminado (eyebrow, waves, h1 poético, sub, mascota, counter). */ /* Input card ──────────────────────────────────────────── */ .ideas-input-card { position: relative; background: var(--surface-raised); border: 1px solid rgba(255, 107, 61, 0.18); border-radius: 18px; padding: 22px 24px 20px; margin-bottom: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px color-mix(in srgb, var(--brand-500) 6%, transparent); } .ideas-input-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-cream); margin-bottom: 10px; } .ideas-input-body { display: flex; gap: 18px; align-items: stretch; } .ideas-input-col { flex: 1; min-width: 0; } .ideas-textarea { width: 100%; background: transparent; border: none; outline: none; color: var(--ink-editorial); font-family: var(--font-body); font-size: 16px; line-height: 1.5; min-height: 72px; max-height: 200px; resize: vertical; padding: 0; } .ideas-textarea::placeholder { color: rgba(138, 126, 114, 0.75); font-style: italic; } .ideas-input-col-right { display: flex; align-items: flex-end; } .ideas-btn-develop { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 11px; border: none; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #fff; /* v0.14.35.b: CTA plano consistente. Antes gradient #ff6b3d→var(--brand-500) brillante. */ background: var(--brand-cta); cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s; box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-500) 18%, transparent); letter-spacing: -0.005em; } .ideas-btn-develop:hover { transform: translateY(-1px); background: var(--brand-800); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-500) 18%, transparent); } .ideas-btn-develop:active { transform: scale(.98); opacity: .95; background: var(--brand-800); transition: transform .08s ease-out, opacity .08s ease-out; } .ideas-btn-develop:disabled { opacity: .65; cursor: wait; transform: none; } .ideas-btn-develop svg { flex-shrink: 0; } .ideas-input-col-right { display: flex; align-items: flex-end; gap: 10px; } .ideas-btn-add { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; border-radius: 11px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-cream); background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; } .ideas-btn-add:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.22); color: var(--ink-editorial); transform: translateY(-1px); } .ideas-btn-add:disabled { opacity: .5; cursor: wait; transform: none; } [data-theme="light"] .ideas-btn-add { border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .ideas-btn-add:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.22); } /* Recorded chip (per idea card) */ .ideas-rec { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 5px; cursor: pointer; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ink-ghost); transition: color .15s, background .15s, border-color .15s; } .ideas-rec:hover { color: var(--ink-editorial); border-color: rgba(255, 255, 255, 0.2); } .ideas-rec.is-recorded { color: #5dcaa5; background: rgba(93, 202, 165, 0.1); border-color: rgba(93, 202, 165, 0.28); } .ideas-rec.is-recorded:hover { background: rgba(93, 202, 165, 0.16); border-color: rgba(93, 202, 165, 0.4); } .ideas-rec svg { flex-shrink: 0; } [data-theme="light"] .ideas-rec { border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .ideas-rec:hover { border-color: rgba(0, 0, 0, 0.22); } /* v0.14.26 — Suggest Ideas Phase 1 ─────────────────────── */ .ideas-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--border); } .ideas-tab { background: none; border: none; cursor: pointer; padding: 10px 16px; font-size: .82rem; font-weight: 600; color: var(--text3); font-family: var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .ideas-tab:hover { color: var(--text2); } .ideas-tab.on { color: var(--text); border-bottom-color: var(--brand-500); } [data-theme="light"] .ideas-tab.on { border-bottom-color: var(--brand-700); } /* v0.14.39: tabs nuevas reusables (Scripts + Settings) — replican patrón .ideas-tabs. */ .scripts-tabs, .settings-tabs { display: flex; gap: 4px; margin: 0 0 var(--space-lg); border-bottom: 1px solid var(--border); flex-wrap: wrap; /* FIX3: que las 5 tabs no se recorten nunca por ancho */ } .scripts-tab, .settings-tab { background: none; border: none; cursor: pointer; padding: 10px 16px; font-size: .82rem; font-weight: 600; color: var(--text3); font-family: var(--font-body); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .scripts-tab:hover, .settings-tab:hover { color: var(--text2); } .scripts-tab.on, .settings-tab.on { color: var(--text); border-bottom-color: var(--brand); } [data-theme="light"] .scripts-tab.on, [data-theme="light"] .settings-tab.on { border-bottom-color: var(--brand-700); } /* v0.14.39: filtro de proyectos como chips dentro de Scripts. */ .scripts-proj-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-md); } .proj-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--surf2); border: 1px solid var(--border); color: var(--text2); font-size: .8rem; font-weight: 500; font-family: var(--font-body); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .proj-chip:hover { border-color: var(--brand); color: var(--text); } .proj-chip.on { background: var(--brand-cta); color: #fff; border-color: var(--brand-cta); } .proj-chip-new { background: transparent; border: 1px dashed var(--border); color: var(--text3); } .proj-chip-new:hover { color: var(--brand); border-color: var(--brand); } .ideas-suggest-empty { background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center; max-width: 540px; margin: 0 auto; } .ideas-suggest-empty-title { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -.015em; line-height: 1.15; margin-bottom: 6px; } .ideas-suggest-empty-sub { font-size: var(--text-sm); color: var(--text3); margin-bottom: var(--space-4); line-height: 1.5; } .ideas-suggest-context { width: 100%; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surf2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: var(--text-sm); resize: vertical; min-height: 56px; outline: none; margin-bottom: var(--space-4); } .ideas-suggest-context:focus { border-color: color-mix(in srgb, var(--brand-500) 60%, transparent); } .ideas-suggest-btn { padding: 12px 24px; border-radius: var(--radius-lg); border: 1px solid var(--brand-800); background: var(--brand-cta); color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer; box-shadow: 0 4px 0 var(--brand-800); transition: transform .15s, box-shadow .15s, background .15s, opacity .15s; } .ideas-suggest-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--brand-800); box-shadow: 0 5px 0 var(--brand-800), 0 6px 18px color-mix(in srgb, var(--brand-500) 15%, transparent); } .ideas-suggest-btn:active:not(:disabled) { transform: scale(.98); opacity: .95; transition: transform .08s ease-out, opacity .08s ease-out; } .ideas-suggest-btn:disabled { opacity: .65; cursor: default; } .ideas-suggest-err { margin-top: 10px; font-size: var(--text-xs); color: var(--danger-fg); min-height: 0; } .ideas-suggest-err.on { min-height: 1.4em; } .ideas-suggest-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap; } .ideas-suggest-head-title { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.015em; } .ideas-suggest-more-btn { padding: 8px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-500) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent); color: var(--brand-500); font-weight: 600; font-size: var(--text-xs); cursor: pointer; font-family: var(--font-body); transition: background .15s; } .ideas-suggest-more-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-500) 20%, transparent); } .ideas-suggest-more-btn:disabled { opacity: .55; cursor: default; } .ideas-suggest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (max-width: 640px) { .ideas-suggest-grid { grid-template-columns: 1fr; gap: 10px; } } .idea-suggest-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-4); display: flex; gap: var(--space-4); align-items: flex-start; transition: border-color .15s, transform .25s ease, opacity .25s ease; } .idea-suggest-card:hover { border-color: color-mix(in srgb, var(--brand-500) 35%, transparent); } .idea-suggest-card.fading { opacity: 0; transform: translateY(-6px); } .idea-suggest-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surf2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .idea-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .idea-suggest-thumb-placeholder { color: var(--text3); opacity: .5; } .idea-suggest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .idea-suggest-title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; letter-spacing: -.01em; color: var(--text); } .idea-suggest-hook { font-size: .82rem; color: var(--text2); line-height: 1.4; font-style: italic; } .idea-suggest-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .68rem; color: var(--text3); letter-spacing: .02em; font-family: var(--font-mono); text-transform: uppercase; margin-top: 2px; } .idea-suggest-meta-style { padding: 2px 6px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-500); } .idea-suggest-source { font-size: .7rem; color: var(--text3); } .idea-suggest-actions { display: flex; gap: 6px; margin-top: 8px; } .idea-suggest-act { flex: 1; padding: 7px 10px; border-radius: 8px; font-size: .76rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: background .15s; } .idea-suggest-act-save { background: var(--brand-cta); color: #fff; border: 1px solid var(--brand-800); } .idea-suggest-act-save:hover:not(:disabled) { background: var(--brand-800); } .idea-suggest-act-save:disabled { opacity: .55; cursor: default; } .idea-suggest-act-discard { background: transparent; color: var(--text3); border: 1px solid var(--border); } .idea-suggest-act-discard:hover { color: var(--text2); border-color: rgba(255,255,255,.18); } /* Ideas list ─────────────────────────────────────────── */ .ideas-list { display: flex; flex-direction: column; gap: 16px; } .ideas-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 16px; padding: var(--space-5) var(--space-6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform .22s, box-shadow .22s, border-color .22s; } .ideas-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: var(--border-strong); } [data-theme="light"] .ideas-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); } .ideas-card.is-draft { border-left: 3px solid var(--brand-500); } .ideas-card.is-draft:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 40px color-mix(in srgb, var(--brand-500) 8%, transparent); } .ideas-card.is-developed { border: 1px solid rgba(93, 202, 165, 0.18); } .ideas-card.is-scripted { opacity: 0.72; } .ideas-card.is-scripted:hover { opacity: 0.88; } .ideas-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .ideas-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 5px; flex-shrink: 0; } .ideas-badge.b-draft { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 10%, transparent); } .ideas-badge.b-developed { color: var(--ideas-dev); background: rgba(93, 202, 165, 0.1); } .ideas-badge.b-scripted { color: var(--ink-muted); background: rgba(138, 126, 114, 0.1); } .ideas-badge svg { flex-shrink: 0; } .ideas-cat { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 5px; } .ideas-cat.cat-motivation { color: var(--brand-500); background: rgba(79, 124, 255, 0.1); } .ideas-cat.cat-humor { color: #f0997b; background: rgba(240, 153, 123, 0.1); } .ideas-cat.cat-educational { color: #85b7eb; background: rgba(133, 183, 235, 0.1); } .ideas-cat.cat-tutorial { color: #85b7eb; background: rgba(133, 183, 235, 0.1); } .ideas-cat.cat-storytelling { color: #c89968; background: rgba(200, 153, 104, 0.1); } .ideas-cat.cat-opinion { color: #b5a0ec; background: rgba(181, 160, 236, 0.1); } .ideas-cat.cat-case_study { color: #b5a0ec; background: rgba(181, 160, 236, 0.1); } .ideas-cat.cat-trend { color: #ff6b3d; background: rgba(255, 107, 61, 0.1); } .ideas-cat.cat-behind_scenes{ color: #c4b896; background: rgba(196, 184, 150, 0.08); } .ideas-cat.cat-list { color: #5dcaa5; background: rgba(93, 202, 165, 0.08); } .ideas-cat.cat-default { color: var(--ink-cream); background: rgba(196, 184, 150, 0.08); } .ideas-card-title { font-family: var(--font-editorial); font-size: var(--text-xl); font-weight: 500; line-height: 1.22; letter-spacing: -0.01em; color: var(--ink-editorial); flex: 1; min-width: 0; } .ideas-card.is-scripted .ideas-card-title { color: #b8ad9c; } .ideas-card-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-ghost); letter-spacing: 0.05em; margin-left: auto; flex-shrink: 0; } .ideas-card-raw { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--ink-muted); margin-bottom: var(--space-4); } .ideas-card.is-scripted .ideas-card-raw { font-size: 13px; color: var(--ink-ghost); margin-bottom: 12px; } .ideas-develop-block { margin: 12px 0 14px; padding: 14px 16px 14px 18px; background: rgba(0, 0, 0, 0.22); border-radius: 10px; border-left: 2px solid rgba(93, 202, 165, 0.3); display: flex; flex-direction: column; gap: 12px; } .ideas-develop-lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ideas-dev); margin-bottom: 6px; display: block; } .ideas-develop-text { font-family: var(--font-editorial); font-size: 14.5px; line-height: 1.55; color: var(--ink-body); font-weight: 400; } .ideas-develop-text.italic { font-style: italic; color: var(--ink-cream); } .ideas-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .ideas-act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; border: 1px solid transparent; background: transparent; color: var(--ink-muted); } /* v0.14.28: selector de asistente al lado del botón Guionizar */ .ideas-guionizar-asst { padding: 6px 10px; border-radius: 8px; background: var(--surf2); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 12.5px; cursor: pointer; outline: none; transition: border-color .15s; } .ideas-guionizar-asst:hover { border-color: rgba(255,255,255,.18); } .ideas-guionizar-asst:focus { border-color: color-mix(in srgb, var(--brand-500) 60%, transparent); } .ideas-act:hover { transform: translateY(-1px); } .ideas-act.primary-orange { background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-500); border-color: color-mix(in srgb, var(--brand-500) 25%, transparent); } .ideas-act.primary-orange:hover { background: color-mix(in srgb, var(--brand-500) 18%, transparent); border-color: color-mix(in srgb, var(--brand-500) 40%, transparent); } .ideas-act.primary-green { background: var(--ideas-dev-soft); color: var(--ideas-dev); border-color: var(--ideas-dev-border); } .ideas-act.primary-green:hover { background: rgba(93, 202, 165, 0.18); border-color: rgba(93, 202, 165, 0.4); } .ideas-act.ghost { border-color: rgba(255, 255, 255, 0.08); } .ideas-act.ghost:hover { border-color: rgba(255, 255, 255, 0.18); color: var(--ink-editorial); } .ideas-act.danger:hover { color: var(--danger-fg); border-color: var(--danger-border); } .ideas-act svg { flex-shrink: 0; } .ideas-scripted-pointer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ideas-dev); background: none; border: none; padding: 2px 0; cursor: pointer; transition: gap .2s, color .15s; } .ideas-scripted-pointer:hover { gap: 12px; color: var(--ideas-dev); } /* ── v0.15.3: tab Competidores ──────────────────────────── */ .comp-toolbar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); } .comp-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; } .comp-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surf); color: var(--text2); font-size: var(--text-xs); font-family: var(--font-body); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .comp-chip:hover { border-color: color-mix(in srgb, var(--brand-500) 40%, transparent); color: var(--text); } .comp-chip.on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand-500) 8%, transparent); } .comp-chip-username { font-weight: 500; } .comp-chip-badge { font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; } .comp-chip-badge.is-scraping { background: color-mix(in srgb, var(--brand-500) 18%, transparent); color: var(--brand); } .comp-chip-badge.is-private, .comp-chip-badge.is-not_found { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger-fg); } .comp-chip-badge.is-failed { background: var(--surf2); color: var(--text3); } .comp-chip-remove { width: 14px; height: 14px; border: 0; background: transparent; color: var(--text3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; margin-left: 2px; opacity: 0; transition: opacity .15s, color .15s; } .comp-chip:hover .comp-chip-remove { opacity: 1; } .comp-chip-remove:hover { color: var(--danger-fg); } .comp-chip.is-all .comp-chip-remove { display: none; } /* v0.16.x Radar — barra de estado FOMO sobre el feed de competidores. */ .radar-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 16px; margin-bottom: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surf); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surf)), var(--surf)); font-size: var(--text-sm); color: var(--text2); } .radar-stat { display: inline-flex; align-items: baseline; gap: 5px; } .radar-stat-num { font-weight: 700; font-size: 1.05rem; color: var(--text); font-family: var(--font-display, var(--font-body)); } .radar-stat.is-hot .radar-stat-num { color: var(--brand); } .radar-stat-cta { margin-left: auto; font-weight: 600; color: var(--brand); } /* Badge de explosión sobre el thumbnail del reel. */ .comp-reel-explosion { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,0,.3); } .comp-reel-explosion.is-mega { background: linear-gradient(135deg, #ff5e3a, #ff2d55); } .comp-sort-bar { display: flex; gap: 4px; margin-bottom: var(--space-md); flex-wrap: wrap; } .comp-sort-btn { padding: 5px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surf); color: var(--text2); font-size: var(--text-xs); cursor: pointer; font-family: var(--font-body); transition: all .15s; } .comp-sort-btn:hover { color: var(--text); } .comp-sort-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); } /* v0.16.x Radar: CTA "Llena mi semana" — empujado a la derecha de la barra. */ .comp-fillweek-btn { margin-left: auto; padding: 6px 14px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 12%, var(--surf)); color: var(--brand); font-weight: 700; font-size: var(--text-xs); cursor: pointer; font-family: var(--font-body); white-space: nowrap; transition: all .15s; } .comp-fillweek-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); } .comp-fillweek-btn:disabled { opacity: .6; cursor: default; } /* ════════════════════════════════════════════════════════════════ v0.16.x RESTYLE PREMIUM — dark SaaS moderno (Linear/Vercel). Bloque aditivo: realza el Radar sin reescribir las reglas base. ════════════════════════════════════════════════════════════════ */ /* Profundidad del workspace: glow de marca arriba sobre near-black. */ #profilePage { background: radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--brand-500) 11%, transparent), transparent 62%), var(--surface-base); } /* Barra FOMO — borde con glow sutil + hairline interior. */ .radar-stats { border-color: color-mix(in srgb, var(--brand-500) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* Tarjetas del feed — superficie elevada + hover con glow de marca. */ .comp-reel-card { background: linear-gradient(180deg, color-mix(in srgb, #fff 3%, var(--surface-raised)), var(--surface-raised)); border-color: var(--border-subtle); box-shadow: var(--shadow-md); } .comp-reel-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand-500) 45%, transparent); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--brand-500) 22%, transparent), 0 14px 44px color-mix(in srgb, var(--brand-500) 13%, transparent); } /* "Hazlo mío" = acción estrella → relleno degradado, que destaque. */ .comp-reel-genscript-btn { background: var(--grad2); color: #fff; border-color: transparent; box-shadow: 0 2px 14px color-mix(in srgb, var(--brand-500) 32%, transparent); } .comp-reel-genscript-btn:hover:not(:disabled) { background: var(--grad2); border-color: transparent; filter: brightness(1.08); } .comp-reel-genscript-caret { background: color-mix(in srgb, var(--brand-700) 92%, #000); color: #fff; border-color: transparent; } /* Badge explosión mega — glow rojo neón. */ .comp-reel-explosion.is-mega { box-shadow: 0 0 18px rgba(255,45,85,.55), 0 1px 4px rgba(0,0,0,.45); } /* Sort pill activa — glow de marca. */ .comp-sort-btn.on { box-shadow: 0 0 16px color-mix(in srgb, var(--brand-500) 35%, transparent); } /* "Llena mi semana" — degradado de marca a juego con "Hazlo mío". */ .comp-fillweek-btn { background: var(--grad2); color: #fff; border-color: transparent; box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-500) 28%, transparent); } .comp-fillweek-btn:hover { background: var(--grad2); color: #fff; border-color: transparent; filter: brightness(1.08); } /* Nav lateral — item activo con acento lateral premium. */ .chrome-nav-item.on { box-shadow: inset 2px 0 0 var(--brand-500); } .comp-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); } .comp-reel-card { position: relative; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .15s ease-out, box-shadow .15s, border-color .15s; cursor: default; } .comp-reel-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-500) 30%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.12); } .comp-reel-thumb { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--surf2); } .comp-reel-thumb-empty { width: 100%; aspect-ratio: 4/5; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 12%, transparent), color-mix(in srgb, var(--brand-500) 4%, transparent)); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 2rem; } .comp-reel-body { padding: var(--space-md); } .comp-reel-owner { font-size: .72rem; color: var(--text3); margin-bottom: 6px; font-weight: 600; text-transform: lowercase; letter-spacing: .02em; } .comp-reel-caption { font-size: .85rem; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.6em; margin-bottom: 10px; } .comp-reel-meta { display: flex; gap: 12px; font-size: .72rem; color: var(--text3); font-variant-numeric: tabular-nums; } .comp-reel-meta span { display: inline-flex; align-items: center; gap: 3px; } .comp-reel-meta-date { margin-left: auto; } /* v0.15.5: botón generar guion desde reel competidor. v0.15.7: split button (label + caret) con