/* ================================================================
   ENVIRONMENT WORKFLOW TAB — BizMetry Design System
   ================================================================ */

/* ── 1. Design tokens (scoped to container) ─────────────────────── */
.environment-workflow-container {
  --bm-navy-900:  #111827;
  --bm-navy-800:  #1E2A3A;
  --bm-navy-700:  #2D3A52;
  --bm-navy-500:  #4B5878;
  --bm-navy-300:  #8E97B4;
  --bm-navy-200:  #BFC5D8;
  --bm-navy-100:  #DDE2EF;
  --bm-navy-50:   #F4F5FA;

  --bm-teal-600:  #009977;
  --bm-teal-500:  #00BFA5;
  --bm-teal-400:  #1AD4BA;
  --bm-teal-100:  #CCFAF3;
  --bm-teal-50:   #E6FAF7;

  --bm-success-bg:     #ECFDF5;
  --bm-success-border: #6EE7B7;
  --bm-success-text:   #065F46;
  --bm-warning:        #D97706;
  --bm-warning-bg:     #FFFBEB;
  --bm-warning-border: #FCD34D;
  --bm-warning-text:   #92400E;
  --bm-error:          #DC2626;
  --bm-error-bg:       #FEF2F2;
  --bm-error-border:   #FECACA;
  --bm-error-text:     #991B1B;
  --bm-info-bg:        #EFF6FF;
  --bm-info-border:    #BFDBFE;
  --bm-info-text:      #1E40AF;

  --bm-surface:    #FFFFFF;
  --bm-surface-2:  #F7F8FC;
  --bm-surface-3:  #EFF1F8;

  --bm-text-primary:   #111827;
  --bm-text-secondary: #4B5878;
  --bm-text-muted:     #8E97B4;

  --bm-border:        #E2E5EF;
  --bm-border-subtle: #EFF1F8;
  --bm-border-strong: #C5CCDF;

  --bm-r-sm:   4px;
  --bm-r-md:   6px;
  --bm-r-lg:   10px;
  --bm-r-xl:   14px;
  --bm-r-pill: 100px;

  --bm-font-display: 'Outfit', system-ui, sans-serif;
  --bm-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --bm-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --bm-shadow-xs: 0 1px 2px rgba(8,12,24,.06);
  --bm-shadow-sm: 0 1px 4px rgba(8,12,24,.08), 0 1px 2px rgba(8,12,24,.04);
  --bm-shadow-md: 0 4px 12px rgba(8,12,24,.10), 0 2px 4px rgba(8,12,24,.06);

  --bm-t: 160ms cubic-bezier(.4,0,.2,1);
}


/* ── 2. Container ───────────────────────────────────────────────── */
.environment-workflow-container {
  padding:    20px 24px;
  background: var(--bm-surface-2);
  min-height: 400px;
  font-family: var(--bm-font-body);
}


/* ── 3. Header ──────────────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-header {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            16px;
  margin-bottom:  20px;
  padding:        18px 20px;
  background:     var(--bm-surface);
  border:         1px solid var(--bm-border);
  border-radius:  var(--bm-r-lg);
  box-shadow:     var(--bm-shadow-xs);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-title-section {
  flex:      1 1 0%;
  min-width: 0;
  overflow:  hidden;
}


/* Wrapper ícono + título — span nativos, sin Angular Material */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-title-row {
  display:     flex;
  flex-direction: row;
  align-items: center;
  gap:         8px;
  margin-bottom: 4px;
}


/* span.material-icons — no depende de md-icon de Angular Material */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-title-icon {
  font-family:  'Material Icons', sans-serif;
  font-size:    22px;
  line-height:  1;
  color:        var(--bm-teal-500);
  flex-shrink:  0;
  flex-grow:    0;
  display:      inline-block;
  width:        22px;
  height:       22px;
  overflow:     hidden;
  /* Anular cualquier herencia de Angular Material */
  font-weight:  normal;
  font-style:   normal;
  letter-spacing: normal;
  text-transform: none;
  white-space:  nowrap;
  word-wrap:    normal;
  direction:    ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* span título — display:inline, sin quirks de bloque */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-title-text {
  display:     inline;
  margin:      0;
  padding:     0;
  font-family: var(--bm-font-display);
  font-size:   18px;
  font-weight: 700;
  color:       var(--bm-navy-900);
  line-height: 1.2;
  white-space: nowrap;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-subtitle {
  margin:      0;
  padding-left: 30px;
  font-size:   13px;
  color:       var(--bm-text-muted);
  line-height: 1.5;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions {
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-shrink: 0;
}


/* ── 4. Empty state ─────────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         60px 20px;
  background:      var(--bm-surface);
  border:          1px solid var(--bm-border);
  border-radius:   var(--bm-r-lg);
  box-shadow:      var(--bm-shadow-xs);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-empty-state md-icon {
  font-size:     56px !important;
  width:         56px !important;
  height:        56px !important;
  color:         var(--bm-navy-200) !important;
  margin-bottom: 16px;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-empty-state p {
  font-family: var(--bm-font-display);
  font-size:   15px;
  color:       var(--bm-text-muted);
  margin:      0 0 20px 0;
}


/* ── 5. Mini diagram ────────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-mini-diagram {
  display:       flex;
  align-items:   center;
  padding:       24px 20px;
  overflow-x:    auto;
  overflow-y:    visible;
  background:    transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,191,165,.2) transparent;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-mini-diagram::-webkit-scrollbar { height: 3px; }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-mini-diagram::-webkit-scrollbar-thumb { background: rgba(0,191,165,.25); border-radius: 2px; }

:where(.edit-env-dialog, .environment-workflow-container) .wmd-step {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-node {
  position:        relative;
  width:           220px;
  min-width:       220px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding-bottom:  4px;
}


/* Rings */
:where(.edit-env-dialog, .environment-workflow-container) .wmd-ring {
  position:      absolute;
  top:           0;
  left:          50%;
  transform:     translateX(-50%);
  width:         106px;
  height:        106px;
  border-radius: 50%;
  border:        2px solid rgba(0,191,165,.2);
  animation:     wmd-ring-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
  box-sizing:    border-box;
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-mid-ring {
  position:      absolute;
  top:           5px;
  left:          50%;
  transform:     translateX(-50%);
  width:         96px;
  height:        96px;
  border-radius: 50%;
  border:        1.5px solid rgba(0,191,165,.15);
  pointer-events: none;
  box-sizing:    border-box;
}


/* Enabled / disabled ring variants */
:where(.edit-env-dialog, .environment-workflow-container) .wmd-ring-enabled { border-color: rgba(0,153,119,.3); }
:where(.edit-env-dialog, .environment-workflow-container) .wmd-ring-disabled { border-color: rgba(142,151,180,.15); animation: none; }
:where(.edit-env-dialog, .environment-workflow-container) .wmd-mid-enabled { border-color: rgba(0,153,119,.22); }
:where(.edit-env-dialog, .environment-workflow-container) .wmd-mid-disabled { border-color: rgba(142,151,180,.1); }


/* Main circle */
:where(.edit-env-dialog, .environment-workflow-container) .wmd-circle {
  position:        relative;
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      radial-gradient(circle at 35% 35%, #fff 0%, var(--bm-navy-100) 40%, var(--bm-navy-700) 100%);
  border:          2px solid var(--bm-navy-700);
  box-shadow:      0 4px 14px rgba(17,24,39,.25), inset 0 -3px 6px rgba(17,24,39,.15), inset 0 3px 5px rgba(255,255,255,.55);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  transition:      transform .25s ease, box-shadow .25s ease;
  cursor:          default;
  margin-top:      10px;
  gap:             2px;
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-circle-enabled {
  background:  radial-gradient(circle at 35% 35%, #fff 0%, var(--bm-teal-100) 40%, var(--bm-teal-600) 100%);
  border-color: var(--bm-teal-600);
  box-shadow:  0 4px 14px rgba(0,153,119,.35), inset 0 -3px 6px rgba(0,153,119,.2), inset 0 3px 5px rgba(255,255,255,.55);
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-circle-disabled {
  background:  radial-gradient(circle at 35% 35%, #fff 0%, #e5e7eb 40%, #9ca3af 100%);
  border-color: #9ca3af;
  box-shadow:  0 4px 14px rgba(0,0,0,.08), inset 0 -3px 6px rgba(0,0,0,.05), inset 0 3px 5px rgba(255,255,255,.4);
  opacity:     .75;
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-node:hover .wmd-circle {
  transform:  translateY(-4px) scale(1.07);
  box-shadow: 0 10px 24px rgba(17,24,39,.3), inset 0 -3px 6px rgba(17,24,39,.15), inset 0 3px 5px rgba(255,255,255,.55);
}
:where(.edit-env-dialog, .environment-workflow-container) .wmd-node:hover .wmd-ring { border-color: rgba(0,191,165,.5); }

:where(.edit-env-dialog, .environment-workflow-container) .wmd-shine {
  position:       absolute;
  top:            11px;
  left:           13px;
  width:          28px;
  height:         13px;
  background:     rgba(255,255,255,.45);
  border-radius:  50%;
  transform:      rotate(-20deg);
  pointer-events: none;
}


/* nombre del env dentro de la burbuja — oculto, ya se muestra debajo */
:where(.edit-env-dialog, .environment-workflow-container) .wmd-node-name {
  display: none;
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-node-version {
  font-family:    var(--bm-font-mono);
  font-size:      14px;
  font-weight:    800;
  color:          rgba(255,255,255,1);
  text-shadow:    0 1px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6);
  pointer-events: none;
  user-select:    none;
  z-index:        1;
  background:     rgba(0,0,0,.22);
  padding:        2px 8px;
  border-radius:  var(--bm-r-sm);
  letter-spacing: .3px;
}
:where(.edit-env-dialog, .environment-workflow-container) .wmd-no-version { opacity: .6; font-size: 16px; }

:where(.edit-env-dialog, .environment-workflow-container) .wmd-node-label {
  margin-top:     10px;
  font-family:    var(--bm-font-display);
  font-size:      12px;
  font-weight:    700;
  color:          var(--bm-navy-500);
  text-transform: uppercase;
  letter-spacing: .6px;
  text-align:     center;
  user-select:    none;
  max-width:      200px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
:where(.edit-env-dialog, .environment-workflow-container) .wmd-label-enabled { color: var(--bm-teal-600); }
:where(.edit-env-dialog, .environment-workflow-container) .wmd-label-disabled { color: var(--bm-text-muted); }


/* Mini arrow */
:where(.edit-env-dialog, .environment-workflow-container) .wmd-arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 20px;
  min-width:       80px;
  margin-bottom:   28px;
}

:where(.edit-env-dialog, .environment-workflow-container) .wmd-arrow-line {
  width:        80px;
  height:       4px;
  background:   linear-gradient(90deg, rgba(0,191,165,.3) 0%, rgba(0,191,165,.75) 50%, rgba(0,191,165,.3) 100%);
  border-radius: 2px;
  position:     relative;
  animation:    wmd-flow 2s ease-in-out infinite;
}
:where(.edit-env-dialog, .environment-workflow-container) .wmd-arrow-line::after {
  content:    '';
  position:   absolute;
  right:      -9px;
  top:        50%;
  transform:  translateY(-50%);
  border-left:  11px solid rgba(0,191,165,.85);
  border-top:   7px solid transparent;
  border-bottom: 7px solid transparent;
}


/* ── 6. Workflow track ──────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-track {
  display:        flex;
  align-items:    stretch;
  padding:        24px 20px;
  background:     var(--bm-surface);
  border:         1px solid var(--bm-border);
  border-radius:  var(--bm-r-lg);
  box-shadow:     var(--bm-shadow-xs);
  overflow-x:     auto;
  min-height:     260px;
  transition:     all var(--bm-t);
  margin-top:     8px;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-track.edit-mode-active {
  background:    var(--bm-surface-2);
  border:        2px dashed var(--bm-teal-400);
  box-shadow:    0 4px 16px rgba(0,191,165,.15);
  padding:       36px 20px;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-step-wrapper {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}


/* ── 7. Environment card ────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card {
  position:      relative;
  width:         220px;
  min-width:     220px;
  background:    var(--bm-surface);
  border:        1px solid var(--bm-border);
  border-radius: var(--bm-r-xl);
  padding:       16px;
  box-shadow:    var(--bm-shadow-sm);
  transition:    all .25s cubic-bezier(.4,0,.2,1);
  pointer-events: auto !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--bm-shadow-md);
  border-color: var(--bm-border-strong);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.env-disabled {
  opacity:    .55;
  background: var(--bm-surface-2);
  filter:     grayscale(30%);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.editable {
  border: 1.5px dashed var(--bm-teal-400);
  box-shadow: 0 4px 16px rgba(0,191,165,.12);
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.editable:hover {
  box-shadow: 0 8px 24px rgba(0,191,165,.2);
  transform:  translateY(-4px);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.draggable { cursor: grab; }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.draggable:active { cursor: grabbing; }

:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.dragging {
  opacity:    .6;
  transform:  rotate(4deg) scale(.95);
  box-shadow: 0 12px 32px rgba(0,191,165,.3);
  border:     1.5px solid var(--bm-teal-500);
  z-index:    1000;
}


/* Version change animations */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.card-anim-up { box-shadow: 0 0 0 2px rgba(0,153,119,.4), var(--bm-shadow-md); }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.card-anim-down { box-shadow: 0 0 0 2px rgba(220,38,38,.3),  var(--bm-shadow-md); }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card.card-anim-promote { box-shadow: 0 0 0 2px rgba(37,99,235,.3), var(--bm-shadow-md); }

/* ── 8. Drag handle ─────────────────────────────────────────────── */

:where(.edit-env-dialog, .environment-workflow-container) .drag-handle md-icon {
  color:          #fff !important;
  font-size:      20px !important;
  width:          20px !important;
  height:         20px !important;
  pointer-events: none !important;
}


/* ── 9. Edit actions overlay ────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay {
  position:   absolute;
  top:        -18px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  gap:        8px;
  z-index:    20;
  animation:  fadeIn .3s ease;
  pointer-events: auto !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .action-icon-btn {
  background:  var(--bm-surface) !important;
  box-shadow:  var(--bm-shadow-sm) !important;
  margin:      0 !important;
  width:       36px !important;
  height:      36px !important;
  min-width:   36px !important;
  min-height:  36px !important;
  transition:  all var(--bm-t) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .action-icon-btn:hover:not([disabled]) {
  transform:  scale(1.15) translateY(-2px);
  box-shadow: var(--bm-shadow-md) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .action-icon-btn[disabled] { opacity: .4; cursor: not-allowed; }

:where(.edit-env-dialog, .environment-workflow-container) .edit-icon-btn { border: 1.5px solid var(--bm-info-text) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .edit-icon-btn md-icon { color: var(--bm-info-text); font-size: 18px; }
:where(.edit-env-dialog, .environment-workflow-container) .edit-icon-btn:hover:not([disabled]) { background: var(--bm-info-bg) !important; }

:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn { border: 1.5px solid var(--bm-error) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn md-icon { color: var(--bm-error); font-size: 18px; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn:hover:not([disabled]) { background: var(--bm-error-bg) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn.confirm-delete { background: var(--bm-error-bg) !important; animation: pulse 1s ease-in-out infinite; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn.confirm-delete md-icon { color: var(--bm-error); }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn[disabled] { border-color: var(--bm-border-strong) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn[disabled] md-icon { color: var(--bm-text-muted); }


/* ── 10. Sequence badge ─────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .sequence-badge-inside {
  position:        absolute;
  bottom:          10px;
  left:            10px;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bm-navy-700);
  box-shadow:      var(--bm-shadow-xs);
  z-index:         2;
}
:where(.edit-env-dialog, .environment-workflow-container) .sequence-number {
  font-family: var(--bm-font-display);
  font-size:   11px;
  font-weight: 700;
  color:       #fff;
}


/* ── 11. Card content ───────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .card-content-compact {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  align-items:    flex-start;   /* all children left-aligned */
  width:          100%;
}

:where(.edit-env-dialog, .environment-workflow-container) .card-header-compact {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             6px;
  padding-bottom:  10px;
  border-bottom:   1px solid var(--bm-border-subtle);
  width:           100%;
}

:where(.edit-env-dialog, .environment-workflow-container) .env-name-compact {
  margin:        0;
  font-family:   var(--bm-font-display);
  font-size:     14px;
  font-weight:   700;
  color:         var(--bm-navy-900);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  text-align:    left;
  width:         100%;
}

:where(.edit-env-dialog, .environment-workflow-container) .header-right-actions {
  display:     flex;
  align-items: center;
  gap:         4px;
}

:where(.edit-env-dialog, .environment-workflow-container) .env-description-compact { margin: 0; padding: 2px 0; width: 100%; }
:where(.edit-env-dialog, .environment-workflow-container) .env-description-compact p {
  margin:      0;
  font-size:   11px;
  line-height: 1.4;
  color:       var(--bm-text-muted);
  font-style:  italic;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
  text-align:  left;
}

/* Info rows — left-aligned */



/* Agent status row — ícono pegado al pill, sin espacio sobrante */
:where(.edit-env-dialog, .environment-workflow-container) .info-row .info-icon {
  flex-shrink: 0;
  flex-grow:   0;
  margin:      0 !important;
}





:where(.edit-env-dialog, .environment-workflow-container) .template-info-inline {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex:        1;
  text-align:  left;
}


/* ── 12. Template status pill ───────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .template-status-pill {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  border-radius:  var(--bm-r-pill);
  font-family:    var(--bm-font-display);
  font-size:      9px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height:    1;
}

:where(.edit-env-dialog, .environment-workflow-container) .template-status-pill.status-published {
  background: var(--bm-success-bg);
  color:      var(--bm-success-text);
  border:     1px solid var(--bm-success-border);
}
:where(.edit-env-dialog, .environment-workflow-container) .template-status-pill.status-draft {
  background: var(--bm-warning-bg);
  color:      var(--bm-warning-text);
  border:     1px solid var(--bm-warning-border);
}
:where(.edit-env-dialog, .environment-workflow-container) .template-status-pill.status-pending {
  background: #FFF7ED;
  color:      #C2410C;
  border:     1px solid #FED7AA;
}
:where(.edit-env-dialog, .environment-workflow-container) .template-status-pill.status-reviewed {
  background: var(--bm-info-bg);
  color:      var(--bm-info-text);
  border:     1px solid var(--bm-info-border);
}
:where(.edit-env-dialog, .environment-workflow-container) .template-status-pill.status-rejected {
  background: var(--bm-error-bg);
  color:      var(--bm-error-text);
  border:     1px solid var(--bm-error-border);
}


/* ── 13. Template version badge ─────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           4px;
  padding:       3px 8px 3px 6px;
  border-radius: var(--bm-r-pill);
  background:    var(--bm-navy-800);
  box-shadow:    var(--bm-shadow-xs);
  cursor:        pointer;
  transition:    transform var(--bm-t), box-shadow var(--bm-t), background var(--bm-t);
  user-select:   none;
  flex-shrink:   0;
  line-height:   1;
}
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge:hover {
  background:  var(--bm-navy-700);
  transform:   translateY(-1px) scale(1.04);
  box-shadow:  var(--bm-shadow-sm);
}
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge:active {
  transform: translateY(0) scale(.98);
}

:where(.edit-env-dialog, .environment-workflow-container) .version-badge-icon {
  font-size:      10px !important;
  width:          10px !important;
  height:         10px !important;
  min-width:      10px !important;
  min-height:     10px !important;
  line-height:    10px !important;
  color:          var(--bm-teal-400) !important;
  flex-shrink:    0;
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content: center !important;
  vertical-align: middle;
  margin-top:     0 !important;
  margin-bottom:  0 !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .version-badge-text {
  font-family:    var(--bm-font-mono);
  font-size:      10px;
  font-weight:    700;
  color:          #fff;
  letter-spacing: .3px;
  line-height:    1;
  vertical-align: middle;
}


/* Version animations */
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge.version-anim-up {
  animation: versionBumpUp 520ms ease-out;
  filter: drop-shadow(0 0 5px rgba(0,153,119,.6));
}
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge.version-anim-down {
  animation: versionBumpDown 520ms ease-out;
  filter: drop-shadow(0 0 5px rgba(220,38,38,.6));
}
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge.version-anim-promote {
  animation: versionPromote 560ms ease-out;
  filter: drop-shadow(0 0 5px rgba(37,99,235,.6));
}

:where(.edit-env-dialog, .environment-workflow-container) .no-template-row { opacity: .6; }
:where(.edit-env-dialog, .environment-workflow-container) .no-template-text {
  font-size:  11px;
  color:      var(--bm-text-muted);
  font-style: italic;
}


/* ── 14. Toggle row ─────────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .toggle-row {
  margin-top:     4px;
  padding-top:    10px !important;
  border-top:     1px solid var(--bm-border-subtle);
  pointer-events: auto !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .toggle-icon { transition: color var(--bm-t); }
:where(.edit-env-dialog, .environment-workflow-container) .toggle-icon-on { color: var(--bm-teal-500) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .toggle-icon-off { color: var(--bm-error) !important; }

:where(.edit-env-dialog, .environment-workflow-container) .env-toggle-wrapper {
  display:     flex;
  align-items: center;
  gap:         6px;
}

:where(.edit-env-dialog, .environment-workflow-container) .env-toggle-label {
  font-family:  var(--bm-font-display);
  font-size:    11px;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
:where(.edit-env-dialog, .environment-workflow-container) .label-enabled { color: var(--bm-teal-600); }
:where(.edit-env-dialog, .environment-workflow-container) .label-disabled { color: var(--bm-text-muted); }


/* md-switch theming */
.workflow-env-card md-switch .md-thumb { background-color: var(--bm-error) !important; }
.workflow-env-card md-switch.md-checked .md-thumb { background-color: var(--bm-teal-500) !important; }
.workflow-env-card md-switch .md-bar { background-color: rgba(220,38,38,.3) !important; }
.workflow-env-card md-switch.md-checked .md-bar { background-color: rgba(0,191,165,.35) !important; }


/* ── 15. Promote / bump buttons ─────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .promote-icon-btn,
:where(.edit-env-dialog, .environment-workflow-container) .bump-icon-btn,
:where(.edit-env-dialog, .environment-workflow-container) .bump-down-icon-btn {
  width:     26px !important;
  height:    26px !important;
  min-width: 26px !important;
  padding:   0;
  margin:    0;
}
:where(.edit-env-dialog, .environment-workflow-container) .promote-icon-btn md-icon,
:where(.edit-env-dialog, .environment-workflow-container) .bump-icon-btn md-icon,
:where(.edit-env-dialog, .environment-workflow-container) .bump-down-icon-btn md-icon {
  font-size:   16px;
  opacity:     .8;
  transition:  opacity var(--bm-t);
}
:where(.edit-env-dialog, .environment-workflow-container) .promote-icon-btn:not([disabled]):hover md-icon,
:where(.edit-env-dialog, .environment-workflow-container) .bump-icon-btn:not([disabled]):hover md-icon,
:where(.edit-env-dialog, .environment-workflow-container) .bump-down-icon-btn:not([disabled]):hover md-icon { opacity: 1; }
:where(.edit-env-dialog, .environment-workflow-container) .promote-icon-btn[disabled] md-icon { opacity: .3; }
:where(.edit-env-dialog, .environment-workflow-container) .bump-down-icon-btn md-icon { color: var(--bm-warning) !important; }


/* ── 16. Arrow connector ────────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 16px;
  position:        relative;
  min-width:       70px;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-arrow md-icon { display: none; }

:where(.edit-env-dialog, .environment-workflow-container) .arrow-line {
  width:        70px;
  height:       4px;
  background:   linear-gradient(90deg, rgba(0,191,165,.3) 0%, var(--bm-teal-500) 50%, rgba(0,191,165,.3) 100%);
  position:     relative;
  border-radius: var(--bm-r-pill);
  box-shadow:   0 2px 6px rgba(0,191,165,.2);
  animation:    flowPulse 2s ease-in-out infinite;
}
:where(.edit-env-dialog, .environment-workflow-container) .arrow-line::after {
  content:      '';
  position:     absolute;
  right:        -8px;
  top:          50%;
  transform:    translateY(-50%);
  border-left:  10px solid var(--bm-teal-500);
  border-top:   7px solid transparent;
  border-bottom: 7px solid transparent;
  filter:       drop-shadow(2px 0 3px rgba(0,191,165,.35));
  animation:    arrowPulse 2s ease-in-out infinite;
}
:where(.edit-env-dialog, .environment-workflow-container) .arrow-line::before {
  content:      '';
  position:     absolute;
  left:         0;
  top:          50%;
  transform:    translateY(-50%);
  width:        5px;
  height:       5px;
  background:   #fff;
  border-radius: 50%;
  box-shadow:   18px 0 0 #fff, 36px 0 0 #fff;
  animation:    flowDots 1.5s linear infinite;
  opacity:      .65;
}


/* ── 17. Add / roll section ─────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-add-section {
  margin-top:      24px;
  margin-bottom:   8px;
  display:         flex;
  justify-content: center;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-footer-actions {
  display:         flex;
  gap:             10px;
  align-items:     center;
  flex-wrap:       wrap;
  justify-content: center;
}
:where(.edit-env-dialog, .environment-workflow-container) .add-env-btn,
:where(.edit-env-dialog, .environment-workflow-container) .roll-btn {
  font-family:    var(--bm-font-body) !important;
  font-weight:    600 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  border-radius:  var(--bm-r-lg) !important;
}


/* ── 18. Error / warning banner ─────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-banner {
  position:  fixed;
  top:       80px;
  left:      50%;
  transform: translateX(-50%);
  z-index:   9999;
  max-width: 560px;
  width:     90%;
  animation: errorSlideDown .4s cubic-bezier(.34,1.56,.64,1);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-card {
  background:    var(--bm-error-bg);
  border:        2px solid var(--bm-error);
  border-radius: var(--bm-r-xl);
  padding:       18px 20px;
  box-shadow:    0 8px 32px rgba(220,38,38,.2), 0 0 0 3px rgba(220,38,38,.08);
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  position:      relative;
  overflow:      hidden;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-card::before {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      4px;
  background: var(--bm-error);
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-icon {
  flex-shrink:     0;
  width:           40px; height: 40px;
  background:      var(--bm-error);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 3px 10px rgba(220,38,38,.35);
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-icon md-icon {
  color:     white !important;
  font-size: 22px !important;
  width:     22px !important;
  height:    22px !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-content { flex: 1; padding-top: 2px; }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-title {
  margin:      0 0 6px 0;
  font-family: var(--bm-font-display);
  font-size:   14px;
  font-weight: 700;
  color:       var(--bm-error-text);
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-message {
  margin:      0;
  font-size:   13px;
  line-height: 1.5;
  color:       var(--bm-error-text);
  white-space: pre-line;
}

:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-close {
  position:   absolute !important;
  top:        10px; right: 10px;
  width:      28px !important; height: 28px !important;
  min-width:  28px !important; min-height: 28px !important;
  padding:    0 !important; margin: 0 !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-close md-icon { color: var(--bm-error); font-size: 18px; }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-error-close:hover { background: rgba(220,38,38,.08) !important; }


/* Warning variant */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-warning-banner .workflow-error-card {
  background: var(--bm-warning-bg);
  border-color: var(--bm-warning);
  box-shadow: 0 8px 32px rgba(217,119,6,.15);
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-warning-banner .workflow-error-card::before { background: var(--bm-warning); }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-warning-banner .workflow-error-icon { background: var(--bm-warning); box-shadow: 0 3px 10px rgba(217,119,6,.3); }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-warning-banner .workflow-error-title { color: var(--bm-warning-text); }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-warning-banner .workflow-error-message { color: var(--bm-warning-text); }
:where(.edit-env-dialog, .environment-workflow-container) .workflow-warning-banner .workflow-error-close md-icon { color: var(--bm-warning); }


/* ── 19. Instructions banner ────────────────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-instructions {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       18px 20px;
  background:    var(--bm-info-bg);
  border:        1px solid var(--bm-info-border);
  border-radius: var(--bm-r-lg);
  margin-top:    24px;
  animation:     slideDown .3s ease;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-instructions md-icon { color: var(--bm-info-text) !important; font-size: 24px !important; flex-shrink: 0; margin-top: 2px; }
:where(.edit-env-dialog, .environment-workflow-container) .instructions-content { flex: 1; color: var(--bm-info-text); }
:where(.edit-env-dialog, .environment-workflow-container) .instructions-content strong { display: block; font-family: var(--bm-font-display); font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--bm-info-text); }
:where(.edit-env-dialog, .environment-workflow-container) .instructions-list { margin: 0; padding-left: 18px; line-height: 1.8; font-size: 13px; }
:where(.edit-env-dialog, .environment-workflow-container) .instructions-list li { margin-bottom: 4px; }
:where(.edit-env-dialog, .environment-workflow-container) .instructions-list li strong { display: inline; margin: 0; font-size: 13px; }


/* ── 20. SVG flow diagram (edit mode) ───────────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .flow-diagram-container { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,191,165,.2); }
:where(.edit-env-dialog, .environment-workflow-container) .flow-diagram-title {
  display:        block;
  font-family:    var(--bm-font-display);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--bm-navy-500);
  opacity:        .65;
  margin-bottom:  12px;
}
:where(.edit-env-dialog, .environment-workflow-container) .flow-diagram-scroll-wrapper { overflow-x: auto; overflow-y: visible; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(0,191,165,.3) transparent; }
:where(.edit-env-dialog, .environment-workflow-container) .flow-diagram-scroll-wrapper::-webkit-scrollbar { height: 4px; }
:where(.edit-env-dialog, .environment-workflow-container) .flow-diagram-scroll-wrapper::-webkit-scrollbar-thumb { background: rgba(0,191,165,.35); border-radius: 2px; }
:where(.edit-env-dialog, .environment-workflow-container) .flow-diagram-svg { display: block; overflow: visible; }

:where(.edit-env-dialog, .environment-workflow-container) .fd-arrow-line { stroke: var(--bm-navy-300); stroke-width: 2; stroke-opacity: .6; stroke-dasharray: 6 3; animation: fd-dash 1.8s linear infinite; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node-ring { fill: none; stroke: var(--bm-navy-200); stroke-width: 1.5; stroke-opacity: .3; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node-circle { stroke: var(--bm-navy-700); stroke-width: 2; stroke-opacity: .7; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node-shine { fill: white; fill-opacity: .4; pointer-events: none; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node { cursor: default; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node:hover .fd-node-circle { stroke-width: 2.5; stroke-opacity: 1; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node:hover .fd-node-ring { stroke-opacity: .7; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-badge-circle { fill: var(--bm-error); stroke: white; stroke-width: 2; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-badge-text { font-size: 7.5px; font-weight: 800; fill: white; pointer-events: none; user-select: none; }
:where(.edit-env-dialog, .environment-workflow-container) .fd-node-label { font-size: 9px; font-weight: 600; fill: var(--bm-navy-700); pointer-events: none; user-select: none; }

/* ── 21. Animations ─────────────────────────────────────────────── */
@keyframes slideDown    { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn       { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pulse        { 0%,100% { box-shadow: 0 3px 10px rgba(220,38,38,.6); } 50% { box-shadow: 0 3px 18px rgba(220,38,38,.9); } }
@keyframes versionBumpUp   { 0%{ transform: translateY(0) scale(1); } 25%{ transform: translateY(-2px) scale(1.08); } 55%{ transform: translateY(0) scale(1.02); } 100%{ transform: translateY(0) scale(1); } }
@keyframes versionBumpDown { 0%{ transform: translateY(0) scale(1); } 25%{ transform: translateY(2px) scale(1.08); } 55%{ transform: translateY(0) scale(1.02); } 100%{ transform: translateY(0) scale(1); } }
@keyframes versionPromote  { 0%{ transform: scale(1); } 30%{ transform: scale(1.10); } 65%{ transform: scale(1.03); } 100%{ transform: scale(1); } }
@keyframes flowPulse   { 0%,100%{ opacity: .8; } 50%{ opacity: 1; } }
@keyframes arrowPulse  { 0%,100%{ transform: translateY(-50%) translateX(0); opacity: .8; } 50%{ transform: translateY(-50%) translateX(2px); opacity: 1; } }
@keyframes flowDots    { 0%{ transform: translateY(-50%) translateX(0); opacity: 0; } 10%{ opacity: .65; } 90%{ opacity: .65; } 100%{ transform: translateY(-50%) translateX(55px); opacity: 0; } }
@keyframes errorSlideDown { from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.95); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes errorFadeOut   { from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } to { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.95); } }
@keyframes fd-dash     { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@keyframes wmd-ring-pulse { 0%,100%{ transform: translateX(-50%) scale(1); opacity: .45; } 50%{ transform: translateX(-50%) scale(1.12); opacity: .9; } }
@keyframes wmd-flow    { 0%,100%{ opacity: .7; } 50%{ opacity: 1; } }
.workflow-error-banner.ng-leave { animation: errorFadeOut .3s ease-out forwards; }

/* ── 22. Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  :where(.edit-env-dialog, .environment-workflow-container) .workflow-header { flex-direction: column; gap: 14px; }
  :where(.edit-env-dialog, .environment-workflow-container) .workflow-track { flex-direction: column; align-items: stretch; }
  :where(.edit-env-dialog, .environment-workflow-container) .workflow-step-wrapper { flex-direction: column; }
  :where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card { width: 100%; max-width: 380px; }
  :where(.edit-env-dialog, .environment-workflow-container) .workflow-arrow { transform: rotate(90deg); margin: 16px 0; }
}



/* ── 3b. Edit-mode action buttons ───────────────────────────────── */

/* "Edit Release Pipeline" — primary teal */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions .md-raised.md-primary {
  background-color: var(--bm-teal-500) !important;
  color:            #fff !important;
  border:           none !important;
  border-radius:    var(--bm-r-lg) !important;
  font-family:      var(--bm-font-body) !important;
  font-weight:      600 !important;
  text-transform:   none !important;
  letter-spacing:   .3px !important;
  box-shadow:       0 2px 8px rgba(0,191,165,.3) !important;
  transition:       background var(--bm-t), box-shadow var(--bm-t) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions .md-raised.md-primary:hover:not([disabled]) {
  background-color: var(--bm-teal-600) !important;
  box-shadow:       0 4px 14px rgba(0,191,165,.4) !important;
}


/* "Cancel" — outlined navy, borde visible */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions md-button:not(.md-raised) {
  background:     transparent !important;
  color:          var(--bm-navy-700) !important;
  border:         1.5px solid var(--bm-navy-300) !important;
  border-radius:  var(--bm-r-lg) !important;
  font-family:    var(--bm-font-body) !important;
  font-weight:    600 !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  box-shadow:     none !important;
  transition:     border-color var(--bm-t), background var(--bm-t), color var(--bm-t) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions md-button:not(.md-raised):hover:not([disabled]) {
  background:   var(--bm-navy-50) !important;
  border-color: var(--bm-navy-500) !important;
  color:        var(--bm-navy-900) !important;
}


/* "Save Changes" — navy-800 sólido, acento teal */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions .md-raised.md-accent {
  background-color: var(--bm-navy-800) !important;
  color:            var(--bm-teal-400) !important;
  border:           1.5px solid var(--bm-teal-600) !important;
  border-radius:    var(--bm-r-lg) !important;
  font-family:      var(--bm-font-body) !important;
  font-weight:      700 !important;
  text-transform:   none !important;
  letter-spacing:   .3px !important;
  box-shadow:       0 2px 8px rgba(0,191,165,.2) !important;
  transition:       background var(--bm-t), box-shadow var(--bm-t) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions .md-raised.md-accent:hover:not([disabled]) {
  background-color: var(--bm-navy-700) !important;
  box-shadow:       0 4px 14px rgba(0,191,165,.35) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions .md-raised.md-accent[disabled] {
  background-color: var(--bm-surface-3) !important;
  color:            var(--bm-navy-300) !important;
  border-color:     var(--bm-border) !important;
  box-shadow:       none !important;
}


/* Iconos dentro de action buttons */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-actions md-button md-icon {
  font-size: 18px !important;
  width:     18px !important;
  height:    18px !important;
}


/* ── e. Edit/Delete overlay — más evidentes ─────────────────────── */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay {
  position:   absolute;
  top:        -20px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  gap:        6px;
  z-index:    20;
  animation:  slideDown .25s ease;
  pointer-events: auto !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .action-icon-btn {
  background:    var(--bm-surface) !important;
  box-shadow:    0 3px 10px rgba(8,12,24,.18), 0 1px 3px rgba(8,12,24,.12) !important;
  border-radius: 50% !important;
  margin:        0 !important;
  width:         38px !important;
  height:        38px !important;
  min-width:     38px !important;
  min-height:    38px !important;
  transition:    all var(--bm-t) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .action-icon-btn:hover:not([disabled]) {
  transform:  scale(1.18) translateY(-2px);
  box-shadow: 0 6px 18px rgba(8,12,24,.25) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .action-icon-btn[disabled] { opacity: .35; cursor: not-allowed; }

:where(.edit-env-dialog, .environment-workflow-container) .edit-icon-btn {
  border: 2px solid var(--bm-info-text) !important;
  background: var(--bm-info-bg) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-icon-btn md-icon { color: var(--bm-info-text) !important; font-size: 18px !important; }
:where(.edit-env-dialog, .environment-workflow-container) .edit-icon-btn:hover:not([disabled]) { background: #dbeafe !important; }

:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn {
  border: 2px solid var(--bm-error) !important;
  background: var(--bm-error-bg) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn md-icon { color: var(--bm-error) !important; font-size: 18px !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn:hover:not([disabled]) { background: #fee2e2 !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn.confirm-delete { background: var(--bm-error-bg) !important; animation: pulse 1s ease-in-out infinite; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn.confirm-delete md-icon { color: var(--bm-error) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn[disabled] { border-color: var(--bm-border-strong) !important; background: var(--bm-surface) !important; }
:where(.edit-env-dialog, .environment-workflow-container) .delete-icon-btn[disabled] md-icon { color: var(--bm-text-muted) !important; }



/* ── EDIT ACTIONS OVERLAY — rediseño como toolbar pill anclada ───── */

/* Pill container unificado */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay {
  position:        absolute !important;
  top:             -22px !important;
  left:            50% !important;
  transform:       translateX(-50%) !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             2px !important;
  z-index:         30 !important;
  background:      var(--bm-navy-800) !important;
  border-radius:   var(--bm-r-pill) !important;
  padding:         3px !important;
  box-shadow:      0 4px 14px rgba(8,12,24,.35), 0 1px 3px rgba(8,12,24,.2) !important;
  animation:       overlayPop .2s cubic-bezier(.34,1.56,.64,1) !important;
  pointer-events:  auto !important;
  border:          1px solid rgba(255,255,255,.08) !important;
}

@keyframes overlayPop {
  from { opacity: 0; transform: translateX(-50%) scale(.8) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1)  translateY(0);   }
}


/* Botones dentro del pill */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .action-icon-btn {
  background:    transparent !important;
  box-shadow:    none !important;
  border-radius: var(--bm-r-pill) !important;
  border:        none !important;
  margin:        0 !important;
  width:         32px !important;
  height:        32px !important;
  min-width:     32px !important;
  min-height:    32px !important;
  transition:    background var(--bm-t), transform var(--bm-t) !important;
  padding:       0 !important;
}

:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .action-icon-btn:hover:not([disabled]) {
  transform:  none !important;
  box-shadow: none !important;
}


/* Edit — hover teal */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .edit-icon-btn {
  background: transparent !important;
  border:     none !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .edit-icon-btn md-icon {
  color:     var(--bm-teal-400) !important;
  font-size: 17px !important;
  width:     17px !important;
  height:    17px !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .edit-icon-btn:hover:not([disabled]) {
  background: rgba(0,191,165,.18) !important;
}


/* Delete — hover rojo */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .delete-icon-btn {
  background: transparent !important;
  border:     none !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .delete-icon-btn md-icon {
  color:     rgba(255,255,255,.65) !important;
  font-size: 17px !important;
  width:     17px !important;
  height:    17px !important;
  transition: color var(--bm-t) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .delete-icon-btn:hover:not([disabled]) {
  background: rgba(220,38,38,.25) !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .delete-icon-btn:hover:not([disabled]) md-icon {
  color: #fca5a5 !important;
}


/* Disabled */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .action-icon-btn[disabled] {
  opacity: .3 !important;
  cursor:  not-allowed !important;
}


/* Confirm delete — pulso en el pill entero */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .delete-icon-btn.confirm-delete {
  background: rgba(220,38,38,.35) !important;
  animation:  pulse 1s ease-in-out infinite !important;
}
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .delete-icon-btn.confirm-delete md-icon {
  color: #fca5a5 !important;
}


/* Separador visual entre edit y delete */
:where(.edit-env-dialog, .environment-workflow-container) .edit-actions-overlay .edit-icon-btn::after {
  content:    '';
  position:   absolute;
  right:       -1px;
  top:        20%;
  height:     60%;
  width:      1px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}


/* Clase diferenciadora para que el :not(.workflow-version-badge)
   del edit-environment-dialog.css no afecte estos badges */
:where(.edit-env-dialog, .environment-workflow-container) .template-version-badge {
  /* ya definido arriba — solo agregamos la clase via JS no es posible,
     así que usamos un selector más específico para proteger este contexto */
}

/* Los badges dentro del workflow editor tienen .workflow-env-card como ancestro */
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card .template-version-badge,
:where(.edit-env-dialog, .environment-workflow-container) .workflow-env-card .template-version-badge:hover {
  background:  var(--bm-navy-800) !important;
  cursor:      pointer !important;
  transition:  transform var(--bm-t), box-shadow var(--bm-t), background var(--bm-t) !important;
}