html, body { height: 100%; overflow: hidden; font-family: 'Nunito', sans-serif; }
body { background: var(--bg-main); color: var(--text-main); }
/* ═══════════════════════════════════════════════════════════
WELCOME CINEMATIC — overlay tras login exitoso
Logo Pio escala + sparks naranjas + saludo + exit suave.
~2.6s total. Skippable (botón / Esc / click fuera). */
.pf-welcome {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 138, 0, 0.18), transparent 60%),
rgba(8, 12, 24, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
opacity: 0;
transition: opacity 0.22s ease;
cursor: pointer;
overflow: hidden;
/* GPU hints: forzar compositing layer ANTES de animar para
evitar el jank del primer frame. Edgar: 'el inicio va
trabado y después muy fluido' — clásico de animaciones que
pintan en CPU el primer frame y crean su layer demasiado
tarde. translateZ + will-change le dicen al browser
'prepara el GPU layer YA'. */
transform: translateZ(0);
will-change: opacity;
}
.pf-welcome--in { opacity: 1; }
.pf-welcome--out { opacity: 0; transition: opacity 0.55s ease; }
/* Skip button — glassmorphism premium, esquina superior derecha.
z-index 100005 para estar sobre TODO (incluido el Pio fly y el
popover) en cualquier fase. */
.pf-welcome-skip {
position: fixed; top: 22px; right: 22px;
z-index: 2147483005;
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(241, 245, 249, 0.85);
padding: 9px 16px 9px 18px;
border-radius: 999px;
font-family: inherit;
font-size: 12px; font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
cursor: pointer;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transition: background 0.18s ease, color 0.18s ease,
border-color 0.18s ease, transform 0.15s ease,
box-shadow 0.18s ease;
opacity: 0;
animation: pf-welcome-skip-in 0.5s ease 1.6s forwards;
}
.pf-welcome-skip:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.32);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.pf-welcome-skip:active { transform: translateY(0); }
.pf-welcome-skip svg { opacity: 0.85; }
@keyframes pf-welcome-skip-in {
to { opacity: 1; }
}
/* Stage central donde viven logo + texto + sparks. translateZ
fuerza GPU layer para que las animaciones internas tengan su
compositing pre-armado. */
.pf-welcome-stage {
position: relative;
display: flex; flex-direction: column; align-items: center;
gap: 14px;
max-width: 90vw;
text-align: center;
cursor: default;
transform: translateZ(0);
will-change: transform, opacity;
}
/* Halo radial detrás del logo — pulse cálido */
.pf-welcome-halo {
position: absolute;
top: -40px; left: 50%;
width: 280px; height: 280px;
margin-left: -140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 138, 0, 0.45), rgba(255, 138, 0, 0.10) 40%, transparent 70%);
filter: blur(20px);
transform: scale(0) translateZ(0);
animation: pf-welcome-halo 1.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.05s forwards,
pf-welcome-halo-breathe 2.4s ease-in-out 1.5s infinite;
pointer-events: none;
will-change: transform, opacity;
}
@keyframes pf-welcome-halo {
0% { transform: scale(0); opacity: 0; }
55% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 0.85; }
}
@keyframes pf-welcome-halo-breathe {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
/* Logo Pio — escala dramática con bounce + ligera rotación.
Delay 0.10s (antes 0.25s) — más responsive. */
.pf-welcome-logo {
width: 110px; height: auto;
position: relative;
z-index: 2;
transform: scale(0) rotate(-18deg) translateZ(0);
animation: pf-welcome-logo-in 0.95s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.10s forwards,
pf-welcome-logo-float 3.2s ease-in-out 1.2s infinite;
filter: drop-shadow(0 12px 30px rgba(255, 138, 0, 0.45));
will-change: transform, opacity;
}
@keyframes pf-welcome-logo-in {
0% { transform: scale(0) rotate(-18deg); opacity: 0; }
55% { transform: scale(1.18) rotate(6deg); opacity: 1; }
75% { transform: scale(0.96) rotate(-2deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes pf-welcome-logo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Wordmark "piofly" debajo del logo */
.pf-welcome-brand {
position: relative;
z-index: 2;
display: inline-flex;
font-size: 30px; font-weight: 900;
letter-spacing: -0.6px;
margin-top: -2px;
opacity: 0;
transform: translateY(10px);
animation: pf-welcome-text-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}
.pf-welcome-brand span:first-child { color: #F1F5F9; }
.pf-welcome-brand span:last-child { color: var(--accent); }
/* Título: "¡Bienvenido, [Nombre]!" */
.pf-welcome-title {
position: relative;
z-index: 2;
font-size: clamp(24px, 4vw, 34px);
font-weight: 900;
color: #F1F5F9;
letter-spacing: -0.5px;
margin: 18px 0 0;
opacity: 0;
transform: translateY(14px);
animation: pf-welcome-text-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}
/* Sub: contextual */
.pf-welcome-sub {
position: relative;
z-index: 2;
font-size: clamp(14px, 2vw, 16.5px);
color: rgba(241, 245, 249, 0.70);
font-weight: 600;
margin: 0;
opacity: 0;
transform: translateY(10px);
animation: pf-welcome-text-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.35s forwards;
}
@keyframes pf-welcome-text-in {
to { opacity: 1; transform: translateY(0); }
}
/* ── First-time variant: TOUR GUIADO EN 4 FASES ──
Edgar 2026-05-29: 'que esté la bienvenida con el blur, y que
el pajaro se mueva a la parte del tema del chat, le diga que
le pique, y que elija un color'.
Estructura:
.pf-welcome--phase1 → bienvenida normal (blur fuerte, opaco)
.pf-welcome--phase2 → Pio vuela: textos fade-out, logo se
traslada al botón con scale, blur reduce.
.pf-welcome--phase3 → popover abierto + bubble + interacción.
.pf-welcome--celebrate → click confirmado, brinco final. */
/* FASE 1: overlay opaco. backdrop-filter arranca en 0 y sube a
20px PROGRESIVAMENTE — es el render más caro de todo el
cinematic y aplicarlo al instante en el primer frame causaba
jank perceptible. Con transition de 0.50s con 0.10s delay, el
primer frame es barato (sin blur) y el blur se construye
después de que el overlay ya hizo fade-in. */
.pf-welcome--firsttime.pf-welcome--phase1 {
background:
radial-gradient(ellipse 70% 70% at 50% 45%, rgba(255, 138, 0, 0.18), transparent 60%),
rgba(8, 12, 24, 0.88);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: background 0.40s ease,
backdrop-filter 0.50s ease 0.10s,
-webkit-backdrop-filter 0.50s ease 0.10s;
}
.pf-welcome--firsttime.pf-welcome--phase1.pf-welcome--in {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Variant: title + sub un poco más grandes */
.pf-welcome--firsttime .pf-welcome-title {
font-size: clamp(28px, 4.5vw, 38px);
}
.pf-welcome--firsttime .pf-welcome-sub {
max-width: 460px;
margin: 8px auto 0;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════
FASE TOUR — Edgar 2026-05-29: 'que vaya hasta temas del chat
y te paseé por todo mi dashboard'. Tour multi-paso (welcome
→ feed → sidebar → header → resumen → chat → themes).
Overlay completamente transparente (sin tinte), highlight
ring naranja sobre cada target.
═══════════════════════════════════════════════════════ */
.pf-welcome--firsttime.pf-welcome--phase-tour {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: auto;
cursor: default;
transition: background 0.45s ease;
}
/* Dim del resto del dashboard se aplica vía box-shadow gigante en
.pf-tour-highlight (spotlight pattern). El overlay se queda
transparente para no doblar el dim. Si el paso NO tiene target
(welcome o si el target está hidden), no hay spotlight y el
overlay phase-tour queda 100% transparente — correcto, porque
la fase 1 (welcome) ya tiene su propio blur+dim. */
.pf-welcome--firsttime.pf-welcome--phase-tour .pf-welcome-stage {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.pf-welcome--firsttime.pf-welcome--phase-tour .pf-welcome-stage * {
animation-play-state: paused !important;
}
/* HIGHLIGHT RING + SPOTLIGHT DIM — Edgar: 'cuando se está
presentando la sección específica de cada paso que el resto
de la web como que se oscurezca un poco para hacer un poquito
más de énfasis en los pasos'.
Técnica clásica: box-shadow con spread gigante (9999px) en
color oscuro semitransparente → todo lo que está fuera del
rectángulo del highlight queda oscurecido, el interior queda
NÍTIDO. El target detrás del highlight se ve perfecto, el
resto del dashboard queda apagado. */
.pf-tour-highlight {
position: fixed;
z-index: 2147483000;
pointer-events: none;
border-radius: 16px;
background: transparent;
box-shadow:
0 0 0 9999px rgba(8, 12, 24, 0.62), /* dim circundante */
inset 0 0 0 3px rgba(255, 138, 0, 0.85), /* ring interno */
inset 0 0 30px rgba(255, 138, 0, 0.18), /* glow interno suave */
0 0 60px rgba(255, 138, 0, 0.40); /* glow externo */
transition:
left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s ease;
animation: pf-tour-highlight-pulse 2.6s ease-in-out infinite;
}
@keyframes pf-tour-highlight-pulse {
0%, 100% {
box-shadow:
0 0 0 9999px rgba(8, 12, 24, 0.62),
inset 0 0 0 3px rgba(255, 138, 0, 0.85),
inset 0 0 30px rgba(255, 138, 0, 0.18),
0 0 60px rgba(255, 138, 0, 0.40);
}
50% {
box-shadow:
0 0 0 9999px rgba(8, 12, 24, 0.62),
inset 0 0 0 3px rgba(255, 138, 0, 0.95),
inset 0 0 40px rgba(255, 138, 0, 0.28),
0 0 80px rgba(255, 138, 0, 0.55);
}
}
.pf-tour-highlight.is-leaving {
opacity: 0;
transition: opacity 0.32s ease;
}
/* NAVEGACIÓN DEL TOUR — bottom center. Glassmorphism + dots de
progreso + botones prev/next. Edgar 2026-06-30: en mobile sube
a posición mid en pasos chat/themes con MOVIMIENTO ANIMADO
(transition), no fade in/out. */
.pf-tour-nav {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 2147483006;
max-width: calc(100vw - 32px);
display: flex;
align-items: center;
gap: 16px;
padding: 10px 14px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
opacity: 0;
animation: pf-tour-nav-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s forwards;
/* Transition para el movimiento ENTRE posiciones (no in/out).
Usa bottom porque calc() permite numérico en ambos states. */
transition: bottom 0.65s cubic-bezier(0.45, 0.05, 0.20, 1);
}
/* MOBILE: sube el nav encima del chat-bar y compacta tamaño */
@media (max-width: 760px) {
.pf-tour-nav {
bottom: 88px;
padding: 8px 10px;
gap: 10px;
}
.pf-tour-nav-btn { width: 34px; height: 34px; }
.pf-tour-next { padding: 0 12px; min-width: 30px; }
.pf-tour-dot { width: 7px; height: 7px; }
/* Paso 6 (themes): Edgar 'bajalo más' (iter 4): 470 → 560px.
Ahora el nav está casi pegado al bubble (zona low del viewport). */
.pf-tour-nav--top {
bottom: calc(100vh - 560px) !important;
}
/* Paso 5 (chat) — Edgar 2026-06-30: tour-nav sube a 140px para
dejar GAP visible entre nav y chat-bar (~76px de aire). El
chat-bar abajo queda completamente libre y visible. */
.pf-tour-nav--mid {
bottom: 140px !important;
}
}
@keyframes pf-tour-nav-in {
from { opacity: 0; transform: translateX(-50%) translateY(12px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pf-tour-nav.is-leaving {
opacity: 0;
transform: translateX(-50%) translateY(8px);
transition: opacity 0.25s ease, transform 0.30s ease;
animation: none;
}
.pf-tour-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(241, 245, 249, 0.92);
border-radius: 50%;
cursor: pointer;
transition: all 0.18s ease;
}
.pf-tour-nav-btn:hover:not(:disabled) {
background: var(--accent);
border-color: var(--accent);
color: #FFFFFF;
transform: scale(1.06);
box-shadow: var(--shadow-accent);
}
.pf-tour-nav-btn:active:not(:disabled) { transform: scale(0.96); }
.pf-tour-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.pf-tour-next {
min-width: 36px;
width: auto;
padding: 0 14px;
gap: 6px;
}
.pf-tour-dots {
display: flex;
align-items: center;
gap: 8px;
}
.pf-tour-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.20);
transition: all 0.20s ease;
cursor: pointer;
}
.pf-tour-dot.is-done {
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.pf-tour-dot.is-active {
background: var(--accent);
transform: scale(1.50);
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.pf-tour-dot:hover {
transform: scale(1.30);
background: color-mix(in srgb, var(--accent) 85%, transparent);
}
/* BUBBLE TAILS — la cola del bubble cambia según donde está el
Pio respecto al bubble. La cola siempre apunta HACIA Pio. */
.pf-welcome-bubble-tail {
position: absolute;
width: 22px;
height: 12px;
background: #FFB85C;
filter: drop-shadow(0 4px 6px rgba(255, 105, 0, 0.30));
transition: all 0.20s ease;
}
.pf-welcome-bubble--bottom .pf-welcome-bubble-tail {
bottom: -10px; left: 50%; margin-left: -11px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pf-welcome-bubble--top .pf-welcome-bubble-tail {
top: -10px; left: 50%; margin-left: -11px;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.pf-welcome-bubble--left .pf-welcome-bubble-tail {
left: -10px; top: 50%; margin-top: -6px;
width: 12px; height: 22px;
background: linear-gradient(135deg, #FF6B00 0%, #FF8A00 60%, #FFB85C 100%);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.pf-welcome-bubble--right .pf-welcome-bubble-tail {
right: -10px; top: 50%; margin-top: -6px;
left: auto;
width: 12px; height: 22px;
background: linear-gradient(135deg, #FF6B00 0%, #FF8A00 60%, #FFB85C 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
}
/* TYPEWRITER caret — el cursor pulsante mientras Pio "escribe" */
.pf-typewriter-caret {
display: inline-block;
width: 3px;
height: 0.95em;
vertical-align: text-bottom;
background: currentColor;
margin-left: 2px;
border-radius: 1px;
animation: pf-caret-blink 0.95s steps(2, end) infinite;
opacity: 0.85;
}
.pf-typewriter-caret.is-done {
animation: pf-caret-fade 0.85s ease forwards;
}
@keyframes pf-caret-blink {
50% { opacity: 0; }
}
@keyframes pf-caret-fade {
to { opacity: 0; width: 0; margin: 0; }
}
/* Stagger reveal de cards/divider/upload del welcome-state */
.pf-fade-in {
opacity: 0;
animation: pf-fade-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pf-fade-in {
to { opacity: 1; }
}
.pf-stagger-in {
opacity: 0;
transform: translateY(14px) scale(0.96);
animation: pf-stagger-in 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pf-stagger-in {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* FASE 2/3 (legacy, ya no se usan los nombres pero las clases
sobreviven en el theme picker). Mantengo selectores genéricos
para el último paso (themes). */
.pf-welcome--firsttime.pf-welcome--phase-tour.pf-welcome--celebrate ~ .pf-welcome-bubble {
opacity: 0;
transition: opacity 0.25s ease;
}
/* FASE 2/3: blur off, tinte oscuro sutil, dashboard nítido.
Edgar 2026-05-29: el overlay TIENE pointer-events:auto para
BLOQUEAR clicks fuera del popover/skip. Si el user clickea el
área transparente del overlay → no pasa nada (no se escapa
el click al dashboard). Patrón de modal foco-trapped tipo
Stripe/Linear/Notion. Antes era pointer-events:none → el user
podía clickear cards/botones detrás y el onboarding quedaba
fantasma encima. Bug crítico. */
.pf-welcome--firsttime.pf-welcome--phase2,
.pf-welcome--firsttime.pf-welcome--phase3 {
background: rgba(8, 12, 24, 0.22);
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: auto;
cursor: default;
transition: background 0.45s ease;
}
/* Click en el área transparente del overlay (fuera del popover/
skip) → el popover hace un shake sutil para guiar al user:
'tienes que elegir o saltar'. JS añade .pf-shake al popover. */
.sys-themes-popover.pf-shake {
animation: pf-popover-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}
@keyframes pf-popover-shake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-6px); }
30% { transform: translateX(6px); }
45% { transform: translateX(-4px); }
60% { transform: translateX(4px); }
75% { transform: translateX(-2px); }
90% { transform: translateX(2px); }
}
/* Stage (texto + logo viejo del centro) hace fade-out completo en
fase 2. El logo del stage YA NO se mueve al picker — vive como
elemento separado .pf-welcome-pio-fly. Aquí solo desvanecemos. */
.pf-welcome--firsttime.pf-welcome--phase2 .pf-welcome-stage,
.pf-welcome--firsttime.pf-welcome--phase3 .pf-welcome-stage {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.pf-welcome--firsttime.pf-welcome--phase2 .pf-welcome-stage *,
.pf-welcome--firsttime.pf-welcome--phase3 .pf-welcome-stage * {
animation-play-state: paused !important;
}
/* ═══════════════════════════════════════════════
PIO FLY — el Pio que vuela al picker.
Vive FUERA del overlay (en document.body) con
position:fixed + z-index alto. Ya no queda
'debajo' del popover (era el bug de Edgar).
═══════════════════════════════════════════════ */
.pf-welcome-pio-fly {
position: fixed;
/* z-index máximo signed int 32-bit — supera CUALQUIER otro elemento
del dashboard y CUALQUIER stacking context creado por filter/
transform en elementos del paso. Edgar reportó que Pio se veía
'detrás del box del paso' — esto lo blinda.
Edgar 2026-06-26: subido a 2147483006 (arriba del bubble 2147483002)
para que Pio NUNCA quede tapado por el card del paso. */
z-index: 2147483006;
width: 110px;
height: auto;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
filter:
drop-shadow(0 0 30px rgba(255, 138, 0, 0.85))
drop-shadow(0 10px 22px rgba(255, 138, 0, 0.40));
transition:
left 1.20s cubic-bezier(0.22, 1, 0.36, 1),
top 1.20s cubic-bezier(0.22, 1, 0.36, 1),
width 1.20s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s ease;
will-change: left, top, width;
}
.pf-welcome-pio-fly.is-visible { opacity: 1; }
.pf-welcome-pio-fly.is-bobbing {
animation: pf-pio-bob 2.0s ease-in-out infinite;
}
@keyframes pf-pio-bob {
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, calc(-50% - 5px)); }
}
.pf-welcome-pio-fly.is-celebrating {
animation: pf-pio-celebrate 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes pf-pio-celebrate {
0% { transform: translate(-50%, -50%) rotate(0); }
40% { transform: translate(-50%, calc(-50% - 26px)) rotate(-14deg); }
70% { transform: translate(-50%, calc(-50% - 12px)) rotate(8deg); }
100% { transform: translate(-50%, -50%) rotate(0); }
}
.pf-welcome-pio-fly.is-leaving {
opacity: 0;
transition: opacity 0.32s ease;
}
/* Halo dedicado que viaja PEGADO al Pio fly. Aparece al iniciar
fase 2, pulsa en fase 3 cuando aterriza. Su position es la
misma del Pio fly (centro), z-index uno menos para quedar
detrás de Pio pero encima de overlay/popover. */
.pf-welcome-pio-halo {
position: fixed;
/* Edgar 2026-06-26: halo va PEGADO al pio (que ahora es 2147483006),
por debajo de él pero arriba del bubble. */
z-index: 2147483005;
width: 160px;
height: 160px;
transform: translate(-50%, -50%);
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 138, 0, 0.45) 0%,
rgba(255, 138, 0, 0.18) 35%,
transparent 70%);
filter: blur(16px);
opacity: 0;
transition:
left 1.20s cubic-bezier(0.22, 1, 0.36, 1),
top 1.20s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.45s ease;
}
.pf-welcome-pio-halo.is-visible { opacity: 1; }
.pf-welcome-pio-halo.is-pulsing {
animation: pf-halo-pulse 2.4s ease-in-out infinite;
}
@keyframes pf-halo-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
}
.pf-welcome-pio-halo.is-celebrating {
animation: pf-halo-celebrate 0.55s ease-out !important;
}
@keyframes pf-halo-celebrate {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
50% { transform: translate(-50%, -50%) scale(2.20); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
}
.pf-welcome-pio-halo.is-leaving {
opacity: 0;
transition: opacity 0.32s ease;
}
/* ═══════════════════════════════════════════════
BUBBLE PREMIUM — Glassmorphism + label + texto +
tail triangular limpio. Multi-layer shadows.
Edgar 2026-06-26: bubble queda DEBAJO de Pio (z 2147483002 vs Pio 2147483006).
Antes el card tapaba a la mascota cuando llegaba antes.
Además se le añadió transition de left/top sincronizada con la del pio-fly
(1.20s mismo easing) para que viajen JUNTOS y nunca llegue uno antes que otro.
═══════════════════════════════════════════════ */
.pf-welcome-bubble {
position: fixed;
z-index: 2147483002;
width: 270px;
background: linear-gradient(135deg, #FF6B00 0%, #FF8A00 60%, #FFB85C 100%);
color: #FFFFFF;
border-radius: 18px;
box-shadow:
0 18px 50px rgba(255, 105, 0, 0.40),
0 6px 14px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.10);
pointer-events: none;
opacity: 0;
transform: translateY(10px) scale(0.94);
animation: pf-welcome-bubble-in 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards;
transition:
left 1.20s cubic-bezier(0.22, 1, 0.36, 1),
top 1.20s cubic-bezier(0.22, 1, 0.36, 1);
will-change: left, top;
}
@keyframes pf-welcome-bubble-in {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.pf-welcome-bubble.is-leaving {
opacity: 0;
transform: translateY(-6px) scale(0.96);
animation: none;
transition: opacity 0.25s ease, transform 0.30s ease;
}
.pf-welcome-bubble-inner {
padding: 14px 18px 15px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pf-welcome-bubble-label {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
}
/* Contador de paso: 1/7 — push a la derecha del label con
margin-left:auto. Subtle pero visible. */
.pf-welcome-bubble-counter {
margin-left: auto;
padding: 2px 7px;
background: rgba(255, 255, 255, 0.20);
border-radius: 999px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.95);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pf-welcome-bubble-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
animation: pf-bubble-dot 1.5s ease-in-out infinite;
}
@keyframes pf-bubble-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.65; }
}
.pf-welcome-bubble-text {
display: block;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.30px;
line-height: 1.30;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* Tail triangular limpio (clip-path), apunta hacia abajo */
.pf-welcome-bubble-tail {
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -11px;
width: 22px;
height: 12px;
background: #FFB85C;
clip-path: polygon(0 0, 100% 0, 50% 100%);
filter: drop-shadow(0 4px 6px rgba(255, 105, 0, 0.30));
}
/* ═══════════════════════════════════════════════
POPOVER ring premium — pulse naranja prominente
para guiar el ojo al picker. Ring sólido interno
+ glow expansivo animado.
═══════════════════════════════════════════════ */
.sys-themes-popover.is-onboarding-pulse {
box-shadow:
0 0 0 2px rgba(255, 138, 0, 0.75),
0 24px 60px rgba(0, 0, 0, 0.40),
0 0 80px rgba(255, 138, 0, 0.25);
animation: pf-popover-pulse 2.2s ease-in-out infinite;
}
@keyframes pf-popover-pulse {
0%, 100% {
box-shadow:
0 0 0 2px rgba(255, 138, 0, 0.70),
0 24px 60px rgba(0, 0, 0, 0.40),
0 0 0 0 rgba(255, 138, 0, 0.55);
}
50% {
box-shadow:
0 0 0 2px rgba(255, 138, 0, 0.90),
0 24px 60px rgba(0, 0, 0, 0.40),
0 0 0 16px rgba(255, 138, 0, 0);
}
}
/* Swatches durante el onboarding: hover mejorado con ring */
.sys-themes-popover.is-onboarding-pulse .sys-themes-color-tile {
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.18s ease;
}
.sys-themes-popover.is-onboarding-pulse .sys-themes-color-tile:hover {
transform: scale(1.18) translateY(-2px);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.18),
0 0 0 6px var(--tile-color, rgba(255, 138, 0, 0.55)),
0 8px 20px rgba(0, 0, 0, 0.30);
}
/* FASE 4: celebración — el overlay se desvanece, el bubble sale */
.pf-welcome--celebrate .pf-welcome-bubble,
.pf-welcome--celebrate ~ .pf-welcome-bubble {
opacity: 0;
transform: translateY(-6px) scale(0.96);
transition: opacity 0.25s ease, transform 0.30s ease;
}
/* Pulse contextual sobre la card destino al cerrar el welcome.
Aplicado por JS según ?intro=business|idea. Se autorremueve a
los ~3.2s. */
.pf-onboarding-pulse {
position: relative;
animation: pf-card-pulse 1.4s ease-in-out 3;
}
@keyframes pf-card-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 138, 0, 0);
transform: scale(1);
}
35% {
box-shadow: 0 0 0 6px rgba(255, 138, 0, 0.45),
0 12px 28px rgba(255, 138, 0, 0.32);
transform: scale(1.025);
}
}
/* Container de las 14 chispas */
.pf-welcome-sparks {
position: absolute;
top: 30px; left: 50%;
width: 0; height: 0;
pointer-events: none;
z-index: 1;
}
/* Cada chispa: punto que sale desde el centro hacia un ángulo */
.pf-welcome-spark {
position: absolute; top: 0; left: 0;
width: var(--size); height: var(--size);
margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
background: #FFA333;
border-radius: 50%;
box-shadow: 0 0 12px rgba(255, 138, 0, 0.85);
opacity: 0;
animation: pf-welcome-spark var(--dur) cubic-bezier(0.22, 1, 0.36, 1) var(--delay) forwards;
}
@keyframes pf-welcome-spark {
0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(0.5); }
20% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--dist)) scale(0.2); }
}
/* Móvil: logo más pequeño, halo proporcional */
@media (max-width: 520px) {
.pf-welcome-logo { width: 88px; }
.pf-welcome-halo { width: 220px; height: 220px; margin-left: -110px; top: -30px; }
.pf-welcome-brand { font-size: 26px; }
.pf-welcome-skip { top: 14px; right: 14px; padding: 7px 14px; }
}
/* ═══════════════════════════════════════════════════════════
GOODBYE CINEMATIC — variante del welcome al cerrar sesión.
Reusamos toda la estructura/keyframes; solo retocamos el
fondo para que se sienta más "noche que cae" (azul más
profundo, halo más tenue). */
.pf-welcome--goodbye {
background:
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 138, 0, 0.12), transparent 60%),
rgba(5, 8, 18, 0.96);
}
.pf-welcome--goodbye .pf-welcome-halo {
background: radial-gradient(circle, rgba(255, 138, 0, 0.32), rgba(255, 138, 0, 0.06) 40%, transparent 70%);
}
/* ═══════════════════════════════════════════════════════════
STREAK CINEMATIC — felicita al subir de racha.
Reusa el overlay/halo/sparks del welcome, agrega flama grande
arriba y número con count-up. */
.pf-streak-flame {
position: relative;
z-index: 2;
font-size: 64px;
line-height: 1;
color: #FF8A00;
text-shadow:
0 0 22px rgba(255, 138, 0, 0.65),
0 0 44px rgba(255, 138, 0, 0.35);
transform: scale(0) rotate(-12deg);
animation: pf-streak-flame-in 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.2s forwards,
pf-streak-flame-flicker 1.4s ease-in-out 1.2s infinite;
}
.pf-streak-flame i { display: block; }
@keyframes pf-streak-flame-in {
0% { opacity: 0; transform: scale(0) rotate(-12deg); }
55% { opacity: 1; transform: scale(1.22) rotate(8deg); }
80% { transform: scale(0.96) rotate(-3deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes pf-streak-flame-flicker {
0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); }
50% { transform: scale(1.05) rotate(-2deg); filter: brightness(1.15); }
}
.pf-streak-number {
position: relative;
z-index: 2;
font-size: clamp(72px, 11vw, 110px);
font-weight: 900;
letter-spacing: -3px;
color: #FFFFFF;
line-height: 1;
margin: 6px 0 2px;
opacity: 0;
transform: translateY(14px);
animation: pf-welcome-text-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
text-shadow: 0 6px 26px rgba(255, 138, 0, 0.45);
font-variant-numeric: tabular-nums;
}
/* Bump cuando termina el count-up — celebra que llegó al número final.
CRÍTICO: este selector OVERRIDE el `animation` del selector base
(pf-welcome-text-in). Si la nueva animation no tiene `forwards` y
sus keyframes no preservan opacity:1 + translateY(0), el número se
queda en el estado base del selector (opacity:0 + translateY(14px))
→ desaparece. Aquí preservamos ambos explícitamente. */
.pf-streak-number--landed {
animation: pf-streak-number-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pf-streak-number-bump {
0% { opacity: 1; transform: translateY(0) scale(1); }
50% { opacity: 1; transform: translateY(0) scale(1.12); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pf-streak-unit {
position: relative;
z-index: 2;
font-size: clamp(13px, 1.6vw, 15px);
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 163, 51, 0.85);
margin: 0 0 6px;
opacity: 0;
transform: translateY(8px);
animation: pf-welcome-text-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}
.pf-streak-title {
margin-top: 14px;
}
/* En el streak, el halo y los sparks usan posición específica para
acomodar la flama arriba (no el logo). */
.pf-streak .pf-welcome-halo {
top: -10px;
width: 320px; height: 320px;
margin-left: -160px;
}
.pf-streak .pf-welcome-sparks {
top: 50px;
}
/* Mientras el número vuela al header, el resto del overlay se desvanece
suavemente — el ojo sigue al número que viaja. La flama se queda un
beat más para anclar emocionalmente. */
.pf-streak--flying-out .pf-welcome-halo,
.pf-streak--flying-out .pf-welcome-sparks,
.pf-streak--flying-out .pf-streak-unit,
.pf-streak--flying-out .pf-welcome-title,
.pf-streak--flying-out .pf-welcome-sub,
.pf-streak--flying-out .pf-welcome-skip {
opacity: 0;
transition: opacity 0.35s ease-out;
}
.pf-streak--flying-out .pf-streak-flame {
opacity: 0;
transform: scale(0.85);
transition: opacity 0.5s ease-out 0.15s, transform 0.5s cubic-bezier(0.55,0,0.55,1) 0.15s;
}
/* ════════════════════════════════════════════════════
RACHA PERDIDA — variant empático del streak cinematic.
Edgar: 'ponme la de racha perdida porque yo ya perdí
mi racha pero no me salió nada'.
NO es punitivo. El user ya se siente mal por perderla;
Pio reconoce la pérdida con cariño. Paleta SLATE/azul
en lugar de naranja brillante: respiración, no celebración.
════════════════════════════════════════════════════ */
.pf-streak.pf-streak-lost .pf-welcome-halo {
background: radial-gradient(circle,
rgba(148, 163, 184, 0.32),
rgba(100, 116, 139, 0.10) 40%,
transparent 70%) !important;
}
.pf-streak-lost .pf-streak-flame {
color: #64748B;
text-shadow:
0 0 16px rgba(100, 116, 139, 0.45),
0 0 30px rgba(148, 163, 184, 0.20);
opacity: 0.65;
}
.pf-streak-lost .pf-streak-number {
color: rgba(241, 245, 249, 0.62);
text-shadow: 0 4px 20px rgba(100, 116, 139, 0.35);
}
.pf-streak-lost .pf-streak-unit {
color: rgba(148, 163, 184, 0.75);
}
.pf-streak-lost .pf-streak-title {
color: #E2E8F0;
}
.pf-streak-lost .pf-welcome-sub {
color: rgba(203, 213, 225, 0.78);
max-width: 460px;
margin: 10px auto 0;
line-height: 1.55;
}
/* Sparks más sutiles + más lentas */
.pf-streak-lost .pf-welcome-spark {
background: #94A3B8;
box-shadow: 0 0 8px rgba(148, 163, 184, 0.55);
opacity: 0.55;
}
/* CTA "Empezar de nuevo" */
.pf-streak-lost-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
margin-top: 22px;
background: var(--accent);
color: #FFFFFF;
border: none;
border-radius: var(--r-md);
font-family: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow: var(--shadow-accent);
transition: var(--tr);
opacity: 0;
transform: translateY(10px);
animation: pf-welcome-text-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}
.pf-streak-lost-cta:hover {
background: var(--accent-mid);
transform: translateY(-1px);
box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent);
}
.pf-streak-lost-cta:active {
transform: translateY(0);
}
/* Clone que vuela del centro al contador del header */
.pf-streak-flying {
position: fixed;
z-index: 100000;
pointer-events: none;
font-family: 'Nunito', sans-serif;
font-weight: 900;
line-height: 1;
letter-spacing: -3px;
color: #FFFFFF;
text-shadow:
0 0 18px rgba(255, 138, 0, 0.85),
0 6px 26px rgba(255, 138, 0, 0.45);
font-variant-numeric: tabular-nums;
transform: translate(-50%, -50%) scale(1);
transition:
transform 0.75s cubic-bezier(0.55, 0, 0.20, 1),
font-size 0.75s cubic-bezier(0.55, 0, 0.20, 1),
opacity 0.30s ease 0.45s;
will-change: transform, font-size, opacity;
}
/* Bump del contador del header cuando aterriza el número del overlay */
@keyframes pf-hstat-bump {
0% { transform: scale(1); color: inherit; }
35% { transform: scale(1.32); color: #FFB341; }
70% { transform: scale(0.96); }
100% { transform: scale(1); color: inherit; }
}
.hstat--bump {
animation: pf-hstat-bump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center;
}
.hstat--bump i,
.hstat--bump .hstat-text {
animation: pf-hstat-bump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ── PAGE LAYOUT ── */
.ideas-page {
display: grid;
grid-template-columns: 272px 1fr 312px;
/* 100dvh = viewport dinámico: respeta la barra del navegador móvil y
el teclado. Se deja 100vh antes como fallback para navegadores viejos.
Edgar 2026-07-03: en desktop (min-width:961px), el layout ahora ocupa
100dvh completo. El header queda position:fixed cubriendo solo la
columna central (regla mas abajo). Los sidebars ganan altura arriba.
En mobile (max-width:960px) el header vuelve a sticky full-width y
.ideas-page vuelve a restar --header-h — override en el media query. */
height: 100vh;
height: 100dvh;
background: var(--bg-main);
}
/* ── HEADER: fixed centrado sobre la columna central (desktop wide) ──
Sidebars 272px (izq) + 312px (der). Header cubre entre esas dos.
Edgar 2026-07-03: sidebars edge-to-edge del viewport, header adentro. */
@media (min-width: 961px) {
.header {
position: fixed;
top: 0;
left: 272px;
right: 312px;
z-index: 200;
}
/* Empuja el contenido del workspace debajo del header fixed. */
.workspace {
padding-top: var(--header-h);
}
}
/* Breakpoint intermedio (1200px): portfolio se compacta a 72px. */
@media (min-width: 961px) and (max-width: 1200px) {
.header {
left: 72px;
right: 280px;
}
}
/* Mobile (960px): el layout viejo se restaura — header full-width sticky,
.ideas-page resta --header-h. Los sidebars son drawers fixed. */
@media (max-width: 960px) {
.ideas-page {
height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h));
}
.workspace {
padding-top: 0;
}
}
/* ── PORTFOLIO SIDEBAR — dark premium ── */
.portfolio {
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-sidebar);
color: var(--sidebar-text);
}
.pf-scroll {
flex: 1; overflow-y: auto;
display: flex; flex-direction: column;
}
.pf-scroll::-webkit-scrollbar { width: 4px; }
.pf-scroll::-webkit-scrollbar-thumb { background: var(--sidebar-border-mid); border-radius: 4px; }
.pf-section {
padding: 16px 12px 12px;
}
.pf-section + .pf-section {
border-top: 1px solid var(--sidebar-border);
margin-top: 4px;
padding-top: 18px;
}
.pf-section-head {
padding: 0 6px 12px;
}
/* Empty-state del portfolio. Diseñado para sentirse simétrico con la
card madre (sección): mismo margen horizontal que .pf-section-head
(6px), padding interno compacto, y vive justo debajo de la lista
como continuación natural — NO como caja flotante separada. */
/* Edgar 2026-06-29: empty state con icon + microcopy en 2 líneas. */
/* Edgar 2026-06-30: empty state SUTIL — sin borde, sin background,
sin parecer botón. Pattern Notion/Linear/Stripe: solo texto en
gris muy claro + ícono opacado, alineado a la izquierda. */
.pf-mini-empty {
margin: 4px 14px 0;
padding: 4px 0;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.2px;
color: var(--sidebar-text-muted);
text-align: left;
border: 0;
border-radius: 0;
background: transparent;
opacity: 0.55;
display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
}
.pf-mini-empty__icon {
width: 18px !important;
height: 18px !important;
background: transparent !important;
color: var(--sidebar-text-muted) !important;
font-size: 12px !important;
opacity: 0.6 !important;
}
.pf-list:empty {
padding: 0 !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
.pf-mini-empty__icon {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-size: 14px;
opacity: 0.85;
}
.pf-mini-empty__hint {
font-size: 10.5px;
font-weight: 500;
opacity: 0.75;
letter-spacing: 0.2px;
margin-top: -1px;
}
/* Variante inline (sigue existiendo si algún caller la usa) */
.pf-mini-empty--inline {
margin: 2px 6px 8px;
padding: 10px 12px;
opacity: 0.85;
}
/* ─── TRASH DRAWER ───
Footer del sidebar (fuera del pf-scroll). Aloja Archivados y
Eliminados combinando ideas + negocios. Separador visual claro
para que el ojo entienda "esto es almacén, no lista activa". */
/* Edgar 2026-07-02: drawer completamente eliminado del layout.
Los chips son el ÚNICO switch de vista. */
.pf-trash-drawer { display: none !important; }
/* Edgar 2026-07-02: cuando el sidebar está en un modo distinto de 'all',
damos hint visual sutil (border-left teñido) para que el user sepa
que no está en la vista normal. Sutil, no invasivo. */
.portfolio[data-pf-filter="archived"] .pf-title,
.portfolio[data-pf-filter="deleted"] .pf-title,
.portfolio[data-pf-filter="fav"] .pf-title {
opacity: 0.85;
}
.portfolio[data-pf-filter="archived"] .pf-title i { color: #94A3B8; }
.portfolio[data-pf-filter="deleted"] .pf-title i { color: #EF4444; }
.portfolio[data-pf-filter="fav"] .pf-title i { color: #F59E0B; }
/* Placeholder empty adaptado: cuando estamos en modos no-activos y
la lista está vacía, mostrar el mensaje sin el hint de "pica + arriba". */
.portfolio[data-pf-filter="archived"] .pf-mini-empty__hint,
.portfolio[data-pf-filter="deleted"] .pf-mini-empty__hint,
.portfolio[data-pf-filter="fav"] .pf-mini-empty__hint { display: none; }
/* Responsive (móvil <= 720px): título de sección puede truncar. */
@media (max-width: 720px) {
.portfolio .pf-title span[data-i18n] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
}
/* Dentro del drawer los bloques no necesitan margen extra: el padding
del drawer ya separa visualmente. */
.pf-trash-drawer .pf-archived,
.pf-trash-drawer .pf-deleted { margin: 0; }
.pf-trash-drawer .pf-archived + .pf-deleted { margin-top: 4px; }
.pf-header {
padding: 20px 18px 16px;
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
}
.pf-title-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.pf-title {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: 1.2px; color: var(--sidebar-text-soft);
display: inline-flex; align-items: center; gap: 6px;
}
.pf-title i { color: var(--accent); font-size: 12px; }
/* Edgar 2026-06-29: botón "+ Nueva carpeta" icon-only inline en el
title-row. Diseño discreto — no compite con el botón principal de
"Nueva idea". Hover destaca al tema. */
.pf-newfolder-btn {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto;
margin-right: 6px;
background: transparent;
border: 0;
border-radius: 6px;
color: var(--sidebar-text-soft);
cursor: pointer;
font-size: 13px;
transition: background 0.15s, color 0.15s, transform 0.12s;
}
.pf-newfolder-btn:hover {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
transform: translateY(-1px);
}
.pf-newfolder-btn:active { transform: translateY(0); }
/* Estado: input inline editable para crear/renombrar carpeta */
.pf-folder-input {
width: 100%;
background: color-mix(in srgb, var(--text-soft, #fff) 8%, transparent);
border: 1.5px solid var(--accent);
border-radius: 6px;
color: var(--sidebar-text);
font-family: inherit;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 5px 9px;
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* DRAG & DROP visual feedback */
.pf-item[draggable="true"] {
cursor: grab;
}
.pf-item.is-dragging {
opacity: 0.4;
cursor: grabbing;
}
/* Carpeta destino mientras hover con item arrastrándose */
.pf-group.is-drop-target,
.pf-group.is-drop-target > .pf-group-header {
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: 8px;
}
.pf-group.is-drop-target > .pf-group-header { color: var(--accent); }
/* Zona raíz (lista plana) destacada cuando arrastramos un item DESDE
una carpeta — para sacarlo a la raíz. */
.pf-list.is-drop-root {
outline: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: -4px;
border-radius: 8px;
}
/* Item destino para "soltar item sobre item = crear carpeta" */
.pf-item.is-drop-merge {
box-shadow: 0 0 0 2px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: 11px;
transform: scale(1.02);
transition: transform 0.15s, box-shadow 0.15s;
}
/* Edgar 2026-06-29: counter chip más limpio — pill redondeado con
bg sutil que sigue el tema en vez del border duro. */
.pf-count {
font-size: 10.5px; font-weight: 800; color: var(--sidebar-text-soft);
background: color-mix(in srgb, var(--sidebar-text-soft) 12%, transparent);
border: 0;
border-radius: 999px;
padding: 2px 9px;
min-width: 22px; text-align: center;
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.pf-new-btn {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 18px;
background: var(--accent); color: white;
border-radius: var(--r-md);
font-size: 14px; font-weight: 800;
transition: var(--tr);
box-shadow: var(--shadow-accent);
}
.pf-new-btn:hover {
background: var(--accent-mid);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(255,138,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Edgar 2026-06-29: subir negocio — usa el accent del tema (mismo
lenguaje visual que "Nueva idea") pero como variante SECUNDARIA
— outline + accent text, no fill completo. Diferencia jerárquica
sin ruido cromático (antes rosa + azul era ruidoso). */
.pf-new-btn--neg {
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
box-shadow: none;
}
.pf-new-btn--neg:hover {
background: color-mix(in srgb, var(--accent) 20%, transparent);
border-color: var(--accent);
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Convert button (en pio-bar, cuando es idea) */
.convert-btn {
display: none; align-items: center; gap: 8px;
padding: 12px 18px;
background: linear-gradient(135deg, var(--primary), var(--primary-mid));
color: white; border: none; border-radius: var(--r-md);
font-size: 14px; font-weight: 800;
box-shadow: var(--shadow-primary);
transition: var(--tr); cursor: pointer;
}
.convert-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,143,200,0.35); }
.convert-btn.visible { display: inline-flex; }
.convert-btn i { font-size: 15px; }
/* Edgar 2026-06-30: padding lateral 10 → 6px para que los items
queden ALINEADOS exactamente con el botón '+ Nueva idea'.
Cálculo: section 12 + list 6 = 18px (igual que section 12 +
section-head 6 = 18px del botón). SIMETRÍA total. */
.pf-list {
flex: 1; overflow-y: auto;
padding: 10px 6px;
}
.pf-list::-webkit-scrollbar { width: 4px; }
.pf-list::-webkit-scrollbar-thumb { background: var(--sidebar-border-mid); border-radius: 4px; }
.pf-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; padding: 32px 20px; text-align: center;
color: var(--sidebar-text-muted);
}
.pf-empty i { font-size: 32px; color: var(--sidebar-text-soft); opacity: 0.6; }
.pf-empty p { font-size: 13px; line-height: 1.55; }
/* ═════════════════════════════════════════════════════
PF-ITEM — Cards del sidebar (ideas, negocios, archivados,
eliminados). Edgar 2026-06-XX: 'se ven como si fueran dos
cards con CSS barato, parecen botones sencillos. Me
gustaría que se vean pros, porque cada uno es único y
profesional'.
Upgrade pro estilo Linear/Notion:
- Background sutil con tint del sidebar (se sienten como
cards reales, no como filas de menú)
- Border 1px sólido de color sidebar-border para definición
- Padding más respirado (12×14)
- Hover: lift sutil + shadow profunda + border accent
- Active: gradient lateral + ring accent inset + shadow
═════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
CHAT VOICE — Web Speech API dictation (Edgar 2026-06-30)
════════════════════════════════════════════════════════════ */
.cb-voice-btn {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--text-soft);
cursor: pointer;
transition: all 0.18s cubic-bezier(0.32, 0.72, 0, 1);
margin-right: 6px;
flex-shrink: 0;
position: relative;
}
.cb-voice-btn:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.cb-voice-btn i { font-size: 18px; transition: opacity 0.16s ease; }
.cb-voice-icon-listening { display: none; position: absolute; }
.cb-voice-pulse { display: none; }
/* Listening state — rojo + pulse animado */
.cb-voice-btn.is-listening {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.50);
color: #F87171;
}
.cb-voice-btn.is-listening .cb-voice-icon-idle { display: none; }
.cb-voice-btn.is-listening .cb-voice-icon-listening {
display: inline-block; color: #F87171;
animation: cb-voice-mic-pulse 1.2s ease-in-out infinite;
}
.cb-voice-btn.is-listening .cb-voice-pulse {
display: block;
position: absolute;
inset: -3px;
border-radius: 12px;
border: 2px solid rgba(239, 68, 68, 0.40);
animation: cb-voice-ring 1.2s ease-out infinite;
pointer-events: none;
}
@keyframes cb-voice-mic-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.18); opacity: 0.85; }
}
@keyframes cb-voice-ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
/* ════════════════════════════════════════════════════════════
CHAT ATTACHMENTS — Edgar 2026-06-30 (foto / PDF / canvas)
════════════════════════════════════════════════════════════ */
.cb-attach-btn {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--text-soft);
cursor: pointer;
transition: all 0.18s cubic-bezier(0.32, 0.72, 0, 1);
margin-right: 6px;
flex-shrink: 0;
}
.cb-attach-btn:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.cb-attach-btn i { font-size: 18px; }
/* ════════════════════════════════════════════════════════════
ATTACH MENU PREMIUM — Edgar 2026-06-30
Cada opción con su ícono con color tech distintivo, depth,
subtitle, lift hover. Estilo Notion/Linear profesional.
════════════════════════════════════════════════════════════ */
.cb-attach-menu {
min-width: 240px;
padding: 6px;
}
@keyframes cb-attach-in {
from { opacity: 0; transform: translateY(6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Item del attach menu — más alto que el kebab para acomodar
title + subtitle. Hover con lift sutil. */
.cb-attach-menu .cb-attach-opt {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: 8px;
}
.cb-attach-menu .cb-attach-opt:hover {
background: rgba(255, 255, 255, 0.05) !important;
transform: translateX(2px);
}
/* Container del ícono — cuadrado con bg sutil + color del feature */
.cb-attach-menu .cb-attach-opt > i {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
font-size: 16px !important;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.22s cubic-bezier(0.32, 0.72, 0, 1);
position: relative;
overflow: hidden;
}
.cb-attach-menu .cb-attach-opt:hover > i {
transform: scale(1.08);
}
/* Cada feature con SU paleta tech (mismo lenguaje que hstat) */
/* CÁMARA — cyan tech */
.cb-attach-menu .cb-attach-opt[data-attach="camera"] > i {
color: #5EEAD4 !important;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(20, 184, 166, 0.06));
border-color: rgba(20, 184, 166, 0.22);
}
.cb-attach-menu .cb-attach-opt[data-attach="camera"]:hover > i {
box-shadow: 0 0 18px rgba(6, 182, 212, 0.30);
border-color: rgba(20, 184, 166, 0.45);
}
/* GALERÍA — púrpura tech */
.cb-attach-menu .cb-attach-opt[data-attach="image"] > i {
color: #C4B5FD !important;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(167, 139, 250, 0.06));
border-color: rgba(167, 139, 250, 0.22);
}
.cb-attach-menu .cb-attach-opt[data-attach="image"]:hover > i {
box-shadow: 0 0 18px rgba(139, 92, 246, 0.30);
border-color: rgba(167, 139, 250, 0.45);
}
/* DIBUJAR — naranja Piofly brand */
.cb-attach-menu .cb-attach-opt[data-attach="canvas"] > i {
color: #FBBF24 !important;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(255, 138, 0, 0.06));
border-color: rgba(251, 191, 36, 0.22);
}
.cb-attach-menu .cb-attach-opt[data-attach="canvas"]:hover > i {
box-shadow: 0 0 18px rgba(251, 191, 36, 0.32);
border-color: rgba(251, 191, 36, 0.50);
}
/* PDF — rojo (documentos) */
.cb-attach-menu .cb-attach-opt[data-attach="pdf"] > i {
color: #FCA5A5 !important;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(251, 113, 133, 0.06));
border-color: rgba(251, 113, 133, 0.22);
}
.cb-attach-menu .cb-attach-opt[data-attach="pdf"]:hover > i {
box-shadow: 0 0 18px rgba(239, 68, 68, 0.30);
border-color: rgba(251, 113, 133, 0.45);
}
/* Text wrapper — title + subtitle */
.cb-attach-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.cb-attach-title {
font-size: 13px;
font-weight: 600;
color: #E5E7EB;
letter-spacing: 0.005em;
line-height: 1.2;
}
.cb-attach-sub {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.1px;
line-height: 1.2;
}
.cb-attach-menu .cb-attach-opt:hover .cb-attach-title { color: #FFFFFF; }
.cb-attach-menu .cb-attach-opt:hover .cb-attach-sub { color: rgba(255, 255, 255, 0.65); }
/* Section header del attach menu */
.cb-attach-menu .pf-menu-section {
padding: 6px 10px 4px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.40);
}
/* Light theme */
[data-theme="light"] .cb-attach-title { color: #1F2937; }
[data-theme="light"] .cb-attach-sub { color: rgba(0, 0, 0, 0.50); }
[data-theme="light"] .cb-attach-menu .cb-attach-opt:hover { background: rgba(0, 0, 0, 0.05) !important; }
[data-theme="light"] .cb-attach-menu .pf-menu-section { color: rgba(0, 0, 0, 0.45); }
/* Edgar 2026-07-02: chip thumbnail estilo Claude.ai/ChatGPT.
Preview antiguo (banda naranja larga) reemplazado por chip cuadrado
72×72 inline en la fila del textarea. Click en imagen abre lightbox. */
.cb-attach-preview.cb-attach-preview--chip {
position: relative;
width: 72px; height: 72px;
flex-shrink: 0;
border-radius: 12px;
overflow: visible; /* para que el botón × pueda salir del borde */
background: transparent;
border: 0;
padding: 0;
margin: 0 6px 0 0;
animation: cb-attach-in 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: transform 0.15s ease;
}
.cb-attach-preview.cb-attach-preview--chip:hover {
transform: scale(1.03);
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 12px;
cursor: zoom-in;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-badge {
position: absolute;
bottom: 4px; left: 4px;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
pointer-events: none;
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-pdf {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px;
border-radius: 12px;
background: linear-gradient(135deg, #EF4444, #DC2626);
color: #fff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-pdf i { font-size: 28px; }
.cb-attach-preview.cb-attach-preview--chip .cb-chip-pdf-label {
font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-pdf-name {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 3px 4px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 9px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 0 0 12px 12px;
pointer-events: none;
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-x {
position: absolute;
top: -6px; right: -6px;
width: 22px; height: 22px;
border-radius: 50%;
background: #0F1419;
color: #fff;
border: 2px solid var(--surface, #1E293B);
display: flex; align-items: center; justify-content: center;
font-size: 11px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
z-index: 2;
transition: transform 0.15s ease, background 0.15s ease;
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-x:hover {
background: #DC2626;
transform: scale(1.1);
}
/* Legacy preview (compat con otros usos) — mantenemos por seguridad */
.cb-attach-preview:not(.cb-attach-preview--chip):not(.cb-attach-preview--strip) {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: rgba(255, 138, 0, 0.08);
border: 1px solid rgba(255, 138, 0, 0.25);
border-radius: 10px;
margin: 0 0 8px;
animation: cb-attach-in 0.20s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
/* Edgar 2026-07-03: preview STRIP - banda arriba del chat con chips
chiquitos (48px). Reemplaza el chip 72x72 inline del input. */
.cb-attach-preview--strip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px 6px;
animation: cb-attach-in 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.cb-chip-mini {
position: relative;
width: 48px; height: 48px;
border-radius: 10px;
overflow: visible;
flex-shrink: 0;
cursor: zoom-in;
transition: transform 0.15s ease;
}
.cb-chip-mini:hover { transform: scale(1.06); }
.cb-chip-mini-img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.10);
}
/* PDF chip mini: pill horizontal con icono + nombre + size */
.cb-chip-mini--pdf {
width: auto;
max-width: 260px;
height: 48px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 10px;
background: linear-gradient(135deg, #EF4444, #DC2626);
color: #fff;
cursor: pointer;
}
.cb-chip-mini-icon { font-size: 22px; flex-shrink: 0; }
.cb-chip-mini-meta {
display: flex; flex-direction: column;
min-width: 0;
}
.cb-chip-mini-name {
font-size: 12px;
font-weight: 700;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cb-chip-mini-size {
font-size: 10px;
opacity: 0.85;
font-weight: 500;
}
/* Boton X sobrepuesto en corner superior derecho */
.cb-attach-preview--strip .cb-chip-x {
position: absolute;
top: -6px; right: -6px;
width: 20px; height: 20px;
border-radius: 50%;
background: #0F1419;
color: #fff;
border: 2px solid var(--surface, #1E293B);
display: flex; align-items: center; justify-content: center;
font-size: 10px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
z-index: 2;
transition: transform 0.15s ease, background 0.15s ease;
}
.cb-attach-preview--strip .cb-chip-x:hover {
background: #DC2626;
transform: scale(1.15);
}
/* ═══════════ IN-CHAT: attachment dentro del bubble user ═══════════ */
.fum-bubble.has-attach {
padding: 6px !important;
max-width: min(360px, 88%) !important;
}
.fum-bubble.fum-bubble--media-only {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
max-width: min(360px, 88%) !important;
}
.fum-attach-img {
display: block;
max-width: 100%;
max-height: 340px;
width: auto; height: auto;
border-radius: 14px;
cursor: zoom-in;
object-fit: cover;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);
transition: transform 0.15s ease;
}
.fum-attach-img:hover { transform: scale(1.01); }
.fum-bubble.has-attach:not(.fum-bubble--media-only) .fum-attach-img {
border-radius: 10px 10px 6px 6px;
margin-bottom: 6px;
}
.fum-attach-text {
padding: 6px 10px 8px;
font-size: 14px;
line-height: 1.45;
word-break: break-word;
}
.fum-attach-pdf {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s ease;
min-width: 220px;
max-width: 100%;
}
.fum-attach-pdf:hover { background: rgba(255, 255, 255, 0.16); }
.fum-attach-pdf-icon {
width: 40px; height: 48px;
border-radius: 6px;
background: linear-gradient(135deg, #EF4444, #DC2626);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.fum-attach-pdf-meta {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.fum-attach-pdf-meta strong {
font-size: 13px; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fum-attach-pdf-meta span {
font-size: 11px; opacity: 0.7;
}
.fum-attach-pdf-open {
font-size: 16px; opacity: 0.6; flex-shrink: 0;
}
/* ═══════════ LIGHTBOX: viewer fullscreen ═══════════ */
.pf-lightbox {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 10000;
display: flex; flex-direction: column;
opacity: 0;
transition: opacity 0.22s ease;
overscroll-behavior: contain;
}
.pf-lightbox--in { opacity: 1; }
.pf-lightbox-topbar {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
padding-top: max(12px, env(safe-area-inset-top));
color: #fff;
background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
z-index: 2;
}
.pf-lightbox-name {
flex: 1; min-width: 0;
font-size: 14px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
opacity: 0.9;
}
.pf-lightbox-dl,
.pf-lightbox-close {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 0;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
transition: background 0.15s ease, transform 0.15s ease;
text-decoration: none;
}
.pf-lightbox-dl:hover,
.pf-lightbox-close:hover {
background: rgba(255, 255, 255, 0.22);
transform: scale(1.05);
}
.pf-lightbox-stage {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: 12px 24px 24px;
overflow: hidden;
cursor: zoom-out;
}
.pf-lightbox-img {
max-width: 95vw;
max-height: calc(100vh - 90px);
object-fit: contain;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
touch-action: pinch-zoom;
}
.pf-lightbox-pdf {
width: 95vw;
height: calc(100vh - 100px);
border: 0;
border-radius: 8px;
background: #fff;
}
/* ═══════════ RESPONSIVE (<= 640px) ═══════════ */
@media (max-width: 640px) {
.cb-attach-preview.cb-attach-preview--chip {
width: 56px; height: 56px;
}
.cb-attach-preview.cb-attach-preview--chip .cb-chip-pdf i { font-size: 22px; }
.cb-attach-preview.cb-attach-preview--chip .cb-chip-pdf-label { font-size: 8px; }
.cb-attach-preview.cb-attach-preview--chip .cb-chip-x {
width: 24px; height: 24px;
top: -4px; right: -4px;
}
.fum-bubble.has-attach { max-width: 88% !important; }
.fum-attach-img { max-height: 60vh; }
.fum-attach-pdf { min-width: 180px; padding: 8px 10px; }
.fum-attach-pdf-icon { width: 34px; height: 42px; font-size: 18px; }
.pf-lightbox-topbar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.pf-lightbox-name { font-size: 13px; }
.pf-lightbox-dl,
.pf-lightbox-close { width: 36px; height: 36px; font-size: 16px; }
.pf-lightbox-stage { padding: 8px 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
.cb-attach-preview.cb-attach-preview--chip,
.fum-attach-img,
.pf-lightbox { transition: none !important; animation: none !important; }
}
.cb-prev-img {
width: 44px; height: 44px;
object-fit: cover;
border-radius: 7px;
flex-shrink: 0;
}
.cb-prev-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(239, 68, 68, 0.15);
border-radius: 7px;
color: #F87171;
font-size: 22px;
flex-shrink: 0;
}
.cb-prev-meta {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 1px;
}
.cb-prev-meta strong {
font-size: 12.5px; font-weight: 700;
color: var(--text-main);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-prev-meta span {
font-size: 10.5px; color: var(--text-muted); opacity: 0.7;
}
.cb-prev-remove {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 0;
border-radius: 7px;
color: var(--text-soft);
cursor: pointer;
transition: all 0.16s ease;
}
.cb-prev-remove:hover {
background: rgba(239, 68, 68, 0.20);
color: #F87171;
}
/* Drag over en chat-bar */
.chat-bar.cb-drag-over {
box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.30), inset 0 0 0 2px rgba(255, 138, 0, 0.40);
}
/* ════════════════════════════════════════════════════════════
CANVAS MODAL — Paint estilo (colores, borrador, texto, undo/redo)
════════════════════════════════════════════════════════════ */
.cb-canvas-modal {
position: fixed; inset: 0; z-index: 9998;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.22s ease;
}
.cb-canvas-modal.is-open { opacity: 1; }
.cb-canvas-shell {
width: 100%; max-width: 920px;
max-height: calc(100vh - 32px);
background: rgba(20, 25, 38, 0.98);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.70);
display: flex; flex-direction: column;
overflow: hidden;
transform: scale(0.96);
transition: transform 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.cb-canvas-modal.is-open .cb-canvas-shell { transform: scale(1); }
.cb-canvas-head {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cb-canvas-title {
font-size: 14px; font-weight: 700; color: var(--text-main);
letter-spacing: 0.2px;
}
.cb-canvas-spacer { flex: 1; }
.cb-canvas-btn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #E5E7EB;
cursor: pointer;
transition: all 0.16s ease;
}
.cb-canvas-btn:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.18);
}
.cb-canvas-btn i { font-size: 14px; }
.cb-canvas-close { color: var(--text-muted); }
.cb-canvas-wrap {
flex: 1; overflow: auto;
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: #0d1117;
}
#cb-canvas {
max-width: 100%; max-height: 100%;
background: #1a1f2e;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
cursor: crosshair;
touch-action: none;
}
.cb-canvas-toolbar {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
}
.cb-canvas-tools, .cb-canvas-colors {
display: flex; gap: 4px;
}
.cb-canvas-tool {
width: 32px; height: 32px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #E5E7EB;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.16s ease;
}
.cb-canvas-tool:hover { background: rgba(255, 255, 255, 0.07); }
.cb-canvas-tool i { font-size: 14px; }
.cb-canvas-tool--active {
background: color-mix(in srgb, var(--accent) 20%, transparent);
border-color: var(--accent);
color: var(--accent-light);
}
.cb-canvas-color {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
transition: all 0.16s ease;
}
.cb-canvas-color:hover { transform: scale(1.15); }
.cb-canvas-color--active {
border-color: var(--accent);
transform: scale(1.10);
box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.40);
}
.cb-canvas-size {
flex: 1; max-width: 140px;
display: flex; align-items: center;
}
#cb-brush-size {
width: 100%;
accent-color: var(--accent);
}
.cb-canvas-send {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
background: var(--accent);
border: 0;
border-radius: 999px;
color: #FFFFFF;
font-size: 13px; font-weight: 700;
cursor: pointer;
transition: all 0.18s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 2px 10px rgba(255, 138, 0, 0.35);
margin-left: auto;
}
.cb-canvas-send:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(255, 138, 0, 0.50);
filter: brightness(1.08);
}
.cb-canvas-send i { font-size: 13px; }
/* ════════════════════════════════════════════════════════════
CANVAS MOBILE — Edgar 2026-06-30 rediseño responsive premium
════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
.cb-canvas-modal {
padding: 0;
background: rgba(0, 0, 0, 0.85);
}
.cb-canvas-shell {
max-width: 100%;
max-height: 100dvh;
height: 100dvh;
border-radius: 0;
border: 0;
display: flex;
flex-direction: column;
}
/* HEAD compacta con touch-friendly buttons */
.cb-canvas-head {
padding: 10px 12px;
gap: 6px;
min-height: 52px;
}
.cb-canvas-title {
font-size: 15px;
font-weight: 800;
}
.cb-canvas-btn {
width: 38px;
height: 38px;
border-radius: 10px;
}
.cb-canvas-btn i { font-size: 16px; }
/* WRAP del canvas — máximo espacio disponible */
.cb-canvas-wrap {
flex: 1;
padding: 8px;
min-height: 0;
background: #0a0f1c;
}
#cb-canvas {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
border-radius: 12px;
touch-action: none;
}
/* TOOLBAR rediseñada en 2 filas para mobile */
.cb-canvas-toolbar {
flex-direction: column;
gap: 10px;
padding: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(10, 15, 28, 0.98);
backdrop-filter: blur(20px) saturate(160%);
}
/* FILA 1: tools + slider de tamaño */
.cb-canvas-tools {
order: 1;
gap: 6px;
width: 100%;
justify-content: center;
}
.cb-canvas-tool {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
}
.cb-canvas-tool i { font-size: 18px; }
.cb-canvas-size {
order: 2;
max-width: 100%;
width: 100%;
padding: 0 6px;
}
#cb-brush-size {
height: 28px;
}
/* FILA 2: colores en grid */
.cb-canvas-colors {
order: 3;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 6px;
width: 100%;
padding: 4px 0;
}
.cb-canvas-color {
width: 100%;
height: 30px;
max-width: 32px;
margin: 0 auto;
border-radius: 50%;
}
.cb-canvas-color--active {
transform: scale(1.18) !important;
box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.55), 0 4px 12px rgba(0,0,0,0.4) !important;
}
/* FILA 3: send button gigante full-width */
.cb-canvas-send {
order: 4;
margin-left: 0;
width: 100%;
justify-content: center;
padding: 14px 18px;
font-size: 14.5px;
font-weight: 800;
border-radius: 999px;
gap: 10px;
box-shadow: 0 4px 20px rgba(255, 138, 0, 0.45);
}
.cb-canvas-send i { font-size: 15px; }
}
/* Pantallas muy chicas: ajustes extra */
@media (max-width: 380px) {
.cb-canvas-colors {
grid-template-columns: repeat(5, 1fr);
}
.cb-canvas-color { height: 34px; max-width: 36px; }
}
/* ════════════════════════════════════════════════════════════
CAMERA LIVE (desktop modal) — Edgar 2026-06-30
════════════════════════════════════════════════════════════ */
.cb-camera-shell { max-width: 720px; }
.cb-camera-stage {
position: relative;
flex: 1;
background: #000;
display: flex; align-items: center; justify-content: center;
min-height: 360px;
overflow: hidden;
}
#cb-camera-video {
width: 100%; height: 100%;
object-fit: cover;
max-height: 60vh;
}
.cb-camera-loading {
position: absolute;
color: #E5E7EB;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
}
.cb-camera-toolbar {
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, 0.92);
}
.cb-camera-shutter {
width: 64px; height: 64px;
position: relative;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
.cb-camera-shutter:hover { transform: scale(1.04); }
.cb-camera-shutter:active { transform: scale(0.94); }
.cb-camera-shutter-ring {
position: absolute; inset: 0;
border: 3px solid #FFFFFF;
border-radius: 50%;
}
.cb-camera-shutter-dot {
width: 50px; height: 50px;
background: #FFFFFF;
border-radius: 50%;
transition: all 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
.cb-camera-shutter:active .cb-camera-shutter-dot {
background: var(--accent);
transform: scale(0.85);
}
/* ════════════════════════════════════════════════════════════
AUDIO RECORDER — mensaje de voz tipo WhatsApp
════════════════════════════════════════════════════════════ */
.cb-audio-shell { max-width: 500px; }
.cb-audio-stage {
flex: 1;
padding: 32px 20px;
display: flex; flex-direction: column; align-items: center;
gap: 18px;
min-height: 320px;
}
.cb-audio-visualizer {
width: 140px; height: 140px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 138, 0, 0.08);
border: 2px solid rgba(255, 138, 0, 0.20);
transition: all 0.3s ease;
}
.cb-audio-visualizer.is-recording {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.50);
animation: cb-audio-pulse 1.6s ease-in-out infinite;
}
@keyframes cb-audio-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.50); transform: scale(1); }
50% { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); transform: scale(1.05); }
}
.cb-audio-wave {
width: 80px; height: 80px;
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
border-radius: 50%;
opacity: 0.6;
}
.cb-audio-visualizer.is-recording .cb-audio-wave {
background: radial-gradient(circle, #EF4444 0%, transparent 70%);
animation: cb-audio-wave-dance 1.2s ease-in-out infinite;
}
@keyframes cb-audio-wave-dance {
0%, 100% { transform: scale(0.85); opacity: 0.6; }
50% { transform: scale(1.10); opacity: 0.95; }
}
.cb-audio-timer {
font-size: 28px; font-weight: 700;
color: #E5E7EB;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.cb-audio-hint {
font-size: 13px; font-weight: 500;
color: var(--text-muted);
opacity: 0.8;
}
.cb-audio-transcript {
font-size: 13.5px;
color: #E5E7EB;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 12px 14px;
max-height: 100px;
overflow-y: auto;
width: 100%;
max-width: 380px;
line-height: 1.5;
}
#cb-audio-preview {
width: 100%;
max-width: 380px;
margin-top: 4px;
border-radius: 8px;
}
.cb-audio-toolbar {
display: flex; align-items: center; justify-content: center; gap: 14px;
padding: 16px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cb-audio-rec-btn {
width: 56px; height: 56px;
background: var(--accent);
border: 0;
border-radius: 50%;
color: #FFFFFF;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.22s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 4px 16px rgba(255, 138, 0, 0.40);
}
.cb-audio-rec-btn i { font-size: 22px; }
.cb-audio-icon-stop { display: none; }
.cb-audio-rec-btn:hover { transform: scale(1.05); filter: brightness(1.08); }
.cb-audio-rec-btn:active { transform: scale(0.96); }
.cb-audio-rec-btn.is-recording {
background: #EF4444;
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.45);
animation: cb-audio-btn-pulse 1.4s ease-in-out infinite;
}
.cb-audio-rec-btn.is-recording .cb-audio-icon-mic { display: none; }
.cb-audio-rec-btn.is-recording .cb-audio-icon-stop { display: inline-block; }
@keyframes cb-audio-btn-pulse {
0%, 100% { box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45); }
50% { box-shadow: 0 4px 28px rgba(239, 68, 68, 0.65); }
}
.cb-audio-trash, .cb-audio-send {
display: inline-flex; align-items: center; justify-content: center;
gap: 7px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
color: #E5E7EB;
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.cb-audio-trash {
width: 44px; height: 44px; padding: 0;
color: #F87171;
border-color: rgba(239, 68, 68, 0.25);
}
.cb-audio-trash:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.50);
}
.cb-audio-send {
background: var(--accent);
color: #FFFFFF;
border-color: var(--accent);
box-shadow: 0 2px 10px rgba(255, 138, 0, 0.30);
}
.cb-audio-send:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 6px 18px rgba(255, 138, 0, 0.42);
}
@media (max-width: 760px) {
.cb-camera-shell, .cb-audio-shell {
max-width: 100%; max-height: 100vh; border-radius: 0;
}
.cb-audio-stage { padding: 24px 16px; gap: 14px; }
.cb-audio-visualizer { width: 120px; height: 120px; }
.cb-audio-wave { width: 70px; height: 70px; }
.cb-audio-timer { font-size: 24px; }
}
/* ════════════════════════════════════════════════════════════
SIDEBAR HEADER — Edgar 2026-06-30
Edgar: 'PROJECTS tiene que tener los mismos estilos que SUMMARY'.
→ Aplica EXACTAMENTE los mismos values del .ep-header / .ep-title
del exec-panel para que sean visualmente idénticos.
════════════════════════════════════════════════════════════ */
.pf-header {
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
}
.pf-header-title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.1px;
color: var(--text-muted);
}
/* Edgar 2026-06-30: dot verde eliminado (tanto de PROYECTOS
como del SUMMARY abajo). */
.pf-header::after { display: none !important; }
/* Edgar 2026-06-30 (3ra iteración): IGUALAR pixel-a-pixel con .ep-header
cuando hay chat-theme activo. Antes solo replicaba el border-color y
quedaba con padding/background/backdrop distintos → desalineación
visible entre PROYECTOS y RESUMEN. Ahora replico los 4 valores:
border-bottom, background, backdrop-filter y padding 20px 24px. */
body[data-chat-theme] .pf-header {
border-bottom: 1px solid var(--ws-border) !important;
background: rgba(255, 255, 255, 0.01) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
padding: 20px 24px !important;
}
body[data-chat-theme] .pf-header-title {
color: var(--ws-chat-accent-light) !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
font-weight: 900 !important;
text-shadow: 0 0 10px rgba(255, 138, 0, 0.1);
}
/* Edgar 2026-07-02: reglas del trash drawer eliminadas —
el drawer fue removido del layout (chips = single switch de vista). */
/* ════════════════════════════════════════════════════════════
PORTFOLIO TOOLBAR — search + chips + sort + view toggle
Edgar 2026-06-30: Fase 2 organización tipo Discord/Linear.
════════════════════════════════════════════════════════════ */
.pf-toolbar {
padding: 12px 12px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* SEARCH BAR */
.pf-search {
position: relative;
display: flex;
align-items: center;
}
.pf-search-icon {
position: absolute;
left: 14px;
font-size: 14px;
color: var(--sidebar-text-muted);
opacity: 0.85;
pointer-events: none;
transition: color 0.18s ease, opacity 0.18s ease;
}
/* Edgar 2026-07-03: se ve mas como boton/pill (menos como input feo).
Radius redondo, bg mas definido, border visible pero elegante, shadow
sutil, y hover/focus con feedback claro tipo boton. */
.pf-search-input {
width: 100%;
height: 36px;
padding: 0 36px 0 38px;
font: inherit;
font-size: 13px;
font-weight: 600;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: var(--sidebar-text);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.08);
transition: background 0.18s cubic-bezier(0.32, 0.72, 0, 1),
border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
box-shadow 0.18s cubic-bezier(0.32, 0.72, 0, 1);
outline: none;
cursor: text;
}
.pf-search-input:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.18);
}
.pf-search-input:hover + .pf-search-clear,
.pf-search:hover .pf-search-icon {
opacity: 1;
}
.pf-search-input:focus {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 138, 0, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 3px rgba(255, 138, 0, 0.15);
}
/* Light mode override: fondo mas claro visible sobre sidebar blanco */
html:not([data-theme]) .pf-search-input {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(15, 23, 42, 0.04);
}
html:not([data-theme]) .pf-search-input:hover {
background: rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.16);
}
html:not([data-theme]) .pf-search-input:focus {
background: #fff;
border-color: rgba(255, 138, 0, 0.6);
}
.pf-search-input::placeholder {
color: var(--sidebar-text-muted);
opacity: 0.55;
}
.pf-search-input:focus {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 138, 0, 0.35);
box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.pf-search-clear {
position: absolute;
right: 6px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 0;
border-radius: 6px;
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.16s ease;
font-size: 11px;
}
.pf-search-clear:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--sidebar-text);
}
/* TOOLBAR ROW (chips + actions) */
.pf-toolbar-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pf-chips {
display: flex;
gap: 4px;
flex: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.pf-chips::-webkit-scrollbar { display: none; }
.pf-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 9px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1px;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.18s cubic-bezier(0.32, 0.72, 0, 1);
white-space: nowrap;
flex-shrink: 0;
}
.pf-chip i { font-size: 12px; }
.pf-chip:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--sidebar-text);
}
.pf-chip--active {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent-light);
border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.pf-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
color: var(--sidebar-text);
}
.pf-chip--active .pf-chip-count {
background: color-mix(in srgb, var(--accent) 32%, transparent);
color: var(--accent-light);
}
/* TOOLBAR ACTIONS (sort + view) */
.pf-tb-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.pf-tb-btn {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.18s cubic-bezier(0.32, 0.72, 0, 1);
font-size: 13px;
position: relative;
}
.pf-tb-btn:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--sidebar-text);
}
.pf-tb-btn.is-active {
background: rgba(255, 255, 255, 0.08);
color: var(--accent-light);
}
.pf-tb-btn i { font-size: 13px; }
/* VIEW TOGGLE — swap iconos según vista actual */
#pf-view-btn .pf-view-icon-grid { display: none; }
#pf-view-btn[data-view="grid"] .pf-view-icon-list { display: none; }
#pf-view-btn[data-view="grid"] .pf-view-icon-grid { display: inline-block; }
/* SORT DROPDOWN */
.pf-sort-wrap { position: relative; }
.pf-sort-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
min-width: 160px;
background: rgba(20, 25, 38, 0.92);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
padding: 5px;
box-shadow:
0 18px 44px -14px rgba(0, 0, 0, 0.45),
0 5px 14px -8px rgba(0, 0, 0, 0.30);
z-index: 100;
animation: pf-sort-in 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes pf-sort-in {
from { opacity: 0; transform: translateY(-6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.pf-sort-opt {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 6px;
color: #E5E7EB;
font-size: 12.5px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 0.16s ease;
}
.pf-sort-opt:hover { background: rgba(255, 255, 255, 0.07); }
.pf-sort-opt i { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.pf-sort-opt--active {
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent-light);
}
.pf-sort-opt--active i { color: var(--accent-light); }
/* RESULT INFO — "Mostrando 3 de 7" cuando hay filtro activo */
.pf-result-info {
font-size: 10.5px;
color: var(--sidebar-text-muted);
opacity: 0.7;
padding: 0 2px;
letter-spacing: 0.1px;
}
/* GRID VIEW — alternativa a la lista densa */
.pf-list--grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.pf-list--grid .pf-item {
flex-direction: column;
align-items: flex-start;
padding: 10px;
gap: 8px;
min-height: 88px;
margin-bottom: 0;
}
.pf-list--grid .pf-item .pfi-body {
width: 100%;
}
.pf-list--grid .pfi-emoji {
width: 32px; height: 32px;
font-size: 15px;
}
.pf-list--grid .pfi-menu-btn {
position: absolute;
top: 6px;
right: 6px;
}
/* DRAG & DROP states */
.pf-item[draggable="true"] { cursor: grab; }
.pf-item.is-dragging {
opacity: 0.45;
cursor: grabbing;
transform: scale(0.96);
}
.pf-drop-zone {
position: relative;
}
.pf-drop-zone.is-drop-hover::after {
content: '';
position: absolute;
inset: 2px;
border: 2px dashed var(--accent);
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 6%, transparent);
pointer-events: none;
animation: pf-drop-pulse 1s ease-in-out infinite;
}
@keyframes pf-drop-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* RESPONSIVE — toolbar compactado en mobile drawer */
@media (max-width: 960px) {
.pf-toolbar {
padding: 10px 10px 8px;
}
.pf-search-input { height: 36px; font-size: 14px; }
.pf-chip { height: 28px; padding: 0 10px; font-size: 12px; }
.pf-tb-btn { width: 28px; height: 28px; }
.pf-list--grid { grid-template-columns: 1fr; }
}
/* Edgar 2026-06-30: items COMPACTOS estilo Linear/Discord —
cuando tengas 20+ items la lista debe caber sin scroll
infinito. Padding reducido, emoji más chico, mejor jerarquía. */
.pf-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 9px;
border-radius: 8px;
cursor: pointer;
position: relative;
margin-bottom: 2px;
background: transparent;
border: 1px solid transparent;
box-shadow: none;
transition:
background 0.16s cubic-bezier(0.32, 0.72, 0, 1),
border-color 0.16s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
.pf-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: transparent;
box-shadow: none;
transform: none;
}
}
.pf-item:active {
transform: none;
background: rgba(255, 255, 255, 0.06);
}
/* Item activo — bar lateral + bg tintado del accent */
.pf-item--active {
background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
border-color: transparent !important;
box-shadow: inset 3px 0 0 var(--accent) !important;
}
/* Animación de entrada cuando se crea un negocio nuevo */
@keyframes pf-item-enter {
0% { opacity: 0; transform: translateX(-22px) scale(0.94); }
55% { opacity: 1; transform: translateX(0) scale(1.04); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pf-item-glow {
0% { box-shadow: 0 0 0 0 var(--accent-soft), 0 0 0 0 rgba(255,138,0,0.0); }
40% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 22px rgba(255,138,0,0.30); }
100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 rgba(255,138,0,0.0); }
}
.pf-item--enter {
animation: pf-item-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
pf-item-glow 1.6s ease-out 0.2s;
}
.pf-item--enter .pfi-emoji {
animation: pf-emoji-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes pf-emoji-pop {
0% { transform: scale(0); }
60% { transform: scale(1.2) rotate(8deg); }
100% { transform: scale(1) rotate(0); }
}
.pf-item--active::before {
display: none;
}
.pf-item--active .pfi-title { color: var(--accent-light); }
/* Edgar 2026-06-30: emoji COMPACTO (28px). Antes 40px era
demasiado grande para listas densas. */
.pfi-emoji {
width: 28px; height: 28px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.025));
border: 1px solid transparent;
border-radius: 7px;
color: var(--accent-light);
font-size: 14px;
transition: all 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
.pf-item:hover .pfi-emoji {
background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.04));
}
.pf-item--active .pfi-emoji {
background: color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--accent);
}
.pfi-body { flex: 1; min-width: 0; }
.pfi-title-row {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
/* Edgar 2026-06-30: jerarquía Linear/Discord — título 13.5px
weight 600 (no 800), meta 10.5px gris muted más sutil. */
.pfi-title {
font-size: 13.5px; font-weight: 600; color: var(--sidebar-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1; min-width: 0;
letter-spacing: -0.10px;
line-height: 1.25;
}
.pfi-meta {
font-size: 10.5px;
color: var(--sidebar-text-muted);
margin-top: 1px;
font-weight: 500;
letter-spacing: 0.05px;
display: flex;
align-items: center;
gap: 5px;
opacity: 0.75;
}
/* Dot de estado a la izquierda del meta — animado para items
activos en config, estático para los demás. */
.pfi-meta::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sidebar-text-muted);
flex-shrink: 0;
opacity: 0.65;
}
.pf-item--active .pfi-meta::before {
background: var(--accent);
opacity: 1;
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
animation: pfi-meta-dot-pulse 2.0s ease-in-out infinite;
}
@keyframes pfi-meta-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.30); opacity: 0.75; }
}
/* Estrella de favorito — vive del lado del botón ⋯ (a la derecha),
no en el título. Edgar prefiere el título limpio y el badge de
favorito en la zona de acciones. */
.pfi-fav-mark {
color: #FFB341;
font-size: 13px;
flex-shrink: 0;
align-self: center;
margin-right: 2px;
filter: drop-shadow(0 0 6px rgba(255,179,65,0.45));
}
/* Chips de estado (Pausado/Cerrado) removidos — el concepto de
estado del negocio se eliminó por redundancia con Archivar/Eliminar.
Si en el futuro vuelve, restaurar estas reglas. */
/* Botón ⋯ (más opciones) — reemplaza al trash directo */
.pfi-menu-btn {
opacity: 0; width: 26px; height: 26px; flex-shrink: 0;
border: none; background: transparent;
border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center;
color: var(--sidebar-text-muted); font-size: 14px;
cursor: pointer;
transition: var(--tr);
}
.pf-item:hover .pfi-menu-btn,
.pfi-menu-btn:focus { opacity: 1; }
.pfi-menu-btn:hover { background: rgba(255,255,255,0.06); color: var(--sidebar-text); }
/* ── Sección de archivados (collapsible inline) ────────────── */
.pf-archived {
margin-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 6px;
}
.pf-archived-toggle {
width: 100%;
background: transparent;
border: none;
display: flex; align-items: center; gap: 8px;
padding: 7px 11px;
border-radius: var(--r-xs);
color: var(--sidebar-text-muted);
font-family: inherit;
font-size: 12px; font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.pf-archived-toggle:hover { background: rgba(255,255,255,0.04); color: var(--sidebar-text); }
.pf-archived-toggle > span { flex: 1; text-align: left; }
.pf-archived-caret { transition: transform 0.2s; font-size: 10px; }
.pf-archived--open .pf-archived-caret { transform: rotate(180deg); }
/* Slide-down/up suave en lugar de display:none/block snap.
max-height generoso para listas largas; el easing es elástico para
conectar con el resto del lenguaje cinemático de la app. */
.pf-archived-list {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
margin-top: 0;
transition:
max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s ease-out,
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 0.32s ease-out;
}
.pf-archived--open .pf-archived-list {
max-height: 80vh;
opacity: 0.72;
transform: translateY(0);
margin-top: 4px;
}
/* Items archivados se ven más apagados */
.pf-archived-list .pf-item { opacity: 0.85; }
.pf-archived-list .pf-item .pfi-emoji { opacity: 0.7; }
/* ── Sección "Eliminados" / Papelera ──────────────────────────
Mismo patrón que archivados pero con acento ROJO sutil para
señalar que es zona destructiva. Items con strike-through y
fecha "hace X días". */
.pf-deleted {
margin-top: 6px;
border-top: 1px solid rgba(239,68,68,0.10);
padding-top: 6px;
}
.pf-deleted-toggle {
width: 100%;
background: transparent;
border: none;
display: flex; align-items: center; gap: 8px;
padding: 7px 11px;
border-radius: var(--r-xs);
color: var(--sidebar-text-muted);
font-family: inherit;
font-size: 12px; font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.pf-deleted-toggle > i:first-child { color: rgba(239,68,68,0.70); }
.pf-deleted-toggle:hover { background: rgba(239,68,68,0.06); color: #FCA5A5; }
.pf-deleted-toggle > span { flex: 1; text-align: left; }
.pf-deleted-caret { transition: transform 0.2s; font-size: 10px; }
.pf-deleted--open .pf-deleted-caret { transform: rotate(180deg); }
/* Edgar 2026-07-03: header row con toggle + botón "Vaciar" a la derecha.
Toggle mantiene 100% del ancho residual; botón es compacto e icónico
en móvil (solo escoba), con texto en desktop. */
.pf-deleted-header {
display: flex; align-items: center; gap: 4px;
width: 100%;
}
.pf-deleted-header .pf-deleted-toggle { flex: 1; }
.pf-deleted-empty {
display: inline-flex; align-items: center; gap: 5px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-xs);
padding: 6px 9px;
color: rgba(239,68,68,0.75);
font-family: inherit;
font-size: 11px; font-weight: 700;
letter-spacing: 0.2px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.pf-deleted-empty > i { font-size: 13px; }
.pf-deleted-empty:hover {
background: rgba(239,68,68,0.10);
border-color: rgba(239,68,68,0.35);
color: #FCA5A5;
}
.pf-deleted-empty:active { transform: scale(0.96); }
/* Slide-down/up (mismo patrón que archivados) — easing elástico para
seguir el lenguaje cinemático del resto de la app. */
.pf-deleted-list {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
margin-top: 0;
transition:
max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s ease-out,
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 0.32s ease-out;
}
.pf-deleted--open .pf-deleted-list {
max-height: 80vh;
opacity: 0.78;
transform: translateY(0);
margin-top: 4px;
}
/* Pulse cuando un item recién aterriza en la papelera — señala
visualmente "el item que acabas de eliminar quedó aquí". */
@keyframes pf-deleted-receive {
0% { background: rgba(239,68,68,0.00); transform: scale(1); }
30% { background: rgba(239,68,68,0.18); transform: scale(1.02); }
100% { background: rgba(239,68,68,0.00); transform: scale(1); }
}
.pf-deleted--just-received .pf-deleted-toggle {
animation: pf-deleted-receive 1.1s ease-out;
}
/* ═══════════════════════════════════════════════════════════
Animación cinemática del soft delete — la card "cae" hacia
la papelera con sparks naranjas. Misma escuela que el welcome
cinematic: dramatic motion + brand sparks + smooth easing. */
@keyframes pf-item-fall-to-trash {
0% {
opacity: 1;
transform: scale(1) translateY(0) rotate(0);
box-shadow: 0 0 0 0 rgba(239,68,68,0);
}
18% {
opacity: 1;
transform: scale(1.05) translateY(-3px) rotate(-1.5deg);
box-shadow: 0 14px 30px rgba(239,68,68,0.30), 0 0 0 4px rgba(255,138,0,0.15);
}
55% {
opacity: 0.55;
transform: scale(0.72) translateY(34px) rotate(-4deg);
filter: blur(0.5px);
}
100% {
opacity: 0;
transform: scale(0.28) translateY(88px) rotate(-7deg);
filter: blur(2px);
}
}
.pf-item--deleting {
animation: pf-item-fall-to-trash 0.62s cubic-bezier(0.45, 0, 0.55, 1) forwards;
pointer-events: none;
z-index: 100;
position: relative;
}
/* Container de sparks que aparecen alrededor de la card al borrar */
.pf-del-sparks {
position: fixed;
width: 0; height: 0;
pointer-events: none;
z-index: 99;
}
.pf-del-spark {
position: absolute;
top: 0; left: 0;
width: var(--size); height: var(--size);
margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
background: #FFA333;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255,138,0,0.85);
opacity: 0;
animation: pf-del-spark-burst var(--dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pf-del-spark-burst {
0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(0.5); }
15% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--dist)) scale(0.1); }
}
/* Item dentro de papelera — visualmente "tachado" pero legible */
.pf-item--deleted {
opacity: 0.65;
cursor: default;
}
.pf-item--deleted .pfi-title {
text-decoration: line-through;
text-decoration-color: rgba(239,68,68,0.40);
text-decoration-thickness: 1.5px;
}
.pf-item--deleted .pfi-emoji {
background: rgba(239,68,68,0.06);
filter: grayscale(0.5);
}
.pf-item--deleted .pfi-meta {
color: rgba(239,68,68,0.55);
font-weight: 700;
}
.pf-item--deleted:hover { opacity: 0.85; }
.pf-item--deleted .pfi-menu-btn { opacity: 0.5; }
.pf-item--deleted:hover .pfi-menu-btn { opacity: 1; color: var(--sidebar-text); }
/* ═══════════════════════════════════════════════════════════
CINEMATIC ACTIONS — cada acción tiene su propio momento.
Mismo lenguaje que el welcome cinematic y el delete-to-trash:
motion dramatic + sparks de brand + easing elástico.
Lo importante: cada acción se SIENTE distinta.
═══════════════════════════════════════════════════════════ */
/* ─── RENAME ─── flash naranja + título crossfade en el mismo lugar */
@keyframes pf-item-rename-flash {
0% { box-shadow: 0 0 0 0 rgba(255,138,0,0); transform: scale(1); }
30% { box-shadow: 0 0 0 4px rgba(255,138,0,0.35), 0 8px 24px rgba(255,138,0,0.25); transform: scale(1.03); }
70% { box-shadow: 0 0 0 2px rgba(255,138,0,0.18); transform: scale(1.01); }
100% { box-shadow: 0 0 0 0 rgba(255,138,0,0); transform: scale(1); }
}
.pf-item--renaming {
animation: pf-item-rename-flash 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
z-index: 10; position: relative;
}
@keyframes pf-title-morph-out {
0% { opacity: 1; transform: translateY(0); filter: blur(0); }
100% { opacity: 0; transform: translateY(-6px); filter: blur(2px); }
}
@keyframes pf-title-morph-in {
0% { opacity: 0; transform: translateY(6px); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pf-title--morph-out { animation: pf-title-morph-out 0.22s ease forwards; }
.pf-title--morph-in { animation: pf-title-morph-in 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
/* ─── ARCHIVE ─── fold suave + slide hacia abajo (no es destrucción, es guardar) */
@keyframes pf-item-archive-fold {
0% { opacity: 1; transform: scale(1) translateY(0) rotateX(0deg); box-shadow: 0 0 0 0 rgba(96,165,250,0); }
22% { opacity: 1; transform: scale(1.02) translateY(-2px); box-shadow: 0 10px 24px rgba(96,165,250,0.25), 0 0 0 3px rgba(96,165,250,0.15); }
60% { opacity: 0.6; transform: scale(0.88) translateY(20px) rotateX(45deg); }
100% { opacity: 0; transform: scale(0.7) translateY(46px) rotateX(85deg); filter: blur(1.5px); }
}
.pf-item--archiving {
animation: pf-item-archive-fold 0.58s cubic-bezier(0.45, 0, 0.55, 1) forwards;
transform-origin: top center;
pointer-events: none; z-index: 100; position: relative;
}
@keyframes pf-archived-receive {
0% { background: rgba(96,165,250,0.00); transform: scale(1); }
30% { background: rgba(96,165,250,0.18); transform: scale(1.02); }
100% { background: rgba(96,165,250,0.00); transform: scale(1); }
}
.pf-archived--just-received .pf-archived-toggle {
animation: pf-archived-receive 1.1s ease-out;
}
/* ─── UNARCHIVE ─── el item "salta" desde la sección archivada hacia arriba */
@keyframes pf-item-unarchive-pop {
0% { opacity: 0; transform: scale(0.6) translateY(-30px) rotate(2deg); filter: blur(1.5px); }
40% { opacity: 1; transform: scale(1.08) translateY(4px) rotate(-1deg); filter: blur(0); }
70% { transform: scale(0.97) translateY(-1px); }
100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
.pf-item--unarchiving {
animation: pf-item-unarchive-pop 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
z-index: 10; position: relative;
}
/* Edgar 2026-07-03: animación específica para 'item aterriza en carpeta
destino tras drop'. Antes se usaba pf-item-unarchive-pop (con blur
y rotate — dramático de más para un move-to-folder). Nueva anim:
cae desde arriba con overshoot suave, sin blur ni rotate. Feels
professional. */
@keyframes pf-item-drop-into-folder {
0% { opacity: 0; transform: translateY(-28px) scale(0.90); }
55% { opacity: 1; transform: translateY(4px) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pf-item--dropped-into-folder {
animation: pf-item-drop-into-folder 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
z-index: 10; position: relative;
}
/* Glow suave naranja mientras aterriza, luego se desvanece */
@keyframes pf-item-drop-glow {
0% { box-shadow: 0 0 0 0 transparent; }
40% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent),
0 6px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.pf-item--dropped-into-folder {
animation: pf-item-drop-into-folder 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards,
pf-item-drop-glow 0.9s ease-out;
}
/* ─── RESTORE ─── el item sube desde la papelera con sparks VERDES (vida nueva) */
@keyframes pf-item-restore-rise {
0% { opacity: 0; transform: scale(0.3) translateY(60px); filter: blur(2px); }
35% { opacity: 1; transform: scale(1.10) translateY(-6px); filter: blur(0); box-shadow: 0 12px 30px rgba(34,197,94,0.30), 0 0 0 4px rgba(34,197,94,0.18); }
70% { transform: scale(0.97) translateY(2px); }
100% { opacity: 1; transform: scale(1) translateY(0); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.pf-item--restoring {
animation: pf-item-restore-rise 0.80s cubic-bezier(0.22, 1, 0.36, 1) forwards;
z-index: 10; position: relative;
}
.pf-restore-spark {
position: absolute;
top: 0; left: 0;
width: var(--size); height: var(--size);
margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
background: #4ADE80;
border-radius: 50%;
box-shadow: 0 0 12px rgba(34,197,94,0.95);
opacity: 0;
animation: pf-del-spark-burst var(--dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* ─── MOVE TO GROUP ─── flash morado + slide del card + pulse del grupo destino */
@keyframes pf-item-move-group {
0% { box-shadow: 0 0 0 0 rgba(168,85,247,0); transform: translateX(0) scale(1); }
25% { box-shadow: 0 8px 24px rgba(168,85,247,0.28), 0 0 0 4px rgba(168,85,247,0.20); transform: translateX(6px) scale(1.02); }
55% { transform: translateX(-3px) scale(1.01); }
100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); transform: translateX(0) scale(1); }
}
.pf-item--moving-group {
animation: pf-item-move-group 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
z-index: 10; position: relative;
}
@keyframes pf-group-receive {
0% { background: rgba(168,85,247,0.00); transform: scale(1); }
30% { background: rgba(168,85,247,0.18); transform: scale(1.02); }
100% { background: rgba(168,85,247,0.00); transform: scale(1); }
}
.pf-group--just-received > .pf-group-header,
.pf-group--just-received .pf-group-toggle {
animation: pf-group-receive 1.1s ease-out;
}
/* ─── Sección "Sin grupo" / lista normal — pulse genérico cuando un item aterriza ahí */
@keyframes pf-list-receive {
0% { box-shadow: inset 0 0 0 0 rgba(255,138,0,0); }
30% { box-shadow: inset 0 0 0 2px rgba(255,138,0,0.30); }
100% { box-shadow: inset 0 0 0 0 rgba(255,138,0,0); }
}
.pf-list--just-received {
animation: pf-list-receive 1.1s ease-out;
border-radius: var(--r-sm, 8px);
}
/* ─── HEADER de "Eliminados" — nota sutil del countdown global */
.pf-deleted-note {
font-size: 11px;
font-weight: 600;
color: rgba(239,68,68,0.55);
padding: 2px 11px 6px;
letter-spacing: 0.2px;
font-style: italic;
}
.pf-deleted-note i { font-size: 11px; margin-right: 4px; vertical-align: -1px; }
/* ─── CHIP por item: "X días" hasta hard-delete automático */
.pfi-expire {
display: inline-flex; align-items: center; gap: 4px;
margin-left: 6px;
padding: 1px 7px;
border-radius: var(--r-sm);
font-size: 10px; font-weight: 800;
letter-spacing: 0.3px;
background: rgba(239,68,68,0.10);
color: rgba(239,68,68,0.80);
border: 1px solid rgba(239,68,68,0.18);
white-space: nowrap;
}
.pfi-expire i { font-size: 10px; }
/* Urgencia: últimos 7 días → ámbar warning, último día → rojo fuerte */
.pfi-expire--soon {
background: rgba(245,158,11,0.14);
color: #F59E0B;
border-color: rgba(245,158,11,0.30);
}
.pfi-expire--urgent {
background: rgba(239,68,68,0.22);
color: #FCA5A5;
border-color: rgba(239,68,68,0.45);
animation: pf-expire-urgent-pulse 1.6s ease-in-out infinite;
}
@keyframes pf-expire-urgent-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.00); }
50% { box-shadow: 0 0 0 3px rgba(239,68,68,0.20); }
}
/* ═══════════════════════════════════════════════════════════
HARD DELETE — animación dramática "se borra para siempre".
Esto NO es lo mismo que el soft delete (cae a la papelera).
Esto es disintegrate / vanish completo. Roja, agresiva, con
shake breve + implosion + sparks rojos. Pio se persigna.
═══════════════════════════════════════════════════════════ */
@keyframes pf-item-hard-delete {
0% { opacity: 1; transform: translateX(0) scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0); filter: blur(0); }
8% { transform: translateX(-3px) scale(1.01); }
14% { transform: translateX(3px) scale(1.01); }
20% { transform: translateX(-2px) scale(1.02); box-shadow: 0 0 0 4px rgba(239,68,68,0.35), 0 14px 30px rgba(239,68,68,0.4); }
28% { transform: translateX(2px) scale(1.04); filter: brightness(1.3); }
45% { opacity: 0.7; transform: scale(0.85) rotate(-3deg); filter: blur(1.5px) brightness(1.1); }
75% { opacity: 0.25; transform: scale(0.35) rotate(-10deg); filter: blur(4px); }
100% { opacity: 0; transform: scale(0) rotate(-20deg); filter: blur(8px); }
}
.pf-item--hard-deleting {
animation: pf-item-hard-delete 0.95s cubic-bezier(0.55, 0, 0.7, 0.2) forwards;
transform-origin: center;
pointer-events: none;
z-index: 100;
position: relative;
}
/* Sparks rojos para el hard delete — vidrio rojo + ceniza */
.pf-hard-spark {
position: absolute;
top: 0; left: 0;
width: var(--size); height: var(--size);
margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
background: linear-gradient(180deg, #EF4444, #7F1D1D);
border-radius: 50%;
box-shadow: 0 0 14px rgba(239,68,68,0.95);
opacity: 0;
animation: pf-del-spark-burst var(--dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Flash rojo sobre toda la pantalla — muy breve, fuerte */
@keyframes pf-screen-flash-red {
0% { opacity: 0; }
18% { opacity: 0.18; }
100% { opacity: 0; }
}
.pf-screen-flash-red {
position: fixed; inset: 0;
pointer-events: none;
z-index: 98;
background: radial-gradient(ellipse at center, rgba(239,68,68,0.55), rgba(127,29,29,0.15) 60%, transparent 80%);
animation: pf-screen-flash-red 0.5s ease-out forwards;
}
/* ── Toast de undo (tras soft delete) ──────────────────────────
Aparece abajo a la izquierda del workspace. Persiste 8s o
hasta que el usuario lo cierre. "Deshacer" restaura el item. */
.pf-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
z-index: 10001;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px 12px 16px;
max-width: 480px;
background: var(--card-bg, #1A2233);
color: var(--text-main);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
box-shadow:
0 16px 40px rgba(0,0,0,0.45),
0 4px 12px rgba(0,0,0,0.30);
font-size: 14px;
opacity: 0;
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.pf-toast--in {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.pf-toast--out {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
.pf-toast-icon {
color: rgba(239,68,68,0.85);
font-size: 18px;
flex-shrink: 0;
}
.pf-toast-text { flex: 1; min-width: 0; line-height: 1.4; }
.pf-toast-text b { color: var(--text-main); font-weight: 800; }
.pf-toast-undo {
background: rgba(255,138,0,0.15);
border: 1px solid rgba(255,138,0,0.35);
color: #FFA333;
padding: 6px 14px;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
flex-shrink: 0;
}
.pf-toast-undo:hover {
background: rgba(255,138,0,0.24);
border-color: rgba(255,138,0,0.55);
color: #FFB341;
}
.pf-toast-close {
background: transparent;
border: none;
color: var(--text-muted);
width: 26px; height: 26px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.12s, color 0.12s;
flex-shrink: 0;
}
.pf-toast-close:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }
@media (max-width: 720px) {
.pf-toast { max-width: 92vw; font-size: 13px; padding: 10px 12px; }
.pf-toast-undo { padding: 5px 12px; font-size: 12px; }
}
/* ── Toast adaptado al tema del chat activo ────────────────────
Mismo patrón que los modales (body[data-chat-theme]). El toast
hereda el color accent del tema (naranja del restaurante, cyan
del ecommerce, verde del fitness, etc.). El icono trash se
mantiene rojo siempre — es señal universal de delete. */
body[data-chat-theme] .pf-toast {
background: color-mix(in srgb, var(--ws-chat-accent) 6%, var(--ws-chat-feed-bg, #1A2233));
border-color: color-mix(in srgb, var(--ws-chat-accent) 24%, rgba(255,255,255,0.08));
box-shadow:
0 16px 40px rgba(0,0,0,0.50),
0 4px 12px rgba(0,0,0,0.32),
0 0 0 1px color-mix(in srgb, var(--ws-chat-accent) 8%, transparent),
0 22px 52px -28px color-mix(in srgb, var(--ws-chat-accent) 45%, transparent);
}
body[data-chat-theme] .pf-toast-undo {
background: color-mix(in srgb, var(--ws-chat-accent) 16%, transparent);
border-color: color-mix(in srgb, var(--ws-chat-accent) 38%, transparent);
color: var(--ws-chat-accent-light, var(--ws-chat-accent));
}
body[data-chat-theme] .pf-toast-undo:hover {
background: color-mix(in srgb, var(--ws-chat-accent) 28%, transparent);
border-color: color-mix(in srgb, var(--ws-chat-accent) 60%, transparent);
color: #FFFFFF;
transform: translateY(-1px);
}
body[data-chat-theme] .pf-toast-close:hover {
background: color-mix(in srgb, var(--ws-chat-accent) 10%, rgba(255,255,255,0.04));
color: var(--ws-chat-accent-light, var(--ws-chat-accent));
}
/* ── Botón de confirmación danger (modal hard-delete) ────────── */
.modal-confirm--danger {
background: #EF4444 !important;
color: #FFFFFF !important;
}
.modal-confirm--danger:hover { background: #DC2626 !important; }
/* ── Menú flotante ⋯ (rename / archive / favorite / delete) ──
Hereda el lenguaje visual del picker de temas (sys-themes-popover):
vidrio esmerilado con backdrop-filter, sombra profunda+difusa,
inset highlight superior, border-radius mayor, animación elástica.
Así ambos popovers de la app se sienten hermanos, no parientes
lejanos. */
.pf-menu {
position: fixed;
z-index: 9999;
min-width: 220px;
background: var(--bg-panel, #1A2233);
border: 1px solid var(--border-soft, rgba(255,255,255,0.10));
border-radius: var(--r-md);
padding: 7px;
box-shadow:
0 18px 44px -14px rgba(0,0,0,0.45),
0 5px 14px -8px rgba(0,0,0,0.30),
inset 0 1px 0 rgba(255,255,255,0.06);
animation: pf-menu-in 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
/* Glass effect (mismo patrón que sys-themes-popover) — fallback gracioso
en navegadores sin backdrop-filter. */
@supports (backdrop-filter: blur(10px)) {
.pf-menu {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(26px) saturate(1.8);
-webkit-backdrop-filter: blur(26px) saturate(1.8);
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow:
0 18px 44px -14px rgba(0,0,0,0.30),
0 5px 14px -8px rgba(0,0,0,0.22),
inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme="dark"] .pf-menu {
background: rgba(17, 24, 39, 0.85);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow:
0 20px 48px -16px rgba(0,0,0,0.78),
0 6px 16px -10px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.07);
}
/* Cuando hay tema del chat activo, el menú toma el TINTE del tema —
mismo patrón que el sys-themes-popover. Edgar: 'estos se deben
ajustar a los temas que tiene toda la página por los temas del
chat'. La superficie tinta sutilmente con el accent, el halo de
la sombra también respeta el tema. */
body[data-chat-theme] .pf-menu {
background: color-mix(in srgb, var(--ws-chat-accent) 11%, color-mix(in srgb, #000 25%, var(--ws-chat-feed-bg)));
border: 1px solid color-mix(in srgb, var(--ws-chat-accent) 22%, rgba(255,255,255,0.08));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 10px 22px -10px rgba(0,0,0,0.55),
0 28px 56px -18px rgba(0,0,0,0.70),
0 22px 52px -28px color-mix(in srgb, var(--ws-chat-accent) 55%, transparent);
}
}
/* Edgar 2026-06-30: con tema del chat activo, el hover ya NO
cambia los íconos a color del tema (eso hacía que el menú
compitiera con el brand). Solo tinta sutil del background.
Texto e íconos quedan blanco/gris siempre — estilo Notion. */
body[data-chat-theme] .pf-menu-item:hover {
background: color-mix(in srgb, var(--ws-chat-accent) 8%, rgba(255,255,255,0.05)) !important;
}
body[data-chat-theme] .pf-menu-sep {
border-top-color: color-mix(in srgb, var(--ws-chat-accent) 22%, rgba(255,255,255,0.08));
}
@keyframes pf-menu-in {
from { opacity: 0; transform: translateY(8px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Section title — calcado del sys-themes-section-title (8px, tracking
fuerte, opacity sutil). Diminuto pero presente. */
.pf-menu-section {
padding: 0 3px 6px;
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-muted);
opacity: 0.8;
}
/* Edgar 2026-06-30: menú contextual estilo Notion/Linear/Stripe.
Texto BLANCO/gris claro, íconos sutiles muted, hover suave.
Antes los textos eran del var(--text-main) que en algunos
themes terminaba naranja, compitiendo con el brand. */
.pf-menu-item {
width: 100%;
display: flex; align-items: center; gap: 11px;
padding: 9px 11px;
border: 0;
background: transparent;
color: #E5E7EB !important;
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: background 0.18s cubic-bezier(0.32, 0.72, 0, 1),
color 0.18s cubic-bezier(0.32, 0.72, 0, 1) !important;
text-align: left;
letter-spacing: 0.005em;
}
.pf-menu-item:hover {
background: rgba(255, 255, 255, 0.07) !important;
color: #FFFFFF !important;
}
.pf-menu-item:active { background: rgba(255, 255, 255, 0.10) !important; }
/* Light theme override */
[data-theme="light"] .pf-menu-item { color: #1F2937 !important; }
[data-theme="light"] .pf-menu-item:hover {
background: rgba(0, 0, 0, 0.05) !important;
color: #0F172A !important;
}
.pf-menu-item > i {
font-size: 16px;
color: rgba(255, 255, 255, 0.55) !important;
flex-shrink: 0;
transition: color 0.18s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.pf-menu-item:hover > i { color: rgba(255, 255, 255, 0.95) !important; }
[data-theme="light"] .pf-menu-item > i { color: rgba(0, 0, 0, 0.45) !important; }
[data-theme="light"] .pf-menu-item:hover > i { color: rgba(0, 0, 0, 0.85) !important; }
.pf-menu-item > span { flex: 1; }
/* Delete / danger — rojo más sutil (no rojo brillante) */
.pf-menu-item--danger { color: #F87171 !important; }
.pf-menu-item--danger > i { color: #F87171 !important; }
.pf-menu-item--danger:hover {
background: rgba(239, 68, 68, 0.12) !important;
color: #FCA5A5 !important;
}
.pf-menu-item--danger:hover > i { color: #FCA5A5 !important; }
/* Separador — calcado del .sys-themes-section + .sys-themes-section
(margin + padding + border-top) en lugar de la línea full-width vieja. */
.pf-menu-sep {
height: 0;
border-top: 1px solid var(--border-soft, rgba(255,255,255,0.08));
margin: 7px 3px;
padding: 0;
}
[data-theme="dark"] .pf-menu-sep { border-top-color: rgba(255,255,255,0.08); }
/* Items de estado (negocios): el check a la izquierda + dot de color */
.pf-menu-check {
width: 14px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: #FF8A00; font-size: 13px;
}
.pf-menu-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.pf-menu-dot--activo { background: #22C55E; }
.pf-menu-dot--pausado { background: #FBBF24; }
.pf-menu-dot--cerrado { background: #94A3B8; }
/* ── Grupos de negocios (sidebar) ──────────────────────────────
Headers collapsibles que aparecen SOLO cuando algún negocio
tiene grupo asignado. Cero estructura cuando no hace falta. */
/* Edgar 2026-06-29: items raíz (sin carpeta) van como lista plana
arriba SIN header — patrón ChatGPT/Linear/Notion. La ausencia
de carpeta ya es información, no necesita label "Sin carpeta". */
.pf-root-items {
display: flex; flex-direction: column;
gap: 4px;
}
/* Separación entre la lista raíz y la primera carpeta — visual
cue de "estos sueltos, esos agrupados". */
.pf-root-items + .pf-group { margin-top: 16px; }
/* Edgar 2026-07-03: root items ahora van DEBAJO de las carpetas
(patron Claude/ChatGPT). Separacion visual. */
.pf-group + .pf-root-items { margin-top: 16px; }
.pf-group {
margin-bottom: 6px;
}
/* ═══════════════════════════════════════════════════════
Edgar 2026-07-03: SECCIONES sidebar Destacados / Proyectos / Recientes
Patrón Claude/ChatGPT: 3 secciones colapsables. Header con caret + icon
+ label + contador. Body con slide open/close. Sección vacía se omite
en JS — no renderiza; aquí solo estilamos las visibles.
═══════════════════════════════════════════════════════ */
.pf-section {
margin-bottom: 14px;
}
.pf-section:last-child { margin-bottom: 0; }
.pf-section-header {
width: 100%;
background: transparent;
border: none;
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
border-radius: var(--r-xs);
color: var(--sidebar-text-muted);
font-family: inherit;
font-size: 11px; font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.pf-section-header:hover {
background: rgba(255,255,255,0.03);
color: var(--sidebar-text);
}
.pf-section-caret {
font-size: 10px;
transition: transform 0.2s;
opacity: 0.7;
}
.pf-section--open .pf-section-caret { transform: rotate(0deg); }
.pf-section:not(.pf-section--open) .pf-section-caret { transform: rotate(-90deg); }
.pf-section-icon {
font-size: 13px;
opacity: 0.85;
}
.pf-section-label {
flex: 1;
text-align: left;
}
.pf-section-count {
background: rgba(255,255,255,0.06);
color: var(--sidebar-text-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0;
padding: 2px 7px;
border-radius: 999px;
min-width: 18px;
text-align: center;
}
/* Edgar 2026-07-03: Drive-style — QUITADO el tinte dorado.
Sidebar uniforme, todos los iconos con el mismo color muted. */
/* .pf-section[data-section="favorites"] .pf-section-icon { color: #FBBF24; } */
/* Body: slide open/close con grid-template-rows (mismo patrón que pf-group-list) */
.pf-section-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.pf-section-body > * { min-height: 0; overflow: hidden; }
.pf-section--open .pf-section-body {
grid-template-rows: 1fr;
margin-top: 4px;
}
/* Reset margin-top del primer .pf-group dentro de Proyectos (ya lo da la sección) */
.pf-section[data-section="projects"] .pf-group:first-child { margin-top: 0; }
/* En sección Recientes/Destacados los items van pegados sin margen del root-items */
.pf-section[data-section="recents"] .pf-item,
.pf-section[data-section="favorites"] .pf-item {
margin: 3px 0;
}
/* Edgar 2026-07-03 Fase 2.B: subcarpetas anidadas hasta 3 niveles.
Cada nivel indenta el header con guía vertical sutil (estilo VS Code).
data-depth se pinta en el pf-group según el path del árbol. */
.pf-group[data-depth="2"] {
margin-left: 12px;
border-left: 1px solid rgba(255, 255, 255, 0.06);
padding-left: 8px;
}
.pf-group[data-depth="3"] {
margin-left: 12px;
border-left: 1px solid rgba(255, 255, 255, 0.06);
padding-left: 8px;
}
/* Light mode: guía más sutil sobre sidebar blanco */
html:not([data-theme]) .pf-group[data-depth="2"],
html:not([data-theme]) .pf-group[data-depth="3"] {
border-left-color: rgba(15, 23, 42, 0.10);
}
/* Header de subcarpetas se ve un poco más ligero para dar jerarquía */
.pf-group[data-depth="2"] .pf-group-header,
.pf-group[data-depth="3"] .pf-group-header {
font-size: 10.5px;
opacity: 0.9;
}
/* Edgar 2026-06-29: más aire entre carpetas — antes estaban
apretadísimas (4px). Ahora 14px para que el ojo entienda
que son grupos distintos. */
.pf-group + .pf-group { margin-top: 14px; }
.pf-group-header {
display: flex; align-items: center; gap: 8px;
padding: 7px 11px 6px;
border-radius: var(--r-xs);
color: var(--sidebar-text-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, color 0.15s;
user-select: none;
}
/* Folder icon del header con menos énfasis — jerárquicamente menor que el label */
.pf-group-folder-icon {
opacity: 0.5;
font-size: 12px;
flex-shrink: 0;
}
.pf-group-header:hover { background: rgba(255,255,255,0.04); color: var(--sidebar-text); }
.pf-group-caret {
font-size: 10px;
transition: transform 0.2s;
flex-shrink: 0;
}
.pf-group:not(.pf-group--open) .pf-group-caret { transform: rotate(-90deg); }
.pf-group-label {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 2px 4px;
border-radius: 4px;
transition: background 0.12s;
}
.pf-group-header--clickable .pf-group-label:hover {
background: rgba(255,138,0,0.10);
color: #FF8A00;
}
/* Edgar 2026-06-30: el label de carpeta NO es clickable como
botón de rename. Renombrar se hace por el menú ⋮. */
.pf-group-header--clickable .pf-group-label:hover {
background: transparent !important;
color: inherit !important;
}
.pf-group-menu-btn {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 6px;
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.16s cubic-bezier(0.32, 0.72, 0, 1);
opacity: 0;
font-size: 13px;
flex-shrink: 0;
}
.pf-group-menu-btn i { font-size: 13px; }
.pf-group-header:hover .pf-group-menu-btn { opacity: 0.7; }
.pf-group-menu-btn:hover {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.08);
color: var(--sidebar-text);
}
/* Folder/Item icon picker grid (dentro del menú) */
.pf-folder-iconpicker,
.pf-icon-picker,
.pf-color-picker {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pf-icon-picker-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
padding: 4px;
max-height: 200px;
overflow-y: auto;
}
.pf-icon-tile {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid transparent;
border-radius: 7px;
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
.pf-icon-tile i { font-size: 14px; }
.pf-icon-tile:hover {
background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.04));
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--accent-light);
transform: scale(1.06);
}
.pf-color-picker-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 4px;
}
.pf-color-tile {
width: 26px; height: 26px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.10);
cursor: pointer;
transition: all 0.16s cubic-bezier(0.32, 0.72, 0, 1);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pf-color-tile:hover {
transform: scale(1.15);
border-color: rgba(255, 255, 255, 0.30);
box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.30);
}
.pf-color-tile--reset {
background: rgba(255, 255, 255, 0.05) !important;
color: var(--sidebar-text-muted);
}
.pf-color-tile--reset i { font-size: 11px; }
.pf-folder-icon-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 4px;
}
.pf-folder-icon-tile {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid transparent;
border-radius: 7px;
color: var(--sidebar-text-muted);
cursor: pointer;
transition: all 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
.pf-folder-icon-tile i { font-size: 15px; }
.pf-folder-icon-tile:hover {
background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.04));
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--accent-light);
transform: scale(1.06);
}
.pf-group-count {
background: rgba(255,255,255,0.06);
color: var(--sidebar-text-muted);
padding: 1px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
flex-shrink: 0;
}
/* Edgar 2026-06-30: items dentro de carpetas AL RAS de los lados
(mismo width que el botón '+ Nueva idea'). Sin padding-left,
sin línea vertical. La jerarquía se ve por el header de la
carpeta arriba + el caret/indent del grupo. */
/* Edgar 2026-07-03: animación de expansión cinemática (VSCode/Notion).
Antes: display:none / display:block sin animación (feo, brusco).
Ahora: grid-template-rows 1fr/0fr para animar height auto smooth.
Fallback opacity + translateY para el body de la lista. */
.pf-group-list {
display: grid;
grid-template-rows: 1fr;
padding-left: 0;
position: relative;
transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease-out;
opacity: 1;
}
.pf-group-list > * {
min-height: 0;
}
.pf-group:not(.pf-group--open) .pf-group-list {
grid-template-rows: 0fr;
opacity: 0;
pointer-events: none;
}
/* Wrapper interno para permitir overflow hidden sin cortar shadows */
.pf-group-list-inner {
overflow: hidden;
transform-origin: top center;
}
.pf-group:not(.pf-group--open) .pf-group-list-inner {
transform: translateY(-4px) scaleY(0.98);
}
.pf-group.pf-group--open .pf-group-list-inner {
transform: translateY(0) scaleY(1);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Auto-abrir con drag: pulso visual cuando esta a punto de abrirse */
.pf-group.pf-group--auto-opening > .pf-group-header {
animation: pf-group-hover-pulse 0.7s ease-in-out;
}
@keyframes pf-group-hover-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
100% { transform: scale(1); }
}
/* Edgar 2026-07-03: carpeta 'saliendo' (source de un move) — fade+shrink */
@keyframes pf-group-moving {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0.35; transform: scale(0.94) translateX(-6px); }
}
.pf-group.pf-group--moving > .pf-group-header {
animation: pf-group-moving 0.22s ease-out forwards;
}
/* Edgar 2026-07-03: carpeta que acaba de aterrizar en su nuevo parent.
Cae desde arriba con overshoot suave + glow naranja. */
@keyframes pf-group-dropped-into {
0% { opacity: 0; transform: translateY(-24px) scale(0.92); }
55% { opacity: 1; transform: translateY(3px) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pf-group-dropped-glow {
0% { box-shadow: 0 0 0 0 transparent; }
40% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent),
0 6px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.pf-group.pf-group--dropped-into {
animation: pf-group-dropped-into 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
pf-group-dropped-glow 0.9s ease-out;
z-index: 5; position: relative;
}
/* Edgar 2026-07-03: análisis de gaps de animación en carpetas.
Antes: crear/eliminar/archivar/renombrar/cambiar-icono/cambiar-color
eran cambios BRUSCOS sin feedback visual. Ahora todos tienen anim. */
/* CREAR carpeta — enter suave desde arriba */
@keyframes pf-group-enter {
0% { opacity: 0; transform: translateY(-16px) scale(0.94); max-height: 0; }
45% { opacity: 1; max-height: 400px; }
70% { transform: translateY(2px) scale(1.02); }
100% { opacity: 1; transform: translateY(0) scale(1); max-height: 400px; }
}
.pf-group.pf-group--entering {
animation: pf-group-enter 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
overflow: hidden;
}
/* ELIMINAR/ARCHIVAR carpeta — fade+shrink hacia arriba */
@keyframes pf-group-exit {
0% { opacity: 1; max-height: 400px; transform: scale(1); }
100% { opacity: 0; max-height: 0; transform: scale(0.94) translateX(-8px); margin-bottom: 0; }
}
.pf-group.pf-group--exiting {
animation: pf-group-exit 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
overflow: hidden;
pointer-events: none;
}
/* RENOMBRAR carpeta — flash naranja en el header (confirmación) */
@keyframes pf-group-flash {
0% { background: transparent; }
40% { background: color-mix(in srgb, var(--accent) 18%, transparent); }
100% { background: transparent; }
}
.pf-group.pf-group--flashing > .pf-group-header {
animation: pf-group-flash 0.65s ease-out;
border-radius: 8px;
}
/* CAMBIO ICONO/COLOR — bounce sutil del icon dentro del header */
@keyframes pf-group-icon-bounce {
0% { transform: scale(1); }
40% { transform: scale(1.35) rotate(-6deg); }
70% { transform: scale(0.92) rotate(3deg); }
100% { transform: scale(1) rotate(0); }
}
.pf-group.pf-group--icon-changed .pf-group-folder-icon {
animation: pf-group-icon-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Empty state dentro de carpeta — invita a arrastrar */
.pf-folder-empty {
padding: 12px 14px;
margin: 4px 0;
font-size: 11px;
font-weight: 600;
color: var(--sidebar-text-muted);
opacity: 0.7;
text-align: center;
border: 1px dashed color-mix(in srgb, var(--sidebar-text-soft) 22%, transparent);
border-radius: 8px;
}
.pf-folder-empty i { font-size: 13px; margin-right: 4px; opacity: 0.6; }
/* "Sin grupo" más sutil que los grupos reales (legacy — ya no se usa) */
.pf-group--nogroup .pf-group-header {
opacity: 0.7;
cursor: pointer;
}
.pf-group--nogroup .pf-group-label { cursor: default; }
.pf-group--nogroup .pf-group-header--clickable .pf-group-label:hover { background: transparent; color: inherit; }
/* ── Group picker modal (chips de grupos existentes) ──────────── */
.modal-box--wide { max-width: 460px; }
.modal-body-text {
font-size: 13px;
color: var(--text-muted);
margin: 0 0 12px;
line-height: 1.5;
}
/* ─── Edgar 2026-07-03 (Fase 2.B rediseño): modal picker estilo ChatGPT ─── */
.group-picker-body { padding-top: 4px; }
/* Search input estilo pill (mismo lenguaje que sidebar) */
.group-search-wrap {
position: relative;
margin-bottom: 12px;
}
.group-search-icon {
position: absolute;
left: 14px; top: 50%; transform: translateY(-50%);
font-size: 14px;
color: var(--text-muted);
opacity: 0.85;
pointer-events: none;
}
.group-search-input {
width: 100%;
height: 40px;
padding: 0 14px 0 38px;
font: inherit;
font-size: 14px;
font-weight: 500;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
color: var(--text);
outline: none;
transition: background 0.18s, border-color 0.18s;
}
.group-search-input:focus {
background: rgba(255,255,255,0.08);
border-color: rgba(255,138,0,0.5);
}
.group-search-input::placeholder { color: var(--text-muted); opacity: 0.7; }
/* Botón "+ Crear nueva carpeta" prominente */
.group-create-btn {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 12px 16px;
background: rgba(255,138,0,0.08);
border: 1px dashed rgba(255,138,0,0.35);
border-radius: 10px;
color: #FF8A00;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-bottom: 12px;
transition: background 0.18s, border-color 0.18s;
}
.group-create-btn:hover {
background: rgba(255,138,0,0.14);
border-color: rgba(255,138,0,0.55);
}
.group-create-btn i { font-size: 16px; }
/* Form inline de crear (revealed cuando click "+ crear") */
.group-create-form {
display: flex; flex-direction: column; gap: 8px;
padding: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
margin-bottom: 12px;
}
.group-create-input {
margin: 0 !important;
height: 40px;
}
.group-create-form-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.group-create-form-cancel,
.group-create-form-confirm {
padding: 8px 14px;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s;
}
.group-create-form-cancel {
background: transparent;
border-color: rgba(255,255,255,0.14);
color: var(--text-muted);
}
.group-create-form-cancel:hover { background: rgba(255,255,255,0.05); }
.group-create-form-confirm {
background: #FF8A00;
color: #fff;
}
.group-create-form-confirm:hover { background: #E67A00; }
/* Lista scrolleable de carpetas */
.group-list {
display: flex; flex-direction: column;
max-height: 300px;
overflow-y: auto;
border-radius: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
padding: 4px;
}
.group-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--text);
font-family: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background 0.12s;
}
.group-row:hover { background: rgba(255,255,255,0.06); }
.group-row-icon { font-size: 16px; color: #FF8A00; opacity: 0.85; flex-shrink: 0; }
.group-row--clear .group-row-icon { color: var(--text-muted); }
.group-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-row-tree {
color: var(--text-muted);
opacity: 0.5;
font-size: 13px;
flex-shrink: 0;
}
.group-row-path {
color: var(--text-muted);
opacity: 0.6;
font-size: 11px;
font-weight: 400;
flex-shrink: 0;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-list-empty {
padding: 20px 12px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
opacity: 0.7;
}
/* modal-actions--single para el caso de un solo botón (Cerrar) */
.modal-actions--single { justify-content: center !important; }
.modal-actions--single .modal-cancel {
min-width: 120px;
}
/* Light mode overrides */
html:not([data-theme]) .group-search-input {
background: rgba(15,23,42,0.04);
border-color: rgba(15,23,42,0.10);
}
html:not([data-theme]) .group-search-input:focus { background: #fff; }
html:not([data-theme]) .group-list {
background: rgba(15,23,42,0.02);
border-color: rgba(15,23,42,0.06);
}
html:not([data-theme]) .group-row:hover { background: rgba(15,23,42,0.06); }
html:not([data-theme]) .group-create-form {
background: rgba(15,23,42,0.02);
border-color: rgba(15,23,42,0.06);
}
.group-chips-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin-top: 16px;
margin-bottom: 8px;
}
.group-chips {
display: flex; flex-wrap: wrap; gap: 6px;
min-height: 32px;
}
.group-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px;
background: rgba(255,138,0,0.08);
border: 1px solid rgba(255,138,0,0.22);
color: #FFA333;
border-radius: 999px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.group-chip:hover {
background: rgba(255,138,0,0.16);
border-color: rgba(255,138,0,0.40);
transform: translateY(-1px);
}
.group-chip--clear {
background: rgba(148,163,184,0.08);
border-color: rgba(148,163,184,0.22);
color: #94A3B8;
}
.group-chip--clear:hover {
background: rgba(148,163,184,0.16);
border-color: rgba(148,163,184,0.40);
color: #CBD5E1;
}
.group-chips-empty {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
/* ── Input dentro del rename modal ── */
.modal-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--border-soft);
border-radius: 10px;
background: var(--bg-main);
color: var(--text-main);
font-family: inherit;
font-size: 15px;
font-weight: 600;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.modal-input:focus {
border-color: #FF8A00;
box-shadow: 0 0 0 3px rgba(255,138,0,0.18);
}
.modal-input::placeholder { color: var(--text-muted); font-weight: 500; }
.modal-confirm--primary {
background: #FF8A00 !important;
color: #FFFFFF !important;
}
.modal-confirm--primary:hover { background: #E67A00 !important; }
.modal-icon--info {
background: rgba(255,138,0,0.12) !important;
color: #FF8A00;
box-shadow: 0 0 0 6px rgba(255,138,0,0.08);
}
/* Modales se acoplan al tema del chat activo. Edgar: 'estos deberían
acoplarse a los temas del chat también'. Cuando hay color activo,
el botón primario, el icono info, y los highlights toman el accent
del tema (mismo patrón que action card, menú flotante, etc). */
body[data-chat-theme] .modal-confirm--primary {
background: var(--ws-chat-accent) !important;
color: #0F172A !important; /* dark text para contraste sobre accent pastel */
box-shadow: 0 6px 18px color-mix(in srgb, var(--ws-chat-accent) 40%, transparent) !important;
}
body[data-chat-theme] .modal-confirm--primary:hover {
background: var(--ws-chat-accent-light) !important;
box-shadow: 0 8px 22px color-mix(in srgb, var(--ws-chat-accent) 55%, transparent) !important;
}
body[data-chat-theme] .modal-icon--info {
background: color-mix(in srgb, var(--ws-chat-accent) 18%, transparent) !important;
color: var(--ws-chat-accent) !important;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--ws-chat-accent) 12%, transparent) !important;
}
body[data-chat-theme] .modal-cancel:hover {
border-color: var(--ws-chat-accent) !important;
}
/* ── WORKSPACE CENTER ── */
.workspace {
display: flex; flex-direction: column;
background: var(--bg-main);
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════
MODO BLANCO (claro) — JERARQUÍA DE SUPERFICIES
Problema: con todo en blanco-sobre-casi-blanco no se distinguen
cuadros ni secciones. Solución de arquitecto: el LIENZO va gris
suave; así los paneles, tarjetas y burbujas blancas resaltan con
elevación clara. (Solo aplica en modo claro: html sin data-theme.) */
html:not([data-theme]) .ideas-page,
html:not([data-theme]) .workspace,
html:not([data-theme]) .feed {
background: #E8ECF1;
}
/* Tarjetas del feed + burbuja de Pio: blancas, con borde nítido y
sombra de elevación para que se lean como cuadros sobre el lienzo. */
html:not([data-theme]) .feed .ffm-bubble,
html:not([data-theme]) .feed .context-card,
html:not([data-theme]) .feed .feed-step-card,
html:not([data-theme]) .feed .feed-input-card,
html:not([data-theme]) .feed .feed-opts-card,
html:not([data-theme]) .feed .feed-loc-card {
background: #FFFFFF;
border: 1px solid #DBE2EA;
box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 4px 14px rgba(15,23,42,0.07);
}
/* Paneles laterales: borde más marcado para separarse del lienzo gris */
html:not([data-theme]) .portfolio { border-right: 1px solid #D2DAE3; }
html:not([data-theme]) .exec-panel { border-left: 1px solid #D2DAE3; }
/* Divisores de sección del sidebar visibles */
html:not([data-theme]) .pf-section + .pf-section { border-top-color: #D7DEE7; }
/* ═══════════════════════════════════════════════════════════
WELCOME / EMPTY-STATE del workspace.
Saludo + 4 cards de plática + card grande "Subir negocio".
Se muestra cuando no hay idea/negocio activo (ver JS). */
/* Welcome con apariencia "premium dark" SIEMPRE — independiente de
que el modo sea Oscuro o Blanco. Las letras, jerarquía y
superficies son consistentes; el tema de color solo cambia el
matiz (los overrides body[data-chat-theme] sustituyen los hex). */
.feed-welcome {
flex: 1; min-height: 0; overflow-y: auto;
display: flex; align-items: flex-start; justify-content: center;
padding: 56px 24px 32px;
background: #0E1626;
}
/* Sin esto, el atributo [hidden] se ignora porque .feed-welcome ya
define display:flex con mayor especificidad que el [hidden] del
UA → el welcome se quedaba visible sobre el chat. */
.feed-welcome[hidden] { display: none !important; }
.fw-inner {
width: 100%; max-width: 640px;
display: flex; flex-direction: column;
gap: 16px;
}
.fw-greeting {
font-size: 30px; font-weight: 800;
color: #F1F5F9;
letter-spacing: -0.5px; line-height: 1.15;
}
.fw-wave { display: inline-block; }
.fw-sub {
font-size: 15px; color: rgba(241,245,249,0.72);
margin-bottom: 6px;
}
.fw-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 600px) {
.fw-cards { grid-template-columns: 1fr; }
}
.fw-card {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: #0A1220;
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--r-md);
color: #F1F5F9;
font: inherit; font-size: 14px; font-weight: 600;
text-align: left; cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.20);
transition: var(--tr);
}
.fw-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.30);
}
/* Edgar 2026-06-30: íconos SVG con gradientes tecnológicos
(en vez de emojis chatos). Cada card tiene su propia paleta:
idea=púrpura, ciudad=cyan, cheap=verde, spy=naranja-rojo. */
.fw-card-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
transition: all 0.28s cubic-bezier(0.32, 0.72, 0, 1);
position: relative;
overflow: hidden;
}
.fw-card-icon i {
font-size: 20px;
line-height: 1;
position: relative;
z-index: 1;
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Glow halo detrás del ícono — se intensifica al hover */
.fw-card-icon::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.fw-card:hover .fw-card-icon { transform: scale(1.06); }
.fw-card:hover .fw-card-icon i { transform: scale(1.08); }
.fw-card:hover .fw-card-icon::before { opacity: 1; }
/* IDEA — púrpura/violeta tech (creatividad, brainstorm) */
.fw-card-icon--idea::before {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), rgba(167, 139, 250, 0.10));
}
.fw-card-icon--idea i {
color: #C4B5FD;
filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.40));
}
.fw-card:hover .fw-card-icon--idea {
border-color: rgba(167, 139, 250, 0.45);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.22);
}
/* CITY — cyan/teal tech (frescura, claridad, datos) */
.fw-card-icon--city::before {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.20), rgba(20, 184, 166, 0.10));
}
.fw-card-icon--city i {
color: #5EEAD4;
filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.45));
}
.fw-card:hover .fw-card-icon--city {
border-color: rgba(20, 184, 166, 0.45);
box-shadow: 0 0 20px rgba(6, 182, 212, 0.22);
}
/* CHEAP — verde esmeralda (ahorro, crecimiento) */
.fw-card-icon--cheap::before {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(52, 211, 153, 0.10));
}
.fw-card-icon--cheap i {
color: #6EE7B7;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.45));
}
.fw-card:hover .fw-card-icon--cheap {
border-color: rgba(52, 211, 153, 0.45);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.22);
}
/* SPY — naranja-rojo (curiosidad, atención, competencia) */
.fw-card-icon--spy::before {
background: linear-gradient(135deg, rgba(251, 113, 133, 0.22), rgba(251, 146, 60, 0.10));
}
.fw-card-icon--spy i {
color: #FCA5A5;
filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.45));
}
.fw-card:hover .fw-card-icon--spy {
border-color: rgba(251, 113, 133, 0.45);
box-shadow: 0 0 20px rgba(251, 113, 133, 0.22);
}
.fw-card-label { line-height: 1.3; }
.fw-divider {
display: flex; align-items: center; gap: 12px;
margin: 14px 0 4px;
font-size: 12px; font-weight: 800;
letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(241,245,249,0.42);
}
.fw-divider::before, .fw-divider::after {
content: ''; flex: 1; height: 1px;
background: rgba(255,255,255,0.07);
}
.fw-upload-card {
display: flex; align-items: center; gap: 18px;
padding: 20px 22px;
background: #0A1220;
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--r-lg);
box-shadow: 0 10px 28px rgba(0,0,0,0.30);
}
@media (max-width: 600px) {
.fw-upload-card { flex-direction: column; align-items: stretch; gap: 14px; }
}
.fw-upload-text { flex: 1; min-width: 0; }
.fw-upload-title {
font-size: 16px; font-weight: 800; color: #F1F5F9;
margin-bottom: 4px;
}
.fw-upload-sub {
font-size: 14px; color: rgba(241,245,249,0.72);
line-height: 1.45;
}
.fw-upload-sub strong { color: #F1F5F9; font-weight: 800; }
.fw-upload-actions {
display: flex; gap: 10px; flex-shrink: 0;
flex-wrap: wrap;
}
/* ═════════════════════════════════════════════════════
TICKET MODAL — Edgar: 'cada pedido se les guarde en su CRM,
cada ticket así'. Modal con preview del ticket monospace +
botón Imprimir (window.print con @media print styles).
═════════════════════════════════════════════════════ */
.pf-ticket-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(8, 12, 24, 0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
opacity: 0;
transition: opacity 0.28s ease;
}
.pf-ticket-modal.is-in { opacity: 1; }
.pf-ticket-modal.is-out { opacity: 0; transition: opacity 0.28s ease; }
.pf-ticket-modal-inner {
width: 100%;
max-width: 420px;
max-height: 90vh;
display: flex;
flex-direction: column;
background: var(--card-bg, var(--bg-panel));
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: var(--r-lg);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
transform: translateY(14px) scale(0.96);
opacity: 0;
transition: transform 0.40s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s ease;
overflow: hidden;
}
.pf-ticket-modal.is-in .pf-ticket-modal-inner {
transform: translateY(0) scale(1);
opacity: 1;
}
.pf-ticket-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
}
.pf-ticket-modal-title {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.2px;
color: var(--text-main);
}
.pf-ticket-modal-title i { color: var(--accent); font-size: 18px; }
.pf-ticket-modal-close {
background: transparent;
border: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent);
color: color-mix(in srgb, var(--text-main) 65%, transparent);
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: var(--tr);
}
.pf-ticket-modal-close:hover {
background: color-mix(in srgb, var(--text-main) 8%, transparent);
color: var(--text-main);
}
.pf-ticket-modal-body {
flex: 1;
overflow-y: auto;
padding: 22px 22px 18px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--text-main) 4%, transparent),
color-mix(in srgb, var(--text-main) 1%, transparent));
}
.pf-ticket-modal-actions {
display: flex;
gap: 10px;
padding: 12px 18px;
border-top: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
justify-content: flex-end;
}
.pf-ticket-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--r-md);
font-family: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
border: none;
transition: var(--tr);
}
.pf-ticket-btn--primary {
background: var(--accent);
color: #FFFFFF;
box-shadow: var(--shadow-accent);
}
.pf-ticket-btn--primary:hover {
background: var(--accent-mid);
transform: translateY(-1px);
}
.pf-ticket-btn--secondary {
background: transparent;
color: color-mix(in srgb, var(--text-main) 65%, transparent);
border: 1px solid color-mix(in srgb, var(--text-main) 18%, transparent);
}
.pf-ticket-btn--secondary:hover {
color: var(--text-main);
background: color-mix(in srgb, var(--text-main) 5%, transparent);
}
/* TICKET RENDER — monospace, fondo blanco, look real */
.pf-ticket {
background: #FFFFFF;
color: #0F172A;
padding: 22px 18px;
font-family: 'Courier New', Courier, monospace;
font-size: 12px;
line-height: 1.50;
max-width: 320px;
margin: 0 auto;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.06);
border-radius: 4px;
}
.pf-tk-header { text-align: center; margin-bottom: 8px; }
.pf-tk-name {
font-size: 15px;
font-weight: 900;
letter-spacing: 1px;
margin-bottom: 4px;
}
.pf-tk-meta {
text-align: center;
font-size: 11px;
color: #334155;
}
.pf-tk-sep {
text-align: center;
color: #64748B;
margin: 5px 0;
font-size: 11px;
letter-spacing: 0;
}
.pf-tk-line {
display: flex;
align-items: flex-start;
gap: 4px;
font-size: 12px;
}
.pf-tk-line--head { font-weight: 700; }
.pf-tk-qty {
width: 32px;
flex-shrink: 0;
text-align: left;
}
.pf-tk-desc {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.pf-tk-amt {
width: 64px;
flex-shrink: 0;
text-align: right;
}
.pf-tk-total {
font-weight: 900;
font-size: 13px;
margin-top: 2px;
}
.pf-tk-footer {
text-align: center;
font-size: 12px;
font-weight: 700;
margin-top: 10px;
}
.pf-tk-footer--sm {
font-size: 9.5px;
color: #64748B;
font-weight: 400;
margin-top: 4px;
letter-spacing: 0.3px;
}
/* IMPRESIÓN — al hacer window.print() solo el ticket es visible.
Edgar: 'cada ticket así' — debe poder imprimirse limpio. */
@media print {
body.pf-printing-ticket > *:not(.pf-ticket-modal) { display: none !important; }
body.pf-printing-ticket .pf-ticket-modal {
position: static !important;
background: transparent !important;
backdrop-filter: none !important;
padding: 0 !important;
}
body.pf-printing-ticket .pf-ticket-modal-inner {
max-width: none !important;
box-shadow: none !important;
border: none !important;
transform: none !important;
opacity: 1 !important;
}
body.pf-printing-ticket .pf-ticket-modal-header,
body.pf-printing-ticket .pf-ticket-modal-actions {
display: none !important;
}
body.pf-printing-ticket .pf-ticket-modal-body {
padding: 0 !important;
background: transparent !important;
}
body.pf-printing-ticket .pf-ticket {
box-shadow: none !important;
border: none !important;
max-width: none !important;
padding: 0 !important;
}
}
/* ═════════════════════════════════════════════════════
SYS WELCOME OVERLAY — Cinematic la primera vez que el
user entra al CRM de un negocio. Edgar: 'aparezca el
Piofly dando la bienvenida a su CRM'.
Cubre el sys-panel con blur + card centrada (Pio + título
+ sub + 2 CTAs). Estilo cinemático coherente con el
welcome del login y el tour del onboarding.
═════════════════════════════════════════════════════ */
.pf-sys-welcome {
position: absolute;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(8, 12, 24, 0.78);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: auto;
overflow: hidden;
}
.pf-sys-welcome.is-in { opacity: 1; }
.pf-sys-welcome.is-out { opacity: 0; transition: opacity 0.38s ease; }
.pf-sys-welcome-skip {
position: absolute;
top: 22px; right: 22px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(241, 245, 249, 0.85);
padding: 9px 16px;
border-radius: 999px;
font-family: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
cursor: pointer;
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
transition: all 0.18s ease;
}
.pf-sys-welcome-skip:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.30);
color: #FFFFFF;
transform: translateY(-1px);
}
.pf-sys-welcome-card {
max-width: 520px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 32px 28px 28px;
background: var(--card-bg, var(--bg-panel));
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: var(--r-xl);
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.45),
0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform: translateY(20px) scale(0.94);
opacity: 0;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.40s ease;
}
.pf-sys-welcome.is-in .pf-sys-welcome-card {
transform: translateY(0) scale(1);
opacity: 1;
}
/* Stage: contenedor del logo + halo + sparks */
.pf-sys-welcome-stage {
position: relative;
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
transform: translateZ(0);
}
.pf-sys-welcome-halo {
position: absolute;
inset: -30px;
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--accent) 45%, transparent) 0%,
color-mix(in srgb, var(--accent) 10%, transparent) 40%,
transparent 70%);
filter: blur(18px);
transform: scale(0);
animation: pf-welcome-halo 1.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.10s forwards,
pf-welcome-halo-breathe 2.4s ease-in-out 1.5s infinite;
pointer-events: none;
}
.pf-sys-welcome-sparks {
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
pointer-events: none;
}
.pf-sys-welcome-logo {
position: relative;
z-index: 2;
width: 110px;
height: auto;
transform: scale(0) rotate(-18deg);
animation: pf-welcome-logo-in 0.95s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.10s forwards,
pf-welcome-logo-float 3.2s ease-in-out 1.2s infinite;
filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent));
}
.pf-sys-welcome-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.6px;
text-transform: uppercase;
color: color-mix(in srgb, var(--accent) 78%, var(--text-main));
opacity: 0;
animation: pf-welcome-text-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}
.pf-sys-welcome-title {
font-size: clamp(22px, 3vw, 28px);
font-weight: 900;
letter-spacing: -0.4px;
color: var(--text-main);
margin: 0;
line-height: 1.20;
opacity: 0;
transform: translateY(10px);
animation: pf-welcome-text-in 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}
.pf-sys-welcome-sub {
font-size: 14px;
font-weight: 600;
color: color-mix(in srgb, var(--text-main) 70%, transparent);
line-height: 1.55;
margin: 0;
max-width: 440px;
opacity: 0;
transform: translateY(10px);
animation: pf-welcome-text-in 0.60s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}
.pf-sys-welcome-actions {
display: flex;
gap: 10px;
margin-top: 10px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
animation: pf-welcome-text-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.30s forwards;
}
.pf-sys-welcome-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: var(--r-md);
font-family: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
transition: var(--tr);
border: none;
}
.pf-sys-welcome-cta--primary {
background: var(--accent);
color: #FFFFFF;
box-shadow: var(--shadow-accent);
}
.pf-sys-welcome-cta--primary:hover {
background: var(--accent-mid);
transform: translateY(-1px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.pf-sys-welcome-cta--secondary {
background: transparent;
color: color-mix(in srgb, var(--text-main) 65%, transparent);
border: 1px solid color-mix(in srgb, var(--text-main) 18%, transparent);
}
.pf-sys-welcome-cta--secondary:hover {
color: var(--text-main);
border-color: color-mix(in srgb, var(--text-main) 32%, transparent);
background: color-mix(in srgb, var(--text-main) 4%, transparent);
}
@media (max-width: 520px) {
.pf-sys-welcome-card { padding: 24px 20px 22px; }
.pf-sys-welcome-stage { width: 110px; height: 110px; }
.pf-sys-welcome-logo { width: 88px; }
.pf-sys-welcome-title { font-size: 20px; }
.pf-sys-welcome-sub { font-size: 13px; }
.pf-sys-welcome-cta { flex: 1 1 100%; }
}
/* ═════════════════════════════════════════════════════
CONTEXT SWITCH OVERLAY — Cinematic al cambiar de negocio/
idea. Cubre el .workspace con un blur sutil + card centrada
con icon + nombre + spinner. Estilo Linear/Notion: el user
SIENTE que está cambiando a un sistema distinto, no
trivializando un click.
═════════════════════════════════════════════════════ */
.workspace { position: relative; }
.pf-context-switch {
position: absolute;
inset: 0;
z-index: 800;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg-main) 78%, transparent);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: auto;
cursor: progress;
}
.pf-context-switch.is-in { opacity: 1; }
.pf-context-switch.is-out { opacity: 0; transition: opacity 0.38s ease; }
.pf-ctx-card {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 26px 18px 22px;
background: var(--card-bg, var(--bg-panel));
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: var(--r-lg);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.45),
0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform: translateY(14px) scale(0.94);
opacity: 0;
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s ease;
}
.pf-context-switch.is-in .pf-ctx-card {
transform: translateY(0) scale(1);
opacity: 1;
}
.pf-ctx-icon {
flex-shrink: 0;
width: 56px; height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 32%, transparent),
color-mix(in srgb, var(--accent) 16%, transparent));
border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
border-radius: var(--r-md);
color: var(--accent-light, var(--accent));
font-size: 26px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
.pf-ctx-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 180px;
max-width: 320px;
}
.pf-ctx-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
color: color-mix(in srgb, var(--accent) 78%, var(--text-main));
}
.pf-ctx-name {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.30px;
color: var(--text-main);
line-height: 1.20;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pf-ctx-spinner {
flex-shrink: 0;
width: 22px; height: 22px;
border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-top-color: var(--accent);
border-radius: 50%;
animation: pf-btn-spin 0.7s linear infinite;
margin-left: 6px;
}
@media (max-width: 520px) {
.pf-ctx-card { padding: 14px 18px; gap: 12px; }
.pf-ctx-icon { width: 46px; height: 46px; font-size: 22px; }
.pf-ctx-info { min-width: 140px; max-width: 220px; }
.pf-ctx-name { font-size: 16px; }
}
/* Spinner inline genérico para botones en estado loading (auth
modal, sub-acciones). Mantiene el color brand del botón, solo
cambia el contenido. NO verde, NO palomita. Estilo Stripe/Linear. */
.btn-inline-spinner {
display: inline-block;
width: 14px; height: 14px;
margin-left: 8px;
border: 2px solid rgba(255,255,255,0.32);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: pf-btn-spin 0.7s linear infinite;
vertical-align: middle;
}
@keyframes pf-btn-spin { to { transform: rotate(360deg); } }
.is-loading {
cursor: wait !important;
pointer-events: none;
opacity: 0.92;
}
/* BUG REAL detrás de 'Ver mis negocios siempre aparece' (4 fixes
previos fallaron por esto): el padre .fw-upload-actions tiene
display:flex, lo que IGNORA el atributo [hidden] del hijo
(memoria project_pitfalls.md). JS seteaba fwView.hidden=true
correctamente, pero el browser seguía mostrando el botón. Sin
este !important, ninguna lógica JS puede ocultar el botón.
Edgar lo reportó 4 veces; ahora SÍ se oculta. */
.fw-view-btn[hidden] {
display: none !important;
}
.fw-upload-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px;
border-radius: var(--r-md);
background: var(--accent); color: #fff;
border: none;
font: inherit; font-size: 14px; font-weight: 800;
cursor: pointer;
box-shadow: var(--shadow-accent);
transition: var(--tr);
}
.fw-upload-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.fw-upload-btn:active { transform: translateY(0); }
/* Botón secundario "Ver mis negocios" — solo aparece si ya hay negocios */
.fw-view-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px;
border-radius: var(--r-md);
background: transparent;
color: #F1F5F9;
border: 1.5px solid rgba(255,255,255,0.16);
font: inherit; font-size: 14px; font-weight: 800;
cursor: pointer;
transition: var(--tr);
}
.fw-view-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
transform: translateY(-1px);
}
.fw-view-btn:active { transform: translateY(0); }
/* ─── Modo BLANCO (claro, sin tema de color): el welcome adopta la
apariencia clara para que combine con el resto de la app. Aplica
solo cuando no tiene data-theme (los temas de color fuerzan
data-theme="dark", así que esos rules no se ven afectados). */
html:not([data-theme]) .feed-welcome { background: #F1F5F9; }
html:not([data-theme]) .feed-welcome .fw-greeting,
html:not([data-theme]) .feed-welcome .fw-upload-title { color: #0F172A; }
html:not([data-theme]) .feed-welcome .fw-sub,
html:not([data-theme]) .feed-welcome .fw-upload-sub { color: #475569; }
html:not([data-theme]) .feed-welcome .fw-upload-sub strong { color: #0F172A; }
html:not([data-theme]) .feed-welcome .fw-card {
background: #FFFFFF;
border-color: #E2E8F0;
color: #0F172A;
box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.05);
}
html:not([data-theme]) .feed-welcome .fw-card:hover {
border-color: var(--accent);
box-shadow: 0 6px 18px rgba(15,23,42,0.10);
}
html:not([data-theme]) .feed-welcome .fw-divider { color: #94A3B8; }
html:not([data-theme]) .feed-welcome .fw-divider::before,
html:not([data-theme]) .feed-welcome .fw-divider::after { background: #E2E8F0; }
html:not([data-theme]) .feed-welcome .fw-upload-card {
background: #FFFFFF;
border-color: #E2E8F0;
box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}
html:not([data-theme]) .feed-welcome .fw-view-btn {
color: #0F172A;
border-color: #CBD5E1;
}
html:not([data-theme]) .feed-welcome .fw-view-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
/* ─── Welcome board tematizado con el color del chat activo ───
Adopta el lienzo oscuro del tema (--ws-chat-feed-bg), las cards
el bubble-bg, el botón "Ver" outline temático, y el botón primario
el acento del tema. Solo aplica cuando hay un tema de color. */
body[data-chat-theme] .feed-welcome {
background: var(--ws-chat-feed-bg);
}
body[data-chat-theme] .feed-welcome .fw-greeting,
body[data-chat-theme] .feed-welcome .fw-upload-title { color: var(--ws-text-main); }
body[data-chat-theme] .feed-welcome .fw-sub,
body[data-chat-theme] .feed-welcome .fw-upload-sub { color: var(--ws-text-soft); }
body[data-chat-theme] .feed-welcome .fw-upload-sub strong { color: var(--ws-text-main); }
body[data-chat-theme] .feed-welcome .fw-card {
background: var(--ws-chat-bubble-bg);
border-color: var(--ws-border);
color: var(--ws-text-main);
box-shadow: 0 2px 8px rgba(0,0,0,0.20);
}
body[data-chat-theme] .feed-welcome .fw-card:hover {
border-color: var(--ws-chat-accent);
background: var(--ws-surface-hover);
box-shadow: 0 6px 18px rgba(0,0,0,0.30);
}
body[data-chat-theme] .feed-welcome .fw-divider { color: var(--ws-chat-accent-light); }
body[data-chat-theme] .feed-welcome .fw-divider::before,
body[data-chat-theme] .feed-welcome .fw-divider::after { background: var(--ws-border); }
body[data-chat-theme] .feed-welcome .fw-upload-card {
background: var(--ws-chat-bubble-bg);
border-color: var(--ws-border);
box-shadow: 0 10px 28px rgba(0,0,0,0.30);
}
body[data-chat-theme] .feed-welcome .fw-view-btn {
background: transparent;
color: var(--ws-text-main);
border-color: var(--ws-border-strong);
}
body[data-chat-theme] .feed-welcome .fw-view-btn:hover {
border-color: var(--ws-chat-accent);
color: var(--ws-chat-accent-light);
background: color-mix(in srgb, var(--ws-chat-accent) 14%, transparent);
}
body[data-chat-theme] .feed-welcome .fw-upload-btn {
background: var(--ws-chat-accent);
color: #0F172A;
box-shadow: 0 6px 18px color-mix(in srgb, var(--ws-chat-accent) 35%, transparent);
}
body[data-chat-theme] .feed-welcome .fw-upload-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* Pio bar */
/* Barra Pio: OCULTA en desktop. La identidad "Pio" se removió y los
botones de acción se movieron al panel Resumen → el chat gana todo
ese espacio. Solo reaparece en móvil (ver media query) para los
botones que abren los drawers. */
/* ── FÉNIX IDENTITY BAR ── */
/* Oculta en desktop — solo visible en móvil/tablet vía media query */
.pio-bar {
height: 64px; flex-shrink: 0;
display: none; align-items: center; justify-content: space-between;
padding: 0 16px;
background: var(--bg-panel);
border-bottom: 1px solid var(--border-soft);
box-shadow: 0 1px 0 var(--border-soft);
}
/* Lado izquierdo: avatar + info del contacto */
.fb-identity {
display: flex; align-items: center; gap: 12px;
min-width: 0; flex: 1;
}
.fb-avatar-wrap {
position: relative; flex-shrink: 0;
}
.fb-avatar {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
}
.fb-avatar img { width: 34px; height: 34px; object-fit: contain; }
.fb-online-dot {
position: absolute; bottom: 0; right: 0;
width: 11px; height: 11px; border-radius: 50%;
background: #22C55E;
border: 2px solid var(--bg-panel);
animation: fb-pulse 2.4s ease-in-out infinite;
}
@keyframes fb-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.fb-info { min-width: 0; }
.fb-name {
font-size: 15px; font-weight: 800;
color: var(--text-main); line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-role {
font-size: 12px; color: var(--text-soft); font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lado derecho: botones iconónicos compactos */
.fb-actions {
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.fb-icon-btn {
width: 38px; height: 38px;
border-radius: 50%;
border: none; background: transparent;
color: var(--text-soft);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
transition: background 0.15s, color 0.15s, transform 0.15s;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.fb-icon-btn:active {
background: var(--bg-soft);
color: var(--accent);
transform: scale(0.9);
}
.fb-icon-btn.is-active {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Dot indicador de color en botón paleta de pio-bar */
.fb-palette-dot {
position: absolute;
top: 4px; right: 4px;
width: 7px; height: 7px;
border-radius: 50%;
background: #64748B;
border: 1.5px solid var(--bg-panel);
pointer-events: none;
}
/* Alias compat (el JS aún puede usar .fb-left / .fb-right) */
.fb-left, .fb-right { display: none; }
.fb-menu-btn, .fb-panel-btn { display: none; }
.fb-idea-label { display: none; }
/* ── BOTTOM NAVIGATION (hidden on desktop) ── */
.ws-bottom-nav { display: none; }
/* Feed */
.feed {
flex: 1; overflow-y: auto;
padding: 28px 28px 20px;
display: flex; flex-direction: column; gap: 14px;
background: var(--bg-main);
}
.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 6px; }
.feed::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
/* Feed item enter animation */
.feed-enter {
opacity: 0; transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.feed-enter.feed-visible { opacity: 1; transform: translateY(0); }
/* 1. Bounce en mensaje de Pio */
.feed-pio-msg.feed-visible .ffm-bubble {
animation: msg-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes msg-bounce {
0% { transform: scale(0.94) translateY(4px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
/* 2. Step card slide-in desde abajo */
.feed-step-card.feed-visible {
animation: step-slide 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes step-slide {
0% { transform: translateY(16px) scale(0.98); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* 3. Panel derecho — flash al cambiar paso */
.ep-current {
animation: ep-flash 0.35s ease both;
}
@keyframes ep-flash {
0% { opacity: 0; transform: scale(0.97); }
100% { opacity: 1; transform: scale(1); }
}
/* ═════════════════════════════════════
MENSAJES — 4 tipos
1) Pio normal — limpio, borde suave
2) Acción — fondo naranja muy suave
3) Usuario — azul con texto blanco, derecha
4) Sistema/progreso — discreto, pequeño
═════════════════════════════════════ */
.feed-pio-msg { display: flex; align-items: flex-start; gap: 12px; max-width: 100%; }
.ffm-cursor {
display: inline-block; color: var(--accent);
animation: cursor-blink 0.55s step-end infinite;
font-size: 14px; line-height: 1; margin-left: 1px;
}
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.ffm-avatar {
display: none !important;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg-panel);
border: 2px solid var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.25s, box-shadow 0.25s;
margin-top: 2px;
}
.ffm-avatar img {
width: 24px;
height: 24px;
object-fit: contain;
}
/* Badge "IA" para mensajes generados por el modelo */
.ai-badge {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 10px;
padding: 3px 9px;
border-radius: var(--r-pill);
font-size: 10px; font-weight: 800;
background: var(--primary-soft);
color: var(--primary-dark);
text-transform: uppercase;
letter-spacing: 0.8px;
width: fit-content;
}
[data-theme="dark"] .ai-badge { color: var(--primary-light); }
.ai-badge i { font-size: 11px; }
/* 1) Pio normal */
.ffm-bubble {
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: 18px 18px 18px 4px; /* Sleek, asymmetrical modern bubble */
padding: 14px 18px;
font-size: 15px; line-height: 1.6; color: var(--text-main);
box-shadow: var(--shadow-xs);
max-width: 760px;
transition: all 0.2s ease;
}
[data-theme="dark"] .ffm-bubble {
background: rgba(255, 255, 255, 0.02) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
/* Micro-acciones dentro de la burbuja (CTAs contextuales) */
.ffm-actions {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 12px; padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.10);
}
[data-theme="light"] .ffm-actions { border-top-color: rgba(0,0,0,0.08); }
.ffm-action-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
border-radius: 999px;
background: var(--accent-soft);
border: 1.5px solid var(--accent);
color: var(--accent-light, var(--accent));
font: inherit;
font-size: 13px; font-weight: 700;
cursor: pointer;
transition: var(--tr-fast);
white-space: nowrap;
}
.ffm-action-btn i { font-size: 14px; }
.ffm-action-btn:hover {
background: var(--accent);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--accent-soft);
}
/* Polish del chat dentro del sys-panel (fondo, glow, contraste) */
.sys-panel .sys-chat .ffm-bubble {
box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.30) !important;
}
.sys-panel .sys-chat .ffm-bubble + .ffm-bubble {
margin-top: 8px;
}
.sys-panel .sys-chat .feed-pio-msg {
margin-bottom: 14px;
}
.sys-panel .sys-chat .feed-user-msg {
margin-bottom: 14px;
}
/* Glow sutil en burbuja con acciones para llamar la atención */
.sys-panel .sys-chat .ffm-bubble:has(.ffm-actions) {
border: 1px solid var(--accent-soft) !important;
box-shadow: 0 0 0 1px var(--accent-soft), 0 8px 24px rgba(0,0,0,0.35) !important;
}
/* Tipografía un poco más brillante */
.sys-panel .sys-chat .ffm-bubble {
color: var(--text-main) !important;
font-weight: 500;
}
/* Label interno */
.ffm-label {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.9px;
color: var(--accent-dark); margin-bottom: 6px;
}
.ffm-label i { font-size: 12px; }
/* 2) Acción — naranja suave */
.ffm-bubble--action {
background: var(--accent-soft);
border: 1px solid rgba(255, 138, 0, 0.22);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
padding: 13px 16px;
font-size: 15px; line-height: 1.6; color: var(--text-main);
box-shadow: 0 2px 8px rgba(255, 138, 0, 0.08);
max-width: 760px;
}
[data-theme="dark"] .ffm-bubble--action {
background: var(--accent-soft);
border-color: rgba(255, 138, 0, 0.28);
}
/* Importante = acción (alias) */
.ffm-bubble--important {
background: var(--accent-soft);
border: 1px solid rgba(255, 138, 0, 0.22);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
padding: 13px 16px;
font-size: 15px; line-height: 1.6; color: var(--text-main);
box-shadow: 0 2px 8px rgba(255, 138, 0, 0.08);
max-width: 760px;
}
/* Typing indicator */
.feed-typing { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.ft-avatar {
display: none !important;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg-panel);
border: 2px solid var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.25s, box-shadow 0.25s;
}
.ft-avatar img {
width: 24px;
height: 24px;
object-fit: contain;
}
.ft-dots {
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 11px 16px;
display: flex; align-items: center; gap: 0;
box-shadow: var(--shadow-xs);
}
.ft-label {
font-size: 13px; font-weight: 600; color: var(--text-soft);
animation: label-pulse 1.6s ease-in-out infinite;
}
.ft-dot-1, .ft-dot-2, .ft-dot-3 {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); display: none;
}
.ft-dot-1 { animation: dot-bounce 1.2s ease-in-out 0s infinite; }
.ft-dot-2 { animation: dot-bounce 1.2s ease-in-out 0.2s infinite; }
.ft-dot-3 { animation: dot-bounce 1.2s ease-in-out 0.4s infinite; }
@keyframes dot-bounce {
0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
40% { transform: scale(1.2); opacity: 1; }
}
@keyframes label-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* 3) User message — azul sólido, derecha */
.feed-user-msg { display: flex; justify-content: flex-end; }
.fum-bubble {
background: var(--primary);
color: white;
border-radius: 18px 18px 4px 18px; /* Elegant modern asymmetrical shape */
padding: 12px 18px;
font-size: 15px; line-height: 1.55; font-weight: 600;
max-width: 520px;
box-shadow: 0 4px 14px rgba(0, 143, 200, 0.22);
transition: all 0.2s ease;
}
/* 4) System/progress — discreto */
.feed-system-msg {
font-size: 12px; font-weight: 600;
color: var(--text-muted);
padding: 4px 12px;
text-align: center;
}
/* Step card — premium execution card */
.feed-step-card {
background: var(--bg-panel);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
max-width: 760px;
overflow: hidden;
position: relative;
}
.feed-step-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.fsc-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px 0;
}
.fsc-badge {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: 1px; color: var(--accent-dark);
background: var(--accent-soft);
padding: 3px 9px; border-radius: var(--r-pill);
}
.fsc-status {
font-size: 12px; font-weight: 700; color: var(--text-muted);
display: flex; align-items: center; gap: 5px;
}
.fsc-status--active { color: var(--primary); }
.fsc-status--done { color: var(--green); }
.fsc-status--loading { color: var(--text-muted); }
.fsc-title {
padding: 10px 20px 0;
font-size: 17px; font-weight: 800; color: var(--text-main); line-height: 1.3;
}
.fsc-guidance {
padding: 12px 20px 0;
font-size: 14px; line-height: 1.7; color: var(--text-soft);
}
.fsc-tasks {
padding: 14px 20px 18px;
list-style: none;
display: flex; flex-direction: column; gap: 10px;
}
.fsc-tasks li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 14px; color: var(--text-main); line-height: 1.5;
}
.fsc-tasks li::before {
content: '';
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); flex-shrink: 0;
margin-top: 7px;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.fsc-complete-btn {
margin: 0 20px 20px;
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 20px;
background: var(--accent); color: white;
border-radius: var(--r-sm);
font-size: 14px; font-weight: 800;
transition: var(--tr);
box-shadow: var(--shadow-accent);
}
.fsc-complete-btn:hover { background: var(--accent-mid); transform: translateY(-1px); }
/* Loading skeleton */
.fsc-skeleton {
height: 13px; background: var(--bg-alt);
border-radius: 4px; margin: 4px 0;
animation: shimmer 1.4s infinite;
}
.fsc-skeleton--short { width: 60%; }
@keyframes shimmer {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* Locked step preview */
.feed-locked {
display: flex; align-items: center; gap: 12px;
padding: 11px 16px;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: var(--r-sm);
max-width: 680px;
opacity: 0.65;
}
.fl-icon {
width: 30px; height: 30px; border-radius: 50%;
background: var(--border); color: var(--text-light);
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.fl-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fl-num { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-light); }
.fl-title { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-preview { font-size: 12px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Completion separator (system/progress msg) */
.feed-sep {
display: flex; align-items: center; gap: 10px;
max-width: 760px;
}
.feed-sep::before, .feed-sep::after {
content: ''; flex: 1; height: 1px; background: var(--border-soft);
}
.feed-sep span {
font-size: 11px; font-weight: 800; color: var(--green-dark);
text-transform: uppercase; letter-spacing: 1px;
padding: 4px 12px;
background: var(--green-soft); border-radius: var(--r-pill);
}
[data-theme="dark"] .feed-sep span { color: #6EE7B7; }
/* New idea input card */
.feed-input-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 20px;
max-width: 500px;
box-shadow: var(--shadow-sm);
/* margin-bottom defensivo: cuando hay chips arriba, el input queda más
abajo y puede quedar pegado al borde inferior del feed scroll.
Este respiro garantiza que se vea cómodo y se pueda hacer focus. */
margin-bottom: 12px;
position: relative;
}
/* En modo dark de workspace o themed, asegurar el input es legible
(color por default puede chocar con el bg blanco original). */
.fic-input { position: relative; z-index: 1; }
.fic-input {
width: 100%;
border: 1.5px solid var(--border); border-radius: var(--r-sm);
padding: 11px 14px;
font-family: inherit; font-size: 14px; color: var(--text);
background: var(--bg); outline: none;
margin-bottom: 10px;
transition: border-color 0.15s;
}
.fic-input:focus { border-color: var(--gold); background: var(--white); }
.fic-btn {
width: 100%;
background: var(--gold); color: white;
border-radius: var(--r-sm);
padding: 10px 20px;
font-size: 14px; font-weight: 700;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: var(--tr);
}
.fic-btn:hover { background: var(--gold-dark); }
.fic-hint { font-size: 12px; color: var(--text-light); margin-top: 10px; text-align: center; }
/* Header chiquito arriba de los chips */
.fic-label {
font-size: 13px; font-weight: 700;
color: var(--text-soft, #475569);
margin-bottom: 12px;
letter-spacing: 0.01em;
}
/* Grid de chips presets — wrap natural, gap cómodo, tap-friendly */
.fic-chips {
display: flex; flex-wrap: wrap;
gap: 7px;
margin-bottom: 14px;
}
.fic-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 11px;
border-radius: 999px;
background: var(--bg-soft, #F1F5F9);
border: 1px solid var(--border-soft, #E2E8F0);
color: var(--text-main, #0F172A);
font-family: inherit;
font-size: 12px; font-weight: 700;
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease, color 0.16s ease;
letter-spacing: 0.01em;
}
.fic-chip i { font-size: 13px; color: var(--gold, #FF8A00); }
.fic-chip:hover {
background: rgba(255, 138, 0, 0.10);
border-color: rgba(255, 138, 0, 0.40);
transform: translateY(-1px);
}
.fic-chip--picked {
background: var(--gold, #FF8A00) !important;
border-color: var(--gold, #FF8A00) !important;
color: white !important;
transform: scale(0.96);
box-shadow: 0 4px 12px rgba(255, 138, 0, 0.35);
}
.fic-chip--picked i { color: white !important; }
/* Divider "O escríbela" entre chips e input */
.fic-divider {
display: flex; align-items: center; gap: 10px;
margin: 6px 0 12px;
color: var(--text-muted, #94A3B8);
font-size: 11px; font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.fic-divider::before,
.fic-divider::after {
content: ''; flex: 1; height: 1px;
background: var(--border-soft, #E2E8F0);
}
/* Cards de opciones tipo formulario (estilo landing), grid 2 columnas */
.feed-opts-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
max-width: 620px;
}
@media (max-width: 600px) {
.feed-opts-card { grid-template-columns: 1fr; }
}
.feed-opt {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
border-radius: var(--r-md);
border: 1.5px solid var(--border-soft);
background: var(--bg-panel);
color: var(--text-main);
font-family: inherit;
cursor: pointer;
text-align: left;
transition: var(--tr-fast);
width: 100%;
}
.feed-opt:hover:not(:disabled) {
border-color: var(--accent);
background: var(--accent-soft);
transform: translateX(2px);
}
.feed-opt:disabled { opacity: 0.5; cursor: default; transform: none; }
.feed-opt--selected {
background: var(--accent-soft) !important;
border-color: var(--accent) !important;
opacity: 1 !important;
}
.feed-opt-icon {
width: 38px; height: 38px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
border-radius: var(--r-sm);
background: var(--accent-soft);
}
.feed-opt--selected .feed-opt-icon { background: var(--accent); color: white; }
.feed-opt-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-opt-title { font-size: 15px; font-weight: 800; color: var(--text-main); line-height: 1.25; }
.feed-opt-sub { font-size: 13px; font-weight: 500; color: var(--text-soft); line-height: 1.4; }
.feed-opt-arr { font-size: 16px; color: var(--text-muted); flex-shrink: 0; transition: var(--tr-fast); }
.feed-opt:hover:not(:disabled) .feed-opt-arr { color: var(--accent); transform: translateX(2px); }
/* Color de los íconos por categoría — mismo schema que el form */
.feed-opt-icon--green { background: rgba(22,163,74,0.14); color: #16A34A; }
.feed-opt-icon--orange { background: rgba(249,115,22,0.14); color: #F97316; }
.feed-opt-icon--blue { background: rgba(0,143,200,0.14); color: #008FC8; }
.feed-opt-icon--purple { background: rgba(139,92,246,0.14); color: #8B5CF6; }
.feed-opt-icon--yellow { background: rgba(234,179,8,0.14); color: #EAB308; }
.feed-opt-icon--red { background: rgba(239,68,68,0.14); color: #EF4444; }
.feed-opt-icon--pink { background: rgba(236,72,153,0.14); color: #EC4899; }
.feed-opt--selected .feed-opt-icon--green { background: #16A34A; color: white; }
.feed-opt--selected .feed-opt-icon--orange { background: #F97316; color: white; }
.feed-opt--selected .feed-opt-icon--blue { background: #008FC8; color: white; }
.feed-opt--selected .feed-opt-icon--purple { background: #8B5CF6; color: white; }
.feed-opt--selected .feed-opt-icon--yellow { background: #EAB308; color: white; }
.feed-opt--selected .feed-opt-icon--red { background: #EF4444; color: white; }
.feed-opt--selected .feed-opt-icon--pink { background: #EC4899; color: white; }
/* Card de ubicación (GPS + online + input) — espejo del paso 4 del form */
.feed-loc-card {
display: flex; flex-direction: column; gap: 10px;
max-width: 540px;
}
.feed-loc-divider {
display: flex; align-items: center; gap: 12px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: var(--text-muted);
margin: 6px 0;
}
.feed-loc-divider::before, .feed-loc-divider::after {
content: ''; flex: 1; height: 1px; background: var(--border-soft);
}
.feed-loc-input-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-radius: var(--r-md);
border: 1.5px solid var(--border-soft);
background: var(--bg-panel);
transition: var(--tr-fast);
}
.feed-loc-input-row:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.feed-loc-input-row i { color: var(--accent); font-size: 18px; flex-shrink: 0; }
.feed-loc-input {
flex: 1; border: none; outline: none; background: transparent;
font-family: inherit; font-size: 14px; color: var(--text-main);
}
.feed-loc-submit {
padding: 6px 14px; border-radius: var(--r-sm);
background: var(--accent); color: white;
font-size: 13px; font-weight: 700;
cursor: pointer; transition: var(--tr-fast);
}
.feed-loc-submit:disabled { opacity: 0.4; cursor: default; }
.feed-loc-submit:hover:not(:disabled) { background: var(--accent-dark); }
/* Chat bar — premium floating input */
.chat-bar {
flex-shrink: 0;
background: transparent;
/* safe-area: el input no queda tapado por la barra/indicador del iPhone */
padding: 12px 24px calc(20px + env(safe-area-inset-bottom, 0px));
}
.cb-hint {
font-size: 11px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.9px;
margin-bottom: 8px; padding-left: 4px;
}
.cb-row {
display: flex; align-items: center; gap: 0;
background: var(--bg-panel);
border: 1.5px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
padding: 7px 7px 7px 20px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cb-row:focus-within {
border-color: var(--accent);
box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-glow);
}
/* Edgar 2026-07-02: cb-input ahora es