html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:transparent;color:#ddd;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;user-select:none;-webkit-user-select:none;}*{box-sizing:border-box}.app{position:relative;width:100%;height:100%;overflow:hidden;background:transparent}

/* Densidad nativa: botones de tamaño estable que reordenan, no se inflan. */
.tools{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,1),var(--cell,56px));justify-content:start;justify-items:start;grid-auto-rows:var(--cell,56px);gap:var(--gap,8px);padding:var(--pad,8px);align-content:start;justify-items:center;align-items:center;overflow:auto;scrollbar-width:thin}

.tool{width:var(--cell,56px);max-width:100%;height:var(--cell,56px);min-width:0;min-height:0;padding:var(--icon-pad,8px);margin:0;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius,14px);background:#2a2a2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 1px 2px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;appearance:none;-webkit-appearance:none;transition:transform .10s ease,background .10s ease,border-color .10s ease,box-shadow .10s ease,opacity .12s ease,visibility .12s ease;position:relative}
.tool:hover{background:#373737;border-color:rgba(255,255,255,.15);transform:scale(var(--hover-scale,1.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 4px 12px rgba(0,0,0,.24);z-index:5}
.tool:active{transform:scale(.965);background:#3c3c3c}
.tool img,.iconTint{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;image-rendering:auto}
.iconTint{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* Engranaje = una celda mas del grid (identico a un boton) */
.gear{width:var(--cell,56px);max-width:100%;height:var(--cell,56px);margin:0;padding:var(--icon-pad,8px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius,14px);background:#2a2a2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 1px 2px rgba(0,0,0,.25);color:#8f8f8f;font-size:calc(var(--cell,56px)*.4);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1}
.gear:hover{background:#373737;color:#d0d0d0;border-color:rgba(255,255,255,.15);transform:scale(var(--hover-scale,1.03))}
#status{display:none}

.dragGhost{position:fixed;z-index:9999;pointer-events:none;opacity:.92;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius,14px);background:#323232;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:var(--icon-pad,8px)}
.dragGhost img,.dragGhost .iconTint{width:100%;height:100%;display:block;object-fit:contain}
body.editing .tool{animation:wobble .18s infinite alternate ease-in-out}
body.editing .tool:nth-child(2n){animation-direction:alternate-reverse}
body.editing .tool::after{content:'\00d7';position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#e04b4b;color:white;font-size:11px;font-weight:700;line-height:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.35)}
body.editing .tool.dragging{opacity:.28;transform:scale(.9)}
@keyframes wobble{from{transform:rotate(-1.2deg) scale(.985)}to{transform:rotate(1.2deg) scale(1.015)}}