.sd{ position:fixed; z-index:110; display:inline-block; /* --size, --gap, --main, --accent desde style inline */ }

.btn-fab{ width:var(--size); height:var(--size); border-radius:50%; display:grid; place-items:center; border:0; cursor:pointer; background:#fff; box-shadow:0 10px 26px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-fab .material-symbols-rounded{ font-size:calc(var(--size)*.48); color:#3f7bff; }
.btn-fab.small{ width:calc(var(--size)*.78); height:calc(var(--size)*.78); }

.btn-fab:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.btn-fab.disabled{ opacity:.55; cursor:not-allowed; }
.btn-fab.danger .material-symbols-rounded{ color:#b71c1c; }

/* FAB principal amarillo */
.btn-fab.main{ background:var(--main); }
.btn-fab.main .material-symbols-rounded{ color:#001018; }

/* Contenedor de items (animado) */
.items{ position:absolute; display:flex; gap:var(--gap); pointer-events:none; opacity:0; transition:opacity .15s ease, transform .15s ease; }
.items.open{ pointer-events:auto; opacity:1; }

/* Direcciones */
.sd-up{ position:fixed; }
.sd-up .items{ bottom:calc(var(--size) + 8px); left:50%; transform:translate(-50%, 8px); flex-direction:column; }
.sd-up .items.open{ transform:translate(-50%, 0); }

.sd-down .items{ top:calc(var(--size) + 8px); left:50%; transform:translate(-50%, -8px); flex-direction:column; }
.sd-down .items.open{ transform:translate(-50%, 0); }

.sd-left .items{ right:calc(var(--size) + 8px); top:50%; transform:translate(8px, -50%); flex-direction:row; }
.sd-left .items.open{ transform:translate(0, -50%); }

.sd-right .items{ left:calc(var(--size) + 8px); top:50%; transform:translate(-8px, -50%); flex-direction:row; }
.sd-right .items.open{ transform:translate(0, -50%); }

/* Tooltips reutilizando tu patrón */
.has-tip{ position:relative; }
.has-tip[data-tip]::after{ content:attr(data-tip); position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%) scale(.96); background:#0b1220; color:#e5e7eb; padding:6px 10px; font-size:12px; white-space:nowrap; border-radius:8px; pointer-events:none; opacity:0; transition:opacity .15s ease, transform .15s ease; box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:999; }
.has-tip[data-tip]::before{ content:""; position:absolute; right:calc(100% + 4px); top:50%; transform:translateY(-50%); border:6px solid transparent; border-right-color:#0b1220; opacity:0; transition:opacity .15s ease; z-index:998; }
.has-tip:hover::after, .has-tip:focus::after{ opacity:1; transform:translateY(-50%) scale(1); }
.has-tip:hover::before, .has-tip:focus::before{ opacity:1; }

/* Modo horizontal: tooltip abajo */
.sd-left .has-tip[data-tip]::after, .sd-right .has-tip[data-tip]::after{ top:auto; bottom:calc(100% + 10px); right:50%; transform:translateX(50%) scale(.96); }
.sd-left .has-tip[data-tip]::before, .sd-right .has-tip[data-tip]::before{ top:auto; bottom:calc(100% + 4px); right:50%; transform:translateX(50%); border-right-color:transparent; border-top-color:#0b1220; }


/* === PATCH: sombra ligera estilo Syncfusion + centrado exacto del ícono === */
/* Centrado perfecto: cambiamos a inline-flex y fijamos métricas del glifo */
.btn-fab{ display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.06); }
.btn-fab .material-symbols-rounded{ display:block; line-height:1; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' var(--size); transform:translate(var(--nudge-x,0), var(--nudge-y,0)); }
/* Tamaño del glifo en mini-FAB (ligeramente menor para que se vea centrado visualmente) */
.btn-fab.small .material-symbols-rounded{ font-size:calc(var(--size)*.42); }

/* Sombra extra cuando está abierto (mini-FAB) */
.items.open .btn-fab.small{ box-shadow:0 8px 18px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.10); }

/* En uso por fila (sd-row), borde sutil como chip */
.sd-row .btn-fab.small{ background:#fff; border:1px solid #e5e7eb; }

/* Ajuste fino opcional: crea una clase y mueve el ícono 1px si tu navegador lo renderiza descentrado */
.sd-row.nudgeY1{ --nudge-y: 1px; }
.sd-row.nudgeYm1{ --nudge-y: -1px; }


/* === ROW-ANCHORED MODE (por fila en tabla) — addendum === */
.sd-anchored{ position:relative; inset:auto; z-index:999; }
.sd-anchored .btn-fab.main{ position:relative; }
.sd-anchored.sd-left .items{ right:calc(var(--size) + 8px); top:50%; transform:translate(8px, -50%); flex-direction:row; }
.sd-anchored.sd-left .items.open{ transform:translate(0, -50%); }
.sd-anchored.sd-right .items{ left:calc(var(--size) + 8px); top:50%; transform:translate(-8px, -50%); flex-direction:row; }
.sd-anchored.sd-right .items.open{ transform:translate(0, -50%); }
.sd-anchored.sd-up .items{ bottom:calc(var(--size) + 8px); left:50%; transform:translate(-50%, 8px); flex-direction:column; }
.sd-anchored.sd-up .items.open{ transform:translate(-50%, 0); }
.sd-anchored.sd-down .items{ top:calc(var(--size) + 8px); left:50%; transform:translate(-50%, -8px); flex-direction:column; }
.sd-anchored.sd-down .items.open{ transform:translate(-50%, 0); }

/* Estilo de fila: botón principal blanco con borde sutil y mini-FAB elevado */
.sd-row .btn-fab.main{ background:#fff; border:1px solid #e5e7eb; }
.sd-row .btn-fab.main .material-symbols-rounded{ color:#3f7bff; }
.items.open .btn-fab.small{ box-shadow:0 8px 18px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.10); }

/* Revelar solo en hover de la fila (CSS isolation compatible) */
.sd-row.reveal{ opacity:0; transition:opacity .12s ease; }
:global(tr:hover) .sd-row.reveal{ opacity:1; }