/* admin/css/adicionales/indicadores-bloque.css */
#contenedor_indicadores {
  margin: 20px 0;
  padding: 10px;
  background: transparent;
  border-radius: 8px;
  min-height: 50px; /* adjusted to match other list items */
}
.indicador-item {
  display: flex;
  gap: 18px; /* consistent spacing with site */
  align-items: center;
  background: #23303a; /* dark panel */
  border-left: 4px solid transparent;
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 14px 16px; /* slightly larger padding for better readability */
  cursor: default;
  color: #ffffff;
  max-width: 900px; /* limit box length (reduced further) */
  margin-left: auto;
  margin-right: auto;
}
.indicador-item .indicador-icon{
  width: 36px; /* slightly larger circle to match site visuals */
  height: 36px;
  background-color: inherit !important; /* same color as the box */
  border-radius: 50% !important;
  flex: 0 0 44px; /* reserve space similar to other controls */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}
.indicador-item .indicador-icon i{
  font-size: 1.2rem !important; /* icon sizing consistent with site */
  color: #ffffff !important; /* icon should be white */
  line-height: 1 !important;
}
.indicador-content{
  flex: 1 1 auto;
}
/* allow the content to shrink properly inside flex so it doesn't overflow under the handle */
.indicador-content{ min-width: 0; }
.indicador-title{
  color: #fff;
  font-weight: 700;
  display: block;
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 1.35em; /* un poco más grande */
  line-height: 1.2;
}
.indicador-title{
  transition: color 150ms ease;
  text-decoration: none !important;
}
.indicador-title:hover{
  color: #efa3a3 !important;
  text-decoration: none !important;
}
.indicador-date{
  color: #b9c3c9;
  font-size: 1.05em; /* un poco más grande */
  display: block;
  margin-top: 4px;
}
.indicador-move{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 6px;
  color: #9aa6ad;
  cursor: grab;
  user-select: none;
}
.indicador-move{ position: relative; z-index: 3; }
.indicador-move i{ font-size: 1.1rem; }
.indicador-item.dragging{
  opacity: 0.15; /* hide original while ghost is shown */
  transform: none;
}
.indicador-separator{
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 0;
}
.indicador-item input[type="hidden"]{ display:none; }

/* placeholder shown while dragging to indicate drop position */
.indicador-placeholder{
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.04);
  margin-bottom: 8px;
  border-radius: 4px;
  transition: background 120ms ease, height 120ms ease;
}

/* stronger visual for placeholder while dragging */
.indicador-placeholder{
  background: rgba(255,255,255,0.04) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);
  animation: placeholder-pulse 900ms ease-in-out infinite;
}

@keyframes placeholder-pulse{
  0%{ background: rgba(255,255,255,0.03); }
  50%{ background: rgba(255,255,255,0.06); }
  100%{ background: rgba(255,255,255,0.03); }
}

/* subtle transition for items moving around */
.indicador-item{
  transition: transform 150ms ease, margin 120ms ease;
}

/* visual feedback when drop is not allowed in current zone */
.indicador-item.not-allowed{
  opacity: 0.5;
  cursor: not-allowed;
}

/* ghost style used for setDragImage clone (kept offscreen) */
.drag-ghost{
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  border-radius: 8px;
  transform: translateY(-6px) scale(1.02);
  transform-origin: center;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
  width: 880px; /* approximate width for the drag image */
  max-width: 95%;
  background: #23303a;
  color: #fff;
  padding: 12px 14px;
}

/* cursor while dragging */
/* when dragging, make the ghost more visible (lift + scale) */
body.is-dragging .drag-ghost{
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 30px 70px rgba(0,0,0,0.7);
}

/* show grabbing cursor only on the handle while dragging */
body.is-dragging .indicador-move{ cursor: grabbing !important; }