:root{--grad:linear-gradient(135deg,#FF3CAC,#784BA0,#2B86C5);--dark:#0f0f1a;--dark2:#1a1a2e;--c1:#FF3CAC;--c2:#784BA0;--c3:#2B86C5;--cf-dock-w:38px;--cf-dock-rail:calc(var(--cf-dock-w) + 20px);}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;background:var(--dark);color:#fff;min-height:100vh;overflow-x:hidden;}
body.dragging-motion,body.dragging-motion *{-webkit-user-select:none;user-select:none;}

/* ── AVIÓN SVG INLINE ── */
.plane-svg{display:block;}
.plane-gif{image-rendering:crisp-edges;}
@keyframes soar{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  35%    {transform:translate(7px,-11px) rotate(-2deg);}
  68%    {transform:translate(12px,-6px) rotate(1deg);}
}
.soar{animation:soar 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}

/* ── LOADING ── */
#loading{position:fixed;inset:0;z-index:9999;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 18px;box-sizing:border-box;}
.loading-runner-wrap{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .35s ease;margin:0;pointer-events:none;}
#loading.is-board-prep .loading-runner-wrap{max-height:220px;opacity:1;margin-top:4px;}
#loading.is-board-prep .loading-bar{opacity:.45;}
#loading.is-board-prep .loading-plane{opacity:.72;}
@keyframes floatPlane{
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%    {transform:translateY(-14px) rotate(3deg);}
}
.loading-plane{animation:floatPlane 2.2s ease-in-out infinite;}
.loading-brand-stack{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.loading-brand{font-size:28px;font-weight:800;letter-spacing:-1px;background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;}
.loading-tagline{font-size:13px;font-weight:600;color:rgba(255,255,255,0.42);letter-spacing:0.02em;max-width:260px;line-height:1.35;}
.loading-bar{width:180px;height:3px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden;margin-top:4px;}
.loading-fill{height:100%;background:var(--grad);border-radius:99px;animation:fillup 1.4s ease-in-out infinite;}
@keyframes fillup{0%{width:0}100%{width:100%}}
.loading-sub{font-size:12px;font-weight:600;color:rgba(255,255,255,0.38);letter-spacing:.02em;text-align:center;max-width:280px;line-height:1.4;}

/* ── AUTH ── */
/* flex-start: si el hero+tarjeta supera la pantalla, el titular no queda cortado arriba (móvil) */
#auth-screen{
  display:none;min-height:100vh;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;overflow-x:hidden;overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top,0px)) 18px 32px;
  font-family:'Geist','Plus Jakarta Sans',-apple-system,sans-serif;
  --cf-lp-accent:var(--c1);--cf-lp-accent-mid:var(--c2);--cf-lp-accent-2:var(--c3);
  --cf-lp-surface:rgba(255,255,255,.035);--cf-lp-surface-2:rgba(255,255,255,.06);
  --cf-lp-border:rgba(255,255,255,.08);--cf-lp-border-2:rgba(255,255,255,.14);
  --cf-lp-fg-muted:rgba(255,255,255,.58);--cf-lp-fg-faint:rgba(255,255,255,.36);
  --cf-lp-ok:#6ee7b7;
}
.auth-screen-bg{
  position:absolute;inset:0;z-index:0;background:var(--dark);
  background-image:
    radial-gradient(ellipse 100% 80% at 50% -20%,rgba(120,75,160,.18),transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 50%,rgba(43,134,197,.1),transparent 50%),
    radial-gradient(ellipse 60% 45% at 0% 80%,rgba(255,60,172,.08),transparent 45%),
    linear-gradient(165deg,#12101c 0%,var(--dark) 52%,#0d1018 100%);
  overflow:hidden;
}
.auth-screen-bg .cf-lp-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.auth-screen-bg .cf-lp-ambient::before,.auth-screen-bg .cf-lp-ambient::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;
}
.auth-screen-bg .cf-lp-ambient::before{
  width:min(780px,140vw);height:min(780px,140vw);left:min(-280px,-18vw);top:min(-220px,-16vh);
  background:radial-gradient(circle,rgba(255,60,172,.42),transparent 60%);
}
.auth-screen-bg .cf-lp-ambient::after{
  width:min(680px,120vw);height:min(680px,120vw);right:min(-220px,-14vw);bottom:min(-280px,-22vh);
  background:radial-gradient(circle,rgba(43,134,197,.32),transparent 60%);
}
.auth-screen-bg .cf-lp-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 75%);
}
.auth-topbar{
  position:relative;z-index:45;width:100%;max-width:1280px;margin:0 auto 8px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 20px;
  flex-shrink:0;padding:14px clamp(14px,3vw,24px) 10px;
}
.auth-topbar-brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:rgba(255,255,255,.96);
  font-weight:700;font-size:20px;letter-spacing:-.03em;justify-self:start;line-height:1;
}
.auth-topbar-mark{
  display:block;flex-shrink:0;width:30px;height:23px;object-fit:contain;
  filter:drop-shadow(0 2px 12px rgba(255,60,172,.35));
}
.auth-topbar-name{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.auth-topbar-nav{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);
  justify-self:center;flex-wrap:wrap;
}
.auth-topbar-nav a{
  color:var(--cf-lp-fg-muted);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:color .15s;white-space:nowrap;
}
.auth-topbar-nav a:hover{color:rgba(255,255,255,.95);}
.auth-topbar-btn-login{
  justify-self:end;font-family:inherit;font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;flex-shrink:0;
  border:1px solid var(--cf-lp-border-2);background:var(--cf-lp-surface);color:rgba(255,255,255,.95);
  transition:background .2s,transform .15s,border-color .2s;
}
.auth-topbar-btn-login:hover{background:var(--cf-lp-surface-2);}
.auth-topbar-btn-login:active{transform:scale(.98);}
@media(max-width:900px){
  .auth-topbar{grid-template-columns:1fr auto;gap:12px;}
  .auth-topbar-nav{display:none;}
  .auth-topbar-brand{justify-self:start;}
  .auth-topbar-btn-login{justify-self:end;}
  .cf-lp-features{grid-template-columns:1fr;margin-top:22px;padding-bottom:28px;}
}
@media(min-width:901px){
  #auth-screen{justify-content:center;padding-top:24px;padding-bottom:24px;}
}
.auth-layout{
  position:relative;display:flex;flex-direction:column;align-items:stretch;
  gap:22px;width:100%;max-width:1280px;
}
@media(min-width:1024px){
  .auth-layout{
    display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,480px);
    grid-template-rows:auto;gap:28px 48px;align-items:center;
  }
  .auth-marketing-block{grid-column:1;grid-row:1;align-self:center;padding-right:12px;}
  .auth-demo-window{grid-column:2;grid-row:1;align-self:center;}
}
/* Formulario: modal en escritorio; en móvil sigue en flujo debajo del topbar */
.auth-modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:max(20px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s;
}
.auth-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;overscroll-behavior:contain;}
.auth-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;touch-action:none;}
.auth-modal-panel{position:relative;z-index:1;width:100%;max-width:420px;max-height:min(92vh,900px);overflow:auto;-webkit-overflow-scrolling:touch;}
/* Cierre: dentro de la tarjeta, círculo limpio (evita cruce con bordes del panel) */
.auth-modal-close{
  position:absolute;top:14px;right:14px;z-index:6;width:36px;height:36px;padding:0;margin:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .2s,color .2s,transform .15s;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.auth-modal-close:hover{background:rgba(255,255,255,.14);color:#fff;}
.auth-modal-close:active{transform:scale(.94);}
.auth-modal-close svg{display:block;flex-shrink:0;}
.auth-modal-close:focus-visible{outline:2px solid var(--c1);outline-offset:2px;}
@media(max-width:600px){
  .auth-modal{
    position:relative;inset:auto;z-index:2;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    display:block;padding:0;transition:none;max-height:none;
  }
  .auth-modal.is-open{opacity:1!important;}
  .auth-modal-backdrop{display:none!important;}
  .auth-modal-panel{max-width:none;max-height:none;overflow:visible;}
  .auth-modal-close{display:none;}
}
/* Modal abierto: nada de la landing encima del formulario */
#auth-screen.auth-form-active .cf-lp-features,
#auth-screen.auth-form-active .cf-lp-footer{display:none!important;}
#auth-screen.auth-form-active .cf-lp-flyer,
#auth-screen.auth-form-active .cf-lp-drag-cursor{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
@media(max-width:900px){
  .cf-lp-features,.cf-lp-footer{display:none!important;}
}
/* ── Hero landing (CloudFly Landing / Archivo.zip) ── */
.cf-lp-hero-copy{max-width:36rem;}
.cf-lp-headline{
  font-size:clamp(2.1rem,5.8vw,4.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;
  margin:0 0 22px;text-wrap:balance;
}
.cf-lp-headline-line1{display:block;color:rgba(255,255,255,.97);}
.cf-lp-headline-line2{
  display:block;margin-top:4px;
  background:linear-gradient(105deg,#FF8AD0 0%,#c9a6ff 38%,#7ec8ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(255,60,172,.18));
}
.cf-lp-headline-line3{
  display:block;margin-top:2px;color:#7ec8ff;font-weight:700;
  text-shadow:0 0 40px rgba(43,134,197,.28);
}
.cf-lp-sub{
  font-size:clamp(15px,1.35vw,18px);line-height:1.5;font-weight:500;color:var(--cf-lp-fg-muted);
  max-width:46ch;margin:0 0 28px;text-wrap:pretty;
}
.cf-lp-sub b{color:rgba(255,255,255,.92);font-weight:600;}
.cf-lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 6px;}
.cf-lp-btn{
  appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;font:600 14.5px/1 'Geist','Plus Jakarta Sans',sans-serif;
  letter-spacing:-.005em;transition:transform .15s ease,background .15s,box-shadow .15s,filter .15s;
}
.cf-lp-btn-primary{
  background:var(--grad);color:#fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 4px 14px rgba(0,0,0,.22),
    0 18px 48px rgba(255,60,172,.22),
    0 14px 40px rgba(43,134,197,.16);
}
.cf-lp-btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 8px 20px rgba(0,0,0,.25),0 22px 56px rgba(120,75,160,.32),0 16px 48px rgba(43,134,197,.2);}
.cf-lp-btn-primary:active{transform:translateY(0);}
.cf-lp-meta-line{margin:18px 0 0;font:500 12px/1.3 'Geist Mono',ui-monospace,monospace;color:var(--cf-lp-fg-faint);letter-spacing:.02em;}
.auth-demo-window.cf-lp-demo-shell{
  border-radius:28px;border:1px solid var(--cf-lp-border);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,60,172,.1),transparent 50%),
    radial-gradient(90% 70% at 100% 100%,rgba(43,134,197,.08),transparent 48%),
    var(--cf-lp-surface);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 80px -20px rgba(0,0,0,.6);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:22px;overflow:hidden;isolation:isolate;
}
.cf-lp-demo-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
.cf-lp-demo-hd .cf-lp-demo-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cf-lp-demo-hd .cf-lp-demo-name{font-size:clamp(14px,1.35vw,16px);font-weight:600;letter-spacing:-.015em;color:rgba(255,255,255,.94);line-height:1.25;}
.cf-lp-live-chip{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:6px 11px;border-radius:999px;
  border:1px solid rgba(110,231,183,.38);background:rgba(110,231,183,.1);
  color:var(--cf-lp-ok);font:500 10.5px/1 'Geist Mono',monospace;
  text-transform:uppercase;letter-spacing:.14em;
}
.cf-lp-live-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:cfLpBlink 1.4s ease-in-out infinite;}
@keyframes cfLpBlink{0%,100%{opacity:1}50%{opacity:.35}}
.cf-lp-stage{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:300px;
  isolation:isolate;overflow:hidden;
}
.cf-lp-space{
  position:relative;background:rgba(15,15,26,.65);border:1px solid var(--cf-lp-border);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
.cf-lp-space-hd{
  display:flex;align-items:center;justify-content:space-between;
  font:800 10.5px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-lp-fg-faint);
}
.cf-lp-space-hd .cf-lp-who{display:flex;align-items:center;gap:6px;color:var(--cf-lp-fg-muted);font-weight:600;text-transform:none;letter-spacing:0;font-size:12px;}
.cf-lp-avatar{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:600 9px/1 'Geist Mono',monospace;color:var(--dark);}
.cf-lp-av-a{background:linear-gradient(135deg,#f6c062,#ec9c4d);}
.cf-lp-av-b{background:linear-gradient(135deg,var(--c2),var(--c3));}
.cf-lp-chat-bubble{
  align-self:flex-start;max-width:88%;padding:9px 12px;border-radius:14px 14px 14px 4px;
  background:var(--cf-lp-surface-2);color:rgba(255,255,255,.92);font-size:12.5px;line-height:1.35;
  border:1px solid var(--cf-lp-border);
  opacity:0;transform:translateY(6px);animation:cfLpBubbleIn .35s ease forwards;
}
.cf-lp-chat-bubble.cf-lp-chat-bubble-r{align-self:flex-end;border-radius:14px 14px 4px 14px;}
.cf-lp-chat-bubble.cf-lp-chat-bubble-r.is-hidden{
  visibility:hidden;animation:none!important;opacity:0!important;align-self:flex-end;
  min-height:42px;box-sizing:border-box;margin-top:4px;
}
.cf-lp-chat-bubble.is-show{opacity:1!important;transform:none!important;animation:none!important;visibility:visible!important;}
@keyframes cfLpBubbleIn{to{opacity:1;transform:none}}
.cf-lp-drop-zone{
  flex:1;min-height:118px;margin-top:4px;border-radius:12px;
  border:1px dashed rgba(246,244,251,.14);
  background:radial-gradient(60% 60% at 50% 50%,rgba(246,244,251,.04),transparent 70%);
  display:grid;place-items:center;text-align:center;padding:10px;
  color:var(--cf-lp-fg-faint);font:800 10.5px/1 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s,background .2s,color .2s;
}
.cf-lp-drop-zone.is-active{
  border-color:rgba(255,60,172,.5);background:rgba(255,60,172,.08);color:rgba(255,180,220,.95);
}
.cf-lp-flyer{
  position:absolute;left:0;top:0;z-index:5;will-change:transform,opacity;pointer-events:none;
}
.cf-lp-file-card{
  width:148px;padding:10px 12px 12px;border-radius:10px;font-size:13px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.18) inset;color:#1a1424;
  transform-origin:50% 50%;transition:box-shadow .25s ease,filter .25s;
}
.cf-lp-file-card .cf-lp-file-tag{
  font:800 9.5px/1 'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:4px;
}
.cf-lp-file-card .cf-lp-file-meta{font:500 10px/1 'Geist Mono',monospace;opacity:.55;margin-top:2px;}
.cf-lp-file-card--amber{background:linear-gradient(165deg,#ffd97a,#f0a73a);}
.cf-lp-file-card--violet{background:linear-gradient(165deg,var(--c2),var(--c3));color:#fff;}
.cf-lp-file-card--violet .cf-lp-file-tag,.cf-lp-file-card--violet .cf-lp-file-meta{opacity:.75;}
.cf-lp-flyer.is-grabbed .cf-lp-file-card{
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 2px rgba(255,60,172,.55),0 1px 0 rgba(255,255,255,.18) inset;
  filter:brightness(1.04);
}
.cf-lp-drag-cursor{
  position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.cf-lp-drag-cursor svg{display:block;}
.cf-lp-drag-cursor .cf-lp-cursor-ring{
  position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(255,138,208,.9);opacity:0;transform:scale(.4);
}
.cf-lp-drag-cursor.is-clicking .cf-lp-cursor-ring{animation:cfLpClickRing .42s ease-out;}
@keyframes cfLpClickRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.cf-lp-demo-foot{
  margin-top:14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.45);text-align:center;font-weight:500;
}
.cf-lp-features{
  position:relative;z-index:1;width:100%;max-width:1280px;margin:28px auto 0;
  padding:0 clamp(16px,3vw,28px) 40px;
  display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));
}
.cf-lp-feat{
  border:1px solid var(--cf-lp-border);border-radius:14px;background:var(--cf-lp-surface);
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.cf-lp-feat-hd{display:flex;align-items:center;gap:12px;}
.cf-lp-feat-ico{
  width:36px;height:36px;border-radius:10px;background:var(--cf-lp-surface-2);
  border:1px solid var(--cf-lp-border);display:grid;place-items:center;color:var(--c1);
  flex-shrink:0;
}
.cf-lp-feat-ico svg{display:block;}
.cf-lp-feat-hd h3{margin:0;flex:1;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.94);line-height:1.25;}
.cf-lp-feat p{margin:0;font-size:13.5px;line-height:1.5;color:var(--cf-lp-fg-muted);font-weight:500;}
.cf-lp-footer{
  position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;
  padding:8px clamp(16px,3vw,28px) 36px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:500 11.5px/1.4 'Geist Mono',monospace;color:var(--cf-lp-fg-faint);
}
.cf-lp-footer-links{display:flex;flex-wrap:wrap;gap:18px;}
.cf-lp-footer a{color:inherit;text-decoration:none;transition:color .15s;}
.cf-lp-footer a:hover{color:var(--cf-lp-fg-muted);}
@media(prefers-reduced-motion:reduce){
  #auth-screen .cf-lp-live-dot{animation:none!important;}
  #auth-screen .cf-lp-chat-bubble{animation:none!important;opacity:1!important;transform:none!important;}
  #auth-screen .cf-lp-drag-cursor{display:none!important;}
  #auth-screen .cf-lp-flyer{transition:none!important;}
}
.auth-card{
  position:relative;z-index:1;flex-shrink:0;
  background:rgba(18,16,30,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.09);border-radius:28px;padding:44px 38px 40px;width:100%;max-width:390px;
  box-shadow:0 40px 100px rgba(0,0,0,0.5);isolation:isolate;
}
.auth-card-head{text-align:center;margin-bottom:0;}
.auth-card-brand{
  font-size:26px;font-weight:800;letter-spacing:-1px;
  background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.auth-card-tag{font-size:12px;color:rgba(255,255,255,0.32);margin-top:6px;font-weight:600;}
/* En móvil el pitch va dentro de la tarjeta (siempre a la vista); en escritorio solo el aside */
.auth-card-pitch{display:none;}
.auth-card-pitch-head{font-size:17px;font-weight:800;letter-spacing:-0.03em;line-height:1.2;color:rgba(255,255,255,0.95);margin:0 0 8px;}
.auth-card-pitch-head .auth-hero-accent{background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.auth-card-pitch-sub{font-size:13px;line-height:1.45;color:rgba(255,255,255,0.45);margin:0;font-weight:500;}
.auth-form-title{
  font-size:20px;font-weight:800;letter-spacing:-.03em;color:#fff;margin:10px 0 4px;text-align:center;
}
.auth-form-tag{font-size:13px;color:rgba(255,255,255,.38);font-weight:600;margin:0 0 18px;text-align:center;line-height:1.35;}
.auth-card-switchline{
  text-align:center;font-size:13px;color:rgba(255,255,255,.4);margin:0 0 18px;line-height:1.4;
}
.auth-card-switchline button{
  margin-left:6px;padding:0;border:none;background:none;font:inherit;font-weight:700;color:var(--c1);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.auth-card-switchline button:hover{color:#fff;}
.auth-field{margin-bottom:14px;}
.auth-field label{display:block;font-size:11px;font-weight:700;color:rgba(255,255,255,0.35);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em;}
.auth-field input{width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.05);color:#fff;font-size:14px;font-family:inherit;transition:border-color .2s,background .2s;}
.auth-field input::placeholder{color:rgba(255,255,255,0.2);}
.auth-field input:focus{outline:none;border-color:var(--c1);background:rgba(255,255,255,0.08);}
.auth-btn{width:100%;padding:14px;border-radius:14px;border:none;background:var(--grad);color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;margin-top:6px;transition:opacity .2s,transform .15s;}
.auth-btn:hover{opacity:.88;transform:translateY(-1px);}
.auth-btn:active{transform:scale(.98);}
.auth-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.auth-error{background:rgba(255,60,60,0.12);border:1px solid rgba(255,60,60,0.25);border-radius:10px;padding:10px 14px;font-size:13px;color:#ff9090;margin-bottom:14px;display:none;}

/* ── TOPBAR ── */
#app-screen{display:none;}
/* Marca fija (escritorio): esquina superior izquierda, no interfiere con el dock */
.cf-app-brand{
  position:fixed;z-index:950;pointer-events:none;
  left:max(14px, env(safe-area-inset-left, 0px));
  top:max(12px, env(safe-area-inset-top, 0px));
  display:flex;align-items:center;gap:10px;
  padding:0;margin:0;
  background:none;border:none;border-radius:0;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cf-app-brand img{width:30px;height:auto;display:block;border-radius:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35));}
.cf-app-brand-name{
  font-size:15px;font-weight:800;letter-spacing:-0.4px;line-height:1;
  background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
/* Dock: panel vertical oscuro monocromático */
.topbar{
  position:fixed;
  top:max(10px, env(safe-area-inset-top, 0px));
  right:max(10px, env(safe-area-inset-right, 0px));
  bottom:max(10px, env(safe-area-inset-bottom, 0px));
  left:auto;
  width:var(--cf-dock-rail);
  min-width:var(--cf-dock-rail);
  max-width:var(--cf-dock-rail);
  max-height:calc(100dvh - 20px);
  background:rgba(16,19,28,0.96);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:12px 12px 14px;
  z-index:1000;
  gap:10px;
  overflow:hidden;
}
.add-menu{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;align-items:center;
  flex:1;min-height:0;width:100%;
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 0 6px;
}

/* ── BOTONES DOCK: oscuros con icono blanco ── */
.add-btn{
  display:flex;align-items:center;justify-content:center;gap:0;padding:0;
  width:var(--cf-dock-w);height:var(--cf-dock-w);min-width:var(--cf-dock-w);min-height:var(--cf-dock-w);
  border-radius:14px;border:1px solid rgba(255,255,255,0.08);
  font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
  position:relative;overflow:hidden;flex-shrink:0;
  color:#f8fbff;
  box-shadow:none;
  background:transparent;
  isolation:isolate;
}
.add-btn::before,.add-btn::after{content:none;}
.add-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.06);}
.add-btn:active{transform:translateY(0);}
.btn-postit{
  background:transparent;
  border-color:rgba(255,255,255,0.08);
}
.btn-postit .dock-ico{color:#ffffff;}
.dock-ico{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;min-width:0;min-height:0;padding:0;
  font-size:19px;line-height:1;
  background:transparent;border:none;border-radius:0;box-shadow:none;
  transition:transform .16s ease,color .16s ease;
  color:#ffffff;
}
.add-btn:hover .dock-ico{transform:scale(1.04);}
.dock-txt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  opacity:0;pointer-events:none;
}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
.btn-icon svg{width:14px;height:14px;display:block;}
.btn-chat{position:relative !important;}
.btn-chat.hidden{display:none;}
.btn-chat .chat-ico{font-size:18px;}
.dock-badge{position:absolute;right:2px;top:2px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;font-size:8px;font-weight:900;line-height:15px;text-align:center;color:#fff;background:#ff4444;box-shadow:0 4px 10px rgba(255,68,68,.45);display:none;pointer-events:none;}
.dock-badge.show{display:block;animation:bobble 0.4s ease;}
@keyframes bobble{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* Chat: burbuja flotante; el botón del dock queda fuera de pantalla (sigue en DOM para la lógica) */
#chat-dock-toggle{
  position:fixed!important;left:-100vw!important;top:0!important;width:44px!important;height:44px!important;
  margin:0!important;opacity:0!important;pointer-events:auto!important;clip:auto!important;overflow:visible!important;
}
/* Burbuja chat: fuera del dock (a la izquierda de la barra), zona tipo «Salir»; posición personal = .chat-bubble-fab--placed */
.chat-bubble-fab{
  position:fixed;z-index:2550;
  width:48px;height:48px;padding:0;cursor:grab;font-family:inherit;
  touch-action:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(32,34,40,.92);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.chat-bubble-fab:not(.chat-bubble-fab--placed){
  left:auto;top:auto;
  right:calc(10px + var(--cf-dock-rail) + 12px);
  bottom:max(22px, env(safe-area-inset-bottom, 0px));
}
.chat-bubble-fab:not(.chat-bubble-fab--dragging):hover{
  transform:scale(1.04);
  background:rgba(44,46,54,.96);
  border-color:rgba(255,255,255,.22);
}
.chat-bubble-fab:active:not(.chat-bubble-fab--dragging){transform:scale(0.97);}
.chat-bubble-fab.chat-bubble-fab--dragging{cursor:grabbing;transition:none!important;transform:none!important;}
.chat-bubble-fab.hidden{display:none!important;}
.chat-bubble-fab .chat-bubble-fab-ico{font-size:20px;line-height:1;color:rgba(255,255,255,.88);display:inline-flex;align-items:center;justify-content:center;}
.chat-bubble-fab .chat-bubble-fab-ico i{color:inherit;}
.chat-fab-badge{
  position:absolute;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  top:-3px;right:-3px;font-size:10px;font-weight:900;line-height:18px;text-align:center;color:#fff;
  background:linear-gradient(180deg,#ff5a5a,#e01818);box-shadow:0 3px 10px rgba(255,50,50,.55);
  display:none;pointer-events:none;border:2px solid rgba(20,22,30,.95);
}
.chat-fab-badge.show{display:block;animation:cfFabBadgePop .35s ease;}
.chat-bubble-fab.has-unread{border-color:rgba(255,90,100,.55);}
@keyframes cfFabBadgePop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

.topbar-right{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  flex-shrink:0;margin-top:auto;width:100%;
  padding-top:10px;border-top:1px solid rgba(255,255,255,0.1);
}
.topbar-right .user-pill{width:var(--cf-dock-w);max-width:100%;justify-content:center;overflow:hidden;}
.topbar-right .logout-btn{width:100%;}
.user-pill{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:50%;padding:0;width:var(--cf-dock-w);height:var(--cf-dock-w);
  min-width:var(--cf-dock-w);min-height:var(--cf-dock-w);
  flex-shrink:0;cursor:default;
}
.user-avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,0.18);}
.logout-btn{
  background:transparent;border:none;color:#ffffff;
  padding:8px 4px 2px;font-size:13px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;font-family:inherit;transition:opacity .2s,color .2s;
  border-radius:0;width:100%;text-align:center;
}
.logout-btn:hover{color:#ffffff;opacity:0.86;}

/* ── BOARD ── */
#board{width:100%;min-height:100vh;padding-right:calc(var(--cf-dock-rail) + 28px);position:relative;overflow:hidden;background:linear-gradient(180deg,#13131f 0%,#0f0f1a 100%);}
#board-content{position:absolute;inset:0;transform-origin:0 0;will-change:transform;}
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:44px 44px;}

/* ── POST-IT (tarjeta plana, color uniforme) ── */
.postit{position:absolute;cursor:grab;user-select:none;width:210px;min-height:180px;display:flex;flex-direction:column;border-radius:2px;transition:box-shadow .2s;z-index:201;}
.postit.card-kind-postit{border-radius:10px;overflow:hidden;}
.postit.card-kind-postit .postit-strip{display:none;}
.postit.card-kind-postit .postit-body{background:transparent !important;box-shadow:none !important;background-image:none;border-radius:0;position:relative;padding:10px 30px 14px 13px;}
.postit-close{
  position:absolute;
  top:8px;
  right:8px;
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.12);
  background:#f4a6a0;
  padding:0;
  margin:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  flex-shrink:0;
  transition:background 0.15s, border-color 0.15s;
}
.postit-close:hover{background:#e87872;border-color:rgba(0,0,0,0.18);}
.postit-close:active{background:#d96a64;}
.postit-close-x{
  opacity:0;
  font-size:10px;
  line-height:1;
  font-weight:700;
  color:#6b1f1a;
  transition:opacity 0.12s;
  pointer-events:none;
}
.postit-close:hover .postit-close-x,
.postit-close:focus-visible .postit-close-x{opacity:1;}
.postit-close:focus-visible{outline:2px solid rgba(0,0,0,0.2);outline-offset:1px;}
.postit:hover{z-index:300;}
.postit.dragging{cursor:grabbing;z-index:1000;}
.postit.resizing{cursor:nwse-resize;z-index:1200;}
.postit-strip{height:30px;border-radius:2px 2px 0 0;flex-shrink:0;display:flex;align-items:center;padding:0 10px;gap:6px;}
.strip-icon{font-size:14px;}
.strip-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(0,0,0,0.45);}
.postit-body{flex:1;padding:12px 13px 16px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;line-height:1.65;color:#1a1a1a;word-break:break-word;position:relative;background-image:repeating-linear-gradient(transparent,transparent 25px,rgba(0,0,0,0.055) 25px,rgba(0,0,0,0.055) 26px);}
/* ── TARJETAS LINK / FILE / FOLDER ── */
.postit.card-kind-link,.postit.card-kind-file,.postit.card-kind-folder{width:220px;min-height:80px;border-radius:18px;overflow:hidden;}
.postit.card-kind-link .postit-strip,.postit.card-kind-file .postit-strip,.postit.card-kind-folder .postit-strip{display:none;}
.postit.card-kind-link .postit-body,.postit.card-kind-file .postit-body,.postit.card-kind-folder .postit-body{background:none;background-image:none;box-shadow:none !important;padding:0;}

/* Link */
.postit.card-kind-link{background:linear-gradient(145deg,rgba(30,100,200,0.18),rgba(20,60,140,0.28));border:1.5px solid rgba(91,184,245,0.25);box-shadow:0 8px 32px rgba(30,100,255,0.18);}
.postit.card-kind-link:hover{box-shadow:0 12px 40px rgba(30,144,255,0.32);border-color:rgba(91,184,245,0.5);}
.link-card-inner{display:flex;align-items:center;gap:12px;padding:14px 38px 14px 14px;}
.link-icon-wrap{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1e90ff,#60c3ff);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 4px 12px rgba(30,144,255,.35);}
.link-info{min-width:0;flex:1;}
.link-title{font-size:13px;font-weight:800;color:#e8f4ff;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.link-domain{font-size:11px;color:rgba(150,200,255,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.link-domain a{color:inherit;text-decoration:none;}
.link-domain a:hover{color:#60c3ff;}

/* File */
.postit.card-kind-file{background:linear-gradient(145deg,rgba(100,60,200,0.15),rgba(50,20,120,0.28));border:1.5px solid rgba(180,150,255,0.2);box-shadow:0 8px 32px rgba(100,60,200,0.15);}
.postit.card-kind-file:hover{box-shadow:0 12px 40px rgba(124,77,255,0.3);border-color:rgba(180,150,255,0.4);}
.file-card-inner{display:flex;align-items:center;gap:12px;padding:14px 38px 14px 14px;}
.file-icon-wrap{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#7c4dff,#c9b8ff);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 12px rgba(124,77,255,.35);}
.file-info{min-width:0;flex:1;}
.file-name{font-size:13px;font-weight:800;color:#e8e0ff;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-hint{font-size:11px;color:rgba(180,150,255,0.55);}
.file-card-stack{display:flex;flex-direction:column;width:100%;min-width:0;}
.file-upload-bar{
  height:3px;margin:0 12px 10px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.1);opacity:0;transition:opacity .22s ease;
  flex-shrink:0;
}
.postit.card-kind-file.cf-upload-bar-on .file-upload-bar{opacity:1;}
.file-upload-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#FF3CAC,#784BA0,#2B86C5);
  transition:width .18s ease-out;
}

/* Image file */
.postit.card-kind-file.is-image{width:200px;min-height:60px;}
.postit.card-kind-file.is-image .postit-body{padding:0;}
.img-card-inner{padding:8px 38px 8px 8px;}
.postit-img-thumb{width:100%;max-height:140px;object-fit:cover;border-radius:12px;display:block;margin-bottom:6px;-webkit-user-drag:none;user-select:none;}
.img-filename{font-size:11px;color:rgba(200,180,255,0.7);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Folder */
.postit.card-kind-folder{
  background:
    radial-gradient(110% 90% at 10% 0%,rgba(110,255,205,.16),transparent 48%),
    linear-gradient(155deg,rgba(11,70,58,.72),rgba(7,38,35,.9));
  border:1.5px solid rgba(120,255,210,0.24);
  box-shadow:0 10px 30px rgba(0,120,92,.22), inset 0 1px 0 rgba(210,255,240,.12);
  transform:rotate(0deg) !important;
}
.postit.card-kind-folder:hover{
  box-shadow:0 16px 42px rgba(0,170,128,.32), inset 0 1px 0 rgba(210,255,240,.2);
  border-color:rgba(140,255,220,0.42);
}
.folder-card-inner{display:flex;align-items:center;gap:12px;padding:14px 38px 14px 14px;}
.folder-icon-wrap{
  width:46px;height:46px;border-radius:13px;
  background:linear-gradient(145deg,#0ec7a4,#47e6c5);
  display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0;
  box-shadow:0 6px 16px rgba(22,214,170,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.folder-info{min-width:0;flex:1;}
.folder-name{font-size:13px;font-weight:800;color:#ecfff7;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;}
.folder-hint{font-size:11px;color:rgba(188,255,231,.72);}
/* Explorador de carpetas */
.folder-explorer-overlay{position:fixed;inset:0;z-index:2300;background:rgba(7,10,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:16px;}
.folder-explorer{
  width:min(1000px,95vw);height:min(85vh,780px);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(110,155,255,.14),transparent 44%),
    linear-gradient(180deg,rgba(20,24,36,.98),rgba(11,14,24,.97));
  border:1px solid rgba(255,255,255,.11);border-radius:20px;
  box-shadow:0 34px 90px rgba(0,0,0,.56);
  display:flex;flex-direction:column;overflow:hidden;
}
.folder-exp-head{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}
.folder-exp-title{font-size:16px;font-weight:800;color:#fff;white-space:normal;overflow:visible;text-overflow:clip;max-width:none;word-break:break-word;line-height:1.25;}
.folder-exp-title.is-editable{cursor:text;}
.folder-exp-title-input{width:100%;max-width:420px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#fff;padding:0 10px;font-size:15px;font-weight:800;font-family:inherit;}
.folder-exp-title-input:focus{outline:none;border-color:rgba(120,160,255,.72);box-shadow:0 0 0 2px rgba(100,140,255,.2);}
.folder-exp-sub{font-size:12px;color:rgba(255,255,255,.52);}
.folder-exp-search{height:34px;min-width:220px;border-radius:10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#fff;padding:0 10px;font-size:12px;font-family:inherit;}
.folder-exp-search::placeholder{color:rgba(255,255,255,.5);}
.folder-exp-search:focus{outline:none;border-color:rgba(120,160,255,.72);box-shadow:0 0 0 2px rgba(100,140,255,.2);}
.folder-exp-toolbar{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative;}
.folder-exp-btn{height:34px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#fff;font-weight:700;font-size:12px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.09);}
.folder-exp-btn:hover{background:rgba(255,255,255,.12);}
.folder-view-menu{position:absolute;right:0;top:38px;background:rgba(18,22,34,.98);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px;min-width:170px;display:none;box-shadow:0 20px 46px rgba(0,0,0,.45);}
.folder-view-menu.show{display:block;}
.folder-view-item{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;color:#fff;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:700;cursor:pointer;text-align:left;}
.folder-view-item:hover{background:rgba(255,255,255,.08);}
.folder-view-item.active{background:rgba(84,131,255,.16);}
.folder-exp-body{flex:1;min-height:0;overflow:auto;padding:12px;}
.folder-files-empty{height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.58);font-size:14px;text-align:center;padding:20px;}
.folder-files.folder-view-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.folder-files.folder-view-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.folder-file-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:96px;transition:transform .16s ease,background .16s ease,border-color .16s ease;}
.folder-file-card:hover{background:rgba(255,255,255,.1);border-color:rgba(150,190,255,.4);transform:translateY(-1px);}
.folder-file-ico{font-size:26px;line-height:1;}
.folder-file-preview{width:28px;height:28px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.22);display:block;}
.folder-file-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.folder-file-meta{font-size:11px;color:rgba(255,255,255,.52);}
.folder-file-actions{display:flex;gap:6px;}
.folder-mini-btn{height:28px;padding:0 9px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:11px;font-weight:700;cursor:pointer;}
.folder-mini-btn:hover{background:rgba(255,255,255,.1);}
.folder-files.folder-view-list{display:flex;flex-direction:column;gap:8px;}
.folder-row{display:grid;grid-template-columns:38px 1fr 120px 150px 150px;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.04);border-radius:10px;padding:8px 10px;transition:background .14s ease,border-color .14s ease;}
.folder-row:not(.folder-row-head):hover{background:rgba(255,255,255,.09);border-color:rgba(140,180,255,.35);}
.folder-row-head{font-size:11px;color:rgba(255,255,255,.58);font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:transparent;border:none;padding-top:2px;padding-bottom:2px;}
.folder-row .folder-file-name{white-space:nowrap;}
.folder-files.folder-view-columns{display:flex;flex-direction:column;gap:8px;}
.folder-thumb{width:100%;height:108px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.12);}
.folder-rename-input{width:100%;height:32px;border-radius:8px;border:1px solid rgba(84,131,255,.55);background:rgba(10,14,24,.88);color:#fff;padding:0 9px;font-size:13px;font-family:inherit;}

/* Planner */
.postit.card-kind-planner{width:340px;min-height:220px;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,0.96),rgba(240,246,255,0.95));border:1px solid rgba(255,255,255,0.55);box-shadow:0 10px 32px rgba(20,30,70,0.28);}
.postit.card-kind-planner .postit-body{background:none;background-image:none;padding:0;}
.planner-inner{padding:14px 14px 12px;}
.planner-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:26px;margin-bottom:10px;}
.planner-title{font-size:15px;font-weight:800;color:#162343;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.planner-chip{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:linear-gradient(135deg,#ffe08a,#ff9bd5);color:#35110f;}
.planner-list{display:flex;flex-direction:column;gap:7px;max-height:none;overflow:visible;padding-right:2px;}
.planner-item{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border:1px solid rgba(20,35,67,0.12);border-radius:10px;background:rgba(255,255,255,0.76);}
.planner-check{appearance:none;width:17px;height:17px;margin-top:2px;flex-shrink:0;border-radius:5px;border:1.6px solid rgba(22,35,67,0.4);background:#fff;cursor:pointer;position:relative;}
.planner-check:checked{border-color:#1d4ed8;background:#2563eb;}
.planner-check:checked::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg);}
.planner-task{flex:1;outline:none;color:#1a2646;font-size:14px;line-height:1.35;min-height:18px;white-space:pre-wrap;word-break:break-word;}
.planner-item.done .planner-task{color:rgba(26,38,70,0.48);text-decoration:line-through;}
.planner-add{margin-top:9px;width:100%;border:none;border-radius:10px;padding:8px 10px;background:linear-gradient(135deg,#d9e8ff,#f5d9ff);color:#1c2d58;font-size:12px;font-weight:800;cursor:pointer;}
.planner-add:hover{filter:brightness(1.02);}

.card-resizer{position:absolute;right:6px;bottom:6px;width:12px;height:12px;border:none;border-radius:4px;background:rgba(255,255,255,0.18);backdrop-filter:blur(4px);cursor:nwse-resize;opacity:.08;z-index:4;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .14s ease,transform .14s ease,background .14s ease;}
.card-resizer::before{content:'';width:6px;height:6px;border-right:1.5px solid rgba(26,38,70,0.42);border-bottom:1.5px solid rgba(26,38,70,0.42);}
.postit:hover .card-resizer,.postit.resizing .card-resizer{opacity:.18;}
.postit:hover .card-resizer:hover,.postit.resizing .card-resizer:hover{opacity:.92;background:rgba(255,255,255,0.88);transform:scale(1.04);}
.postit.card-kind-screen{cursor:default;}
.postit.card-kind-screen .screen-body{cursor:text;}

.card-actionable{cursor:pointer;}
.card-actionable:hover{transform:translateY(-2px) scale(1.01);}
/* Archivo con miniatura: priorizar arrastre (evita cursor “mano” que sugiere solo clic). */
.postit.card-kind-file.is-image.card-actionable{cursor:grab;}
.postit.card-kind-file.is-image.card-actionable:active{cursor:grabbing;}
.postit.card-kind-file.is-image{touch-action:none;}

.pit-yellow.postit.card-kind-postit{background:#FFE092;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.pit-pink.postit.card-kind-postit{background:#FFC4D8;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.pit-blue.postit.card-kind-postit{background:#B5DEF5;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.pit-green.postit.card-kind-postit{background:#C8E8C0;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.pit-purple.postit.card-kind-postit{background:#D8CCFF;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.pit-orange.postit.card-kind-postit{background:#FFCB8A;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.postit.card-kind-postit:hover{box-shadow:0 6px 22px rgba(0,0,0,0.16);}
.postit.card-kind-postit.dragging{box-shadow:0 10px 28px rgba(0,0,0,0.2);}
.postit:hover .postit-body{box-shadow:5px 12px 32px rgba(0,0,0,0.38),inset 0 -3px 8px rgba(0,0,0,0.07);}
.postit.dragging .postit-body{box-shadow:12px 22px 55px rgba(0,0,0,0.52),inset 0 -3px 8px rgba(0,0,0,0.07);}
/* Imagen mientras se arrastra: atenuar la card original (historial; el arrastre ya no usa clon al body). */
.postit.card-kind-file.is-image.dragging{opacity:0.18;transition:opacity .12s ease;}
.postit.card-kind-file.is-image.dragging .postit-body{box-shadow:none;}
/* image thumbnail */
.postit.card-kind-file.is-image{width:190px;min-height:60px;}
.postit-img-thumb{width:100%;max-height:130px;object-fit:contain;border-radius:6px;display:block;margin-bottom:6px;background:transparent;-webkit-user-drag:none;user-select:none;}
.postit-text{white-space:pre-wrap;font-size:13.5px;color:#1a1a1a;font-weight:500;}
.postit.card-kind-screen{width:max-content;max-width:min(760px,calc(100vw - 120px));min-height:0;border-radius:0;overflow:visible;background:none;border:none;box-shadow:none;padding:0;transform:none !important;}
.postit.card-kind-screen:hover{box-shadow:none;border-color:transparent;}
.postit.card-kind-screen .postit-body{background:none;background-image:none;box-shadow:none !important;padding:0;}
.postit.card-kind-screen .screen-card-inner{background:none;min-height:0;display:block;max-width:100%;}
.postit.card-kind-screen .screen-body{background:none;padding:0;}
.screen-card-inner{display:flex;flex-direction:column;min-height:260px;background:linear-gradient(180deg,rgba(255,255,255,0.94),rgba(246,242,232,0.96));}
.screen-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid rgba(0,0,0,0.08);background:linear-gradient(180deg,rgba(255,255,255,0.72),rgba(255,255,255,0.50));}
.screen-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(55,40,10,0.64);}
.screen-badge::before{content:'▣';font-size:11px;opacity:.7;}
.screen-tip{font-size:11px;color:rgba(55,40,10,0.48);}
.screen-body{flex:1;padding:16px 18px 18px;background-image:repeating-linear-gradient(transparent,transparent 28px,rgba(0,0,0,0.055) 28px,rgba(0,0,0,0.055) 29px);}
.screen-editable{
  display:block;outline:none;cursor:text;min-height:1.2em;min-width:0;width:max-content;max-width:min(760px,calc(100vw - 120px));
  white-space:pre-wrap;word-break:break-word;color:#fff;font-size:18px;line-height:1.6;font-weight:600;caret-color:#fff;
  background:transparent !important;
  -webkit-tap-highlight-color:transparent;
  box-shadow:none !important;
  text-shadow:none;
  -webkit-appearance:none;appearance:none;
}
.screen-editable:empty{min-width:11ch;}
.screen-editable:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,0.42);pointer-events:none;font-style:italic;}
.screen-editable:focus,.screen-editable:focus-visible{outline:none;box-shadow:none;background:transparent !important;}
.screen-editable::selection{background:rgba(255,255,255,0.22);color:inherit;}
.screen-editable::-moz-selection{background:rgba(255,255,255,0.22);color:inherit;}
/* screen usa también .postit-editable (JS); evitar min-height 100px y placeholder oscuro del post-it */
.postit.card-kind-screen .postit-editable.screen-editable{
  min-height:1.2em !important;
  caret-color:#fff !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.postit.card-kind-screen .postit-editable:empty::before{color:rgba(255,255,255,0.42) !important;}
.postit-title{font-size:14px;font-weight:800;color:#111;margin-bottom:5px;}
.postit-sub{font-size:12px;color:rgba(0,0,0,0.55);word-break:break-all;}
.postit-sub a{color:#1565C0;text-decoration:none;}
.postit-sub a:hover{text-decoration:underline;}
.postit-file-icon{font-size:38px;text-align:center;display:block;margin:4px 0 6px;}
.postit-filename{font-size:11px;text-align:center;color:rgba(0,0,0,0.5);font-weight:600;}
.pr0{transform:rotate(0deg);}
.pr1{transform:rotate(0deg);}
.pr2{transform:rotate(0deg);}
.pr3{transform:rotate(0deg);}
.pr4{transform:rotate(0deg);}
.pr5{transform:rotate(0deg);}
.pr6{transform:rotate(0deg);}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(10px);z-index:2000;display:flex;align-items:center;justify-content:center;}
.modal{background:var(--dark2);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:28px;width:370px;box-shadow:0 40px 100px rgba(0,0,0,0.6);animation:popIn .22s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.modal-icon{font-size:22px;}
.modal h3{font-size:17px;font-weight:800;color:#fff;}
.modal input,.modal textarea{width:100%;margin-bottom:12px;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.05);color:#fff;font-size:13px;font-family:inherit;transition:border-color .2s;}
.modal input::placeholder,.modal textarea::placeholder{color:rgba(255,255,255,0.2);}
.modal input:focus,.modal textarea:focus{outline:none;border-color:var(--c1);background:rgba(255,255,255,0.08);}
.modal textarea{resize:vertical;min-height:90px;}
.color-section label{display:block;font-size:11px;font-weight:700;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.color-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px;}
.pit-swatch{width:34px;height:34px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .15s;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.pit-swatch:hover{transform:scale(1.18);}
.pit-swatch.selected{border-color:#fff;transform:scale(1.12);box-shadow:0 0 0 3px rgba(255,255,255,0.25);}
.file-drop{border:2px dashed rgba(255,255,255,0.12);border-radius:14px;padding:22px;text-align:center;cursor:pointer;color:rgba(255,255,255,0.35);font-size:13px;margin-bottom:12px;transition:all .2s;}
.file-drop:hover{border-color:var(--c1);background:rgba(255,60,172,0.05);color:rgba(255,255,255,0.6);}
.file-drop .drop-icon{font-size:30px;margin-bottom:8px;display:block;}
.file-prev-txt{font-size:12px;color:rgba(255,255,255,0.4);margin-bottom:10px;min-height:16px;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;}
.btn-cancel{background:none;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);border-radius:10px;padding:9px 18px;font-size:13px;cursor:pointer;font-family:inherit;transition:all .2s;}
.btn-cancel:hover{background:rgba(255,255,255,0.05);color:#fff;}
.btn-add{background:var(--grad);color:#fff;border:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:opacity .2s,transform .15s;}
.btn-add:hover{opacity:.88;transform:translateY(-1px);}
.btn-add.is-link{box-shadow:0 0 0 2px rgba(91,184,245,0.28),0 8px 22px rgba(43,134,197,0.3);}
/* Confirm modal con estilo CloudFly */
.confirm-overlay{position:fixed;inset:0;background:rgba(6,8,15,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2100;display:flex;align-items:center;justify-content:center;padding:18px;}
.confirm-box{width:min(460px,94vw);background:linear-gradient(180deg,rgba(23,27,41,.96),rgba(15,18,31,.96));border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);padding:20px 18px;animation:popIn .2s cubic-bezier(.34,1.56,.64,1);}
.confirm-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.confirm-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,60,172,.22),rgba(120,90,255,.18));border:1px solid rgba(255,255,255,.12);font-size:16px;}
.confirm-title{font-size:15px;font-weight:800;color:#fff;}
.confirm-text{font-size:13px;line-height:1.5;color:rgba(255,255,255,.82);margin-bottom:14px;white-space:pre-wrap;}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;}
.confirm-btn{border:none;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:transform .14s,opacity .14s;}
.confirm-btn:active{transform:scale(.98);}
.confirm-btn.cancel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);}
.confirm-btn.cancel:hover{background:rgba(255,255,255,.1);}
.confirm-btn.ok{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(120,90,255,.35);}
.confirm-btn.ok:hover{opacity:.9;}

/* ── STATUS ── */
.sync-bar{display:none!important;}
.sync-bar #sync-label{display:none!important;}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;transition:background .3s;}
.sync-dot.syncing{background:#fbbf24;animation:blink .6s infinite;}
.sync-dot.error{background:#f87171;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.counter-badge{display:none !important;}
.toast{position:fixed;left:max(14px, env(safe-area-inset-left, 0px));bottom:84px;background:rgba(20,22,30,.96);border:1px solid rgba(255,255,255,.16);color:#fff;padding:10px 12px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:12px;line-height:1.35;max-width:320px;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;z-index:1200;pointer-events:none;}
.toast.show{opacity:1;transform:translateY(0);}
.empty-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:fadeIn .5s ease;}
@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-47%)}to{opacity:1;transform:translate(-50%,-50%)}}
.empty-hint h2{font-size:22px;font-weight:800;color:rgba(255,255,255,0.6);margin-bottom:8px;margin-top:16px;}
.empty-hint p{font-size:14px;color:rgba(255,255,255,0.25);line-height:1.8;}

/* ── EDITABLE POSTIT ── */
.postit-editable{outline:none;cursor:text;min-height:100px;white-space:pre-wrap;word-break:break-word;caret-color:#333;}
.postit-editable:empty::before{content:attr(data-placeholder);color:rgba(0,0,0,0.28);pointer-events:none;font-style:italic;}
/* Post-it: párrafos pegados/Word suelen traer <p> con márgenes grandes del navegador */
.postit.card-kind-postit .postit-editable p{margin:0;}
.postit.card-kind-postit .postit-editable p+p{margin-top:0.45em;}
.postit.card-kind-postit .postit-editable h1,.postit.card-kind-postit .postit-editable h2,.postit.card-kind-postit .postit-editable h3{margin:0.35em 0 0.25em;font-size:inherit;font-weight:700;}
.postit.card-kind-postit .postit-editable h1:first-child,.postit.card-kind-postit .postit-editable h2:first-child,.postit.card-kind-postit .postit-editable h3:first-child{margin-top:0;}
.postit.card-kind-postit .postit-editable>div{margin:0;min-height:0;}
.postit.card-kind-postit .postit-editable blockquote{margin:0 0 0.45em;padding-left:10px;border-left:2px solid rgba(0,0,0,.12);}
.postit.card-kind-postit .postit-editable ul,.postit.card-kind-postit .postit-editable ol{margin:0 0 0.45em;padding-left:1.25em;}
.postit.card-kind-postit .postit-editable b,.postit.card-kind-postit .postit-editable strong{font-weight:800;}
.postit.card-kind-postit .postit-editable i,.postit.card-kind-postit .postit-editable em{font-style:italic;}
.postit.card-kind-postit .postit-editable u{text-decoration:underline;}
.postit.card-kind-postit .postit-editable a{color:#0d47a1;text-decoration:underline;font-weight:600;}

/* ── Loader personaje (Uiverse, en pantalla de carga unificada) */
.cf-brl-loader {
  scale: 0.75;
  position: relative;
  width: 200px;
  height: 200px;
  translate: 10px -20px;
}
#loading .cf-brl-loader{scale:0.58;translate:6px -12px;width:180px;height:180px;}
.cf-brl-loader svg {
  position: absolute;
  top: 0;
  left: 0;
}
.cf-brl-head {
  translate: 27px -30px;
  z-index: 3;
  animation: cf-brl-bob 1s infinite ease-in;
}
.cf-brl-bod {
  translate: 0px 30px;
  z-index: 3;
  animation: cf-brl-bob 1s infinite ease-in-out;
}
.cf-brl-legr{translate:75px 135px;z-index:0;animation:cf-brl-rstep 1s infinite ease-in;animation-delay:0.45s;}

.cf-brl-legl {
  translate: 30px 155px;
  z-index: 3;
  animation: cf-brl-lstep 1s infinite ease-in;
}

@keyframes cf-brl-bob {
  0% {
    transform: translateY(0) rotate(3deg);
  }
  5% {
    transform: translateY(0) rotate(3deg);
  }
  25% {
    transform: translateY(5px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(-3deg);
  }
  70% {
    transform: translateY(5px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(3deg);
  }
}

@keyframes cf-brl-lstep {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  33% {
    transform: translateY(-15px) translate(32px) rotate(35deg);
  }
  66% {
    transform: translateY(0) translate(25px) rotate(-25deg);
  }
  100% {
    transform: translateY(0) rotate(-5deg);
  }
}

@keyframes cf-brl-rstep {
  0% {
    transform: translateY(0) translate(0px) rotate(-5deg);
  }
  33% {
    transform: translateY(-10px) translate(30px) rotate(35deg);
  }
  66% {
    transform: translateY(0) translate(20px) rotate(-25deg);
  }
  100% {
    transform: translateY(0) translate(0px) rotate(-5deg);
  }
}

.cf-brl-gnd {
  translate: -140px 0;
  rotate: 10deg;
  z-index: -1;
  filter: blur(0.5px) drop-shadow(1px 3px 5px #000000);
  opacity: 0.25;
  animation: cf-brl-scroll 5s infinite linear;
}

@keyframes cf-brl-scroll {
  0% {
    transform: translateY(25px) translate(50px);
    opacity: 0;
  }
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 0.25;
  }
  to {
    transform: translateY(-50px) translate(-100px);
    opacity: 0;
  }
}

/* ── DRAW MODE ── */
#draw-canvas{position:fixed;left:0;right:0;top:62px;bottom:0;pointer-events:none;z-index:200;cursor:crosshair;touch-action:none;}
#draw-canvas.active{pointer-events:all;}
.draw-hint{position:fixed;right:18px;bottom:92px;z-index:620;padding:6px 10px;border-radius:999px;background:rgba(8,8,14,0.72);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(14px);color:rgba(255,255,255,0.62);font-size:11px;letter-spacing:.02em;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none;}
.draw-hint.show{opacity:1;transform:translateY(0);}
.btn-draw.on{
  border-color:rgba(37,99,235,0.42);
  box-shadow:0 0 0 2px rgba(37,99,235,0.14),0 8px 18px rgba(37,99,235,0.2);
}

/* Zona eliminar: archivo quemado (diseño mejorado) + --trash-fire */
@keyframes cfTrashFlicker{
  0%{transform:scaleY(1) scaleX(1) rotate(-3deg);opacity:0.95;}
  20%{transform:scaleY(1.15) scaleX(0.94) rotate(2deg);opacity:1;}
  50%{transform:scaleY(0.88) scaleX(1.08) rotate(-1deg);opacity:0.9;}
  75%{transform:scaleY(1.08) scaleX(0.98) rotate(3deg);opacity:1;}
  100%{transform:scaleY(0.96) scaleX(1.02) rotate(-2deg);opacity:0.93;}
}
@keyframes cfTrashFlickerInner{
  0%{transform:scaleY(1) rotate(-2deg);opacity:0.95;}
  50%{transform:scaleY(1.12) scaleX(0.95) rotate(2deg);opacity:1;}
  100%{transform:scaleY(0.92) rotate(-1deg);opacity:0.9;}
}
@keyframes cfTrashFlickerSmall{
  0%,100%{transform:scaleY(0.95) rotate(-4deg);opacity:0.8;}
  50%{transform:scaleY(1.15) scaleX(0.9) rotate(3deg);opacity:1;}
}
@keyframes cfTrashSparkFly{
  0%{transform:translate(0,0) scale(1);opacity:0;}
  18%{opacity:1;}
  100%{transform:translate(-16px,-38px) scale(0.25);opacity:0;}
}
@keyframes cfTrashSmokeUp{
  0%{transform:translateY(0) translateX(0) scale(0.6);opacity:0;}
  20%{opacity:0.3;}
  100%{transform:translate(-10px,-52px) scale(1.8);opacity:0;}
}
@keyframes cfTrashGlowPulse{
  0%,100%{transform:scale(1);opacity:0.82;}
  50%{transform:scale(1.1);opacity:1;}
}
@keyframes cfAshSpeck{
  0%{opacity:0;transform:translate(0,4px) scale(0.7);}
  14%{opacity:0.95;}
  100%{opacity:0;transform:translate(-12px,-42px) scale(0.2);}
}
@keyframes cfAshSpeckB{
  0%{opacity:0;transform:translate(0,2px) scale(0.65);}
  12%{opacity:0.9;}
  100%{opacity:0;transform:translate(8px,-38px) scale(0.22);}
}

/* ── TRASH BIN ── */
#trash-bin{
  --trash-fire:0;
  position:fixed;bottom:78px;left:18px;width:auto;height:auto;min-width:48px;min-height:48px;padding:4px;
  border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;z-index:620;
  transition:opacity .2s ease,transform .2s ease;opacity:0;pointer-events:none;transform:scale(0.88);
  box-shadow:none;
}
#trash-bin::before{display:none;}
#trash-bin .burn-del-wrap{
  position:relative;width:170px;height:180px;pointer-events:none;
  transform:scale(0.44);
  transform-origin:50% 88%;
}
#trash-bin .burn-file{
  position:absolute;inset:12px 28px 34px 28px;
  background:linear-gradient(180deg,#ffffff 0%,#f8f8f8 55%,#eeeeee 100%);
  border-radius:16px;
  box-shadow:0 18px 34px rgba(0,0,0,0.38),inset 0 -10px 18px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.8);
  overflow:hidden;z-index:3;
}
#trash-bin .burn-file::before{
  content:'';position:absolute;top:0;right:0;width:30px;height:30px;z-index:6;
  background:linear-gradient(135deg,#dadada 50%,transparent 50%);
  border-top-right-radius:16px;
  opacity:calc((1 - var(--trash-fire) * 0.88) * 0.95);
  transition:opacity .1s ease-out;
}
#trash-bin .burn-file::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(255,255,255,0.25),transparent 35%);
  border-radius:inherit;
}
#trash-bin .burn-char{
  position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 100% 115% at 100% 108%,
    #050505 0%,
    rgba(16,12,10,0.98) 16%,
    rgba(34,28,24,0.94) 32%,
    rgba(58,50,46,0.78) 50%,
    rgba(90,80,74,0.42) 68%,
    rgba(130,120,112,0.12) 84%,
    transparent 94%);
  opacity:calc(var(--trash-fire) * 0.98);
  transition:opacity .1s ease-out;
}
#trash-bin .burn-line{
  position:absolute;left:18px;height:6px;border-radius:999px;background:#d6d6d6;z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  opacity:calc(1 - var(--trash-fire) * 0.92);
  filter:brightness(calc(1 - var(--trash-fire) * 0.75));
  transition:opacity .1s ease-out,filter .1s ease-out;
}
#trash-bin .burn-line1{top:26px;width:68px;}
#trash-bin .burn-line2{top:41px;width:52px;}
#trash-bin .burn-line3{top:56px;width:62px;}
#trash-bin .burn-line4{top:71px;width:44px;opacity:calc((1 - var(--trash-fire) * 0.92) * 0.75);}
#trash-bin .burn-corner{
  position:absolute;right:-10px;bottom:-6px;width:70px;height:70px;
  background:radial-gradient(circle at 28% 28%,
    rgba(255,210,120,0.95) 0%,
    rgba(255,146,44,0.95) 22%,
    rgba(255,89,0,0.82) 40%,
    rgba(59,27,11,0.95) 62%,
    transparent 69%);
  border-radius:50%;filter:blur(0.8px);
  animation:cfTrashGlowPulse 1.9s ease-in-out infinite;
  z-index:4;
  opacity:calc(0.25 + var(--trash-fire) * 0.75);
}
#trash-bin .burn-edge{
  position:absolute;right:-2px;bottom:-1px;width:60px;height:60px;
  background:radial-gradient(circle at 34% 34%,transparent 0 34%,#140c09 41%,#2b180f 52%,#4a2d1b 61%,transparent 68%);
  z-index:5;transform:rotate(10deg);
  opacity:calc(0.35 + var(--trash-fire) * 0.65);
}
#trash-bin .burn-ember{
  position:absolute;right:18px;bottom:18px;width:48px;height:18px;border-radius:50%;
  background:rgba(255,106,0,0.2);filter:blur(10px);z-index:1;
  opacity:calc(0.2 + var(--trash-fire) * 0.8);
  transition:opacity .1s ease-out;
}
#trash-bin .burn-ash-layer{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  isolation:isolate;
}
#trash-bin .burn-fx{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:calc(0.05 + var(--trash-fire) * 0.98);transition:opacity .12s ease-out;isolation:isolate;}
#trash-bin .burn-ash{
  position:absolute;bottom:12px;right:16px;width:44px;height:11px;
  background:linear-gradient(90deg,#505050,#8a8a8a,#595959);
  border-radius:999px;filter:blur(calc(0.8px + var(--trash-fire) * 0.9px));
  z-index:1;
  opacity:calc(0.2 + var(--trash-fire) * 0.82);
  transform:scale(calc(0.55 + var(--trash-fire) * 0.62));
  transform-origin:85% 100%;
  box-shadow:0 0 calc(4px + var(--trash-fire) * 10px) rgba(40,40,40,0.55);
  transition:opacity .1s ease-out,transform .1s ease-out,filter .1s ease-out;
}
#trash-bin .burn-ash-cloud{
  position:absolute;right:4px;bottom:0;width:78px;height:58px;pointer-events:none;z-index:2;
  opacity:calc(var(--trash-fire) * var(--trash-fire));
}
#trash-bin .burn-ash-spec{
  position:absolute;width:5px;height:4px;border-radius:45%;
  background:radial-gradient(circle at 30% 30%,#9a9a9a,#4a4a4a 70%);
  box-shadow:0 0 3px rgba(0,0,0,0.4);
  animation:cfAshSpeck 1.65s ease-out infinite;
}
#trash-bin .burn-ash-spec:nth-child(1){right:18px;bottom:10px;animation-delay:0s;animation-duration:1.5s;}
#trash-bin .burn-ash-spec:nth-child(2){right:32px;bottom:14px;animation-delay:0.35s;animation-duration:1.7s;width:4px;height:3px;}
#trash-bin .burn-ash-spec:nth-child(3){right:44px;bottom:8px;animation:cfAshSpeckB 1.55s ease-out infinite;animation-delay:0.1s;}
#trash-bin .burn-ash-spec:nth-child(4){right:26px;bottom:6px;animation-delay:0.55s;animation-duration:1.4s;width:6px;height:4px;}
#trash-bin .burn-ash-spec:nth-child(5){right:50px;bottom:16px;animation-delay:0.8s;animation-duration:1.85s;}
#trash-bin .burn-ash-spec:nth-child(6){right:14px;bottom:18px;animation:cfAshSpeckB 1.72s ease-out infinite;animation-delay:0.25s;}
#trash-bin .burn-ash-spec:nth-child(7){right:38px;bottom:4px;animation-delay:1.05s;animation-duration:1.35s;width:4px;height:4px;border-radius:50%;}
#trash-bin .burn-flame{
  position:absolute;right:30px;bottom:24px;width:26px;height:48px;
  background:radial-gradient(circle at 50% 72%,#fff6bf 0%,#ffd166 26%,#ff9f1c 48%,#ff5a00 74%,transparent 100%);
  border-radius:55% 55% 45% 45%;transform-origin:center bottom;filter:blur(0.2px);z-index:6;
  animation:cfTrashFlicker 0.95s ease-in-out infinite;
}
#trash-bin .burn-flame-inner{
  position:absolute;right:36px;bottom:31px;width:13px;height:25px;
  background:radial-gradient(circle at 50% 70%,#fffef0 0%,#fff3b0 42%,#ffc94d 76%,transparent 100%);
  border-radius:55% 55% 45% 45%;z-index:7;
  animation:cfTrashFlickerInner 0.7s ease-in-out infinite;
}
#trash-bin .burn-flame-small{
  position:absolute;right:50px;bottom:22px;width:12px;height:24px;
  background:radial-gradient(circle at 50% 72%,#ffe9a8 0%,#ffb347 50%,#ff6a00 80%,transparent 100%);
  border-radius:50% 50% 45% 45%;transform-origin:center bottom;z-index:5;opacity:0.9;
  animation:cfTrashFlickerSmall 1.1s ease-in-out infinite;
}
#trash-bin .burn-spark{
  position:absolute;width:5px;height:5px;border-radius:50%;background:#ffbf47;
  box-shadow:0 0 10px rgba(255,183,3,0.85);z-index:4;
  animation:cfTrashSparkFly linear infinite;
}
#trash-bin .burn-s1{right:36px;bottom:38px;animation-duration:1.2s;}
#trash-bin .burn-s2{right:52px;bottom:30px;animation-duration:1.7s;animation-delay:0.3s;}
#trash-bin .burn-s3{right:24px;bottom:32px;animation-duration:1.4s;animation-delay:0.6s;}
#trash-bin .burn-s4{right:44px;bottom:44px;animation-duration:1.1s;animation-delay:0.9s;}
#trash-bin .burn-smoke{
  position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(190,190,190,0.14);
  filter:blur(6px);z-index:0;animation:cfTrashSmokeUp linear infinite;
}
#trash-bin .burn-m1{right:26px;bottom:54px;animation-duration:2.4s;}
#trash-bin .burn-m2{right:44px;bottom:60px;animation-duration:3s;animation-delay:0.7s;}
#trash-bin .burn-m3{right:18px;bottom:66px;animation-duration:2.8s;animation-delay:1.2s;}
#trash-bin.visible{opacity:1;pointer-events:all;transform:scale(1);}
@media(prefers-reduced-motion:reduce){
  #trash-bin .burn-flame,#trash-bin .burn-flame-inner,#trash-bin .burn-flame-small,#trash-bin .burn-corner{animation:none !important;}
  #trash-bin .burn-spark,#trash-bin .burn-smoke,#trash-bin .burn-ash-spec{animation:none !important;}
  #trash-bin .burn-spark,#trash-bin .burn-smoke{opacity:0.35;}
  #trash-bin .burn-char,#trash-bin .burn-line,#trash-bin .burn-ash,#trash-bin .burn-ember{transition:none;}
}

/* Ráfaga de cenizas al soltar en la papelera (sustituye al toast «Eliminado») */
@keyframes cfDropAshBit{
  0%{opacity:0;transform:translate(0,0) scale(1.12) rotate(0deg);}
  12%{opacity:0.92;}
  100%{opacity:0;transform:translate(var(--ax),var(--ay)) scale(0.12) rotate(var(--ar));}
}
@keyframes cfDropAshPuff{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3);}
  24%{opacity:0.78;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9);}
}
.trash-ash-burst{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:4500;transform:translate(-50%,-50%);}
.trash-ash-puff{
  position:absolute;left:0;top:0;width:56px;height:44px;margin:-22px 0 0 -28px;
  background:radial-gradient(ellipse at 50% 52%,rgba(110,110,110,0.72),rgba(40,40,40,0.5) 45%,transparent 70%);
  filter:blur(6px);
  animation:cfDropAshPuff 0.72s ease-out forwards;
}
.trash-ash-bit{
  position:absolute;left:0;top:0;width:6px;height:5px;margin:-2.5px 0 0 -3px;border-radius:45%;
  background:radial-gradient(circle at 32% 28%,#c4c4c4,#4a4a4a 75%);
  box-shadow:0 0 5px rgba(0,0,0,0.35);
  opacity:0;
  animation:cfDropAshBit 0.8s ease-out forwards;
}
@media(prefers-reduced-motion:reduce){
  .trash-ash-bit{animation-duration:0.38s !important;}
  .trash-ash-puff{animation-duration:0.38s !important;}
}


/* ── SOCIAL AUTH ── */
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:rgba(255,255,255,0.2);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07);}
.social-btns{display:flex;gap:10px;margin-bottom:4px;}
.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;}
.social-btn:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2);}
.social-btn svg{width:18px;height:18px;flex-shrink:0;}

/* ── FORGOT PASSWORD ── */
.forgot-link{display:block;text-align:right;font-size:12px;color:rgba(255,255,255,0.35);cursor:pointer;margin-top:-8px;margin-bottom:14px;transition:color .2s;}
.forgot-link:hover{color:var(--c1);}
.auth-success{background:rgba(60,255,120,0.10);border:1px solid rgba(60,255,120,0.25);border-radius:10px;padding:10px 14px;font-size:13px;color:#7dffb0;margin-bottom:14px;display:none;}

/* ── RESPONSIVE MOBILE ── */
@media(max-width:1023px){
  .auth-layout{flex-direction:column;align-items:stretch;}
  .auth-marketing-block{text-align:center;}
  .cf-lp-hero-copy{margin-left:auto;margin-right:auto;}
  .cf-lp-headline{margin-left:auto;margin-right:auto;}
  .cf-lp-sub{margin-left:auto;margin-right:auto;}
  .cf-lp-cta-row{justify-content:center;}
}
@media(max-width:600px){
  .cf-app-brand{display:none;}
  .auth-demo-window{display:none!important;}
  .auth-card-pitch{display:block;text-align:center;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.08);}
  #auth-screen{padding:16px 12px;}
  .auth-card{padding:24px 18px 28px;border-radius:20px;max-width:none;}
  .auth-card-brand{font-size:22px;}
  .auth-card-pitch-head{font-size:18px;}
  .auth-card-pitch-sub{font-size:13px;}
  .cf-lp-footer{flex-direction:column;justify-content:center;text-align:center;}
  .cf-lp-footer-links{justify-content:center;}

  /* Dock móvil: mismo rail vertical que escritorio (como captura de referencia) */
  .topbar{
    left:auto;
    right:max(8px, env(safe-area-inset-right, 0px));
    top:max(10px, env(safe-area-inset-top, 0px));
    bottom:max(10px, env(safe-area-inset-bottom, 0px));
    width:var(--cf-dock-rail);
    min-width:var(--cf-dock-rail);
    max-width:var(--cf-dock-rail);
    max-height:calc(100dvh - 20px);
    height:auto;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:flex-start;
    gap:10px;
    padding:12px 12px 14px;
    background:rgba(14,14,26,0.82);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:22px;
    box-shadow:0 16px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    overflow:hidden;
  }
  .topbar-right{
    flex-shrink:0;
    margin-top:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    width:100%;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.12);
  }
  .topbar-right .user-pill{display:flex !important;}
  .topbar-right .logout-btn{width:100%;}
  .logout-btn{min-height:40px;display:flex;align-items:center;justify-content:center;}

  .add-menu{
    flex:1;
    min-height:0;
    width:100%;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:2px 0 6px;
    scrollbar-width:thin;
  }
  .add-btn{
    flex-shrink:0;
    width:var(--cf-dock-w);
    min-width:var(--cf-dock-w);
    height:var(--cf-dock-w);
    min-height:var(--cf-dock-w);
    padding:0;
    border-radius:14px;
    justify-content:center;
    gap:0;
    box-shadow:0 1px 2px rgba(15,23,42,0.06);
  }
  .dock-txt{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
    opacity:0;pointer-events:none;
  }
  .dock-ico{
    width:auto;height:auto;
    min-width:0;min-height:0;
    padding:0;
    font-size:19px;line-height:1;
    border:none;border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .add-btn:hover .dock-ico{transform:none;}
  .btn-chat .dock-badge{right:1px;top:1px;}
  .chat-bubble-fab:not(.chat-bubble-fab--placed){
    right:calc(8px + var(--cf-dock-rail) + 12px);
    top:auto;
    bottom:max(22px, env(safe-area-inset-bottom, 0px));
  }

  /* Board: hueco a la derecha para el rail (sin barra superior fija) */
  #board{padding-top:max(12px, env(safe-area-inset-top, 0px));padding-right:calc(var(--cf-dock-rail) + max(20px, env(safe-area-inset-right, 0px)));}
  #draw-canvas{top:0;left:0;}
  #drop-overlay{top:0;}
  .counter-badge{top:max(14px, env(safe-area-inset-top, 0px));}
  .toast{left:max(12px, env(safe-area-inset-left, 0px));bottom:88px;max-width:calc(100vw - 24px);}
  #trash-bin{left:12px;bottom:20px;min-width:48px;min-height:48px;padding:6px;}

  /* Post-its no se salgan */
  .postit{max-width:calc(100vw - 24px);}
  .postit.card-kind-link,.postit.card-kind-file,.postit.card-kind-folder{max-width:calc(100vw - 24px);}

  /* Modal */
  .modal{width:calc(100% - 32px);padding:20px 16px;}
}

/* ── SHARE ── */
.btn-share{background:transparent;color:#fff;box-shadow:none;border-color:rgba(255,255,255,0.08);}
.btn-share:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.22);box-shadow:none;}
/* Gemini: mismo marco que el resto del dock; la marca va solo en el SVG */
.btn-gemini{background:transparent;color:#fff;box-shadow:none;border-color:rgba(255,255,255,0.08);}
.btn-gemini:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.22);box-shadow:none;}
.btn-gemini .dock-ico{color:transparent;line-height:0;}
.btn-gemini .gemini-ico{display:inline-flex;align-items:center;justify-content:center;}
.btn-gemini .gemini-ico svg,.btn-gemini .gemini-ico img{display:block;width:calc(19px * 1.1);height:calc(19px * 1.1);}
.share-banner{position:fixed;top:0;left:0;right:0;z-index:2000;background:linear-gradient(135deg,#43e97b,#38f9d7);color:#003a20;text-align:center;padding:10px 16px;font-size:13px;font-weight:800;display:none;gap:10px;align-items:center;justify-content:center;}
.share-banner a{color:#003a20;text-decoration:underline;cursor:pointer;}

/* ── DROP OVERLAY ── */
#drop-overlay{position:fixed;left:0;right:0;top:58px;bottom:0;z-index:1500;pointer-events:none;border:3px dashed transparent;transition:border-color .18s,background .18s;display:flex;align-items:center;justify-content:center;}
#drop-overlay.active{pointer-events:none;border-color:#FF3CAC;background:rgba(255,60,172,0.07);}
#drop-label{color:#FF3CAC;font-size:24px;font-weight:800;opacity:0;transition:opacity .18s;text-align:center;pointer-events:none;text-shadow:0 0 30px rgba(255,60,172,0.5);}
#drop-overlay.active #drop-label{opacity:1;}

/* Sub-fase 1.4: banda colaborativa */
.collab-banner{
  position:fixed;
  top:max(10px, env(safe-area-inset-top, 0px));
  left:max(10px, env(safe-area-inset-left, 0px));
  right:calc(var(--cf-dock-rail) + 28px);
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:rgba(110,231,183,0.12);
  border:1px solid rgba(110,231,183,0.30);
  border-radius:12px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.92);
  font-size:13px;
  line-height:1.3;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  pointer-events:auto; /* Sub-fase 1.7: ahora recibe clicks para el botón Salir. */
}
.collab-banner[hidden]{display:none;}
.collab-banner-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#6ee7b7;
  box-shadow:0 0 8px rgba(110,231,183,0.7);
  flex-shrink:0;
}
.collab-banner-text{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none; /* Sub-fase 1.7: el texto no debe robar clicks al board. */
}
.collab-banner-text strong{
  color:#6ee7b7;
  font-weight:600;
}
.collab-banner-exit{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:8px;
  color:rgba(255,255,255,0.85);
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  pointer-events:auto;
}
.collab-banner-exit:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.30);
  color:#fff;
}
.collab-banner-exit:active{
  background:rgba(255,255,255,0.16);
}
.collab-banner-exit i{
  font-size:11px;
  opacity:0.85;
}
@media (max-width: 600px){
  .collab-banner{
    font-size:12px;
    padding:8px 12px;
  }
  .collab-banner-exit{
    padding:5px 10px;
    font-size:11px;
  }
  .collab-banner-exit span{display:none;} /* En móvil solo ícono para ahorrar espacio. */
}

/* Sub-fase 1.5.B: modal FlySpaces */
.flyspaces-modal{
  position:fixed;
  inset:0;
  z-index:2100; /* sobre modal-overlay (2000) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:flyspacesFadeIn 0.2s ease-out;
}
.flyspaces-modal[hidden]{display:none;}
.flyspaces-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,8,16,0.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.flyspaces-panel{
  position:relative;
  width:min(480px, 100%);
  max-height:90vh;
  background:linear-gradient(180deg, rgba(26,26,46,0.98), rgba(15,15,26,0.98));
  border:1px solid rgba(110,231,183,0.20);
  border-radius:20px;
  padding:40px 32px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(110,231,183,0.08);
  color:rgba(255,255,255,0.92);
  overflow-y:auto;
  animation:flyspacesSlideUp 0.25s ease-out;
}
.flyspaces-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:background 0.15s, color 0.15s;
}
.flyspaces-close:hover{
  background:rgba(255,255,255,0.12);
  color:#fff;
}
.flyspaces-state{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.flyspaces-state[hidden]{display:none;}
.flyspaces-hero-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(110,231,183,0.10);
  border:1px solid rgba(110,231,183,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  color:#6ee7b7;
  box-shadow:0 0 30px rgba(110,231,183,0.15);
  margin-bottom:4px;
}
.flyspaces-state h2{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.01em;
}
.flyspaces-lead{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,0.65);
  max-width:380px;
}
.flyspaces-cta{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border-radius:12px;
  border:1px solid rgba(110,231,183,0.30);
  background:rgba(110,231,183,0.10);
  color:#6ee7b7;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
}
.flyspaces-cta:not(:disabled):hover{
  background:rgba(110,231,183,0.18);
  border-color:rgba(110,231,183,0.45);
  transform:translateY(-1px);
}
.flyspaces-cta:disabled{
  opacity:0.45;
  cursor:not-allowed;
}
.flyspaces-hint{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,0.40);
  font-style:italic;
}
@keyframes flyspacesFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes flyspacesSlideUp{
  from{opacity:0;transform:translateY(12px) scale(0.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width: 600px){
  .flyspaces-panel{padding:32px 20px 24px;border-radius:16px;}
  .flyspaces-state h2{font-size:20px;}
  .flyspaces-lead{font-size:13px;}
}
/* Sub-fase 1.5.C: lista de FlySpaces */
.flyspaces-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  margin-top:8px;
}
.flyspaces-list[hidden]{display:none;}
.flyspaces-list-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, transform 0.15s;
  text-align:left;
  width:100%;
  font-family:inherit;
  color:inherit;
}
.flyspaces-list-item:hover,
.flyspaces-list-item:focus-visible{
  background:rgba(110,231,183,0.08);
  border-color:rgba(110,231,183,0.30);
  outline:none;
  transform:translateY(-1px);
}
.flyspaces-list-item:active{
  transform:translateY(0);
}
.flyspaces-list-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  color:#fff;
  flex-shrink:0;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.flyspaces-list-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.flyspaces-list-peer{
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.flyspaces-list-sub{
  font-size:12px;
  color:rgba(255,255,255,0.45);
}
.flyspaces-list-arrow{
  color:rgba(255,255,255,0.30);
  font-size:14px;
  flex-shrink:0;
  transition:color 0.15s, transform 0.15s;
}
.flyspaces-list-item:hover .flyspaces-list-arrow,
.flyspaces-list-item:focus-visible .flyspaces-list-arrow{
  color:#6ee7b7;
  transform:translateX(2px);
}
.flyspaces-list-loading{
  text-align:center;
  padding:24px 0;
  color:rgba(255,255,255,0.45);
  font-size:13px;
}
.flyspaces-list-error{
  text-align:center;
  padding:16px 0;
  color:rgba(255,120,120,0.85);
  font-size:13px;
}
@media (max-width: 600px){
  .flyspaces-list-item{padding:10px 12px;gap:10px;}
  .flyspaces-list-avatar{width:36px;height:36px;font-size:14px;}
  .flyspaces-list-peer{font-size:13px;}
}
/* Sub-fase 1.5.D: tooltip onboarding FlySpaces */
.flyspaces-onboarding{
  position:fixed;
  z-index:2050; /* sobre el dock (2000) pero debajo del modal (2100) */
  pointer-events:none;
  animation:flyspacesOnboardingIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.flyspaces-onboarding[hidden]{display:none;}
.flyspaces-onboarding-bubble{
  position:relative;
  pointer-events:auto;
  width:280px;
  background:linear-gradient(180deg, rgba(28,28,46,0.98), rgba(18,18,32,0.98));
  border:1px solid rgba(110,231,183,0.30);
  border-radius:16px;
  padding:18px 18px 14px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(110,231,183,0.10);
  color:rgba(255,255,255,0.92);
}
.flyspaces-onboarding-close{
  position:absolute;
  top:10px;
  right:10px;
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.55);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:background 0.15s, color 0.15s;
}
.flyspaces-onboarding-close:hover{
  background:rgba(255,255,255,0.12);
  color:#fff;
}
.flyspaces-onboarding-badge{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#6ee7b7;
  background:rgba(110,231,183,0.10);
  border:1px solid rgba(110,231,183,0.25);
  padding:3px 8px;
  border-radius:6px;
  margin-bottom:8px;
}
.flyspaces-onboarding-bubble h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.01em;
}
.flyspaces-onboarding-bubble p{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,0.65);
}
.flyspaces-onboarding-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.flyspaces-onboarding-btn-secondary,
.flyspaces-onboarding-btn-primary{
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  transition:all 0.15s;
}
.flyspaces-onboarding-btn-secondary{
  background:transparent;
  border-color:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.65);
}
.flyspaces-onboarding-btn-secondary:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.20);
  color:rgba(255,255,255,0.85);
}
.flyspaces-onboarding-btn-primary{
  background:rgba(110,231,183,0.12);
  border-color:rgba(110,231,183,0.35);
  color:#6ee7b7;
}
.flyspaces-onboarding-btn-primary:hover{
  background:rgba(110,231,183,0.20);
  border-color:rgba(110,231,183,0.55);
}
.flyspaces-onboarding-arrow{
  position:absolute;
  width:14px;
  height:14px;
  background:rgba(28,28,46,0.98);
  border-right:1px solid rgba(110,231,183,0.30);
  border-bottom:1px solid rgba(110,231,183,0.30);
}
@keyframes flyspacesOnboardingIn{
  from{opacity:0;transform:translateY(-8px) scale(0.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width: 600px){
  .flyspaces-onboarding-bubble{width:calc(100vw - 80px);max-width:280px;}
}
/* Sub-fase 1.6: CTA compacta para usarse arriba de la lista */
.flyspaces-cta-compact{
  margin-top:0;
  margin-bottom:8px;
  padding:10px 18px;
  width:100%;
  justify-content:center;
}
/* Sub-fase 1.6: pantalla de creación */
.flyspaces-back{
  position:absolute;
  top:14px;
  left:14px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.60);
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:6px;
  font-family:inherit;
  transition:background 0.15s, color 0.15s;
}
.flyspaces-back:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
}
.flyspaces-back i{font-size:12px;}
.flyspaces-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.flyspaces-form-label{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.75);
  text-align:left;
}
.flyspaces-form-input{
  width:100%;
  padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  color:#fff;
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color 0.15s, background 0.15s;
}
.flyspaces-form-input::placeholder{
  color:rgba(255,255,255,0.30);
}
.flyspaces-form-input:focus{
  border-color:rgba(110,231,183,0.45);
  background:rgba(255,255,255,0.06);
}
.flyspaces-form-error{
  font-size:12px;
  color:rgba(255,120,120,0.95);
  background:rgba(255,80,80,0.08);
  border:1px solid rgba(255,120,120,0.25);
  border-radius:8px;
  padding:8px 12px;
  text-align:left;
}
.flyspaces-form-error[hidden]{display:none;}
#flyspaces-create-submit:disabled{
  opacity:0.55;
  cursor:wait;
}
/* Sub-fase 1.6-extra: header del list-container con título y tagline */
.flyspaces-list-header{
  text-align:center;
  margin-bottom:16px;
  padding-top:4px;
}
.flyspaces-list-title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.01em;
}
.flyspaces-list-tagline{
  margin:0 0 4px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,0.55);
  max-width:380px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width: 600px){
  .flyspaces-list-title{font-size:18px;}
  .flyspaces-list-tagline{font-size:12px;}
}