/* Luca Design System — Manipulativos (build Vercel) */
/* ============================================================
   LUCA DESIGN SYSTEM — Tokens (fuente: luca-design-system.json)
   ============================================================ */
:root {
  --primary-600:#3B44D0; --primary-700:#2E36A8; --primary-50:#EEF0FC; --primary-100:#DCDFF8;
  --rosa:#FF8283; --rosa-50:#FFF1F1; --rosa-700:#C94F50;
  --amarillo:#FFBA31; --amarillo-50:#FFF6E3; --amarillo-700:#B07900;
  --verde:#32C8BD; --verde-50:#E7FAF8; --verde-700:#1A9990;
  --morado:#512DA8; --morado-50:#F1ECFA;
  --success-600:#16A34A; --success-50:#F0FDF4;
  --danger-600:#DC2626; --danger-50:#FEF2F2;
  --bg:#F7F8FA; --surface:#FFFFFF;
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-400:#9CA3AF;
  --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151; --gray-900:#111827;
  --radius:12px; --radius-sm:8px;
  --shadow-card:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-card-hover:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.05);
  --shadow-float:0 6px 20px rgba(17,24,39,.12),0 2px 6px rgba(17,24,39,.06);
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
body{background:var(--bg);color:var(--gray-700)}

/* ---------- Layout de herramienta (canvas 100%) ---------- */
.app{display:flex;height:100vh;overflow:hidden}
.workspace{flex-grow:1;position:relative;display:flex;flex-direction:column;overflow:hidden}
#canvas{flex-grow:1;position:relative;overflow:hidden;background:var(--bg)}

/* ---------- Branding: chip translúcido permanente (marca de agua) ---------- */
.brand-chip{position:fixed;top:16px;left:16px;z-index:1100;background:rgba(255,255,255,.30);
  border:1px solid rgba(59,68,208,.15);border-radius:999px;padding:6px 16px;pointer-events:none;user-select:none;
  display:flex;align-items:baseline;gap:1px}
.brand-chip .word{font-size:18px;font-weight:700;color:rgba(59,68,208,.45);letter-spacing:-.3px}
.brand-chip .dot{font-size:18px;font-weight:700;color:rgba(255,130,131,.55)}

/* ---------- Barra de total ---------- */
.total-bar{flex-shrink:0;background:var(--surface);border-top:1px solid var(--gray-200);
  padding:14px 30px;display:flex;justify-content:center;align-items:center;z-index:10}
.total-bar .label{font-size:12px;font-weight:500;color:var(--gray-500);display:block;text-align:center;margin-bottom:4px}
.total-bar .number{font-size:40px;font-weight:600;color:var(--primary-600);line-height:1;text-align:center}
.hidden{display:none !important}

/* ============================================================
   MENÚ FLOTANTE RADIAL v2 — círculo completo, 6 posiciones horarias
   ============================================================ */
.fab2{position:fixed;right:172px;bottom:190px;width:0;height:0;z-index:1200}

/* Disco de fondo plano semitransparente */
.fab2 .disc{position:absolute;left:50%;top:50%;width:300px;height:300px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);background:rgba(255,255,255,.55);
  border:1.5px solid rgba(59,68,208,.18);box-shadow:var(--shadow-float);
  opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s,background .25s,border-color .25s}
.fab2.open .disc{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Botón central: branding «L.» permanente */
.fab2 .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:var(--primary-600);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-float);z-index:3;transition:background .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.fab2 .core:hover{background:var(--primary-700)}
.fab2.open .core{transform:translate(-50%,-50%) scale(1.06)}
.fab2 .core .core-l{font-size:26px;font-weight:700;color:#fff;line-height:1;letter-spacing:-1px;transition:opacity .25s}
.fab2 .core .core-dot{color:var(--rosa)}

/* Nodos universales (posiciones fijas vía --tx/--ty desde JS) */
.fab2 .node{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--gray-200);color:var(--gray-600);cursor:pointer;box-shadow:var(--shadow-float);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:2;
  transform:translate(-50%,-50%) scale(.3);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s,background .2s,border-color .2s,color .2s,box-shadow .2s;
  transition-delay:calc(var(--i,0)*30ms)}
.fab2.open .node{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(1)}
.fab2 .node .lucide{width:20px;height:20px;pointer-events:none}
.fab2 .node:hover{background:var(--primary-50);color:var(--primary-600);border-color:var(--primary-100)}
.fab2 .node.is-danger{color:var(--danger-600)}
.fab2 .node.is-danger:hover{background:var(--danger-50);border-color:#FECACA}
.fab2 .node.is-active{background:var(--primary-600);color:#fff;border-color:var(--primary-600)}

/* Translucidez: abierto en reposo = solo bordes; opaco con cursor / tras primer toque */
.fab2.open.idle .disc{background:rgba(255,255,255,.14);border-color:rgba(59,68,208,.28)}
.fab2.open.idle .node{background:rgba(255,255,255,.10);border-color:rgba(107,114,128,.45);color:rgba(75,85,99,.45);box-shadow:none}
.fab2.open.idle .core{background:rgba(59,68,208,.45)}
.fab2.open.idle .core .core-l{opacity:.55}

/* Tooltips de nodos (hover / long-press) */
.fab2 .node::after{content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--gray-900);color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .15s;pointer-events:none;z-index:5}
.fab2 .node[data-side="right"]::after{right:auto;left:calc(100% + 12px)}
.fab2 .node:hover::after,.fab2 .node.show-tip::after{opacity:1}

/* ---- Desplegable «⋯ Acciones de la herramienta» ---- */
.tool-card{position:absolute;right:-130px;bottom:-40px;width:238px;max-height:70vh;overflow-y:auto;
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);box-shadow:var(--shadow-float);padding:10px;z-index:4;
  opacity:0;pointer-events:none;transform:translateY(8px) scale(.96);transform-origin:bottom right;
  transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.fab2.card-open .tool-card{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.tool-card .tc-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-400);padding:4px 8px 8px}
.tc-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:var(--radius-sm);
  background:transparent;font-size:13px;font-weight:500;color:var(--gray-700);cursor:pointer;text-align:left}
.tc-item:hover{background:var(--gray-50)}
.tc-item>.lucide{width:18px;height:18px;color:var(--gray-400);flex-shrink:0}
.tc-item:hover>.lucide{color:var(--primary-600)}
.tc-item.is-danger{color:var(--danger-600)}
.tc-item.is-danger>.lucide{color:var(--danger-600)}
.tc-item.is-danger:hover{background:var(--danger-50)}
.tc-item .tc-val{margin-left:auto;font-size:11px;color:var(--gray-400);font-weight:600}
.tc-item .chip-ic{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.tc-item .chip-ic .lucide{width:14px;height:14px;color:inherit}
.ic-indigo{background:var(--primary-50);color:var(--primary-600)}
.ic-rosa{background:var(--rosa-50);color:var(--rosa-700)}
.ic-amarillo{background:var(--amarillo-50);color:var(--amarillo-700)}
.ic-verde{background:var(--verde-50);color:var(--verde-700)}
.ic-morado{background:var(--morado-50);color:var(--morado)}
.tc-div{height:1px;background:var(--gray-100);margin:8px 4px}
.tc-ctx-empty{font-size:11px;color:var(--gray-400);padding:6px 8px 2px;font-style:italic}

/* ============================================================
   MENÚ CONTEXTUAL RADIAL (junto a pieza / texto seleccionado)
   ============================================================ */
.ctx-radial{position:absolute;left:50%;top:0;width:0;height:0;display:none;z-index:1000;pointer-events:none}
.selected>.ctx-radial{display:block}
.ctx-node{position:absolute;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--gray-200);
  box-shadow:var(--shadow-float);color:var(--gray-600);cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%) translate(var(--tx),var(--ty));
  animation:ctxPop .3s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i,0)*35ms)}
.ctx-node .lucide{width:17px;height:17px;pointer-events:none}
.ctx-node:hover{background:var(--primary-50);color:var(--primary-600)}
.ctx-node.is-danger{color:var(--danger-600)}
.ctx-node.is-danger:hover{background:var(--danger-50)}
@keyframes ctxPop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}
  to{transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(1);opacity:1}}
.ctx-node::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--gray-900);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .15s;pointer-events:none;z-index:3000}
.ctx-node:hover::after,.ctx-node.show-tip::after{opacity:1}

/* ============================================================
   TEXTO LIBRE (función universal «Agregar texto»)
   ============================================================ */
.free-text{position:absolute;cursor:grab;touch-action:none;z-index:3000;color:#000;font-weight:600;line-height:1.2;
  padding:4px 8px;border-radius:6px;min-width:24px;white-space:pre-wrap;user-select:none}
.free-text:active{cursor:grabbing}
.free-text.editing{outline:2px solid var(--primary-600);background:rgba(255,255,255,.85);cursor:text}
.free-text .ft-content{outline:none;display:inline-block;min-width:10px;min-height:1em;white-space:pre-wrap}
.free-text.editing .ft-content{user-select:text;cursor:text}
.free-text.selected:not(.editing){outline:2px dashed rgba(59,68,208,.65)}
.free-text.size-S{font-size:16px}.free-text.size-M{font-size:26px}.free-text.size-L{font-size:40px}

/* ---------- Captura ---------- */
@keyframes flashOverlay{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
.flash-overlay{position:fixed;inset:0;background:#fff;z-index:9999;pointer-events:none;animation:flashOverlay .6s ease-out forwards}

/* ---------- Responsive ---------- */
@media (max-width:1024px){ .fab2{right:162px;bottom:178px} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }