/* Modo edición del tablero (reordenar + ocultar + redimensionar) */
.layout-hidden { display: none !important; }

.layout-edit-toggle {
  position: fixed; z-index: 9998; left: 16px; bottom: 16px;
  padding: 9px 15px; border-radius: 22px; border: 1px solid #e2e8f0;
  background: #fff; color: #0071e3; font: 700 12px/1 inherit;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); cursor: pointer;
}
.layout-edit-toggle.active { background: #0071e3; color: #fff; border-color: #0071e3; }

/* Afordances solo en modo edición, para cualquier tarjeta/bloque editable */
body.layout-editing [data-card] {
  position: relative; cursor: grab;
  outline: 1px dashed #b8c4d6; outline-offset: 2px;
}
body.layout-editing [data-card].dragging { opacity: .45; }
body.layout-editing [data-card].dragover { outline: 2px solid #0071e3; }

.layout-remove-btn {
  position: absolute; z-index: 30; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid #e26a8c; background: #fff; color: #d6336c;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
[data-card].layout-removed { opacity: .4; }
[data-card].layout-removed .layout-remove-btn { border-color: #0071e3; color: #fff; background: #0071e3; }

/* Manija de redimensión (esquina inferior derecha) */
.layout-resize-handle {
  position: absolute; z-index: 30; right: 3px; bottom: 3px;
  width: 16px; height: 16px; cursor: nwse-resize;
  border-right: 3px solid #0071e3; border-bottom: 3px solid #0071e3;
  border-bottom-right-radius: 4px; opacity: .7;
}
.layout-resize-handle:hover { opacity: 1; }

.layout-reset-toggle{
  position: fixed; z-index: 9998; left: 16px; bottom: 54px;
  padding: 7px 12px; border-radius: 22px; border: 1px solid #e6d0d6;
  background: #fff; color: #b23a4e; font: 700 11px/1 inherit;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); cursor: pointer;
}
.layout-reset-toggle:hover{ background: #fdf3f5; }