/* =========================================================
   UBICACIÓN:
   frontend/src/pages/manufactura/procesos/procesos.css

   WIRTZ HUB · MANUFACTURA · PROCESOS

   PARTE 1 DE 4

   - Variables
   - Base
   - Modo claro / oscuro
   - Botones
   - Campos
   - Header
   - Tabs principales
   - KPIs
   - Toolbar
   - Filtros
   - Estados
   - Biblioteca
   - Cards de procesos
   - Paginación
   - Loading / Empty
   ========================================================= */


/* =========================================================
   VARIABLES · LIGHT
   ========================================================= */

.manufactura-procesos-page,
.manufactura-procesos-workspace,
.manufactura-procesos-modal,
.manufactura-procesos-actions-menu,
.manufactura-procesos-toast-mount {
  --procesos-bg:
    #f5f7fb;

  --procesos-bg-soft:
    #f8fafc;

  --procesos-surface:
    #ffffff;

  --procesos-surface-soft:
    #f8fafc;

  --procesos-surface-muted:
    #f1f5f9;

  --procesos-surface-hover:
    #f4f6f9;

  --procesos-surface-active:
    #eef2f7;

  --procesos-surface-strong:
    #e9eef5;

  --procesos-text:
    #111827;

  --procesos-text-secondary:
    #334155;

  --procesos-text-muted:
    #64748b;

  --procesos-text-subtle:
    #94a3b8;

  --procesos-border:
    rgba(
      15,
      23,
      42,
      0.12
    );

  --procesos-border-soft:
    rgba(
      15,
      23,
      42,
      0.075
    );

  --procesos-border-strong:
    rgba(
      15,
      23,
      42,
      0.19
    );

  --procesos-primary:
    #111827;

  --procesos-primary-hover:
    #1f2937;

  --procesos-primary-active:
    #030712;

  --procesos-primary-text:
    #ffffff;

  --procesos-success:
    #15803d;

  --procesos-success-bg:
    #ecfdf3;

  --procesos-success-border:
    #bbf7d0;

  --procesos-warning:
    #a16207;

  --procesos-warning-bg:
    #fffbeb;

  --procesos-warning-border:
    #fde68a;

  --procesos-danger:
    #b42318;

  --procesos-danger-bg:
    #fef3f2;

  --procesos-danger-border:
    #fecaca;

  --procesos-info:
    #2563eb;

  --procesos-info-bg:
    #eff6ff;

  --procesos-info-border:
    #bfdbfe;

  --procesos-purple:
    #7c3aed;

  --procesos-purple-bg:
    #f5f3ff;

  --procesos-purple-border:
    #ddd6fe;

  --procesos-focus:
    rgba(
      37,
      99,
      235,
      0.18
    );

  --procesos-shadow-xs:
    0 1px 2px
    rgba(
      15,
      23,
      42,
      0.04
    );

  --procesos-shadow-sm:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.06
    );

  --procesos-shadow:
    0 12px 32px
    rgba(
      15,
      23,
      42,
      0.08
    );

  --procesos-shadow-lg:
    0 24px 70px
    rgba(
      15,
      23,
      42,
      0.14
    );

  --procesos-radius-xs:
    7px;

  --procesos-radius-sm:
    9px;

  --procesos-radius:
    12px;

  --procesos-radius-lg:
    16px;

  --procesos-radius-xl:
    20px;

  --procesos-transition:
    160ms
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}


/* =========================================================
   VARIABLES · DARK
   ========================================================= */

html[data-theme="dark"]
.manufactura-procesos-page,
html[data-theme="dark"]
.manufactura-procesos-workspace,
html[data-theme="dark"]
.manufactura-procesos-modal,
html[data-theme="dark"]
.manufactura-procesos-actions-menu,
html[data-theme="dark"]
.manufactura-procesos-toast-mount,
body[data-theme="dark"]
.manufactura-procesos-page,
body[data-theme="dark"]
.manufactura-procesos-workspace,
body[data-theme="dark"]
.manufactura-procesos-modal,
body[data-theme="dark"]
.manufactura-procesos-actions-menu,
body[data-theme="dark"]
.manufactura-procesos-toast-mount {
  --procesos-bg:
    #090d14;

  --procesos-bg-soft:
    #0b1018;

  --procesos-surface:
    #101620;

  --procesos-surface-soft:
    #131a25;

  --procesos-surface-muted:
    #17202d;

  --procesos-surface-hover:
    #18212e;

  --procesos-surface-active:
    #1d2735;

  --procesos-surface-strong:
    #202b39;

  --procesos-text:
    #f8fafc;

  --procesos-text-secondary:
    #d7dee8;

  --procesos-text-muted:
    #9aa8ba;

  --procesos-text-subtle:
    #718096;

  --procesos-border:
    rgba(
      255,
      255,
      255,
      0.105
    );

  --procesos-border-soft:
    rgba(
      255,
      255,
      255,
      0.065
    );

  --procesos-border-strong:
    rgba(
      255,
      255,
      255,
      0.17
    );

  --procesos-primary:
    #f8fafc;

  --procesos-primary-hover:
    #e2e8f0;

  --procesos-primary-active:
    #ffffff;

  --procesos-primary-text:
    #0b1018;

  --procesos-success:
    #4ade80;

  --procesos-success-bg:
    rgba(
      34,
      197,
      94,
      0.1
    );

  --procesos-success-border:
    rgba(
      74,
      222,
      128,
      0.26
    );

  --procesos-warning:
    #facc15;

  --procesos-warning-bg:
    rgba(
      234,
      179,
      8,
      0.1
    );

  --procesos-warning-border:
    rgba(
      250,
      204,
      21,
      0.26
    );

  --procesos-danger:
    #fb7185;

  --procesos-danger-bg:
    rgba(
      244,
      63,
      94,
      0.11
    );

  --procesos-danger-border:
    rgba(
      251,
      113,
      133,
      0.28
    );

  --procesos-info:
    #60a5fa;

  --procesos-info-bg:
    rgba(
      59,
      130,
      246,
      0.1
    );

  --procesos-info-border:
    rgba(
      96,
      165,
      250,
      0.25
    );

  --procesos-purple:
    #a78bfa;

  --procesos-purple-bg:
    rgba(
      139,
      92,
      246,
      0.11
    );

  --procesos-purple-border:
    rgba(
      167,
      139,
      250,
      0.27
    );

  --procesos-focus:
    rgba(
      96,
      165,
      250,
      0.2
    );

  --procesos-shadow-xs:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.24
    );

  --procesos-shadow-sm:
    0 5px 18px
    rgba(
      0,
      0,
      0,
      0.22
    );

  --procesos-shadow:
    0 14px 40px
    rgba(
      0,
      0,
      0,
      0.3
    );

  --procesos-shadow-lg:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      0.48
    );
}


/* =========================================================
   BASE
   ========================================================= */

.manufactura-procesos-page,
.manufactura-procesos-workspace,
.manufactura-procesos-modal,
.manufactura-procesos-actions-menu {
  color:
    var(
      --procesos-text
    );

  font-family:
    "DM Sans",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.manufactura-procesos-page *,
.manufactura-procesos-page *::before,
.manufactura-procesos-page *::after,
.manufactura-procesos-workspace *,
.manufactura-procesos-workspace *::before,
.manufactura-procesos-workspace *::after,
.manufactura-procesos-modal *,
.manufactura-procesos-modal *::before,
.manufactura-procesos-modal *::after,
.manufactura-procesos-actions-menu *,
.manufactura-procesos-actions-menu *::before,
.manufactura-procesos-actions-menu *::after {
  box-sizing:
    border-box;
}


.manufactura-procesos-page {
  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  padding:
    24px;

  background:
    var(
      --procesos-bg
    );
}


.manufactura-procesos-page button,
.manufactura-procesos-page input,
.manufactura-procesos-page select,
.manufactura-procesos-page textarea,
.manufactura-procesos-workspace button,
.manufactura-procesos-workspace input,
.manufactura-procesos-workspace select,
.manufactura-procesos-workspace textarea,
.manufactura-procesos-modal button,
.manufactura-procesos-modal input,
.manufactura-procesos-modal select,
.manufactura-procesos-modal textarea {
  font:
    inherit;
}


.manufactura-procesos-page button,
.manufactura-procesos-workspace button,
.manufactura-procesos-modal button,
.manufactura-procesos-actions-menu button {
  border:
    0;

  outline:
    none;

  color:
    inherit;

  cursor:
    pointer;
}


.manufactura-procesos-page button:disabled,
.manufactura-procesos-workspace button:disabled,
.manufactura-procesos-modal button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.48;
}


.manufactura-procesos-page svg,
.manufactura-procesos-workspace svg,
.manufactura-procesos-modal svg,
.manufactura-procesos-actions-menu svg {
  flex:
    0 0 auto;

  stroke-width:
    2;
}


/* =========================================================
   BOTÓN GENERAL
   ========================================================= */

.manufactura-procesos-btn {
  min-height:
    40px;

  padding:
    0 14px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    var(
      --procesos-radius-sm
    );

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );

  font-size:
    13px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      ),
    color
      var(
        --procesos-transition
      ),
    transform
      var(
        --procesos-transition
      ),
    box-shadow
      var(
        --procesos-transition
      );
}


.manufactura-procesos-btn svg {
  width:
    16px;

  height:
    16px;
}


.manufactura-procesos-btn:hover:not(:disabled) {
  border-color:
    var(
      --procesos-border-strong
    );

  background:
    var(
      --procesos-surface-hover
    );

  transform:
    translateY(
      -1px
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );
}


.manufactura-procesos-btn:active:not(:disabled) {
  transform:
    translateY(
      0
    );
}


.manufactura-procesos-btn.is-primary {
  border-color:
    var(
      --procesos-primary
    );

  color:
    var(
      --procesos-primary-text
    );

  background:
    var(
      --procesos-primary
    );
}


.manufactura-procesos-btn.is-primary:hover:not(:disabled) {
  border-color:
    var(
      --procesos-primary-hover
    );

  background:
    var(
      --procesos-primary-hover
    );
}


.manufactura-procesos-btn.is-danger {
  border-color:
    var(
      --procesos-danger
    );

  color:
    #ffffff;

  background:
    var(
      --procesos-danger
    );
}


.manufactura-procesos-btn.is-danger-soft {
  border-color:
    var(
      --procesos-danger-border
    );

  color:
    var(
      --procesos-danger
    );

  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-btn.is-danger-soft:hover:not(:disabled) {
  border-color:
    var(
      --procesos-danger
    );

  color:
    var(
      --procesos-danger
    );

  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-btn.is-active {
  border-color:
    var(
      --procesos-border-strong
    );

  background:
    var(
      --procesos-surface-active
    );
}


.manufactura-procesos-btn.is-icon {
  width:
    40px;

  min-width:
    40px;

  padding:
    0;
}


.manufactura-procesos-btn.is-small {
  min-height:
    34px;

  padding:
    0 11px;

  border-radius:
    8px;

  font-size:
    12px;
}


.manufactura-procesos-btn.is-small svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.manufactura-procesos-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.manufactura-procesos-field > span,
.manufactura-procesos-mini-field > span {
  color:
    var(
      --procesos-text-secondary
    );

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1.2;
}


.manufactura-procesos-field input,
.manufactura-procesos-field select,
.manufactura-procesos-field textarea,
.manufactura-procesos-mini-field input,
.manufactura-procesos-mini-field select {
  width:
    100%;

  min-width:
    0;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  outline:
    none;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    13px;

  font-weight:
    600;

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      ),
    box-shadow
      var(
        --procesos-transition
      );
}


.manufactura-procesos-field input,
.manufactura-procesos-field select {
  height:
    42px;

  padding:
    0 12px;
}


.manufactura-procesos-field textarea {
  min-height:
    94px;

  padding:
    11px 12px;

  resize:
    vertical;

  line-height:
    1.55;
}


.manufactura-procesos-field input::placeholder,
.manufactura-procesos-field textarea::placeholder {
  color:
    var(
      --procesos-text-subtle
    );

  opacity:
    1;
}


.manufactura-procesos-field input:hover:not(:disabled),
.manufactura-procesos-field select:hover:not(:disabled),
.manufactura-procesos-field textarea:hover:not(:disabled),
.manufactura-procesos-mini-field input:hover:not(:disabled),
.manufactura-procesos-mini-field select:hover:not(:disabled) {
  border-color:
    var(
      --procesos-border-strong
    );
}


.manufactura-procesos-field input:focus,
.manufactura-procesos-field select:focus,
.manufactura-procesos-field textarea:focus,
.manufactura-procesos-mini-field input:focus,
.manufactura-procesos-mini-field select:focus {
  border-color:
    var(
      --procesos-info
    );

  box-shadow:
    0 0 0 3px
    var(
      --procesos-focus
    );
}


.manufactura-procesos-field input:disabled,
.manufactura-procesos-field select:disabled,
.manufactura-procesos-field textarea:disabled,
.manufactura-procesos-mini-field input:disabled,
.manufactura-procesos-mini-field select:disabled {
  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface-muted
    );

  cursor:
    default;

  opacity:
    0.82;
}


.manufactura-procesos-form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;
}


.manufactura-procesos-form-grid.is-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );
}


.manufactura-procesos-field.is-span-2 {
  grid-column:
    1 /
    -1;
}


/* =========================================================
   INPUT SUFFIX
   ========================================================= */

.manufactura-procesos-input-suffix {
  position:
    relative;

  width:
    100%;
}


.manufactura-procesos-input-suffix > input {
  padding-right:
    52px;
}


.manufactura-procesos-input-suffix > span {
  position:
    absolute;

  top:
    50%;

  right:
    12px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    11px;

  font-weight:
    750;

  pointer-events:
    none;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.manufactura-procesos-page-head {
  width:
    100%;

  margin-bottom:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  animation:
    procesosFadeUp
    220ms
    ease
    both;
}


.manufactura-procesos-page-head__copy {
  min-width:
    0;
}


.manufactura-procesos-page-head__eyebrow {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.13em;

  line-height:
    1;
}


.manufactura-procesos-page-head__title-row {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.manufactura-procesos-page-head__title-row h1 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    clamp(
      25px,
      2.2vw,
      32px
    );

  font-weight:
    850;

  letter-spacing:
    -0.035em;

  line-height:
    1.08;
}


.manufactura-procesos-page-head__count {
  min-width:
    27px;

  height:
    27px;

  padding:
    0 8px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    11px;

  font-weight:
    850;
}


.manufactura-procesos-page-head__copy > p {
  margin:
    7px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.45;
}


.manufactura-procesos-page-head__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* =========================================================
   TABS PRINCIPALES
   ========================================================= */

.manufactura-procesos-main-tabs {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    18px;

  padding:
    4px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    11px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  background:
    var(
      --procesos-surface-soft
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );
}


.manufactura-procesos-main-tab {
  min-height:
    38px;

  padding:
    0 14px;

  border:
    1px
    solid
    transparent;

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    750;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-main-tab svg {
  width:
    15px;

  height:
    15px;
}


.manufactura-procesos-main-tab:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-main-tab.is-active {
  border-color:
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );
}


.manufactura-procesos-main-tab > strong {
  min-width:
    21px;

  height:
    20px;

  padding:
    0 6px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-muted
    );

  font-size:
    9px;

  font-weight:
    850;
}


.manufactura-procesos-main-tab > strong.is-live {
  color:
    var(
      --procesos-success
    );

  background:
    var(
      --procesos-success-bg
    );
}


/* =========================================================
   VIEW MOUNT
   ========================================================= */

.manufactura-procesos-view-mount {
  width:
    100%;

  min-width:
    0;
}


.manufactura-procesos-library,
.manufactura-procesos-executions {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  animation:
    procesosFadeIn
    180ms
    ease
    both;
}


/* =========================================================
   KPI STRIP
   ========================================================= */

.manufactura-procesos-kpi-strip {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}


.manufactura-procesos-kpi {
  min-width:
    0;

  min-height:
    78px;

  padding:
    13px 14px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    var(
      --procesos-radius
    );

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  text-align:
    left;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      ),
    transform
      var(
        --procesos-transition
      ),
    box-shadow
      var(
        --procesos-transition
      );
}


button.manufactura-procesos-kpi:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  transform:
    translateY(
      -2px
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );
}


.manufactura-procesos-kpi.is-active {
  border-color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-active
    );

  box-shadow:
    inset 0 0 0 1px
    var(
      --procesos-border-soft
    );
}


.manufactura-procesos-kpi__icon {
  width:
    38px;

  height:
    38px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-kpi__icon svg {
  width:
    17px;

  height:
    17px;
}


.manufactura-procesos-kpi.is-success
.manufactura-procesos-kpi__icon {
  border-color:
    var(
      --procesos-success-border
    );

  color:
    var(
      --procesos-success
    );

  background:
    var(
      --procesos-success-bg
    );
}


.manufactura-procesos-kpi.is-warning
.manufactura-procesos-kpi__icon {
  border-color:
    var(
      --procesos-warning-border
    );

  color:
    var(
      --procesos-warning
    );

  background:
    var(
      --procesos-warning-bg
    );
}


.manufactura-procesos-kpi.is-danger
.manufactura-procesos-kpi__icon {
  border-color:
    var(
      --procesos-danger-border
    );

  color:
    var(
      --procesos-danger
    );

  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-kpi__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.manufactura-procesos-kpi__content strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    19px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-kpi__content small {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   LIBRARY PANEL
   ========================================================= */

.manufactura-procesos-library-panel {
  width:
    100%;

  min-width:
    0;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    var(
      --procesos-radius-lg
    );

  overflow:
    hidden;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.manufactura-procesos-toolbar {
  width:
    100%;

  padding:
    14px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-toolbar__top {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.manufactura-procesos-search {
  position:
    relative;

  min-width:
    0;

  flex:
    1 1 auto;
}


.manufactura-procesos-search > svg {
  position:
    absolute;

  top:
    50%;

  left:
    12px;

  width:
    16px;

  height:
    16px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --procesos-text-muted
    );

  pointer-events:
    none;
}


.manufactura-procesos-search > input {
  width:
    100%;

  height:
    42px;

  padding:
    0 42px
    0 38px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  outline:
    none;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    13px;

  font-weight:
    620;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-search > input::placeholder {
  color:
    var(
      --procesos-text-subtle
    );
}


.manufactura-procesos-search > input:hover {
  border-color:
    var(
      --procesos-border-strong
    );
}


.manufactura-procesos-search > input:focus {
  border-color:
    var(
      --procesos-info
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    0 0 0 3px
    var(
      --procesos-focus
    );
}


.manufactura-procesos-search > button {
  position:
    absolute;

  top:
    50%;

  right:
    7px;

  width:
    29px;

  height:
    29px;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;
}


.manufactura-procesos-search > button:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-search > button svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   QUICK FILTERS
   ========================================================= */

.manufactura-procesos-quick-filters {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.manufactura-procesos-quick-filters::-webkit-scrollbar {
  display:
    none;
}


.manufactura-procesos-quick-filter {
  min-height:
    32px;

  padding:
    0 10px;

  border:
    1px
    solid
    transparent;

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;

  font-size:
    11px;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-quick-filter svg {
  width:
    13px;

  height:
    13px;
}


.manufactura-procesos-quick-filter:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-quick-filter.is-active {
  border-color:
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-muted
    );
}


/* =========================================================
   FILTER PANEL
   ========================================================= */

.manufactura-procesos-filter-panel {
  width:
    100%;

  padding:
    14px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    11px;

  background:
    var(
      --procesos-surface-soft
    );

  animation:
    procesosFilterOpen
    180ms
    ease
    both;
}


.manufactura-procesos-filter-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.manufactura-procesos-filter-panel__footer {
  margin-top:
    14px;

  padding-top:
    12px;

  border-top:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.manufactura-procesos-filter-panel__footer > span {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    11px;

  font-weight:
    600;
}


.manufactura-procesos-filter-panel__footer > div {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


/* =========================================================
   FILTER COUNT
   ========================================================= */

#manufacturaProcesosFiltersBtn > strong {
  min-width:
    20px;

  height:
    20px;

  padding:
    0 6px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-primary-text
    );

  background:
    var(
      --procesos-primary
    );

  font-size:
    9px;

  font-weight:
    850;
}


/* =========================================================
   STATUS
   ========================================================= */

.manufactura-procesos-status,
.manufactura-procesos-operational,
.manufactura-procesos-execution-status {
  min-height:
    25px;

  padding:
    0 8px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.manufactura-procesos-status svg,
.manufactura-procesos-operational svg,
.manufactura-procesos-execution-status svg {
  width:
    11px;

  height:
    11px;
}


.manufactura-procesos-status.is-activo,
.manufactura-procesos-operational.is-operativo,
.manufactura-procesos-execution-status.is-finalizada {
  border-color:
    var(
      --procesos-success-border
    );

  color:
    var(
      --procesos-success
    );

  background:
    var(
      --procesos-success-bg
    );
}


.manufactura-procesos-status.is-borrador,
.manufactura-procesos-status.is-pausado,
.manufactura-procesos-operational.is-borrador,
.manufactura-procesos-operational.is-pausado,
.manufactura-procesos-execution-status.is-pendiente,
.manufactura-procesos-execution-status.is-pausada {
  border-color:
    var(
      --procesos-warning-border
    );

  color:
    var(
      --procesos-warning
    );

  background:
    var(
      --procesos-warning-bg
    );
}


.manufactura-procesos-status.is-obsoleto,
.manufactura-procesos-operational.is-obsoleto {
  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface-muted
    );
}


.manufactura-procesos-operational.is-sin-pasos,
.manufactura-procesos-operational.is-sin-insumos,
.manufactura-procesos-execution-status.is-cancelada {
  border-color:
    var(
      --procesos-danger-border
    );

  color:
    var(
      --procesos-danger
    );

  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-execution-status.is-en-proceso {
  border-color:
    var(
      --procesos-info-border
    );

  color:
    var(
      --procesos-info
    );

  background:
    var(
      --procesos-info-bg
    );
}


.manufactura-procesos-execution-status.is-con-diferencias {
  border-color:
    var(
      --procesos-warning-border
    );

  color:
    var(
      --procesos-warning
    );

  background:
    var(
      --procesos-warning-bg
    );
}


/* =========================================================
   LIST
   ========================================================= */

.manufactura-procesos-list {
  width:
    100%;

  min-width:
    0;

  padding:
    14px;
}


.manufactura-procesos-process-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


/* =========================================================
   PROCESS CARD
   ========================================================= */

.manufactura-procesos-process-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    202px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    var(
      --procesos-radius
    );

  display:
    grid;

  grid-template-columns:
    112px
    minmax(
      0,
      1fr
    );

  overflow:
    hidden;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );

  transition:
    border-color
      var(
        --procesos-transition
      ),
    transform
      var(
        --procesos-transition
      ),
    box-shadow
      var(
        --procesos-transition
      );
}


.manufactura-procesos-process-card:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  transform:
    translateY(
      -2px
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );
}


/* =========================================================
   CARD PRODUCT
   ========================================================= */

.manufactura-procesos-process-card__product {
  min-width:
    0;

  padding:
    12px;

  border-right:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-product-image {
  position:
    relative;

  overflow:
    hidden;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-product-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;
}


.manufactura-procesos-product-image.is-empty svg {
  width:
    24px;

  height:
    24px;
}


.manufactura-procesos-product-image.is-card {
  width:
    86px;

  height:
    86px;

  border-radius:
    11px;
}


.manufactura-procesos-product-image.is-search {
  width:
    46px;

  height:
    46px;

  border-radius:
    9px;

  flex:
    0 0 auto;
}


.manufactura-procesos-product-image.is-editor {
  width:
    58px;

  height:
    58px;

  border-radius:
    11px;

  flex:
    0 0 auto;
}


.manufactura-procesos-product-image.is-upload {
  width:
    84px;

  height:
    84px;

  border-radius:
    12px;
}


.manufactura-procesos-product-image.is-modal {
  width:
    54px;

  height:
    54px;

  border-radius:
    10px;

  flex:
    0 0 auto;
}


/* =========================================================
   CARD BODY
   ========================================================= */

.manufactura-procesos-process-card__body {
  min-width:
    0;

  padding:
    14px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.manufactura-procesos-process-card__heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.manufactura-procesos-process-card__title {
  min-width:
    0;
}


.manufactura-procesos-process-card__code {
  margin-bottom:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.manufactura-procesos-process-card__code span {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  line-height:
    1;
}


.manufactura-procesos-process-card__code span + span {
  padding-left:
    6px;

  border-left:
    1px
    solid
    var(
      --procesos-border
    );
}


.manufactura-procesos-process-card__title h3 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    15px;

  font-weight:
    830;

  letter-spacing:
    -0.02em;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-process-card__title p {
  margin:
    5px 0 0;

  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    620;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-process-card__title p strong {
  color:
    var(
      --procesos-text-secondary
    );

  font-weight:
    750;
}


.manufactura-procesos-process-card__states {
  display:
    flex;

  align-items:
    flex-end;

  flex-direction:
    column;

  gap:
    5px;

  flex:
    0 0 auto;
}


/* =========================================================
   CARD STATS
   ========================================================= */

.manufactura-procesos-process-card__stats {
  min-width:
    0;

  padding:
    9px 10px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        auto
      )
    );

  justify-content:
    start;

  gap:
    8px 16px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-process-card__stats > span {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  white-space:
    nowrap;
}


.manufactura-procesos-process-card__stats svg {
  width:
    12px;

  height:
    12px;
}


.manufactura-procesos-process-card__stats strong {
  color:
    var(
      --procesos-text
    );

  font-weight:
    820;
}


/* =========================================================
   CARD FOOTER
   ========================================================= */

.manufactura-procesos-process-card__footer {
  min-width:
    0;

  margin-top:
    auto;

  padding-top:
    10px;

  border-top:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.manufactura-procesos-process-card__meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.manufactura-procesos-process-card__meta > svg {
  width:
    12px;

  height:
    12px;
}


.manufactura-procesos-process-card__meta > span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-process-card__date {
  padding-left:
    7px;

  border-left:
    1px
    solid
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text-subtle
    );
}


.manufactura-procesos-process-card__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex:
    0 0 auto;
}


/* =========================================================
   CARD ACTION
   ========================================================= */

.manufactura-procesos-card-action {
  min-height:
    31px;

  padding:
    0 9px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    9px;

  font-weight:
    780;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-card-action svg {
  width:
    12px;

  height:
    12px;
}


.manufactura-procesos-card-action:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-card-action.is-primary {
  border-color:
    var(
      --procesos-primary
    );

  color:
    var(
      --procesos-primary-text
    );

  background:
    var(
      --procesos-primary
    );
}


.manufactura-procesos-card-action.is-primary:hover {
  border-color:
    var(
      --procesos-primary-hover
    );

  background:
    var(
      --procesos-primary-hover
    );
}


.manufactura-procesos-card-action.is-icon {
  width:
    31px;

  min-width:
    31px;

  padding:
    0;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.manufactura-procesos-pagination {
  width:
    100%;

  min-height:
    58px;

  padding:
    10px 14px;

  border-top:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-pagination:empty {
  display:
    none;
}


.manufactura-procesos-pagination__summary {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


.manufactura-procesos-pagination__summary strong {
  color:
    var(
      --procesos-text
    );

  font-weight:
    820;
}


.manufactura-procesos-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.manufactura-procesos-pagination__page {
  min-width:
    102px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;

  text-align:
    center;
}


.manufactura-procesos-pagination__page strong {
  color:
    var(
      --procesos-text
    );

  font-weight:
    820;
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.manufactura-procesos-loading-state,
.manufactura-procesos-empty-state {
  width:
    100%;

  min-height:
    270px;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.manufactura-procesos-empty-state > svg {
  width:
    32px;

  height:
    32px;

  margin-bottom:
    13px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-empty-state > strong,
.manufactura-procesos-loading-state > strong {
  color:
    var(
      --procesos-text
    );

  font-size:
    14px;

  font-weight:
    820;
}


.manufactura-procesos-empty-state > p {
  max-width:
    430px;

  margin:
    7px 0 15px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.5;
}


.manufactura-procesos-empty-state.is-error > svg {
  color:
    var(
      --procesos-danger
    );
}


/* =========================================================
   SPINNER
   ========================================================= */

.manufactura-procesos-spinner {
  width:
    24px;

  height:
    24px;

  margin-bottom:
    10px;

  border:
    2px
    solid
    var(
      --procesos-border
    );

  border-top-color:
    var(
      --procesos-text
    );

  border-radius:
    50%;

  display:
    inline-block;

  animation:
    procesosSpin
    0.75s
    linear
    infinite;
}


.manufactura-procesos-spinner.is-small {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  border-width:
    2px;
}


/* =========================================================
   MENÚ ACCIONES
   ========================================================= */

.manufactura-procesos-actions-menu {
  position:
    fixed;

  z-index:
    12000;

  width:
    220px;

  padding:
    6px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    11px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-lg
    );

  animation:
    procesosMenuOpen
    150ms
    ease
    both;
}


.manufactura-procesos-actions-menu button {
  width:
    100%;

  min-height:
    36px;

  padding:
    0 10px;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    transparent;

  text-align:
    left;

  font-size:
    11px;

  font-weight:
    700;
}


.manufactura-procesos-actions-menu button:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-actions-menu button.is-danger {
  color:
    var(
      --procesos-danger
    );
}


.manufactura-procesos-actions-menu button.is-danger:hover {
  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-actions-menu button svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   ANIMACIONES BASE
   ========================================================= */

@keyframes procesosSpin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


@keyframes procesosFadeIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes procesosFadeUp {
  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes procesosFilterOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        -5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes procesosMenuOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        -4px
      )
      scale(
        0.98
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

@media (
  max-width:
    1280px
) {
  .manufactura-procesos-kpi-strip {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .manufactura-procesos-process-grid {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-filter-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    900px
) {
  .manufactura-procesos-page {
    padding:
      18px;
  }


  .manufactura-procesos-page-head {
    align-items:
      flex-start;
  }


  .manufactura-procesos-kpi-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .manufactura-procesos-kpi:last-child {
    grid-column:
      1 /
      -1;
  }


  .manufactura-procesos-process-card {
    grid-template-columns:
      92px
      minmax(
        0,
        1fr
      );
  }


  .manufactura-procesos-product-image.is-card {
    width:
      66px;

    height:
      66px;
  }


  .manufactura-procesos-process-card__stats {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          auto
        )
      );
  }


  .manufactura-procesos-process-card__date {
    display:
      none;
  }
}


@media (
  max-width:
    700px
) {
  .manufactura-procesos-page {
    padding:
      14px 12px
      22px;
  }


  .manufactura-procesos-page-head {
    flex-direction:
      column;

    gap:
      14px;
  }


  .manufactura-procesos-page-head__actions {
    width:
      100%;
  }


  .manufactura-procesos-page-head__actions
  .manufactura-procesos-btn.is-primary {
    flex:
      1 1 auto;
  }


  .manufactura-procesos-main-tabs {
    display:
      flex;
  }


  .manufactura-procesos-main-tab {
    flex:
      1 1 0;
  }


  .manufactura-procesos-toolbar__top {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #manufacturaProcesosFiltersBtn {
    width:
      100%;
  }


  .manufactura-procesos-filter-grid {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-filter-panel__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .manufactura-procesos-filter-panel__footer > div {
    width:
      100%;
  }


  .manufactura-procesos-filter-panel__footer
  .manufactura-procesos-btn {
    flex:
      1 1 0;
  }


  .manufactura-procesos-process-card {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-process-card__product {
    padding:
      12px;

    border-right:
      0;

    border-bottom:
      1px
      solid
      var(
        --procesos-border-soft
      );

    justify-content:
      flex-start;
  }


  .manufactura-procesos-product-image.is-card {
    width:
      72px;

    height:
      72px;
  }


  .manufactura-procesos-process-card__heading {
    flex-direction:
      column;
  }


  .manufactura-procesos-process-card__states {
    align-items:
      center;

    flex-direction:
      row;

    flex-wrap:
      wrap;
  }


  .manufactura-procesos-process-card__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-process-card__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      )
      34px;
  }


  .manufactura-procesos-card-action {
    width:
      100%;
  }


  .manufactura-procesos-card-action.is-icon {
    width:
      34px;

    min-width:
      34px;
  }


  .manufactura-procesos-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .manufactura-procesos-pagination__controls {
    justify-content:
      space-between;
  }
}


@media (
  max-width:
    480px
) {
  .manufactura-procesos-kpi-strip {
    grid-template-columns:
      1fr 1fr;
  }


  .manufactura-procesos-kpi {
    min-height:
      68px;

    padding:
      10px;
  }


  .manufactura-procesos-kpi__icon {
    width:
      34px;

    height:
      34px;
  }


  .manufactura-procesos-kpi__content strong {
    font-size:
      16px;
  }


  .manufactura-procesos-kpi:last-child {
    grid-column:
      1 /
      -1;
  }


  .manufactura-procesos-process-card__body {
    padding:
      12px;
  }


  .manufactura-procesos-process-card__stats {
    grid-template-columns:
      1fr 1fr;
  }


  .manufactura-procesos-process-card__actions {
    grid-template-columns:
      1fr
      1fr
      1fr
      32px;
  }


  .manufactura-procesos-card-action {
    padding:
      0 6px;
  }


  .manufactura-procesos-card-action span {
    font-size:
      8px;
  }
}


/* =========================================================
   FIN PARTE 1 DE 4
   ========================================================= *//* =========================================================
   PARTE 2 DE 4

   - Workspace
   - Header editor
   - Overview
   - Navegación lateral
   - Árbol de etapas
   - Editor
   - Cards internas
   - Producto
   - Entidades seleccionadas
   - Etapas
   - Pasos
   - Tabs
   - Toggles
   ========================================================= */


/* =========================================================
   WORKSPACE BODY OPEN
   ========================================================= */

body.manufactura-procesos-workspace-open {
  overflow:
    hidden;
}


/* =========================================================
   WORKSPACE MOUNT
   ========================================================= */

.manufactura-procesos-workspace-mount {
  width:
    100%;

  min-width:
    0;
}


#manufacturaProcesosWorkspaceMount:not(:empty) {
  position:
    fixed;

  inset:
    0;

  z-index:
    9500;

  overflow:
    hidden;

  background:
    var(
      --procesos-bg
    );
}


/* =========================================================
   WORKSPACE ROOT
   ========================================================= */

.manufactura-procesos-workspace {
  width:
    100%;

  height:
    100dvh;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-bg
    );
}


/* =========================================================
   WORKSPACE HEADER
   ========================================================= */

.manufactura-procesos-workspace-header {
  min-height:
    74px;

  padding:
    12px 18px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );

  z-index:
    10;
}


.manufactura-procesos-workspace-header__left {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.manufactura-procesos-workspace-header__copy {
  min-width:
    0;
}


.manufactura-procesos-workspace-breadcrumb {
  margin-bottom:
    4px;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    720;
}


.manufactura-procesos-workspace-breadcrumb svg {
  width:
    11px;

  height:
    11px;
}


.manufactura-procesos-workspace-breadcrumb strong {
  overflow:
    hidden;

  max-width:
    260px;

  color:
    var(
      --procesos-text-secondary
    );

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-header__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.manufactura-procesos-workspace-header__title h1 {
  margin:
    0;

  max-width:
    min(
      620px,
      50vw
    );

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    18px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex:
    0 0 auto;
}


/* =========================================================
   WORKSPACE BODY
   ========================================================= */

.manufactura-procesos-workspace-body {
  min-width:
    0;

  min-height:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.manufactura-procesos-workspace-overview {
  min-width:
    0;

  padding:
    9px 14px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        96px,
        1fr
      )
    )
    minmax(
      180px,
      1.35fr
    );

  gap:
    7px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-bg-soft
    );

  overflow-x:
    auto;

  scrollbar-width:
    thin;
}


.manufactura-procesos-workspace-overview__item {
  min-width:
    0;

  min-height:
    47px;

  padding:
    7px 9px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  display:
    grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    );

  grid-template-rows:
    auto
    auto;

  align-items:
    center;

  column-gap:
    7px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-workspace-overview__item > svg {
  grid-column:
    1;

  grid-row:
    1 /
    3;

  width:
    16px;

  height:
    16px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-workspace-overview__item > span {
  grid-column:
    2;

  grid-row:
    1;

  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    740;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-overview__item > strong {
  grid-column:
    2;

  grid-row:
    2;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    12px;

  font-weight:
    820;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-overview__item.is-wide {
  min-width:
    180px;
}


/* =========================================================
   WORKSPACE LAYOUT
   ========================================================= */

.manufactura-procesos-workspace-layout {
  min-width:
    0;

  min-height:
    0;

  flex:
    1 1 auto;

  display:
    grid;

  grid-template-columns:
    240px
    minmax(
      0,
      1fr
    );

  overflow:
    hidden;
}


/* =========================================================
   WORKSPACE NAV
   ========================================================= */

.manufactura-procesos-workspace-nav {
  min-width:
    0;

  min-height:
    0;

  border-right:
    1px
    solid
    var(
      --procesos-border
    );

  overflow:
    hidden;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-workspace-nav__inner {
  width:
    100%;

  height:
    100%;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.manufactura-procesos-workspace-nav__head {
  min-height:
    45px;

  padding:
    0 10px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  flex:
    0 0 auto;
}


.manufactura-procesos-workspace-nav__head > span {
  color:
    var(
      --procesos-text-secondary
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.manufactura-procesos-workspace-nav__head > button {
  width:
    28px;

  height:
    28px;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    transparent;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-workspace-nav__head > button:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-workspace-nav__head > button svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   NAV GENERAL
   ========================================================= */

.manufactura-procesos-workspace-nav__general {
  width:
    calc(
      100% -
      16px
    );

  min-height:
    40px;

  margin:
    8px;

  padding:
    0 9px;

  border:
    1px
    solid
    transparent;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    transparent;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-workspace-nav__general > span {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.manufactura-procesos-workspace-nav__general svg {
  width:
    14px;

  height:
    14px;
}


.manufactura-procesos-workspace-nav__general strong {
  overflow:
    hidden;

  font-size:
    11px;

  font-weight:
    760;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-nav__general:hover {
  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-workspace-nav__general.is-active {
  border-color:
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-active
    );
}


/* =========================================================
   TREE
   ========================================================= */

.manufactura-procesos-workspace-tree {
  min-width:
    0;

  min-height:
    0;

  padding:
    0 8px 10px;

  flex:
    1 1 auto;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


.manufactura-procesos-workspace-tree__empty {
  min-height:
    150px;

  padding:
    18px 10px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.manufactura-procesos-workspace-tree__empty > svg {
  width:
    22px;

  height:
    22px;

  margin-bottom:
    8px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-workspace-tree__empty > p {
  margin:
    0 0 10px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;
}


/* =========================================================
   TREE STAGE
   ========================================================= */

.manufactura-procesos-workspace-tree-stage {
  margin-bottom:
    4px;

  border:
    1px
    solid
    transparent;

  border-radius:
    9px;

  overflow:
    hidden;

  background:
    transparent;

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      );
}


.manufactura-procesos-workspace-tree-stage.is-expanded {
  border-color:
    var(
      --procesos-border-soft
    );

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-workspace-tree-stage__head {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    );
}


.manufactura-procesos-workspace-tree-stage__toggle {
  width:
    28px;

  min-height:
    42px;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;
}


.manufactura-procesos-workspace-tree-stage__toggle:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-workspace-tree-stage__toggle svg {
  width:
    13px;

  height:
    13px;
}


.manufactura-procesos-workspace-tree-stage__select {
  min-width:
    0;

  min-height:
    42px;

  padding:
    5px 7px 5px 2px;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  text-align:
    left;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    transparent;
}


.manufactura-procesos-workspace-tree-stage__select:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-workspace-tree-stage__select.is-active {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-active
    );
}


.manufactura-procesos-workspace-tree-stage__number {
  width:
    23px;

  height:
    23px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    9px;

  font-weight:
    850;
}


.manufactura-procesos-workspace-tree-stage__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-workspace-tree-stage__copy strong {
  overflow:
    hidden;

  color:
    inherit;

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-tree-stage__copy small {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    650;
}


/* =========================================================
   TREE STAGE STEPS
   ========================================================= */

.manufactura-procesos-workspace-tree-stage__steps {
  padding:
    3px 5px 6px 34px;

  animation:
    procesosTreeOpen
    160ms
    ease
    both;
}


.manufactura-procesos-workspace-tree-stage__no-steps {
  min-height:
    28px;

  padding:
    7px 8px;

  color:
    var(
      --procesos-text-subtle
    );

  font-size:
    8px;

  font-weight:
    650;
}


.manufactura-procesos-workspace-tree-step {
  width:
    100%;

  min-width:
    0;

  min-height:
    36px;

  margin-bottom:
    2px;

  padding:
    4px 6px;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  text-align:
    left;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    transparent;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-workspace-tree-step:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-workspace-tree-step.is-active {
  border-color:
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-active
    );
}


.manufactura-procesos-workspace-tree-step__number {
  width:
    21px;

  height:
    21px;

  border-radius:
    6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface-muted
    );

  font-size:
    8px;

  font-weight:
    850;
}


.manufactura-procesos-workspace-tree-step__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.manufactura-procesos-workspace-tree-step__copy strong {
  overflow:
    hidden;

  color:
    inherit;

  font-size:
    9px;

  font-weight:
    760;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-tree-step__copy small {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-workspace-tree-stage__add-step {
  width:
    100%;

  min-height:
    31px;

  margin-top:
    3px;

  padding:
    0 7px;

  border:
    1px
    dashed
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    6px;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;

  font-size:
    8px;

  font-weight:
    720;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-workspace-tree-stage__add-step:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-workspace-tree-stage__add-step svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   NAV FOOTER
   ========================================================= */

.manufactura-procesos-workspace-nav__footer {
  min-height:
    39px;

  padding:
    0 10px;

  border-top:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    8px;

  font-weight:
    700;
}


/* =========================================================
   WORKSPACE MAIN
   ========================================================= */

.manufactura-procesos-workspace-main {
  min-width:
    0;

  min-height:
    0;

  overflow:
    hidden;

  background:
    var(
      --procesos-bg
    );
}


.manufactura-procesos-workspace-editor {
  width:
    100%;

  height:
    100%;

  min-width:
    0;

  min-height:
    0;

  padding:
    18px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


/* =========================================================
   EDITOR SECTION
   ========================================================= */

.manufactura-procesos-editor-section {
  width:
    100%;

  max-width:
    1180px;

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  animation:
    procesosFadeUp
    180ms
    ease
    both;
}


.manufactura-procesos-editor-section__head {
  min-width:
    0;

  padding:
    2px 2px 4px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;
}


.manufactura-procesos-editor-section__eyebrow {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.12em;
}


.manufactura-procesos-editor-section__head h2 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    20px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  line-height:
    1.2;
}


.manufactura-procesos-editor-section__head p {
  margin:
    5px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;
}


.manufactura-procesos-editor-section__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


/* =========================================================
   EDITOR CARD
   ========================================================= */

.manufactura-procesos-editor-card {
  width:
    100%;

  min-width:
    0;

  padding:
    16px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    12px;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );
}


.manufactura-procesos-editor-card__head {
  margin-bottom:
    14px;

  padding-bottom:
    12px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.manufactura-procesos-editor-card__head > div {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.manufactura-procesos-editor-card__icon {
  width:
    34px;

  height:
    34px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-editor-card__icon svg {
  width:
    15px;

  height:
    15px;
}


.manufactura-procesos-editor-card__head h3 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    13px;

  font-weight:
    820;

  line-height:
    1.25;
}


.manufactura-procesos-editor-card__head p {
  margin:
    3px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.35;
}


/* =========================================================
   PRODUCT MODE
   ========================================================= */

.manufactura-procesos-product-mode {
  margin-bottom:
    12px;

  padding:
    3px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-product-mode__option {
  min-height:
    34px;

  padding:
    0 10px;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;

  font-size:
    10px;

  font-weight:
    740;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-product-mode__option svg {
  width:
    13px;

  height:
    13px;
}


.manufactura-procesos-product-mode__option:hover:not(:disabled) {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-product-mode__option.is-active {
  border-color:
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );
}


/* =========================================================
   SELECTED ENTITY
   ========================================================= */

.manufactura-procesos-selected-entity {
  min-width:
    0;

  padding:
    11px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-selected-entity__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.manufactura-procesos-selected-entity__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-selected-entity__copy small {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.manufactura-procesos-selected-entity__copy strong {
  overflow:
    hidden;

  max-width:
    540px;

  color:
    var(
      --procesos-text
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-selected-entity__copy > span {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-selected-entity__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex:
    0 0 auto;
}


.manufactura-procesos-selected-entity__avatar {
  width:
    44px;

  height:
    44px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-selected-entity__avatar svg {
  width:
    18px;

  height:
    18px;
}


/* =========================================================
   PRODUCT IMAGE UPLOAD
   ========================================================= */

.manufactura-procesos-product-image-upload {
  margin-top:
    12px;

  padding:
    11px;

  border:
    1px
    dashed
    var(
      --procesos-border
    );

  border-radius:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-product-image-upload__preview {
  flex:
    0 0 auto;
}


.manufactura-procesos-product-image-upload__content {
  min-width:
    0;

  flex:
    1 1 auto;
}


.manufactura-procesos-product-image-upload__content > strong {
  display:
    block;

  color:
    var(
      --procesos-text
    );

  font-size:
    11px;

  font-weight:
    800;
}


.manufactura-procesos-product-image-upload__content > p {
  margin:
    3px 0 8px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.35;
}


.manufactura-procesos-product-image-upload__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;
}


/* =========================================================
   TOGGLE GRID
   ========================================================= */

.manufactura-procesos-toggle-grid {
  margin-top:
    14px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.manufactura-procesos-toggle-field {
  position:
    relative;

  min-width:
    0;

  min-height:
    58px;

  padding:
    9px 10px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  background:
    var(
      --procesos-surface-soft
    );

  cursor:
    pointer;

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      );
}


.manufactura-procesos-toggle-field:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-toggle-field > input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.manufactura-procesos-toggle-field__control {
  position:
    relative;

  width:
    34px;

  height:
    20px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    999px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-surface-strong
    );

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-toggle-field__control::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    var(
      --procesos-text-muted
    );

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-toggle-field
> input:checked
+ .manufactura-procesos-toggle-field__control {
  border-color:
    var(
      --procesos-primary
    );

  background:
    var(
      --procesos-primary
    );
}


.manufactura-procesos-toggle-field
> input:checked
+ .manufactura-procesos-toggle-field__control::after {
  left:
    17px;

  background:
    var(
      --procesos-primary-text
    );
}


.manufactura-procesos-toggle-field__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-toggle-field__copy strong {
  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.2;
}


.manufactura-procesos-toggle-field__copy small {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.3;
}


/* =========================================================
   STAGE STEP LIST
   ========================================================= */

.manufactura-procesos-stage-step-list {
  width:
    100%;

  min-width:
    0;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    12px;

  overflow:
    hidden;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-stage-step-list__head {
  min-height:
    58px;

  padding:
    10px 13px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-stage-step-list__head h3 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    12px;

  font-weight:
    820;
}


.manufactura-procesos-stage-step-list__head p {
  margin:
    2px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    620;
}


.manufactura-procesos-stage-step-list__items {
  padding:
    7px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


/* =========================================================
   STEP ROW
   ========================================================= */

.manufactura-procesos-stage-step-row {
  min-width:
    0;

  min-height:
    54px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  overflow:
    hidden;

  background:
    var(
      --procesos-surface
    );

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      );
}


.manufactura-procesos-stage-step-row:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-stage-step-row__main {
  min-width:
    0;

  min-height:
    54px;

  padding:
    6px 9px;

  display:
    grid;

  grid-template-columns:
    29px
    minmax(
      0,
      1fr
    )
    16px;

  align-items:
    center;

  gap:
    8px;

  text-align:
    left;

  color:
    var(
      --procesos-text
    );

  background:
    transparent;
}


.manufactura-procesos-stage-step-row__main > svg {
  width:
    14px;

  height:
    14px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-stage-step-row__number {
  width:
    29px;

  height:
    29px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    9px;

  font-weight:
    850;
}


.manufactura-procesos-stage-step-row__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-stage-step-row__copy strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    790;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-stage-step-row__copy small {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    620;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-stage-step-row__actions {
  padding:
    0 7px;

  border-left:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-stage-step-row__actions button {
  width:
    28px;

  height:
    28px;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-stage-step-row__actions button:hover:not(:disabled) {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-stage-step-row__actions button.is-danger {
  color:
    var(
      --procesos-danger
    );
}


.manufactura-procesos-stage-step-row__actions button.is-danger:hover:not(:disabled) {
  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-stage-step-row__actions svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   STEP EDITOR HEADER
   ========================================================= */

.manufactura-procesos-step-editor-head {
  min-width:
    0;

  padding:
    11px 12px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    11px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-step-editor-head__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.manufactura-procesos-step-editor-head__number {
  width:
    35px;

  height:
    35px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    11px;

  font-weight:
    850;
}


.manufactura-procesos-step-editor-head__copy {
  min-width:
    0;
}


.manufactura-procesos-step-editor-head__copy small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    760;
}


.manufactura-procesos-step-editor-head__copy h2 {
  margin:
    0;

  overflow:
    hidden;

  max-width:
    600px;

  color:
    var(
      --procesos-text
    );

  font-size:
    15px;

  font-weight:
    830;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-step-editor-head__copy p {
  margin:
    3px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    620;
}


.manufactura-procesos-step-editor-head__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


/* =========================================================
   STEP TABS
   ========================================================= */

.manufactura-procesos-step-tabs {
  position:
    sticky;

  top:
    -18px;

  z-index:
    8;

  width:
    100%;

  min-width:
    0;

  padding:
    6px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    11px;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  overflow-x:
    auto;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );

  scrollbar-width:
    none;
}


.manufactura-procesos-step-tabs::-webkit-scrollbar {
  display:
    none;
}


.manufactura-procesos-step-tab {
  min-height:
    34px;

  padding:
    0 9px;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-muted
    );

  background:
    transparent;

  font-size:
    9px;

  font-weight:
    740;

  white-space:
    nowrap;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-step-tab svg {
  width:
    12px;

  height:
    12px;
}


.manufactura-procesos-step-tab:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-step-tab.is-active {
  border-color:
    var(
      --procesos-border
    );

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-active
    );
}


.manufactura-procesos-step-tab > strong {
  min-width:
    17px;

  height:
    17px;

  padding:
    0 5px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-muted
    );

  font-size:
    7px;

  font-weight:
    850;
}


/* =========================================================
   STEP TAB BODY
   ========================================================= */

.manufactura-procesos-step-tab-body {
  width:
    100%;

  min-width:
    0;
}


.manufactura-procesos-step-tab-section {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  animation:
    procesosFadeIn
    150ms
    ease
    both;
}


/* =========================================================
   INLINE EMPTY
   ========================================================= */

.manufactura-procesos-inline-empty {
  min-height:
    130px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.manufactura-procesos-inline-empty > svg {
  width:
    24px;

  height:
    24px;

  margin-bottom:
    8px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-inline-empty > strong {
  color:
    var(
      --procesos-text
    );

  font-size:
    11px;

  font-weight:
    800;
}


.manufactura-procesos-inline-empty > p {
  max-width:
    380px;

  margin:
    4px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.4;
}


/* =========================================================
   INLINE CHECK
   ========================================================= */

.manufactura-procesos-inline-check {
  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --procesos-text-secondary
    );

  font-size:
    9px;

  font-weight:
    680;

  cursor:
    pointer;
}


.manufactura-procesos-inline-check input {
  width:
    14px;

  height:
    14px;

  margin:
    0;

  accent-color:
    var(
      --procesos-primary
    );
}


/* =========================================================
   ANIMACIÓN TREE
   ========================================================= */

@keyframes procesosTreeOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   RESPONSIVE · WORKSPACE
   ========================================================= */

@media (
  max-width:
    1180px
) {
  .manufactura-procesos-workspace-overview {
    grid-template-columns:
      repeat(
        6,
        minmax(
          120px,
          1fr
        )
      );
  }


  .manufactura-procesos-workspace-layout {
    grid-template-columns:
      210px
      minmax(
        0,
        1fr
      );
  }


  .manufactura-procesos-form-grid.is-4 {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    900px
) {
  .manufactura-procesos-workspace-header {
    min-height:
      68px;

    padding:
      10px 12px;
  }


  .manufactura-procesos-workspace-header__title h1 {
    max-width:
      45vw;

    font-size:
      16px;
  }


  .manufactura-procesos-workspace-header__actions
  .manufactura-procesos-btn {
    padding:
      0 10px;
  }


  .manufactura-procesos-workspace-layout {
    grid-template-columns:
      190px
      minmax(
        0,
        1fr
      );
  }


  .manufactura-procesos-workspace-editor {
    padding:
      14px;
  }


  .manufactura-procesos-step-tabs {
    top:
      -14px;
  }


  .manufactura-procesos-toggle-grid {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width:
    760px
) {
  body.manufactura-procesos-workspace-open {
    overflow:
      hidden;
  }


  .manufactura-procesos-workspace-header {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      9px;
  }


  .manufactura-procesos-workspace-header__left {
    width:
      100%;
  }


  .manufactura-procesos-workspace-header__copy {
    flex:
      1 1 auto;
  }


  .manufactura-procesos-workspace-header__title h1 {
    max-width:
      calc(
        100vw -
        100px
      );
  }


  .manufactura-procesos-workspace-header__actions {
    width:
      100%;

    padding-left:
      52px;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .manufactura-procesos-workspace-header__actions::-webkit-scrollbar {
    display:
      none;
  }


  .manufactura-procesos-workspace-overview {
    padding:
      7px 10px;

    grid-template-columns:
      repeat(
        6,
        110px
      );
  }


  .manufactura-procesos-workspace-overview__item {
    min-width:
      110px;
  }


  .manufactura-procesos-workspace-layout {
    position:
      relative;

    display:
      block;
  }


  .manufactura-procesos-workspace-nav {
    width:
      100%;

    height:
      auto;

    max-height:
      178px;

    border-right:
      0;

    border-bottom:
      1px
      solid
      var(
        --procesos-border
      );

    overflow:
      hidden;
  }


  .manufactura-procesos-workspace-nav__inner {
    height:
      auto;
  }


  .manufactura-procesos-workspace-nav__head {
    display:
      none;
  }


  .manufactura-procesos-workspace-nav__general {
    width:
      auto;

    min-width:
      118px;

    margin:
      6px 4px 6px 8px;

    display:
      inline-flex;

    vertical-align:
      top;
  }


  .manufactura-procesos-workspace-tree {
    min-height:
      auto;

    max-height:
      116px;

    padding:
      0 8px 6px;

    display:
      flex;

    align-items:
      flex-start;

    gap:
      5px;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scrollbar-width:
      none;
  }


  .manufactura-procesos-workspace-tree::-webkit-scrollbar {
    display:
      none;
  }


  .manufactura-procesos-workspace-tree-stage {
    min-width:
      170px;

    margin:
      0;

    flex:
      0 0 170px;
  }


  .manufactura-procesos-workspace-tree-stage__steps {
    display:
      none;
  }


  .manufactura-procesos-workspace-nav__footer {
    display:
      none;
  }


  .manufactura-procesos-workspace-main {
    height:
      calc(
        100% -
        178px
      );
  }


  .manufactura-procesos-workspace-editor {
    height:
      100%;

    padding:
      12px 10px 22px;
  }


  .manufactura-procesos-editor-section__head {
    flex-direction:
      column;
  }


  .manufactura-procesos-editor-section__actions {
    width:
      100%;
  }


  .manufactura-procesos-editor-section__actions
  .manufactura-procesos-btn.is-danger-soft {
    margin-left:
      auto;
  }


  .manufactura-procesos-form-grid,
  .manufactura-procesos-form-grid.is-4 {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-field.is-span-2 {
    grid-column:
      auto;
  }


  .manufactura-procesos-selected-entity {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-selected-entity__actions {
    width:
      100%;
  }


  .manufactura-procesos-selected-entity__actions
  .manufactura-procesos-btn:not(.is-icon) {
    flex:
      1 1 auto;
  }


  .manufactura-procesos-product-image-upload {
    align-items:
      flex-start;
  }


  .manufactura-procesos-stage-step-row {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-stage-step-row__actions {
    padding:
      5px 7px;

    border-top:
      1px
      solid
      var(
        --procesos-border-soft
      );

    border-left:
      0;

    justify-content:
      flex-end;
  }


  .manufactura-procesos-step-editor-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-step-editor-head__actions {
    width:
      100%;

    justify-content:
      flex-end;
  }
}


@media (
  max-width:
    520px
) {
  .manufactura-procesos-workspace-header__actions {
    padding-left:
      0;
  }


  .manufactura-procesos-workspace-header__actions
  .manufactura-procesos-btn {
    min-height:
      36px;

    flex:
      1 1 auto;
  }


  .manufactura-procesos-workspace-header__actions
  .manufactura-procesos-btn span {
    font-size:
      9px;
  }


  .manufactura-procesos-editor-card {
    padding:
      12px;
  }


  .manufactura-procesos-product-mode {
    width:
      100%;
  }


  .manufactura-procesos-product-mode__option {
    flex:
      1 1 0;
  }


  .manufactura-procesos-product-image-upload {
    flex-direction:
      column;
  }


  .manufactura-procesos-product-image-upload__actions {
    width:
      100%;
  }


  .manufactura-procesos-product-image-upload__actions
  .manufactura-procesos-btn {
    flex:
      1 1 auto;
  }


  .manufactura-procesos-stage-step-list__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-stage-step-list__head
  .manufactura-procesos-btn {
    width:
      100%;
  }


  .manufactura-procesos-step-tabs {
    margin-left:
      -2px;

    margin-right:
      -2px;
  }


  .manufactura-procesos-step-tab {
    min-height:
      32px;

    padding:
      0 8px;
  }
}


/* =========================================================
   FIN PARTE 2 DE 4
   ========================================================= *//* =========================================================
   PARTE 3 DE 4

   - Recursos
   - Insumos
   - Herramientas
   - Máquinas
   - Parámetros
   - Checklist
   - Calidad
   - Seguridad
   - Archivos
   - Dependencias
   - Buscador modal
   - Modales generales
   - Toasts
   ========================================================= */


/* =========================================================
   RESOURCE PANEL
   ========================================================= */

.manufactura-procesos-resource-panel {
  width:
    100%;

  min-width:
    0;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    12px;

  overflow:
    hidden;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );
}


.manufactura-procesos-resource-panel__head {
  min-height:
    62px;

  padding:
    11px 13px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-resource-panel__head > div {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.manufactura-procesos-resource-panel__icon {
  width:
    34px;

  height:
    34px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-resource-panel__icon svg {
  width:
    15px;

  height:
    15px;
}


.manufactura-procesos-resource-panel__head h3 {
  margin:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --procesos-text
    );

  font-size:
    12px;

  font-weight:
    820;
}


.manufactura-procesos-resource-panel__head h3 > strong {
  min-width:
    19px;

  height:
    19px;

  padding:
    0 5px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-muted
    );

  font-size:
    8px;

  font-weight:
    850;
}


.manufactura-procesos-resource-panel__head p {
  margin:
    3px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.35;
}


.manufactura-procesos-resource-panel__body {
  padding:
    10px;
}


/* =========================================================
   RESOURCE LIST
   ========================================================= */

.manufactura-procesos-resource-list {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.manufactura-procesos-resource-item {
  min-width:
    0;

  padding:
    11px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    10px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  background:
    var(
      --procesos-surface-soft
    );

  transition:
    border-color
      var(
        --procesos-transition
      ),
    background
      var(
        --procesos-transition
      );
}


.manufactura-procesos-resource-item:hover {
  border-color:
    var(
      --procesos-border
    );

  background:
    var(
      --procesos-surface-hover
    );
}


/* =========================================================
   RESOURCE SUMMARY
   ========================================================= */

.manufactura-procesos-resource-item__summary {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.manufactura-procesos-resource-item__avatar {
  width:
    34px;

  height:
    34px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-resource-item__avatar svg {
  width:
    15px;

  height:
    15px;
}


.manufactura-procesos-resource-item__summary > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-resource-item__summary strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    790;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-resource-item__summary span {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   RESOURCE FIELDS
   ========================================================= */

.manufactura-procesos-resource-item__fields {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.manufactura-procesos-resource-item__fields.is-tool {
  grid-template-columns:
    0.8fr
    1.5fr
    0.7fr;
}


.manufactura-procesos-mini-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.manufactura-procesos-mini-field.is-wide {
  grid-column:
    span 2;
}


.manufactura-procesos-mini-field input,
.manufactura-procesos-mini-field select {
  height:
    36px;

  padding:
    0 9px;

  font-size:
    10px;

  font-weight:
    650;
}


/* =========================================================
   RESOURCE TOGGLES
   ========================================================= */

.manufactura-procesos-resource-item__toggles {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-wrap:
    wrap;
}


/* =========================================================
   RESOURCE BOTTOM
   ========================================================= */

.manufactura-procesos-resource-item__bottom {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    end;

  gap:
    8px;
}


/* =========================================================
   RESOURCE EMPTY
   ========================================================= */

.manufactura-procesos-resource-empty {
  min-height:
    100px;

  padding:
    18px;

  border:
    1px
    dashed
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-resource-empty > svg {
  width:
    22px;

  height:
    22px;

  flex:
    0 0 auto;
}


.manufactura-procesos-resource-empty > div {
  min-width:
    0;
}


.manufactura-procesos-resource-empty strong {
  display:
    block;

  color:
    var(
      --procesos-text-secondary
    );

  font-size:
    10px;

  font-weight:
    790;
}


.manufactura-procesos-resource-empty p {
  margin:
    3px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.4;
}


/* =========================================================
   CONFIG LIST
   ========================================================= */

.manufactura-procesos-config-list {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.manufactura-procesos-config-item {
  min-width:
    0;

  padding:
    11px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    10px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-config-item__head {
  min-width:
    0;

  padding-bottom:
    8px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    )
    28px;

  align-items:
    center;

  gap:
    8px;
}


.manufactura-procesos-config-item__head > span {
  width:
    24px;

  height:
    24px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    8px;

  font-weight:
    850;
}


.manufactura-procesos-config-item__head > strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-config-item__head > button {
  width:
    28px;

  height:
    28px;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-danger
    );

  background:
    transparent;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-config-item__head > button:hover {
  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-config-item__head > button svg {
  width:
    13px;

  height:
    13px;
}


.manufactura-procesos-config-item__checks {
  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-wrap:
    wrap;
}


/* =========================================================
   CHECKLIST CONFIG
   ========================================================= */

.manufactura-procesos-checklist-config {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.manufactura-procesos-checklist-config__item {
  min-width:
    0;

  padding:
    9px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  display:
    grid;

  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    )
    28px;

  gap:
    8px;

  align-items:
    flex-start;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-checklist-config__number {
  width:
    28px;

  height:
    28px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    8px;

  font-weight:
    850;
}


.manufactura-procesos-checklist-config__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.manufactura-procesos-checklist-config__body > input {
  width:
    100%;

  height:
    36px;

  padding:
    0 10px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    8px;

  outline:
    none;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    10px;

  font-weight:
    650;
}


.manufactura-procesos-checklist-config__body > input:focus {
  border-color:
    var(
      --procesos-info
    );

  box-shadow:
    0 0 0 3px
    var(
      --procesos-focus
    );
}


.manufactura-procesos-checklist-config__body > div {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-wrap:
    wrap;
}


.manufactura-procesos-checklist-config__delete {
  width:
    28px;

  height:
    28px;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-danger
    );

  background:
    transparent;
}


.manufactura-procesos-checklist-config__delete:hover {
  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-checklist-config__delete svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   SEARCH MODAL BACKDROP
   ========================================================= */

.manufactura-procesos-modal-mount {
  position:
    relative;

  z-index:
    1;
}


.manufactura-procesos-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    11000;

  padding:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow-y:
    auto;

  background:
    rgba(
      3,
      7,
      18,
      0.64
    );

  backdrop-filter:
    blur(
      5px
    );

  animation:
    procesosBackdropIn
    150ms
    ease
    both;
}


.manufactura-procesos-modal-backdrop.is-execution {
  padding:
    0;

  align-items:
    stretch;

  justify-content:
    stretch;
}


/* =========================================================
   MODAL
   ========================================================= */

.manufactura-procesos-modal {
  width:
    min(
      560px,
      100%
    );

  max-height:
    calc(
      100dvh -
      36px
    );

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    14px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-lg
    );

  animation:
    procesosModalOpen
    180ms
    ease
    both;
}


.manufactura-procesos-modal.is-search {
  width:
    min(
      680px,
      100%
    );
}


.manufactura-procesos-modal.is-form {
  width:
    min(
      650px,
      100%
    );
}


.manufactura-procesos-modal.is-confirm {
  width:
    min(
      470px,
      100%
    );
}


/* =========================================================
   MODAL HEAD
   ========================================================= */

.manufactura-procesos-modal__head {
  min-height:
    64px;

  padding:
    12px 14px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-modal__head > div {
  min-width:
    0;
}


.manufactura-procesos-modal__head > div > span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.12em;
}


.manufactura-procesos-modal__head h3 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    15px;

  font-weight:
    830;

  letter-spacing:
    -0.02em;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.manufactura-procesos-modal__body {
  min-height:
    0;

  padding:
    14px;

  flex:
    1 1 auto;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.manufactura-procesos-modal__footer {
  min-height:
    60px;

  padding:
    10px 14px;

  border-top:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-surface-soft
    );
}


/* =========================================================
   CONFIRM MESSAGE
   ========================================================= */

.manufactura-procesos-confirm-message {
  margin:
    0;

  color:
    var(
      --procesos-text-secondary
    );

  font-size:
    12px;

  font-weight:
    620;

  line-height:
    1.55;
}


/* =========================================================
   SEARCH MODAL
   ========================================================= */

.manufactura-procesos-search.is-modal {
  display:
    block;

  margin-bottom:
    12px;
}


.manufactura-procesos-search.is-modal > input {
  height:
    44px;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.manufactura-procesos-search-results {
  min-height:
    250px;

  max-height:
    min(
      480px,
      55dvh
    );

  overflow-y:
    auto;

  scrollbar-width:
    thin;
}


.manufactura-procesos-search-empty {
  min-height:
    240px;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.manufactura-procesos-search-empty > svg {
  width:
    25px;

  height:
    25px;

  margin-bottom:
    8px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-search-empty > p {
  max-width:
    360px;

  margin:
    0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    10px;

  font-weight:
    620;

  line-height:
    1.4;
}


.manufactura-procesos-search-empty.is-error > svg {
  color:
    var(
      --procesos-danger
    );
}


.manufactura-procesos-search-result-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.manufactura-procesos-search-result {
  width:
    100%;

  min-width:
    0;

  min-height:
    58px;

  padding:
    7px 9px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    20px;

  align-items:
    center;

  gap:
    9px;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-soft
    );

  text-align:
    left;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-search-result:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  background:
    var(
      --procesos-surface-hover
    );

  transform:
    translateX(
      2px
    );
}


.manufactura-procesos-search-result > svg {
  width:
    14px;

  height:
    14px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-search-result__avatar {
  width:
    42px;

  height:
    42px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-search-result__avatar svg {
  width:
    17px;

  height:
    17px;
}


.manufactura-procesos-search-result__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-search-result__copy strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    790;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-search-result__copy small {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PROCESS REFERENCE
   ========================================================= */

.manufactura-procesos-process-reference {
  margin-bottom:
    14px;

  padding:
    10px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-process-reference > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.manufactura-procesos-process-reference small {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.manufactura-procesos-process-reference strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-process-reference span {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TOAST MOUNT
   ========================================================= */

.manufactura-procesos-toast-mount {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    20000;

  width:
    min(
      360px,
      calc(
        100vw -
        36px
      )
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    7px;

  pointer-events:
    none;
}


/* =========================================================
   TOAST
   ========================================================= */

.manufactura-procesos-toast {
  min-height:
    48px;

  padding:
    10px 12px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  display:
    grid;

  grid-template-columns:
    18px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    8px;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-lg
    );

  pointer-events:
    auto;

  animation:
    procesosToastIn
    200ms
    ease
    both;
}


.manufactura-procesos-toast > svg {
  width:
    17px;

  height:
    17px;
}


.manufactura-procesos-toast > span {
  min-width:
    0;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.35;
}


.manufactura-procesos-toast.is-success {
  border-color:
    var(
      --procesos-success-border
    );
}


.manufactura-procesos-toast.is-success > svg {
  color:
    var(
      --procesos-success
    );
}


.manufactura-procesos-toast.is-warning {
  border-color:
    var(
      --procesos-warning-border
    );
}


.manufactura-procesos-toast.is-warning > svg {
  color:
    var(
      --procesos-warning
    );
}


.manufactura-procesos-toast.is-error {
  border-color:
    var(
      --procesos-danger-border
    );
}


.manufactura-procesos-toast.is-error > svg {
  color:
    var(
      --procesos-danger
    );
}


/* =========================================================
   MODAL ANIMATIONS
   ========================================================= */

@keyframes procesosBackdropIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes procesosModalOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      )
      scale(
        0.985
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


@keyframes procesosToastIn {
  from {
    opacity:
      0;

    transform:
      translateX(
        12px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }
}


/* =========================================================
   RESPONSIVE · RESOURCES / MODALS
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .manufactura-procesos-resource-item__fields {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .manufactura-procesos-resource-item__fields.is-tool {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .manufactura-procesos-resource-item__fields.is-tool
  .is-span-2 {
    grid-column:
      1 /
      -1;
  }
}


@media (
  max-width:
    760px
) {
  .manufactura-procesos-resource-panel__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-resource-panel__head
  > .manufactura-procesos-btn {
    width:
      100%;
  }


  .manufactura-procesos-resource-item__fields,
  .manufactura-procesos-resource-item__fields.is-tool {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-mini-field.is-wide {
    grid-column:
      auto;
  }


  .manufactura-procesos-resource-item__bottom {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-resource-item__bottom
  .manufactura-procesos-btn.is-icon {
    width:
      100%;
  }


  .manufactura-procesos-config-item__checks {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }


  .manufactura-procesos-modal-backdrop {
    padding:
      10px;
  }


  .manufactura-procesos-modal {
    max-height:
      calc(
        100dvh -
        20px
      );

    border-radius:
      12px;
  }


  .manufactura-procesos-modal__footer {
    align-items:
      stretch;

    flex-direction:
      column-reverse;
  }


  .manufactura-procesos-modal__footer
  .manufactura-procesos-btn {
    width:
      100%;
  }


  .manufactura-procesos-search-results {
    max-height:
      55dvh;
  }
}


@media (
  max-width:
    520px
) {
  .manufactura-procesos-resource-panel__body {
    padding:
      7px;
  }


  .manufactura-procesos-resource-item {
    padding:
      9px;
  }


  .manufactura-procesos-resource-item__toggles {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }


  .manufactura-procesos-checklist-config__item {
    grid-template-columns:
      25px
      minmax(
        0,
        1fr
      );
  }


  .manufactura-procesos-checklist-config__number {
    width:
      25px;

    height:
      25px;
  }


  .manufactura-procesos-checklist-config__delete {
    grid-column:
      2;

    width:
      100%;

    margin-top:
      3px;

    border:
      1px
      solid
      var(
        --procesos-danger-border
      );

    background:
      var(
        --procesos-danger-bg
      );
  }


  .manufactura-procesos-search-result {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      )
      16px;
  }


  .manufactura-procesos-toast-mount {
    right:
      10px;

    bottom:
      10px;

    width:
      calc(
        100vw -
        20px
      );
  }
}


/* =========================================================
   FIN PARTE 3 DE 4
   ========================================================= *//* =========================================================
   PARTE 4 DE 4

   - Ejecuciones
   - Cards de ejecución
   - Progreso
   - Modal ejecución
   - Resumen ejecución
   - Pasos ejecución
   - Parámetros ejecución
   - Checklist ejecución
   - Calidad ejecución
   - Incidentes
   - Responsive final
   - Accesibilidad
   - Reduced motion
   ========================================================= */


/* =========================================================
   EXECUTION STATE FILTER
   ========================================================= */

.manufactura-procesos-execution-state-filter {
  position:
    relative;

  min-width:
    190px;

  flex:
    0 0 auto;
}


.manufactura-procesos-execution-state-filter > svg {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    14px;

  height:
    14px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --procesos-text-muted
    );

  pointer-events:
    none;
}


.manufactura-procesos-execution-state-filter > select {
  width:
    100%;

  height:
    42px;

  padding:
    0 36px
    0 34px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    10px;

  outline:
    none;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    11px;

  font-weight:
    700;

  transition:
    all
    var(
      --procesos-transition
    );
}


.manufactura-procesos-execution-state-filter > select:hover {
  border-color:
    var(
      --procesos-border-strong
    );
}


.manufactura-procesos-execution-state-filter > select:focus {
  border-color:
    var(
      --procesos-info
    );

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    0 0 0 3px
    var(
      --procesos-focus
    );
}


/* =========================================================
   EXECUTIONS LIST
   ========================================================= */

.manufactura-procesos-executions-list {
  width:
    100%;

  min-width:
    0;

  padding:
    14px;
}


.manufactura-procesos-execution-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


/* =========================================================
   EXECUTION CARD
   ========================================================= */

.manufactura-procesos-execution-card {
  min-width:
    0;

  padding:
    14px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    12px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );

  transition:
    border-color
      var(
        --procesos-transition
      ),
    transform
      var(
        --procesos-transition
      ),
    box-shadow
      var(
        --procesos-transition
      );
}


.manufactura-procesos-execution-card:hover {
  border-color:
    var(
      --procesos-border-strong
    );

  transform:
    translateY(
      -2px
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );
}


/* =========================================================
   EXECUTION CARD HEAD
   ========================================================= */

.manufactura-procesos-execution-card__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.manufactura-procesos-execution-card__head > div {
  min-width:
    0;
}


.manufactura-procesos-execution-card__head small {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.07em;
}


.manufactura-procesos-execution-card__head h3 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    14px;

  font-weight:
    830;

  letter-spacing:
    -0.02em;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-card__head p {
  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EXECUTION CARD META
   ========================================================= */

.manufactura-procesos-execution-card__meta {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  flex-wrap:
    wrap;
}


.manufactura-procesos-execution-card__meta > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.manufactura-procesos-execution-card__meta svg {
  width:
    12px;

  height:
    12px;
}


.manufactura-procesos-execution-card__meta strong {
  color:
    var(
      --procesos-text-secondary
    );

  font-weight:
    780;
}


/* =========================================================
   EXECUTION CARD PROGRESS
   ========================================================= */

.manufactura-procesos-execution-card__progress {
  padding:
    10px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-execution-card__progress > div:first-child {
  margin-bottom:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.manufactura-procesos-execution-card__progress span {
  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    700;
}


.manufactura-procesos-execution-card__progress strong {
  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    820;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.manufactura-procesos-progress {
  width:
    100%;

  height:
    6px;

  border-radius:
    999px;

  overflow:
    hidden;

  background:
    var(
      --procesos-surface-strong
    );
}


.manufactura-procesos-progress > span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --procesos-info
    );

  transition:
    width
    280ms
    ease;
}


/* =========================================================
   EXECUTION CARD STATS
   ========================================================= */

.manufactura-procesos-execution-card__stats {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;
}


.manufactura-procesos-execution-card__stats > span {
  min-width:
    0;

  padding:
    8px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    8px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-execution-card__stats small {
  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-card__stats strong {
  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    12px;

  font-weight:
    830;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EXECUTION CARD FOOTER
   ========================================================= */

.manufactura-procesos-execution-card__footer {
  padding-top:
    9px;

  border-top:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;
}


/* =========================================================
   EXECUTION MODAL
   ========================================================= */

.manufactura-procesos-modal.is-execution {
  width:
    100%;

  max-width:
    none;

  max-height:
    100dvh;

  height:
    100dvh;

  border:
    0;

  border-radius:
    0;

  box-shadow:
    none;
}


/* =========================================================
   EXECUTION MODAL HEAD
   ========================================================= */

.manufactura-procesos-execution-modal-head {
  min-height:
    74px;

  padding:
    11px 16px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );

  z-index:
    5;
}


.manufactura-procesos-execution-modal-head__left {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.manufactura-procesos-execution-modal-head__left > div {
  min-width:
    0;
}


.manufactura-procesos-execution-modal-head__left small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.manufactura-procesos-execution-modal-head__left h2 {
  margin:
    0;

  overflow:
    hidden;

  max-width:
    560px;

  color:
    var(
      --procesos-text
    );

  font-size:
    17px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-modal-head__left p {
  margin:
    3px 0 0;

  overflow:
    hidden;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    620;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-modal-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  flex:
    0 0 auto;
}


/* =========================================================
   EXECUTION DETAIL
   ========================================================= */

.manufactura-procesos-execution-detail {
  min-width:
    0;

  min-height:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    var(
      --procesos-bg
    );
}


/* =========================================================
   EXECUTION SUMMARY
   ========================================================= */

.manufactura-procesos-execution-summary {
  min-width:
    0;

  padding:
    10px 14px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;

  flex:
    0 0 auto;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-execution-summary > div {
  min-width:
    0;

  min-height:
    48px;

  padding:
    7px 8px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    8px;

  display:
    grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    );

  grid-template-rows:
    auto
    auto;

  align-items:
    center;

  column-gap:
    6px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-summary svg {
  grid-column:
    1;

  grid-row:
    1 /
    3;

  width:
    14px;

  height:
    14px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-execution-summary span {
  grid-column:
    2;

  grid-row:
    1;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    720;
}


.manufactura-procesos-execution-summary strong {
  grid-column:
    2;

  grid-row:
    2;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    810;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EXECUTION CONTENT
   ========================================================= */

.manufactura-procesos-execution-detail__content {
  min-width:
    0;

  min-height:
    0;

  padding:
    16px;

  flex:
    1 1 auto;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


/* =========================================================
   EXECUTION STEPS
   ========================================================= */

.manufactura-procesos-execution-steps,
.manufactura-procesos-execution-incidents {
  width:
    100%;

  max-width:
    1120px;

  margin:
    0 auto;
}


.manufactura-procesos-execution-incidents {
  margin-top:
    16px;
}


.manufactura-procesos-execution-steps__head {
  min-height:
    52px;

  padding:
    0 2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.manufactura-procesos-execution-steps__head > div > span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.1em;
}


.manufactura-procesos-execution-steps__head h3 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    15px;

  font-weight:
    830;

  line-height:
    1.2;
}


.manufactura-procesos-execution-steps__head > strong {
  min-width:
    27px;

  height:
    27px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );

  font-size:
    9px;

  font-weight:
    850;
}


.manufactura-procesos-execution-steps__list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}


/* =========================================================
   EXECUTION STEP
   ========================================================= */

.manufactura-procesos-execution-step {
  min-width:
    0;

  padding:
    12px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    11px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  background:
    var(
      --procesos-surface
    );

  box-shadow:
    var(
      --procesos-shadow-xs
    );
}


.manufactura-procesos-execution-step.is-completado {
  border-color:
    var(
      --procesos-success-border
    );
}


.manufactura-procesos-execution-step.is-en-proceso {
  border-color:
    var(
      --procesos-info-border
    );
}


.manufactura-procesos-execution-step.is-rechazado {
  border-color:
    var(
      --procesos-danger-border
    );
}


/* =========================================================
   EXECUTION STEP HEAD
   ========================================================= */

.manufactura-procesos-execution-step__head {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    flex-start;

  gap:
    9px;
}


.manufactura-procesos-execution-step__number {
  width:
    32px;

  height:
    32px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    9px;

  font-weight:
    850;
}


.manufactura-procesos-execution-step__copy {
  min-width:
    0;
}


.manufactura-procesos-execution-step__copy small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    750;
}


.manufactura-procesos-execution-step__copy h4 {
  margin:
    0;

  color:
    var(
      --procesos-text
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;
}


.manufactura-procesos-execution-step__copy p {
  margin:
    4px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.45;
}


/* =========================================================
   EXECUTION STEP STATE
   ========================================================= */

.manufactura-procesos-execution-step__state {
  min-height:
    23px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-muted
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    7px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-step__state.is-completado {
  border-color:
    var(
      --procesos-success-border
    );

  color:
    var(
      --procesos-success
    );

  background:
    var(
      --procesos-success-bg
    );
}


.manufactura-procesos-execution-step__state.is-en-proceso {
  border-color:
    var(
      --procesos-info-border
    );

  color:
    var(
      --procesos-info
    );

  background:
    var(
      --procesos-info-bg
    );
}


.manufactura-procesos-execution-step__state.is-rechazado {
  border-color:
    var(
      --procesos-danger-border
    );

  color:
    var(
      --procesos-danger
    );

  background:
    var(
      --procesos-danger-bg
    );
}


/* =========================================================
   EXECUTION STEP META
   ========================================================= */

.manufactura-procesos-execution-step__meta {
  padding:
    7px 8px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-wrap:
    wrap;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-execution-step__meta > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    650;
}


.manufactura-procesos-execution-step__meta svg {
  width:
    11px;

  height:
    11px;
}


/* =========================================================
   EXECUTION STEP BLOCK
   ========================================================= */

.manufactura-procesos-execution-step-block {
  padding:
    9px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    9px;

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-execution-step-block__head {
  margin-bottom:
    8px;

  padding-bottom:
    7px;

  border-bottom:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.manufactura-procesos-execution-step-block__head svg {
  width:
    13px;

  height:
    13px;

  color:
    var(
      --procesos-text-muted
    );
}


.manufactura-procesos-execution-step-block__head strong {
  color:
    var(
      --procesos-text-secondary
    );

  font-size:
    9px;

  font-weight:
    780;
}


/* =========================================================
   EXECUTION PARAMETER
   ========================================================= */

.manufactura-procesos-execution-parameter-list,
.manufactura-procesos-execution-check-list,
.manufactura-procesos-execution-control-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.manufactura-procesos-execution-parameter {
  min-width:
    0;

  min-height:
    42px;

  padding:
    6px 7px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-parameter > div:first-child {
  min-width:
    0;
}


.manufactura-procesos-execution-parameter strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    9px;

  font-weight:
    760;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-parameter small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    620;
}


/* =========================================================
   INLINE ACTION
   ========================================================= */

.manufactura-procesos-execution-inline-action {
  display:
    grid;

  grid-template-columns:
    minmax(
      90px,
      150px
    )
    30px;

  gap:
    5px;

  flex:
    0 0 auto;
}


.manufactura-procesos-execution-inline-action input,
.manufactura-procesos-execution-inline-action select {
  min-width:
    0;

  height:
    31px;

  padding:
    0 8px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  outline:
    none;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    8px;

  font-weight:
    650;
}


.manufactura-procesos-execution-inline-action input:focus,
.manufactura-procesos-execution-inline-action select:focus {
  border-color:
    var(
      --procesos-info
    );

  box-shadow:
    0 0 0 3px
    var(
      --procesos-focus
    );
}


.manufactura-procesos-execution-inline-action button {
  width:
    30px;

  height:
    31px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-inline-action button:hover {
  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-execution-inline-action button svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   EXECUTION CHECK
   ========================================================= */

.manufactura-procesos-execution-check {
  min-width:
    0;

  min-height:
    40px;

  padding:
    6px 7px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    7px;

  display:
    grid;

  grid-template-columns:
    16px
    minmax(
      0,
      1fr
    )
    30px;

  align-items:
    center;

  gap:
    7px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-check > input {
  width:
    14px;

  height:
    14px;

  margin:
    0;

  accent-color:
    var(
      --procesos-primary
    );
}


.manufactura-procesos-execution-check > span {
  min-width:
    0;
}


.manufactura-procesos-execution-check strong {
  display:
    block;

  color:
    var(
      --procesos-text
    );

  font-size:
    8px;

  font-weight:
    740;
}


.manufactura-procesos-execution-check small {
  display:
    block;

  margin-top:
    1px;

  color:
    var(
      --procesos-warning
    );

  font-size:
    7px;

  font-weight:
    700;
}


.manufactura-procesos-execution-check > button {
  width:
    30px;

  height:
    30px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );
}


.manufactura-procesos-execution-check > button:hover {
  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-execution-check > button svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   EXECUTION CONTROL
   ========================================================= */

.manufactura-procesos-execution-control {
  min-width:
    0;

  min-height:
    45px;

  padding:
    6px 7px;

  border:
    1px
    solid
    var(
      --procesos-border-soft
    );

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-control > div:first-child {
  min-width:
    0;
}


.manufactura-procesos-execution-control > div:first-child strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --procesos-text
    );

  font-size:
    8px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.manufactura-procesos-execution-control > div:first-child small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    620;
}


.manufactura-procesos-execution-control__form {
  display:
    grid;

  grid-template-columns:
    100px
    110px
    30px;

  gap:
    5px;

  flex:
    0 0 auto;
}


.manufactura-procesos-execution-control__form input,
.manufactura-procesos-execution-control__form select {
  min-width:
    0;

  height:
    31px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  outline:
    none;

  color:
    var(
      --procesos-text
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    8px;

  font-weight:
    650;
}


.manufactura-procesos-execution-control__form input:focus,
.manufactura-procesos-execution-control__form select:focus {
  border-color:
    var(
      --procesos-info
    );

  box-shadow:
    0 0 0 3px
    var(
      --procesos-focus
    );
}


.manufactura-procesos-execution-control__form button {
  width:
    30px;

  height:
    31px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-control__form button:hover {
  background:
    var(
      --procesos-surface-hover
    );
}


.manufactura-procesos-execution-control__form button svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   EXECUTION STEP ACTIONS
   ========================================================= */

.manufactura-procesos-execution-step__actions {
  padding-top:
    9px;

  border-top:
    1px
    solid
    var(
      --procesos-border-soft
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


/* =========================================================
   INCIDENTS
   ========================================================= */

.manufactura-procesos-execution-incidents__list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.manufactura-procesos-execution-incident {
  min-width:
    0;

  padding:
    10px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    9px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    );

  gap:
    9px;

  background:
    var(
      --procesos-surface
    );
}


.manufactura-procesos-execution-incident__level {
  min-height:
    23px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  align-self:
    flex-start;

  color:
    var(
      --procesos-text-secondary
    );

  background:
    var(
      --procesos-surface-soft
    );

  font-size:
    7px;

  font-weight:
    820;
}


.manufactura-procesos-execution-incident__level.is-bajo {
  border-color:
    var(
      --procesos-success-border
    );

  color:
    var(
      --procesos-success
    );

  background:
    var(
      --procesos-success-bg
    );
}


.manufactura-procesos-execution-incident__level.is-medio {
  border-color:
    var(
      --procesos-warning-border
    );

  color:
    var(
      --procesos-warning
    );

  background:
    var(
      --procesos-warning-bg
    );
}


.manufactura-procesos-execution-incident__level.is-alto,
.manufactura-procesos-execution-incident__level.is-critico {
  border-color:
    var(
      --procesos-danger-border
    );

  color:
    var(
      --procesos-danger
    );

  background:
    var(
      --procesos-danger-bg
    );
}


.manufactura-procesos-execution-incident > div {
  min-width:
    0;
}


.manufactura-procesos-execution-incident small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    7px;

  font-weight:
    750;
}


.manufactura-procesos-execution-incident strong {
  display:
    block;

  color:
    var(
      --procesos-text
    );

  font-size:
    10px;

  font-weight:
    790;
}


.manufactura-procesos-execution-incident p {
  margin:
    4px 0 0;

  color:
    var(
      --procesos-text-muted
    );

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.45;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.manufactura-procesos-page *,
.manufactura-procesos-workspace *,
.manufactura-procesos-modal * {
  scrollbar-color:
    var(
      --procesos-border-strong
    )
    transparent;
}


.manufactura-procesos-workspace-tree::-webkit-scrollbar,
.manufactura-procesos-workspace-editor::-webkit-scrollbar,
.manufactura-procesos-execution-detail__content::-webkit-scrollbar,
.manufactura-procesos-modal__body::-webkit-scrollbar,
.manufactura-procesos-search-results::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.manufactura-procesos-workspace-tree::-webkit-scrollbar-track,
.manufactura-procesos-workspace-editor::-webkit-scrollbar-track,
.manufactura-procesos-execution-detail__content::-webkit-scrollbar-track,
.manufactura-procesos-modal__body::-webkit-scrollbar-track,
.manufactura-procesos-search-results::-webkit-scrollbar-track {
  background:
    transparent;
}


.manufactura-procesos-workspace-tree::-webkit-scrollbar-thumb,
.manufactura-procesos-workspace-editor::-webkit-scrollbar-thumb,
.manufactura-procesos-execution-detail__content::-webkit-scrollbar-thumb,
.manufactura-procesos-modal__body::-webkit-scrollbar-thumb,
.manufactura-procesos-search-results::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius:
    999px;

  background:
    var(
      --procesos-border-strong
    );

  background-clip:
    padding-box;
}


/* =========================================================
   FOCUS VISIBLE
   ========================================================= */

.manufactura-procesos-page button:focus-visible,
.manufactura-procesos-workspace button:focus-visible,
.manufactura-procesos-modal button:focus-visible,
.manufactura-procesos-actions-menu button:focus-visible {
  outline:
    2px
    solid
    var(
      --procesos-info
    );

  outline-offset:
    2px;
}


/* =========================================================
   RESPONSIVE · EXECUTIONS
   ========================================================= */

@media (
  max-width:
    1180px
) {
  .manufactura-procesos-execution-grid {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-execution-summary {
    grid-template-columns:
      repeat(
        5,
        minmax(
          130px,
          1fr
        )
      );

    overflow-x:
      auto;

    scrollbar-width:
      thin;
  }
}


@media (
  max-width:
    900px
) {
  .manufactura-procesos-execution-modal-head {
    align-items:
      flex-start;
  }


  .manufactura-procesos-execution-modal-head__left h2 {
    max-width:
      44vw;
  }


  .manufactura-procesos-execution-control {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-execution-control__form {
    width:
      100%;

    grid-template-columns:
      1fr
      1fr
      32px;
  }
}


@media (
  max-width:
    760px
) {
  .manufactura-procesos-execution-state-filter {
    width:
      100%;

    min-width:
      0;
  }


  .manufactura-procesos-execution-modal-head {
    min-height:
      auto;

    padding:
      10px;

    flex-direction:
      column;

    gap:
      9px;
  }


  .manufactura-procesos-execution-modal-head__left {
    width:
      100%;
  }


  .manufactura-procesos-execution-modal-head__left > div {
    flex:
      1 1 auto;
  }


  .manufactura-procesos-execution-modal-head__left h2 {
    max-width:
      calc(
        100vw -
        80px
      );
  }


  .manufactura-procesos-execution-modal-head__actions {
    width:
      100%;

    justify-content:
      flex-start;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .manufactura-procesos-execution-modal-head__actions::-webkit-scrollbar {
    display:
      none;
  }


  .manufactura-procesos-execution-summary {
    padding:
      7px 10px;

    grid-template-columns:
      repeat(
        5,
        120px
      );
  }


  .manufactura-procesos-execution-summary > div {
    min-width:
      120px;
  }


  .manufactura-procesos-execution-detail__content {
    padding:
      12px 10px 22px;
  }


  .manufactura-procesos-execution-step__head {
    grid-template-columns:
      30px
      minmax(
        0,
        1fr
      );
  }


  .manufactura-procesos-execution-step__state {
    grid-column:
      2;

    justify-self:
      flex-start;
  }


  .manufactura-procesos-execution-parameter {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .manufactura-procesos-execution-inline-action {
    width:
      100%;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      32px;
  }


  .manufactura-procesos-execution-control__form {
    grid-template-columns:
      1fr
      1fr
      32px;
  }


  .manufactura-procesos-execution-step__actions
  .manufactura-procesos-btn {
    width:
      100%;
  }
}


@media (
  max-width:
    560px
) {
  .manufactura-procesos-execution-card {
    padding:
      11px;
  }


  .manufactura-procesos-execution-card__head {
    flex-direction:
      column;
  }


  .manufactura-procesos-execution-card__stats {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-execution-card__footer
  .manufactura-procesos-btn {
    width:
      100%;
  }


  .manufactura-procesos-execution-step {
    padding:
      9px;
  }


  .manufactura-procesos-execution-step__meta {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }


  .manufactura-procesos-execution-check {
    grid-template-columns:
      16px
      minmax(
        0,
        1fr
      );
  }


  .manufactura-procesos-execution-check > button {
    grid-column:
      2;

    width:
      100%;
  }


  .manufactura-procesos-execution-control__form {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-execution-control__form button {
    width:
      100%;
  }


  .manufactura-procesos-execution-incident {
    grid-template-columns:
      1fr;
  }


  .manufactura-procesos-execution-incident__level {
    justify-self:
      flex-start;
  }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    420px
) {
  .manufactura-procesos-page {
    padding-left:
      10px;

    padding-right:
      10px;
  }


  .manufactura-procesos-page-head__title-row h1 {
    font-size:
      24px;
  }


  .manufactura-procesos-main-tab {
    padding:
      0 9px;
  }


  .manufactura-procesos-main-tab > strong {
    display:
      none;
  }


  .manufactura-procesos-kpi-strip {
    gap:
      7px;
  }


  .manufactura-procesos-kpi {
    gap:
      8px;

    padding:
      9px;
  }


  .manufactura-procesos-kpi__icon {
    width:
      31px;

    height:
      31px;
  }


  .manufactura-procesos-kpi__content strong {
    font-size:
      15px;
  }


  .manufactura-procesos-toolbar {
    padding:
      10px;
  }


  .manufactura-procesos-list,
  .manufactura-procesos-executions-list {
    padding:
      10px;
  }


  .manufactura-procesos-process-card__actions {
    grid-template-columns:
      1fr
      1fr;
  }


  .manufactura-procesos-card-action.is-icon {
    width:
      100%;
  }


  .manufactura-procesos-workspace-header {
    padding:
      9px;
  }


  .manufactura-procesos-workspace-header__title h1 {
    font-size:
      14px;
  }


  .manufactura-procesos-workspace-overview {
    grid-template-columns:
      repeat(
        6,
        100px
      );
  }


  .manufactura-procesos-workspace-overview__item {
    min-width:
      100px;
  }


  .manufactura-procesos-workspace-tree-stage {
    min-width:
      150px;

    flex-basis:
      150px;
  }


  .manufactura-procesos-editor-section__head h2 {
    font-size:
      18px;
  }


  .manufactura-procesos-editor-card {
    padding:
      10px;
  }


  .manufactura-procesos-selected-entity__main {
    align-items:
      flex-start;
  }


  .manufactura-procesos-selected-entity__copy strong {
    white-space:
      normal;
  }


  .manufactura-procesos-resource-panel__head {
    padding:
      9px;
  }


  .manufactura-procesos-modal-backdrop {
    padding:
      6px;
  }


  .manufactura-procesos-modal {
    max-height:
      calc(
        100dvh -
        12px
      );

    border-radius:
      10px;
  }


  .manufactura-procesos-modal__head,
  .manufactura-procesos-modal__body,
  .manufactura-procesos-modal__footer {
    padding-left:
      10px;

    padding-right:
      10px;
  }


  .manufactura-procesos-execution-modal-head__actions
  .manufactura-procesos-btn {
    min-height:
      35px;

    padding:
      0 9px;
  }
}


/* =========================================================
   PREFERS REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .manufactura-procesos-page *,
  .manufactura-procesos-page *::before,
  .manufactura-procesos-page *::after,
  .manufactura-procesos-workspace *,
  .manufactura-procesos-workspace *::before,
  .manufactura-procesos-workspace *::after,
  .manufactura-procesos-modal *,
  .manufactura-procesos-modal *::before,
  .manufactura-procesos-modal *::after,
  .manufactura-procesos-actions-menu *,
  .manufactura-procesos-actions-menu *::before,
  .manufactura-procesos-actions-menu *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}


/* =========================================================
   FIN PARTE 4 DE 4
   ========================================================= *//* =========================================================
   FIX · MODALES SOBRE WORKSPACE
   ========================================================= */

.manufactura-procesos-modal-mount {
  position: static;
  z-index: auto;
}


#manufacturaProcesosModalMount,
#manufacturaProcesosSearchModalMount {
  position: static;
  z-index: auto;
}


#manufacturaProcesosModalMount
.manufactura-procesos-modal-backdrop,
#manufacturaProcesosSearchModalMount
.manufactura-procesos-modal-backdrop {
  position: fixed;
  inset: 0;

  z-index: 20000;

  display: flex;

  visibility: visible;

  opacity: 1;
}


#manufacturaProcesosSearchModalMount
.manufactura-procesos-modal-backdrop {
  z-index: 21000;
}


#manufacturaProcesosWorkspaceMount:not(:empty) {
  z-index: 9500;
}


.manufactura-procesos-actions-menu {
  z-index: 22000;
}


.manufactura-procesos-toast-mount {
  z-index: 23000;
}/* =========================================================
   FIX · WORKSPACE DENTRO DEL APP CONTENT
   NO QUEDA DEBAJO DEL TOPBAR
   ========================================================= */

body.manufactura-procesos-workspace-open {
  overflow: auto;
}


/* =========================================================
   MOUNT
   ========================================================= */

#manufacturaProcesosWorkspaceMount:not(:empty) {
  position: relative;

  inset: auto;

  z-index: 1;

  width: 100%;

  min-width: 0;

  height: auto;

  min-height: 0;

  overflow: visible;

  background:
    var(
      --procesos-bg
    );
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.manufactura-procesos-workspace {
  position: relative;

  width: 100%;

  min-width: 0;

  height: calc(
    100dvh -
    120px
  );

  min-height: 620px;

  max-height: none;

  overflow: hidden;

  border:
    1px
    solid
    var(
      --procesos-border
    );

  border-radius:
    14px;

  background:
    var(
      --procesos-bg
    );

  box-shadow:
    var(
      --procesos-shadow-sm
    );
}


/* =========================================================
   HEADER WORKSPACE
   ========================================================= */

.manufactura-procesos-workspace-header {
  position: relative;

  top: auto;

  z-index: 5;

  width: 100%;

  min-height: 74px;

  flex: 0 0 auto;
}


/* =========================================================
   BODY
   ========================================================= */

.manufactura-procesos-workspace-body {
  min-width: 0;

  min-height: 0;

  flex: 1 1 auto;

  overflow: hidden;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.manufactura-procesos-workspace-layout {
  min-width: 0;

  min-height: 0;

  flex: 1 1 auto;

  overflow: hidden;
}


/* =========================================================
   MAIN
   ========================================================= */

.manufactura-procesos-workspace-main {
  min-width: 0;

  min-height: 0;

  overflow: hidden;
}


/* =========================================================
   EDITOR
   ========================================================= */

.manufactura-procesos-workspace-editor {
  width: 100%;

  height: 100%;

  min-width: 0;

  min-height: 0;

  overflow-y: auto;

  overflow-x: hidden;
}


/* =========================================================
   MODALES SIGUEN SOBRE TODO
   ========================================================= */

#manufacturaProcesosModalMount
.manufactura-procesos-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 20000;
}


#manufacturaProcesosSearchModalMount
.manufactura-procesos-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 21000;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 900px
) {
  .manufactura-procesos-workspace {
    height: calc(
      100dvh -
      105px
    );

    min-height: 560px;

    border-radius: 12px;
  }
}


@media (
  max-width: 760px
) {
  .manufactura-procesos-workspace {
    height: calc(
      100dvh -
      95px
    );

    min-height: 520px;

    border-radius: 10px;
  }
}