/* ================================================================
   EDIT ENVIRONMENT DIALOG — BizMetry Design System
   Todos los estilos escopados bajo .edit-env-dialog para evitar
   conflictos con env-workflow-editor.css
   ================================================================ */

/* ── 1. Design tokens ────────────────────────────────────────────── */
.edit-env-dialog {
  --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-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);
  --bm-shadow-md: 0 4px 12px rgba(8,12,24,.10);
  --bm-t: 160ms cubic-bezier(.4,0,.2,1);
}

/* ── 2. Dialog shell ─────────────────────────────────────────────── */
md-dialog.edit-env-dialog {
  max-width:     540px !important;
  width:         92% !important;
  border-radius: var(--bm-r-xl) !important;
  overflow:      hidden !important;
  box-shadow:    0 24px 64px rgba(8,12,24,.22), 0 8px 24px rgba(8,12,24,.14) !important;
  font-family:   var(--bm-font-body) !important;
}

/* ── 3. Toolbar ──────────────────────────────────────────────────── */
.edit-env-dialog md-toolbar {
  background:  var(--bm-navy-800) !important;
  min-height:  58px !important;
  box-shadow:  none !important;
}
.edit-env-dialog md-toolbar .md-toolbar-tools {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  padding:         0 20px !important;
  min-height:      58px !important;
  gap:             10px;
  text-align:      left !important;
}
.edit-env-dialog md-toolbar .md-toolbar-tools md-icon:first-child {
  color:       var(--bm-teal-400) !important;
  font-size:   20px !important;
  width:       20px !important;
  height:      20px !important;
  flex-shrink: 0 !important;
  flex-grow:   0 !important;
  margin:      0 !important;
}
.edit-env-dialog md-toolbar .md-toolbar-tools h2 {
  margin:          0 !important;
  font-family:     var(--bm-font-display) !important;
  font-size:       17px !important;
  font-weight:     700 !important;
  color:           #fff !important;
  letter-spacing:  .2px;
  flex:            1 1 auto !important;
  text-align:      left !important;
  white-space:     nowrap !important;
  overflow:        hidden !important;
  text-overflow:   ellipsis !important;
}
.edit-env-dialog md-toolbar .md-icon-button {
  width:  36px !important;
  height: 36px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  transition: background var(--bm-t) !important;
}
.edit-env-dialog md-toolbar .md-icon-button:hover {
  background: rgba(255,255,255,.1) !important;
}
.edit-env-dialog md-toolbar .md-icon-button md-icon {
  color:     rgba(255,255,255,.7) !important;
  font-size: 20px !important;
}

/* ── 4. Dialog content ───────────────────────────────────────────── */
.edit-env-dialog md-dialog-content,
.edit-env-dialog .md-dialog-content {
  padding:    0 !important;
  background: var(--bm-surface-2) !important;
  margin:     0 !important;
}

/* ── 5. Summary card ─────────────────────────────────────────────── */
.edit-env-dialog .env-summary-card {
  background:    var(--bm-surface) !important;
  border-bottom: 1px solid var(--bm-border) !important;
  border-radius: 0 !important;
  padding:       14px 20px !important;
  margin:        0 !important;
  box-shadow:    none !important;
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
}
.edit-env-dialog .env-summary-left { flex: 1; min-width: 0; }

.edit-env-dialog .env-summary-title {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 8px;
}
.edit-env-dialog .env-name {
  font-family:  var(--bm-font-display);
  font-size:    16px;
  font-weight:  700;
  color:        var(--bm-navy-900);
  line-height:  1.2;
}
.edit-env-dialog .env-enabled-pill {
  font-family:    var(--bm-font-display);
  font-size:      10px;
  font-weight:    700;
  padding:        2px 9px;
  border-radius:  var(--bm-r-pill);
  text-transform: uppercase;
  letter-spacing: .5px;
  border:         1px solid transparent;
  white-space:    nowrap;
}
.edit-env-dialog .env-enabled-pill.on {
  background:   var(--bm-success-bg);
  color:        var(--bm-success-text);
  border-color: var(--bm-success-border);
}
.edit-env-dialog .env-enabled-pill.off {
  background:   var(--bm-surface-3);
  color:        var(--bm-text-muted);
  border-color: var(--bm-border);
}

/* Summary sub — items en columna para no romper */
.edit-env-dialog .env-summary-sub {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.edit-env-dialog .env-summary-item {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--bm-text-secondary);
  line-height: 1.4;
}
.edit-env-dialog .env-summary-item md-icon.mini {
  font-size:   15px !important;
  width:       15px !important;
  height:      15px !important;
  color:       var(--bm-teal-500) !important;
  flex-shrink: 0;
  min-width:   15px !important;
}
.edit-env-dialog .env-summary-hint {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     11px;
  color:         var(--bm-text-muted);
  background:    var(--bm-navy-50);
  border:        1px solid var(--bm-border);
  border-radius: var(--bm-r-lg);
  padding:       4px 10px;
  white-space:   nowrap;
  margin-top:    2px;
}
.edit-env-dialog .env-summary-hint md-icon {
  font-size: 14px !important;
  width:     14px !important;
  height:    14px !important;
  color:     var(--bm-navy-300) !important;
}

/* ── 6. Form container ───────────────────────────────────────────── */
.edit-env-dialog .edit-env-form {
  display:        flex !important;
  flex-direction: column !important;
  gap:            0 !important;
  background:     transparent !important;
  padding:        20px 20px 8px 20px !important;
  margin:         0 !important;
  border-radius:  0 !important;
  box-shadow:     none !important;
  text-align:     left !important;
  align-items:    flex-start !important;
}
.edit-env-dialog .edit-env-form > * {
  text-align: left !important;
  width:      100%;
}

/* ── 7. Field groups — usar span.material-icons para evitar md-icon quirks ── */
.edit-env-dialog .field-group {
  margin:     0 0 4px 0;
  padding:    16px 0 0 0;
  border-top: 1px solid var(--bm-border-subtle);
  width:      100%;
}
.edit-env-dialog .field-group:first-child {
  border-top:  none;
  padding-top: 0;
}

/* El field-group-title usa md-icon — lo forzamos a comportarse */
.edit-env-dialog .field-group-title {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    center !important;
  justify-content: flex-start !important;
  gap:            7px;
  font-family:    var(--bm-font-display) !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  color:          var(--bm-navy-500) !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom:  12px;
  width:          100%;
  text-align:     left !important;
}
.edit-env-dialog .field-group-title md-icon {
  font-size:   16px !important;
  width:       16px !important;
  height:      16px !important;
  min-width:   16px !important;
  min-height:  16px !important;
  line-height: 16px !important;
  color:       var(--bm-teal-500) !important;
  flex-shrink: 0;
  flex-grow:   0;
  display:     inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin:      0 !important;
  padding:     0 !important;
  overflow:    hidden !important;
  /* Neutralizar Angular Material display block override */
  vertical-align: middle !important;
}

/* ── 8. Inputs ───────────────────────────────────────────────────── */
.edit-env-dialog .edit-env-form md-input-container {
  margin:     0 0 14px 0 !important;
  text-align: left !important;
  width:      100%;
}
.edit-env-dialog .edit-env-form md-input-container.md-block {
  display: block;
  width:   100%;
}
.edit-env-dialog .edit-env-form md-input-container label {
  font-family:    var(--bm-font-body) !important;
  font-size:      11px !important;
  font-weight:    600 !important;
  color:          var(--bm-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align:     left !important;
  margin-left:    0 !important;
}
.edit-env-dialog .edit-env-form md-input-container input,
.edit-env-dialog .edit-env-form md-input-container textarea {
  font-family:   var(--bm-font-body) !important;
  border:        1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-lg) !important;
  padding:       10px 14px !important;
  font-size:     14px !important;
  color:         var(--bm-text-primary) !important;
  background:    var(--bm-surface) !important;
  transition:    border-color var(--bm-t), box-shadow var(--bm-t) !important;
  box-shadow:    var(--bm-shadow-xs) !important;
}
.edit-env-dialog .edit-env-form md-input-container input:focus,
.edit-env-dialog .edit-env-form md-input-container textarea:focus {
  border-color: var(--bm-teal-500) !important;
  box-shadow:   0 0 0 3px rgba(0,191,165,.12) !important;
  outline:      none !important;
}
.edit-env-dialog .edit-env-form md-input-container textarea {
  min-height:  68px !important;
  max-height:  80px !important;
  resize:      none !important;
  line-height: 1.5 !important;
}

/* ── 9. Helper & counter ─────────────────────────────────────────── */
.edit-env-dialog .helper-text {
  font-size:   11px !important;
  font-style:  italic;
  color:       var(--bm-text-muted) !important;
  line-height: 1.5;
  margin-top:  4px !important;
  margin-left: 0 !important;
  display:     block;
  width:       100%;
  text-align:  left !important;
}
.edit-env-dialog .helper-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  width:           100%;
  margin-top:      4px;
}
.edit-env-dialog .char-counter {
  font-family: var(--bm-font-mono);
  font-size:   11px;
  color:       var(--bm-navy-300);
  flex-shrink: 0;
}

/* ── 10. Selects ─────────────────────────────────────────────────── */
.edit-env-dialog .edit-env-form md-input-container md-select {
  font-family:   var(--bm-font-body) !important;
  border:        1.5px solid var(--bm-border) !important;
  border-radius: var(--bm-r-lg) !important;
  padding:       8px 12px !important;
  background:    var(--bm-surface) !important;
  transition:    border-color var(--bm-t), box-shadow var(--bm-t) !important;
  min-height:    44px !important;
  display:       flex !important;
  align-items:   center !important;
  box-shadow:    var(--bm-shadow-xs) !important;
}
.edit-env-dialog .edit-env-form md-input-container md-select.md-focused {
  border-color: var(--bm-teal-500) !important;
  box-shadow:   0 0 0 3px rgba(0,191,165,.12) !important;
}
.edit-env-dialog .edit-env-form md-input-container md-select .md-select-value {
  border-bottom: none !important;
  padding:       0 !important;
  min-height:    auto !important;
}
.edit-env-dialog .edit-env-form md-input-container md-select .md-select-value span:not(.md-select-icon):not(.env-tvb) {
  color:       var(--bm-text-primary) !important;
  font-size:   14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
/* env-tvb dentro del select value: mantener texto blanco sobre fondo navy */
.edit-env-dialog .edit-env-form md-input-container md-select .md-select-value .env-tvb {
  color: #ffffff !important;
}
.edit-env-dialog .edit-env-form md-input-container md-select .md-select-icon {
  color:       var(--bm-teal-500) !important;
  margin-left: 8px !important;
  align-self:  center !important;
}

/* ── 11. Select menu options ─────────────────────────────────────── */
md-select-menu.edit-env-select-menu { max-width: 540px; }
md-select-menu.edit-env-select-menu md-content { max-height: 320px; }
md-select-menu.edit-env-select-menu md-option {
  font-family:  'Plus Jakarta Sans', system-ui, sans-serif;
  padding:      10px 16px;
  font-size:    14px;
  min-height:   48px;
  display:      flex;
  align-items:  center;
  gap:          10px;
  transition:   background 160ms ease;
  color:        #111827;
  line-height:  1.5;
}
md-select-menu.edit-env-select-menu md-option:hover { background: #E6FAF7; }
md-select-menu.edit-env-select-menu md-option[selected] {
  background:  #E6FAF7;
  color:       #009977;
  font-weight: 600;
}
md-select-menu.edit-env-select-menu md-option em { color: #8E97B4; font-style: italic; }
md-select-menu.edit-env-select-menu md-option generic-type-pill { flex-shrink: 0; }

/* FIX Bug C: alinear verticalmente generic-type-pill dentro de los flex containers del dialog */
.template-selected-display generic-type-pill,
.template-option-display generic-type-pill,
md-select-menu.edit-env-select-menu generic-type-pill {
  align-self:     center !important;
  flex-shrink:    0 !important;
  display:        inline-flex !important;
  align-items:    center !important;
  vertical-align: middle !important;
}

/* ── 12. Template display — escopado al dialog ───────────────────── */
.edit-env-dialog .template-selected-display {
  display:      flex;
  align-items:  center;
  gap:          8px;
  width:        100%;
  flex-wrap:    nowrap;
  padding-left: 4px;  /* FIX: separar pill del borde izquierdo del select */
}

/* Override del .template-version-badge del workflow editor */
.edit-env-dialog .template-version-badge,
.edit-env-dialog .edit-env-form .template-version-badge,
md-select-menu.edit-env-select-menu .template-version-badge {
  font-family:      var(--bm-font-mono) !important;
  font-size:        11px !important;
  font-weight:      700 !important;
  color:            #fff !important;
  background:       var(--bm-navy-800) !important;
  padding:          3px 9px !important;
  border-radius:    var(--bm-r-pill) !important;
  letter-spacing:   .3px !important;
  flex-shrink:      0 !important;
  box-shadow:       var(--bm-shadow-xs) !important;
  /* Anular los estilos de hover/pointer del workflow */
  cursor:           default !important;
  display:          inline-block !important;
  transform:        none !important;
  transition:       none !important;
  line-height:      1.4 !important;
}
.edit-env-dialog .template-version-badge:hover,
md-select-menu.edit-env-select-menu .template-version-badge:hover {
  background:  var(--bm-navy-800) !important;
  transform:   none !important;
  box-shadow:  var(--bm-shadow-xs) !important;
}

.edit-env-dialog .template-name-text {
  font-size:     13px;
  color:         var(--bm-text-secondary);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  flex:          1;
  min-width:     0;
}
.edit-env-dialog .no-template-label,
md-select-menu.edit-env-select-menu .no-template-label {
  color:      var(--bm-text-muted);
  font-style: italic;
  font-size:  14px;
}
.edit-env-dialog .template-option-display,
md-select-menu.edit-env-select-menu .template-option-display {
  display:     flex;
  align-items: center;
  gap:         8px;
  width:       100%;
}

/* ── 13. Validation ──────────────────────────────────────────────── */
.edit-env-dialog .edit-env-form md-input-container.md-input-invalid input,
.edit-env-dialog .edit-env-form md-input-container.md-input-invalid textarea,
.edit-env-dialog .edit-env-form md-input-container.md-input-invalid md-select {
  border-color: var(--bm-error) !important;
  box-shadow:   0 0 0 3px rgba(220,38,38,.08) !important;
}
.edit-env-dialog .edit-env-form md-input-container .md-errors-spacer {
  min-height: 0 !important;
  height:     0 !important;
  margin:     0 !important;
  padding:    0 !important;
}

/* ── 14. Inline warning ──────────────────────────────────────────── */
.edit-env-dialog .inline-warning {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       10px 14px;
  border-radius: var(--bm-r-lg);
  background:    var(--bm-warning-bg);
  border:        1px solid var(--bm-warning-border);
  color:         var(--bm-warning-text);
  margin-top:    10px;
  font-size:     13px;
  line-height:   1.5;
}
.edit-env-dialog .inline-warning md-icon {
  color:       var(--bm-warning) !important;
  font-size:   18px !important;
  width:       18px !important;
  height:      18px !important;
  flex-shrink: 0;
  margin-top:  1px;
}

/* ── 15. Toggle switch ───────────────────────────────────────────── */
.edit-env-dialog .edit-env-form md-switch {
  margin:        8px 0 10px 0 !important;
  padding:       12px 16px !important;
  background:    var(--bm-surface) !important;
  border-radius: var(--bm-r-lg) !important;
  border:        1.5px solid var(--bm-border) !important;
  transition:    border-color var(--bm-t), background var(--bm-t) !important;
  box-shadow:    var(--bm-shadow-xs) !important;
}
.edit-env-dialog .edit-env-form md-switch:hover:not([disabled]) {
  border-color: var(--bm-teal-500) !important;
  background:   var(--bm-teal-50) !important;
}
.edit-env-dialog .edit-env-form md-switch .md-label {
  font-family:    var(--bm-font-display) !important;
  font-size:      13px !important;
  font-weight:    700 !important;
  color:          var(--bm-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-left:    14px !important;
}
.edit-env-dialog .edit-env-form md-switch.md-checked .md-label { color: var(--bm-teal-600) !important; }
.edit-env-dialog .edit-env-form md-switch[disabled] { opacity: .5 !important; cursor: not-allowed !important; }
.edit-env-dialog .edit-env-form md-switch .md-thumb {
  background: #fff !important;
  box-shadow:  0 2px 6px rgba(8,12,24,.2) !important;
}
.edit-env-dialog .edit-env-form md-switch.md-checked .md-thumb { background: var(--bm-teal-500) !important; }
.edit-env-dialog .edit-env-form md-switch .md-bar        { background: var(--bm-border-strong) !important; }
.edit-env-dialog .edit-env-form md-switch.md-checked .md-bar { background: rgba(0,191,165,.35) !important; }

/* ── 16. Dialog actions ──────────────────────────────────────────── */
.edit-env-dialog md-dialog-actions {
  padding:    14px 20px !important;
  background: var(--bm-surface) !important;
  border-top: 1px solid var(--bm-border) !important;
  gap:        8px;
}
/* Cancel */
.edit-env-dialog md-dialog-actions md-button:not(.md-raised) {
  font-family:    var(--bm-font-body) !important;
  font-size:      13px !important;
  font-weight:    600 !important;
  text-transform: none !important;
  color:          var(--bm-navy-700) !important;
  border:         1.5px solid var(--bm-navy-300) !important;
  border-radius:  var(--bm-r-lg) !important;
  padding:        0 20px !important;
  min-height:     38px !important;
  margin:         0 !important;
  transition:     border-color var(--bm-t), background var(--bm-t) !important;
}
.edit-env-dialog md-dialog-actions md-button:not(.md-raised):hover {
  background:   var(--bm-navy-50) !important;
  border-color: var(--bm-navy-500) !important;
}
/* Save / Create */
.edit-env-dialog md-dialog-actions .md-raised.md-primary {
  font-family:      var(--bm-font-body) !important;
  font-size:        13px !important;
  font-weight:      700 !important;
  text-transform:   none !important;
  background-color: var(--bm-teal-500) !important;
  color:            #fff !important;
  border-radius:    var(--bm-r-lg) !important;
  padding:          0 20px !important;
  min-height:       38px !important;
  margin:           0 !important;
  box-shadow:       0 2px 8px rgba(0,191,165,.3) !important;
  transition:       background var(--bm-t), box-shadow var(--bm-t), transform var(--bm-t) !important;
}
.edit-env-dialog md-dialog-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;
  transform:        translateY(-1px) !important;
}
.edit-env-dialog md-dialog-actions .md-raised.md-primary[disabled] {
  background-color: var(--bm-surface-3) !important;
  color:            var(--bm-navy-300) !important;
  box-shadow:       none !important;
  transform:        none !important;
}
.edit-env-dialog md-dialog-actions .md-raised md-icon {
  font-size:    17px !important;
  width:        17px !important;
  height:       17px !important;
  margin-right: 6px !important;
  color:        inherit !important;
}

/* ── 17. Animations ──────────────────────────────────────────────── */
@keyframes eed-slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes eed-pulse {
  0%,100% { transform: scale(1);    }
  50%      { transform: scale(1.08); }
}

/* ── 19. Span icons nativos (reemplazo de md-icon en summary y titles) ── */

/* Mini icons en summary card */
.edit-env-dialog span.mini-icon {
  font-family:     'Material Icons', sans-serif !important;
  font-size:       15px !important;
  line-height:     15px !important;
  width:           15px !important;
  height:          15px !important;
  color:           var(--bm-teal-500) !important;
  flex-shrink:     0 !important;
  display:         inline-block !important;
  overflow:        hidden !important;
  font-weight:     normal;
  font-style:      normal;
  letter-spacing:  normal;
  text-transform:  none;
  white-space:     nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align:  middle !important;
}

/* Field group title icons */
.edit-env-dialog span.fgt-icon {
  font-family:     'Material Icons', sans-serif !important;
  font-size:       16px !important;
  line-height:     16px !important;
  width:           16px !important;
  height:          16px !important;
  color:           var(--bm-teal-500) !important;
  flex-shrink:     0 !important;
  flex-grow:       0 !important;
  display:         inline-block !important;
  overflow:        hidden !important;
  font-weight:     normal;
  font-style:      normal;
  letter-spacing:  normal;
  text-transform:  none;
  white-space:     nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align:  middle !important;
  margin:          0 !important;
}

/* ── 20. Template version badge — fix global para md-select-value ── */
/* El md-select-value se renderiza fuera del .edit-env-dialog en el DOM,
   por eso necesitamos selector global pero acotado por la clase del form */

/* Badge dentro del select value (visible en el campo cerrado) */
.edit-env-form .template-version-badge,
.template-selected-display .template-version-badge {
  font-family:   'JetBrains Mono', 'Fira Code', monospace !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  color:         #fff !important;
  background:    #1E2A3A !important;  /* bm-navy-800 hardcoded para ganar la cascada */
  padding:       3px 9px !important;
  border-radius: 100px !important;
  letter-spacing: .3px !important;
  flex-shrink:   0 !important;
  cursor:        default !important;
  display:       inline-block !important;
  transform:     none !important;
  transition:    none !important;
  line-height:   1.5 !important;
  box-shadow:    0 1px 2px rgba(8,12,24,.06) !important;
}
.edit-env-form .template-version-badge:hover,
.template-selected-display .template-version-badge:hover {
  background:  #1E2A3A !important;
  transform:   none !important;
  box-shadow:  0 1px 2px rgba(8,12,24,.06) !important;
}

/* Badge dentro del dropdown (md-option renderizado en el body) */
md-select-menu.edit-env-select-menu .template-version-badge {
  font-family:   'JetBrains Mono', 'Fira Code', monospace !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  color:         #fff !important;
  background:    #1E2A3A !important;
  padding:       3px 9px !important;
  border-radius: 100px !important;
  letter-spacing: .3px !important;
  flex-shrink:   0 !important;
  cursor:        default !important;
  display:       inline-block !important;
  transform:     none !important;
  transition:    none !important;
  line-height:   1.5 !important;
}
md-select-menu.edit-env-select-menu .template-version-badge:hover {
  background:  #1E2A3A !important;
  transform:   none !important;
}

/* ================================================================
   PATCH — fixes iteración Jun-05
   ================================================================ */

/* ── 1. Toolbar: título alineado a izquierda ─────────────────────── */
.edit-env-dialog md-toolbar .md-toolbar-tools {
  display:    flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.edit-env-dialog md-toolbar .md-toolbar-tools md-icon:first-child {
  flex-shrink: 0 !important;
  flex-grow:   0 !important;
  margin-right: 10px !important;
}
.edit-env-dialog md-toolbar .md-toolbar-tools h2 {
  flex:        1 1 auto !important;
  text-align:  left !important;
  white-space: nowrap !important;
  overflow:    hidden !important;
  text-overflow: ellipsis !important;
  margin:      0 !important;
}

/* ── 2. Template name: truncar con ellipsis — no wrappear ────────── */
.edit-env-dialog .template-name-text,
.edit-env-form .template-name-text,
.template-selected-display .template-name-text,
md-select-menu.edit-env-select-menu .template-name-text {
  white-space:   nowrap !important;        /* FIX Bug A: truncar, no wrappear */
  word-break:    normal !important;
  text-overflow: ellipsis !important;
  overflow:      hidden !important;
  line-height:   1.4 !important;
  flex:          1 1 0 !important;
  min-width:     0 !important;
}

/* ── 3. Version badge: navy teal, máxima especificidad ───────────── */
/* Usando :not() para ganarle al selector del workflow editor        */
.template-version-badge:not(.workflow-version-badge) {
  font-family:   'JetBrains Mono', 'Fira Code', monospace !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  color:         #fff !important;
  background:    #1E2A3A !important;
  padding:       3px 9px !important;
  border-radius: 100px !important;
  letter-spacing: .3px !important;
  flex-shrink:   0 !important;
  cursor:        default !important;
  display:       inline-block !important;
  transform:     none !important;
  transition:    none !important;
  line-height:   1.5 !important;
  box-shadow:    0 1px 2px rgba(8,12,24,.15) !important;
}
.template-version-badge:not(.workflow-version-badge):hover {
  background:  #1E2A3A !important;
  transform:   none !important;
  box-shadow:  0 1px 2px rgba(8,12,24,.15) !important;
}

/* Contenedor del select value: no wrap — los pills nunca rompen línea */
.template-selected-display {
  display:     flex !important;
  flex-wrap:   nowrap !important;          /* FIX Bug A: evita que el pill salte */
  align-items: center !important;
  gap:         6px !important;
  width:       100% !important;
}
/* ── env-tvb: version badge del edit environment dialog ─────────────
   Clase propia para evitar conflicto con .template-version-badge
   del env-workflow-editor.css que se carga en la misma página.     */
.env-tvb {
  font-family:    'JetBrains Mono', 'Fira Code', monospace !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  color:          #ffffff !important;
  background:     #1E2A3A !important;
  padding:        3px 9px !important;
  border-radius:  100px !important;
  letter-spacing: .3px !important;
  flex-shrink:    0 !important;
  cursor:         default !important;
  display:        inline-flex !important;  /* FIX Bug B: inline-flex para alineación vertical */
  align-items:    center !important;       /* FIX Bug B: centrado vertical igual que el pill */
  line-height:    1 !important;            /* FIX Bug B: sin line-height extra que desplace */
  box-shadow:     0 1px 2px rgba(8,12,24,.15) !important;
  /* Sin hover effects — no es clickeable */
  transform:      none !important;
  transition:     none !important;
}
/* Dropdown options: the global `.md-select-menu-container md-option *` rule
   (datasource-common.css) forces #333 on every option child — out-specify it. */
.md-select-menu-container md-option .env-tvb,
md-select-menu md-option .env-tvb {
  color: #ffffff !important;
}
.env-tvb:hover {
  background:  #1E2A3A !important;
  transform:   none !important;
  box-shadow:  0 1px 2px rgba(8,12,24,.15) !important;
}

/* ── CONSOLIDACIÓN FINAL — select height controlado ──────────────── */

/* El md-select-value no debe romper línea — height controlado por flex */
.edit-env-dialog .edit-env-form md-input-container md-select .md-select-value {
  height:      auto !important;
  min-height:  auto !important;
  white-space: nowrap !important;          /* FIX Bug A: no romper línea en el value */
  overflow:    hidden !important;
}

/* template-selected-display — nowrap: pills y badge siempre en línea */
.edit-env-dialog .template-selected-display,
.template-selected-display {
  display:      flex !important;
  flex-wrap:    nowrap !important;          /* FIX Bug A: no romper línea */
  align-items:  center !important;
  gap:          6px !important;
  width:        100% !important;
  padding:      2px 0 2px 4px !important;  /* FIX: separar pill del borde izquierdo del select */
}

/* template-name-text — trunca con ellipsis cuando el nombre es largo */
.edit-env-dialog .template-name-text,
.template-selected-display .template-name-text,
md-select-menu.edit-env-select-menu .template-name-text {
  white-space:   nowrap !important;        /* FIX: truncar, no wrappear */
  word-break:    normal !important;
  text-overflow: ellipsis !important;
  overflow:      hidden !important;
  line-height:   1.4 !important;
  flex:          1 1 0 !important;
  min-width:     0 !important;
}