/* ══════════════════════════════════════════
   BULK BAR  –  Shared selection bar styles
   ══════════════════════════════════════════ */

/* Padding inferior cuando la bulkbar está activa, para que el contenido
   (especialmente filas hijo del parent-child) no quede tapado por la
   barra flotante.
   Opt-in vía body.bulkbar-padded — la pone bulkbar.js cuando la
   BulkSelection se construye con padBody:true. Antes usábamos
   body:has(.bulk-bar.active) que afectaba a TODAS las páginas con bulkbar
   y no era compatible con Firefox <121/Safari <15.4. */
body.bulkbar-padded {
  padding-bottom: 100px;
}

/* ── Base bar ── */
.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000;
  width: min(1100px, calc(100% - 24px));
  background: #265642;
  color: #fff;
  border-radius: var(--mt-radius);
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
}

.bulk-bar.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.bulk-bar.bulk-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Left: pill with count + clear ── */
.bulk-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 10px;
  border-radius: var(--mt-radius);
}

.bulk-x {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ── Right: action buttons ── */
.bulk-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.bulk-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: var(--mt-radius);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
}

.bulk-btn:hover { background: rgba(255,255,255,.16); }

.bulk-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── Button variants ── */
.bulk-btn.bulk-btn-danger {
  background: rgba(183, 28, 28, .72);
  border-color: rgba(255,255,255,.18);
}
.bulk-btn.bulk-btn-danger:hover { background: rgba(183, 28, 28, .88); }

.bulk-btn.bulk-btn-muted {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
}

.bulk-link {
  background: transparent;
  border: 0;
  color: #9ae6ff;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
  margin-left: 6px;
}

/* ── Move-mode hint ── */
.bulk-help {
  display: none;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

.bulk-help.active {
  display: inline-flex;
}

/* ── Tooltip on buttons (.has-tooltip + data-tooltip) ──
   Vive en mt-theme.css (global): bulkbar.css solo se carga en páginas con
   DataTables y el tooltip común se necesita en toda la app (22/08/2026). */

/* ── SweetAlert custom icons (used by bulk actions) ──
   Importante: NO aplicar a `.swal2-icon` genérico porque los iconos estándar
   de SweetAlert (.swal2-error, .swal2-warning, .swal2-success, .swal2-info,
   .swal2-question) y el spinner de loading comparten esa clase base. Sus
   "dibujos" (X, check, spinner) se construyen con elementos hijos posicionados
   en absoluto, y `display: flex !important` rompe ese posicionamiento dejando
   solo el círculo exterior. Por eso restringimos a los custom de bulk. */
.swal2-icon-trash,
.swal2-icon-pause,
.swal2-icon-play,
.swal2-icon-duplicate {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swal2-icon-trash i,
.swal2-icon-pause i,
.swal2-icon-play i,
.swal2-icon-duplicate i {
  font-size: 42px;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
}

.swal2-icon-trash {
  border-color: #d33 !important;
  color: #d33 !important;
}
.swal2-icon-trash i { transform: translateX(0px); }

.swal2-icon-pause {
  border-color: #d33 !important;
  color: #d33 !important;
}
.swal2-icon-pause i { transform: translateX(0px); }

.swal2-icon-play {
  border-color: #265642 !important;
  color: #265642 !important;
}
.swal2-icon-play i { transform: translateX(2px); }

.swal2-icon-duplicate {
  border-color: #265642 !important;
  color: #265642 !important;
}
.swal2-icon-duplicate i { transform: translateX(0px); }

/* ── Move-selection mode (gestion_controles) ── */
#elementos .export_checkbox,
#elementos .js-move-target,
#estructura_controls_grups .export_checkbox,
#estructura_controls_grups .js-move-target {
  cursor: pointer;
}

body.move-selection-mode #elementos tbody tr,
body.move-selection-mode-registros-grupo #estructura_controls_grups tbody tr {
  cursor: pointer;
}

body.move-selection-mode #elementos tbody tr:hover,
body.move-selection-mode-registros-grupo #estructura_controls_grups tbody tr:hover {
  background: #eef6f1 !important;
}

#btnMoveSelection.active,
#btnMoveSelectionRegistrosGrupo.active {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: rgba(255,255,255,.30);
}

/* ── Preview mode (bulk move) ── */
.bulk-preview-actions {
  display: none;
  align-items: center;
  gap: 8px;
}

.bulk-preview-actions.active {
  display: inline-flex;
}

body.bulk-preview-mode .bulk-actions > .bulk-btn,
body.bulk-preview-mode .bulk-bar > .bulk-help,
body.bulk-preview-mode-registros-grupo .bulk-actions > .bulk-btn,
body.bulk-preview-mode-registros-grupo .bulk-bar > .bulk-help {
  display: none !important;
}

body.move-selection-mode .bulk-actions > .bulk-btn:not(#btnMoveSelection),
body.move-selection-mode-registros-grupo .bulk-actions > .bulk-btn:not(#btnMoveSelectionRegistrosGrupo) {
  display: none !important;
}

body.bulk-preview-mode .bulk-actions > .bulk-preview-actions,
body.bulk-preview-mode-registros-grupo .bulk-actions > .bulk-preview-actions {
  display: inline-flex;
}

body.bulk-preview-mode #elementos tbody tr,
body.bulk-preview-mode-registros-grupo #estructura_controls_grups tbody tr {
  transition: background-color 0.2s ease;
}

body.bulk-preview-mode #elementos tbody tr.preview-selected,
body.bulk-preview-mode-registros-grupo #estructura_controls_grups tbody tr.preview-selected {
  background: #eef6f1 !important;
}

/* ── Select-all checkbox alignment ── */
.bulk-select-all {
  transform: translateY(1px);
}

/* ── Desplegables dentro de la bulkbar (.bulk-menu) ──
   Para agrupar acciones cuando la barra tiene demasiados botones (/controles,
   15/09/2026). Se abren hacia arriba (.dropup) y son de la misma familia que la
   barra: fondo green-700, hover green-600 y el texto hereda el blanco de .bulk-bar. */
.bulk-menu.dropdown-menu {
  --bs-dropdown-link-color: inherit;
  --bs-dropdown-link-hover-color: inherit;
  --bs-dropdown-link-active-color: inherit;
  --bs-dropdown-link-hover-bg: var(--mt-green-600);
  --bs-dropdown-link-active-bg: var(--mt-green-600);
  color: inherit;
  background: var(--mt-green-700);
  border: 1px solid var(--mt-green-600);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-lg);
  padding: 4px;
  margin-bottom: 8px !important;
  min-width: 240px;
}

.bulk-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--mt-radius);
  font-size: var(--mt-fs-body);
  font-weight: 600;
  white-space: nowrap;
}

.bulk-menu .dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--mt-green-200);
}

/* Con el menú abierto el tooltip del botón quedaría encima de las opciones */
.bulk-btn.has-tooltip[aria-expanded="true"]::after,
.bulk-btn.has-tooltip[aria-expanded="true"]::before {
  opacity: 0;
}