/* ERP EMTEL v3.39 — mejoras focalizadas de Programas y Grupos. */

/* ---------- Administrador de tipos de programa ---------- */
.program-type-admin-shell-v339 {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 2.2fr);
  gap: 1.25rem;
  align-items: start;
  margin: 1rem 0 1.4rem;
}

.program-type-preview-v339 {
  position: sticky;
  top: 1rem;
  display: grid;
  justify-items: center;
  gap: .65rem;
  min-height: 230px;
  padding: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--program-type-color, var(--primary)) 35%, var(--border-color));
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--program-type-color, var(--primary)) 15%, transparent), transparent 56%),
    var(--bg-container);
  text-align: center;
}

.program-type-preview-icon-v339 {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid color-mix(in srgb, var(--program-type-color, var(--primary)) 38%, var(--border-color));
  border-radius: 22px;
  background: color-mix(in srgb, var(--program-type-color, var(--primary)) 12%, var(--bg-container));
  color: var(--program-type-color, var(--primary));
  box-shadow: 0 12px 25px color-mix(in srgb, var(--program-type-color, var(--primary)) 16%, transparent);
  transform: translateY(0) scale(1);
  transition:
    transform .4s cubic-bezier(.175, .885, .32, 1.275),
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease;
}

.program-type-preview-v339:hover .program-type-preview-icon-v339 {
  transform: translateY(-4px) scale(1.035);
}

.program-type-preview-icon-v339 .icon-svg {
  width: 38px;
  height: 38px;
}

.program-type-preview-v339 strong {
  font-size: 1.05rem;
  line-height: 1.3;
}

.program-type-preview-v339 small {
  color: var(--text-muted);
}

.program-type-status-preview-v339,
.status-select-v339 {
  --status-bg: color-mix(in srgb, var(--success, #16a34a) 13%, var(--bg-container));
  --status-color: var(--success, #16a34a);
  --status-border: color-mix(in srgb, var(--success, #16a34a) 35%, var(--border-color));
}

.program-type-status-preview-v339 {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .72rem;
  border: 1px solid var(--status-border);
  border-radius: 999px;
  background: var(--status-bg);
  color: var(--status-color);
  font-size: .75rem;
  font-weight: 800;
}

.program-type-status-preview-v339.is-inactive,
.status-select-v339.is-inactive {
  --status-bg: color-mix(in srgb, var(--danger, #dc2626) 12%, var(--bg-container));
  --status-color: var(--danger, #dc2626);
  --status-border: color-mix(in srgb, var(--danger, #dc2626) 35%, var(--border-color));
}

.status-select-v339 {
  border-color: var(--status-border) !important;
  background: var(--status-bg) !important;
  color: var(--status-color) !important;
  font-weight: 750;
}

.status-select-v339.is-active {
  border-color: var(--cat-green-border, #bbf7d0) !important;
  background: var(--cat-green-bg, #f0fdf4) !important;
  color: var(--cat-green-text, #16a34a) !important;
}

.status-select-v339.is-inactive {
  border-color: var(--cat-red-border, #fecaca) !important;
  background: var(--cat-red-bg, #fef2f2) !important;
  color: var(--cat-red-text, #dc2626) !important;
}

.program-type-editor-v339 {
  display: grid;
  gap: 1rem;
}

.program-type-fields-v339 {
  display: grid;
  grid-template-columns: minmax(220px, 1.65fr) 88px minmax(118px, .72fr) minmax(170px, 1fr);
  gap: 1rem;
  align-items: end;
}

.program-type-icon-section-v339 {
  display: grid;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-body);
}

.program-type-icon-section-v339 > strong {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.program-type-icon-grid-v339 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: .55rem;
  max-height: 228px;
  padding: .2rem;
  overflow: auto;
}

.program-type-icon-option-v339 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-container);
  color: var(--text-muted);
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition:
    transform .35s cubic-bezier(.175, .885, .32, 1.275),
    border-color .25s ease,
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.program-type-icon-option-v339:hover,
.program-type-icon-option-v339:focus-visible {
  z-index: 1;
  border-color: var(--program-type-color, var(--primary));
  color: var(--program-type-color, var(--primary));
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--program-type-color, var(--primary)) 13%, transparent);
  outline: 0;
}

.program-type-icon-option-v339.is-selected {
  border-color: var(--program-type-color, var(--primary));
  background: color-mix(in srgb, var(--program-type-color, var(--primary)) 12%, var(--bg-container));
  color: var(--program-type-color, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--program-type-color, var(--primary)) 14%, transparent);
}

.program-type-icon-option-v339 .icon-svg {
  width: 25px;
  height: 25px;
}

.program-type-icon-option-v339 span[role='tooltip'] {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.175, .885, .32, 1.275);
}

.program-type-icon-option-v339:hover span[role='tooltip'],
.program-type-icon-option-v339:focus-visible span[role='tooltip'] {
  opacity: 1;
  transform: translateY(0);
}

.program-type-form-actions-v339 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* ---------- Formulario de programa ---------- */
.program-identity-grid-v339 {
  display: grid;
  grid-template-columns: minmax(210px, 1.45fr) minmax(118px, .65fr) minmax(116px, .62fr) 78px minmax(106px, .58fr);
  gap: 1rem;
  align-items: end;
}

.program-type-select-shell-v339,
.program-name-prefix-shell-v339,
.platform-readonly-shell-v339 {
  display: flex;
  align-items: center;
  min-width: 0;
}

.program-type-select-shell-v339 {
  position: relative;
}

.program-type-select-shell-v339 select {
  width: 100%;
  padding-left: 2.85rem !important;
}

.program-inline-type-icon-v339 {
  position: absolute;
  z-index: 2;
  left: .9rem;
  display: grid;
  place-items: center;
  color: var(--program-accent-preview, var(--primary));
  pointer-events: none;
}

.program-inline-type-icon-v339 .icon-svg,
.program-name-type-icon-v339 .icon-svg {
  width: 19px;
  height: 19px;
}

.program-name-field-v339 {
  grid-column: 1 / -1;
}

.program-name-composer-v339 {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 44px;
}

.program-name-prefix-shell-v339 {
  gap: .48rem;
  padding: 0 .9rem;
  border-right: 1px solid var(--border-color);
  color: var(--program-accent-preview, var(--primary));
  white-space: nowrap;
}

.program-name-composer-v339 input {
  min-width: 0;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

.program-status-field-v339 select {
  min-width: 0;
}

/* ---------- Formulario de grupo ---------- */
.group-identity-main-row-v339 {
  display: grid;
  grid-template-columns: minmax(300px, 2.2fr) minmax(130px, .75fr) minmax(210px, 1.2fr);
  gap: 1rem;
  align-items: end;
}

.group-date-row-v339 {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(100px, .4fr);
  gap: 1rem;
  max-width: 520px;
  margin-top: 1rem;
}

.group-year-field-v339 {
  max-width: 150px;
}

.field-label-with-help-v339 {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.context-help-v339 {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: help;
  transform: translateY(0);
  transition:
    transform .35s cubic-bezier(.175, .885, .32, 1.275),
    color .25s ease,
    border-color .25s ease,
    background-color .25s ease;
}

.context-help-v339:hover,
.context-help-v339:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--bg-container));
  transform: translateY(-2px) scale(1.04);
  outline: 0;
}

.context-help-v339 .icon-svg {
  width: 13px;
  height: 13px;
}

.group-platform-inheritance-v339 {
  display: grid;
  grid-template-columns: minmax(230px, 1.1fr) minmax(250px, 1.25fr) minmax(210px, 1fr);
  gap: 1rem;
  align-items: end;
}

.group-platform-toggle-v339 {
  min-height: 42px;
  align-self: end;
}

.platform-readonly-shell-v339 {
  position: relative;
}

.platform-readonly-shell-v339 > [data-icon] {
  position: absolute;
  z-index: 2;
  left: .85rem;
  display: grid;
  place-items: center;
  color: var(--primary);
}

.platform-readonly-shell-v339 input {
  padding-left: 2.65rem !important;
  font-weight: 700;
}

.group-platform-block-v339 .conditional-fields {
  margin-top: 1rem;
}

.group-platform-block-v339 .conditional-fields.is-readonly-v339 input,
.group-platform-block-v339 .conditional-fields.is-readonly-v339 select {
  opacity: .82;
  cursor: not-allowed;
}

@media (max-width: 1050px) {
  .group-platform-inheritance-v339 {
    grid-template-columns: 1fr 1fr;
  }

  .group-platform-select-v339 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .program-type-admin-shell-v339 {
    grid-template-columns: 1fr;
  }

  .program-type-preview-v339 {
    position: relative;
    top: auto;
    min-height: 190px;
  }

  .program-type-fields-v339,
  .program-identity-grid-v339,
  .group-identity-main-row-v339,
  .group-platform-inheritance-v339 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-name-field-v339,
  .group-program-field-v339,
  .group-status-field-v339,
  .group-platform-toggle-v339,
  .group-platform-select-v339 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .program-type-fields-v339,
  .program-identity-grid-v339,
  .group-identity-main-row-v339,
  .group-date-row-v339,
  .group-platform-inheritance-v339 {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .program-name-composer-v339 {
    grid-template-columns: 1fr;
  }

  .program-name-prefix-shell-v339 {
    min-height: 40px;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .program-name-composer-v339 input {
    border-radius: 0 0 8px 8px !important;
  }

  .group-year-field-v339 {
    max-width: none;
  }

  .program-type-form-actions-v339 {
    display: grid;
    grid-template-columns: 1fr;
  }

  .program-type-form-actions-v339 .btn {
    justify-content: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .program-type-preview-icon-v339,
  .program-type-icon-option-v339,
  .program-type-icon-option-v339 span[role='tooltip'],
  .context-help-v339 {
    transition-duration: .01ms !important;
  }
}

/* Estado visual explícito: supera la capa global de campos de marca. */
#programConfigStatus.status-select-v339.is-active,
#programTypeStatus.status-select-v339.is-active {
  border-color: var(--cat-green-border, #bbf7d0) !important;
  background: var(--cat-green-bg, #f0fdf4) !important;
  color: var(--cat-green-text, #16a34a) !important;
}

#programConfigStatus.status-select-v339.is-inactive,
#programTypeStatus.status-select-v339.is-inactive {
  border-color: var(--cat-red-border, #fecaca) !important;
  background: var(--cat-red-bg, #fef2f2) !important;
  color: var(--cat-red-text, #dc2626) !important;
}

#programConfigStatus.status-select-v339.is-active,
#programTypeStatus.status-select-v339.is-active {
  background-image: none !important;
  background-color: var(--cat-green-bg, #f0fdf4) !important;
  box-shadow: inset 4px 0 0 var(--cat-green-text, #16a34a) !important;
}

#programConfigStatus.status-select-v339.is-inactive,
#programTypeStatus.status-select-v339.is-inactive {
  background-image: none !important;
  background-color: var(--cat-red-bg, #fef2f2) !important;
  box-shadow: inset 4px 0 0 var(--cat-red-text, #dc2626) !important;
}

.status-field-active-v339 > span:first-child,
.status-field-inactive-v339 > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}

.status-field-active-v339 > span:first-child::before,
.status-field-inactive-v339 > span:first-child::before {
  content: '';
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.status-field-active-v339 > span:first-child {
  color: var(--cat-green-text, #16a34a);
}
.status-field-active-v339 > span:first-child::before {
  background: var(--cat-green-text, #16a34a);
}
.status-field-inactive-v339 > span:first-child {
  color: var(--cat-red-text, #dc2626);
}
.status-field-inactive-v339 > span:first-child::before {
  background: var(--cat-red-text, #dc2626);
}