/* =========================================================
   WIRTZ HUB · MANUFACTURA · CANALES
   FRONTEND STYLES

   PARTE 1 DE 5

   CONTIENE:
   - Base de página.
   - Header.
   - Botones.
   - Métricas.
   - Toolbar.
   - Búsqueda.
   - Tabla principal.
   - Celdas de canal.
   - Estado.
   - Selección.
   - Paginación.
   ========================================================= */


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

[data-canales-page] {
  --canales-bg: #f6f7f9;
  --canales-surface: #ffffff;
  --canales-surface-soft: #f8f9fb;
  --canales-surface-hover: #f2f4f7;

  --canales-text: #17191d;
  --canales-text-soft: #555b66;
  --canales-text-muted: #818895;

  --canales-border: #e3e6eb;
  --canales-border-strong: #d4d8df;

  --canales-dark: #111214;
  --canales-dark-hover: #25272b;

  --canales-success: #16794a;
  --canales-success-bg: #eef8f2;

  --canales-warning: #9a6700;
  --canales-warning-bg: #fff7e5;

  --canales-danger: #c43838;
  --canales-danger-bg: #fff0f0;

  --canales-critical: #9e1f1f;
  --canales-critical-bg: #fceaea;

  --canales-excellent: #12613d;
  --canales-excellent-bg: #e9f7ef;

  --canales-radius-sm: 6px;
  --canales-radius-md: 10px;
  --canales-radius-lg: 14px;

  --canales-transition:
    140ms ease;
}


[data-theme="dark"] [data-canales-page],
html.dark [data-canales-page],
body.dark [data-canales-page] {
  --canales-bg: #08090a;
  --canales-surface: #101113;
  --canales-surface-soft: #15171a;
  --canales-surface-hover: #1b1d21;

  --canales-text: #f2f3f5;
  --canales-text-soft: #b8bdc7;
  --canales-text-muted: #858b96;

  --canales-border: #25282e;
  --canales-border-strong: #343840;

  --canales-dark: #f4f5f6;
  --canales-dark-hover: #ffffff;

  --canales-success: #71d39d;
  --canales-success-bg: #10261a;

  --canales-warning: #e7bc58;
  --canales-warning-bg: #2a220e;

  --canales-danger: #f17575;
  --canales-danger-bg: #2b1212;

  --canales-critical: #ff8989;
  --canales-critical-bg: #321313;

  --canales-excellent: #7be1a8;
  --canales-excellent-bg: #10281c;
}


.canales-page,
.canales-page *,
.canales-overlay-root,
.canales-overlay-root * {
  box-sizing: border-box;
}


.canales-page button,
.canales-page input,
.canales-page select,
.canales-page textarea,
.canales-overlay-root button,
.canales-overlay-root input,
.canales-overlay-root select,
.canales-overlay-root textarea {
  font: inherit;
}


.canales-page button,
.canales-overlay-root button {
  -webkit-tap-highlight-color: transparent;
}


.canales-page {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 22px 24px 28px;
  color: var(--canales-text);
  background: var(--canales-bg);
}


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

.canales-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-bottom: 22px;
}


.canales-page-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}


.canales-page-heading__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--canales-text);
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-page-heading__icon svg {
  width: 21px;
  height: 21px;
}


.canales-page-heading__eyebrow {
  margin: 0 0 4px;
  color: var(--canales-text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.canales-page-heading__title {
  margin: 0;
  color: var(--canales-text);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}


.canales-page-heading__description {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--canales-text-soft);
  font-size: 13px;
  line-height: 1.55;
}


.canales-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}


/* =========================================================
   BOTONES
   ========================================================= */

.canales-btn,
.canales-icon-btn,
.canales-action-btn,
.canales-pagination-btn,
.canales-search-clear,
.canales-sort-btn {
  appearance: none;
  border: 0;
  outline: 0;
}


.canales-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  color: var(--canales-text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
  transition:
    background var(--canales-transition),
    border-color var(--canales-transition),
    color var(--canales-transition),
    opacity var(--canales-transition);
}


.canales-btn:hover:not(:disabled) {
  background: var(--canales-surface-hover);
}


.canales-btn:focus-visible,
.canales-icon-btn:focus-visible,
.canales-action-btn:focus-visible,
.canales-pagination-btn:focus-visible,
.canales-search-clear:focus-visible,
.canales-sort-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


.canales-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


.canales-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}


.canales-btn--primary {
  color: #ffffff;
  border-color: var(--canales-dark);
  background: var(--canales-dark);
}


.canales-btn--primary:hover:not(:disabled) {
  color: #ffffff;
  border-color: var(--canales-dark-hover);
  background: var(--canales-dark-hover);
}


[data-theme="dark"] .canales-btn--primary,
html.dark .canales-btn--primary,
body.dark .canales-btn--primary {
  color: #111214;
}


[data-theme="dark"] .canales-btn--primary:hover:not(:disabled),
html.dark .canales-btn--primary:hover:not(:disabled),
body.dark .canales-btn--primary:hover:not(:disabled) {
  color: #111214;
}


.canales-btn--secondary {
  color: var(--canales-text);
  background: var(--canales-surface);
}


.canales-btn--ghost {
  color: var(--canales-text-soft);
  border-color: transparent;
  background: transparent;
}


.canales-btn--ghost:hover:not(:disabled) {
  color: var(--canales-text);
  border-color: var(--canales-border);
  background: var(--canales-surface-hover);
}


.canales-btn--danger {
  color: var(--canales-danger);
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 35%,
    var(--canales-border)
  );
  background: var(--canales-danger-bg);
}


.canales-btn--danger:hover:not(:disabled) {
  color: var(--canales-danger);
  border-color: var(--canales-danger);
  background: var(--canales-danger-bg);
}


.canales-btn--small {
  min-height: 32px;
  padding-inline: 10px;
  font-size: 11px;
}


.canales-btn--block {
  width: 100%;
}


.canales-btn__counter {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--canales-dark);
}


[data-theme="dark"] .canales-btn__counter,
html.dark .canales-btn__counter,
body.dark .canales-btn__counter {
  color: #111214;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.canales-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--canales-text-soft);
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
  transition:
    background var(--canales-transition),
    color var(--canales-transition),
    border-color var(--canales-transition);
}


.canales-icon-btn:hover:not(:disabled) {
  color: var(--canales-text);
  background: var(--canales-surface-hover);
}


.canales-icon-btn svg {
  width: 17px;
  height: 17px;
}


.canales-icon-btn--danger {
  color: var(--canales-danger);
}


/* =========================================================
   LOADING BUTTON
   ========================================================= */

.canales-btn.is-loading,
.canales-icon-btn.is-loading,
.canales-action-btn.is-loading {
  pointer-events: none;
  opacity: 0.65;
}


.canales-btn.is-loading svg,
.canales-icon-btn.is-loading svg,
.canales-action-btn.is-loading svg {
  animation: canales-spin 0.8s linear infinite;
}


@keyframes canales-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.canales-metrics {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 10px;
  width: 100%;
  margin-bottom: 18px;
}


.canales-metric-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 15px 16px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-metric-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}


.canales-metric-card__icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  color: var(--canales-text-soft);
}


.canales-metric-card__icon svg {
  width: 17px;
  height: 17px;
}


.canales-metric-card__label {
  min-width: 0;
  color: var(--canales-text-soft);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}


.canales-metric-card__value {
  margin-top: 10px;
  color: var(--canales-text);
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}


.canales-metric-card__detail {
  margin-top: 6px;
  color: var(--canales-text-muted);
  font-size: 10.5px;
  line-height: 1.35;
}


.canales-metric-card[data-tone="healthy"] {
  border-color: color-mix(
    in srgb,
    var(--canales-success) 28%,
    var(--canales-border)
  );
}


.canales-metric-card[data-tone="healthy"]
.canales-metric-card__icon,
.canales-metric-card[data-tone="healthy"]
.canales-metric-card__value {
  color: var(--canales-success);
}


.canales-metric-card[data-tone="warning"] {
  border-color: color-mix(
    in srgb,
    var(--canales-warning) 34%,
    var(--canales-border)
  );
}


.canales-metric-card[data-tone="warning"]
.canales-metric-card__icon,
.canales-metric-card[data-tone="warning"]
.canales-metric-card__value {
  color: var(--canales-warning);
}


.canales-metric-card[data-tone="loss"],
.canales-metric-card[data-tone="critical"] {
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 34%,
    var(--canales-border)
  );
}


.canales-metric-card[data-tone="loss"]
.canales-metric-card__icon,
.canales-metric-card[data-tone="loss"]
.canales-metric-card__value,
.canales-metric-card[data-tone="critical"]
.canales-metric-card__icon,
.canales-metric-card[data-tone="critical"]
.canales-metric-card__value {
  color: var(--canales-danger);
}


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

.canales-workspace {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-lg);
  background: var(--canales-surface);
  overflow: hidden;
}


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

.canales-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--canales-border);
}


.canales-toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(460px, 100%);
  min-width: 220px;
}


.canales-toolbar__search > svg {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--canales-text-muted);
  pointer-events: none;
}


.canales-search-input {
  width: 100%;
  height: 39px;
  padding: 0 40px 0 38px;
  color: var(--canales-text);
  font-size: 12px;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  outline: 0;
  background: var(--canales-surface);
  transition:
    border-color var(--canales-transition),
    background var(--canales-transition);
}


.canales-search-input::placeholder {
  color: var(--canales-text-muted);
}


.canales-search-input:hover {
  border-color: var(--canales-text-muted);
}


.canales-search-input:focus {
  border-color: var(--canales-text);
}


.canales-search-clear {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--canales-text-muted);
  border-radius: var(--canales-radius-sm);
  background: transparent;
  cursor: pointer;
}


.canales-search-clear:hover {
  color: var(--canales-text);
  background: var(--canales-surface-hover);
}


.canales-search-clear svg {
  width: 15px;
  height: 15px;
}


.canales-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}


/* =========================================================
   SELECTION BAR
   ========================================================= */

.canales-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--canales-text);
  border-bottom: 1px solid var(--canales-border);
  background: var(--canales-surface-soft);
}


.canales-selection-bar[hidden] {
  display: none;
}


.canales-selection-bar__summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--canales-text-soft);
  font-size: 12px;
}


.canales-selection-bar__summary svg {
  width: 17px;
  height: 17px;
}


.canales-selection-bar__summary strong {
  color: var(--canales-text);
  font-size: 13px;
}


.canales-selection-bar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}


/* =========================================================
   TABLE FRAME
   ========================================================= */

.canales-table-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 220px;
  background: var(--canales-surface);
}


.canales-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color:
    var(--canales-border-strong)
    transparent;
}


.canales-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


.canales-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}


.canales-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--canales-border-strong);
}


/* =========================================================
   TABLE
   ========================================================= */

.canales-table {
  width: 100%;
  min-width: 1480px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  color: var(--canales-text);
  background: var(--canales-surface);
}


.canales-table.is-loading {
  opacity: 0.58;
  pointer-events: none;
}


.canales-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}


.canales-table thead th {
  height: 44px;
  padding: 0 10px;
  color: var(--canales-text-soft);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--canales-border-strong);
  background: var(--canales-surface-soft);
}


.canales-th {
  white-space: nowrap;
}


.canales-th--selection {
  text-align: center !important;
}


.canales-th--actions {
  text-align: right !important;
}


.canales-th--channel {
  text-align: center !important;
}


.canales-channel-column-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  color: var(--canales-text-soft);
}


.canales-channel-column-heading svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}


.canales-channel-column-heading span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   SORT
   ========================================================= */

.canales-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 5px;
  margin-left: -5px;
  color: var(--canales-text-soft);
  font-size: inherit;
  font-weight: 800;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}


.canales-sort-btn:hover,
.canales-sort-btn.is-active {
  color: var(--canales-text);
  background: var(--canales-surface-hover);
}


.canales-sort-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}


.canales-sort-btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}


/* =========================================================
   TABLE BODY
   ========================================================= */

.canales-tr {
  transition:
    background var(--canales-transition);
}


.canales-tr:hover {
  background: var(--canales-surface-soft);
}


.canales-tr.is-selected {
  background: color-mix(
    in srgb,
    var(--canales-text) 4%,
    var(--canales-surface)
  );
}


.canales-td {
  height: 62px;
  padding: 8px 10px;
  color: var(--canales-text-soft);
  font-size: 11px;
  line-height: 1.35;
  vertical-align: middle;
  border-bottom: 1px solid var(--canales-border);
  background: transparent;
}


.canales-tr:last-child .canales-td {
  border-bottom: 0;
}


.canales-td strong {
  color: var(--canales-text);
  font-weight: 750;
}


.canales-td--number,
.canales-table-number {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}


.canales-td--selection {
  text-align: center;
}


.canales-td--actions {
  text-align: right;
}


.canales-td--product {
  overflow: hidden;
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.canales-product-link {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}


.canales-product-link:hover
.canales-product-link__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}


.canales-product-link__name {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-product-link__meta {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   CHANNEL CELL
   ========================================================= */

.canales-td--channel {
  padding: 6px 7px;
  text-align: center;
}


.canales-channel-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  color: var(--canales-text);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
  cursor: pointer;
  transition:
    border-color var(--canales-transition),
    background var(--canales-transition),
    color var(--canales-transition);
}


.canales-channel-cell:hover {
  border-color: var(--canales-border-strong);
  background: var(--canales-surface-hover);
}


.canales-channel-cell__price {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-channel-cell__margin {
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.1;
}


.canales-channel-cell--empty {
  color: var(--canales-text-soft);
  border-style: dashed;
  background: transparent;
}


.canales-channel-cell--empty:hover {
  color: var(--canales-text);
  border-style: solid;
}


.canales-channel-cell[data-tone="healthy"],
.canales-channel-cell[data-tone="excellent"] {
  border-color: color-mix(
    in srgb,
    var(--canales-success) 32%,
    var(--canales-border)
  );
  background: var(--canales-success-bg);
}


.canales-channel-cell[data-tone="warning"] {
  border-color: color-mix(
    in srgb,
    var(--canales-warning) 38%,
    var(--canales-border)
  );
  background: var(--canales-warning-bg);
}


.canales-channel-cell[data-tone="loss"],
.canales-channel-cell[data-tone="critical"] {
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 38%,
    var(--canales-border)
  );
  background: var(--canales-danger-bg);
}


.canales-channel-cell[data-tone="healthy"]
.canales-channel-cell__margin,
.canales-channel-cell[data-tone="excellent"]
.canales-channel-cell__margin {
  color: var(--canales-success);
}


.canales-channel-cell[data-tone="warning"]
.canales-channel-cell__margin {
  color: var(--canales-warning);
}


.canales-channel-cell[data-tone="loss"]
.canales-channel-cell__margin,
.canales-channel-cell[data-tone="critical"]
.canales-channel-cell__margin {
  color: var(--canales-danger);
}


/* =========================================================
   PERCENTAGE
   ========================================================= */

.canales-percentage {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 64px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}


.canales-percentage[data-tone="healthy"],
.canales-percentage[data-tone="excellent"] {
  color: var(--canales-success);
}


.canales-percentage[data-tone="warning"] {
  color: var(--canales-warning);
}


.canales-percentage[data-tone="loss"],
.canales-percentage[data-tone="critical"] {
  color: var(--canales-danger);
}


.canales-percentage[data-tone="neutral"] {
  color: var(--canales-text-muted);
}


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

.canales-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--canales-text-soft);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface-soft);
}


.canales-status__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}


.canales-status[data-tone="healthy"],
.canales-status[data-tone="excellent"] {
  color: var(--canales-success);
  border-color: color-mix(
    in srgb,
    var(--canales-success) 34%,
    var(--canales-border)
  );
  background: var(--canales-success-bg);
}


.canales-status[data-tone="warning"] {
  color: var(--canales-warning);
  border-color: color-mix(
    in srgb,
    var(--canales-warning) 35%,
    var(--canales-border)
  );
  background: var(--canales-warning-bg);
}


.canales-status[data-tone="loss"],
.canales-status[data-tone="critical"] {
  color: var(--canales-danger);
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 35%,
    var(--canales-border)
  );
  background: var(--canales-danger-bg);
}


/* =========================================================
   ACTION BUTTON
   ========================================================= */

.canales-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 31px;
  padding: 0 10px;
  color: var(--canales-text);
  font-size: 10px;
  font-weight: 750;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
}


.canales-action-btn:hover {
  background: var(--canales-surface-hover);
}


.canales-action-btn svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.canales-checkbox {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
}


.canales-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


.canales-checkbox__box {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--canales-border-strong);
  border-radius: 4px;
  background: var(--canales-surface);
  transition:
    background var(--canales-transition),
    border-color var(--canales-transition);
}


.canales-checkbox input:checked +
.canales-checkbox__box {
  border-color: var(--canales-dark);
  background: var(--canales-dark);
}


.canales-checkbox input:checked +
.canales-checkbox__box::after {
  width: 7px;
  height: 4px;
  content: "";
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translateY(-1px) rotate(-45deg);
}


[data-theme="dark"]
.canales-checkbox input:checked +
.canales-checkbox__box::after,
html.dark
.canales-checkbox input:checked +
.canales-checkbox__box::after,
body.dark
.canales-checkbox input:checked +
.canales-checkbox__box::after {
  border-color: #111214;
}


.canales-checkbox input:indeterminate +
.canales-checkbox__box {
  border-color: var(--canales-dark);
  background: var(--canales-dark);
}


.canales-checkbox input:indeterminate +
.canales-checkbox__box::after {
  width: 8px;
  height: 2px;
  content: "";
  background: #ffffff;
}


[data-theme="dark"]
.canales-checkbox input:indeterminate +
.canales-checkbox__box::after,
html.dark
.canales-checkbox input:indeterminate +
.canales-checkbox__box::after,
body.dark
.canales-checkbox input:indeterminate +
.canales-checkbox__box::after {
  background: #111214;
}


/* =========================================================
   TABLE LOADING
   ========================================================= */

.canales-table-loading {
  position: absolute;
  inset: 44px 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  color: var(--canales-text-soft);
  font-size: 12px;
  background: color-mix(
    in srgb,
    var(--canales-surface) 88%,
    transparent
  );
}


.canales-table-loading[hidden] {
  display: none;
}


.canales-table-loading__spinner,
.canales-modal-loading__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--canales-border-strong);
  border-top-color: var(--canales-text);
  border-radius: 50%;
  animation: canales-spin 0.8s linear infinite;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.canales-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-height: 280px;
  padding: 48px 24px;
  text-align: center;
}


.canales-empty-state[hidden] {
  display: none;
}


.canales-empty-state__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  color: var(--canales-text-muted);
  border: 1px solid var(--canales-border);
  border-radius: 50%;
  background: var(--canales-surface-soft);
}


.canales-empty-state__icon svg {
  width: 21px;
  height: 21px;
}


.canales-empty-state__title {
  color: var(--canales-text);
  font-size: 15px;
  font-weight: 800;
}


.canales-empty-state__description {
  max-width: 460px;
  margin-bottom: 5px;
  color: var(--canales-text-muted);
  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   FOOTER TABLE
   ========================================================= */

.canales-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 12px;
  border-top: 1px solid var(--canales-border);
  background: var(--canales-surface);
}


.canales-table-footer__summary {
  color: var(--canales-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}


.canales-table-footer__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}


/* =========================================================
   PAGE SIZE
   ========================================================= */

.canales-page-size {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--canales-text-muted);
  font-size: 10.5px;
}


.canales-select {
  height: 32px;
  padding: 0 28px 0 9px;
  color: var(--canales-text);
  font-size: 10.5px;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  outline: 0;
  background: var(--canales-surface);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.canales-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}


.canales-pagination-btn {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  color: var(--canales-text-soft);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
}


.canales-pagination-btn:hover:not(:disabled) {
  color: var(--canales-text);
  border-color: var(--canales-border-strong);
  background: var(--canales-surface-hover);
}


.canales-pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


.canales-pagination-btn svg {
  width: 14px;
  height: 14px;
}


.canales-pagination__label {
  padding-inline: 6px;
  color: var(--canales-text-muted);
  font-size: 10.5px;
  white-space: nowrap;
}


.canales-pagination__label strong {
  color: var(--canales-text);
  font-weight: 800;
}


/* =========================================================
   SKELETON
   ========================================================= */

.canales-skeleton-card {
  overflow: hidden;
}


.canales-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: var(--canales-surface-hover);
}


.canales-skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(
      in srgb,
      var(--canales-text) 6%,
      transparent
    ),
    transparent
  );
  transform: translateX(-100%);
  animation:
    canales-skeleton 1.4s ease-in-out infinite;
}


.canales-skeleton--label {
  width: 42%;
  height: 10px;
}


.canales-skeleton--value {
  width: 58%;
  height: 24px;
  margin-top: 14px;
}


.canales-skeleton--small {
  width: 72%;
  height: 8px;
  margin-top: 10px;
}


.canales-skeleton-row td {
  padding: 9px 10px;
}


.canales-skeleton--row {
  width: 100%;
  height: 42px;
}


@keyframes canales-skeleton {
  to {
    transform: translateX(100%);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1280px
) {
  .canales-metrics {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-page-header {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-page-header__actions {
    justify-content: flex-start;
  }


  .canales-toolbar {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-toolbar__search {
    width: 100%;
  }


  .canales-toolbar__actions {
    justify-content: flex-start;
  }
}


@media (
  max-width: 760px
) {
  .canales-page {
    padding: 16px 12px 22px;
  }


  .canales-page-heading {
    gap: 10px;
  }


  .canales-page-heading__icon {
    width: 38px;
    height: 38px;
  }


  .canales-page-heading__title {
    font-size: 24px;
  }


  .canales-page-header__actions {
    display: grid;
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-page-header__actions
  .canales-btn {
    width: 100%;
  }


  .canales-metrics {
    grid-template-columns: 1fr;
  }


  .canales-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-toolbar__actions
  .canales-btn {
    width: 100%;
  }


  .canales-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-selection-bar__actions {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-table-footer {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-table-footer__controls {
    justify-content: space-between;
    width: 100%;
  }
}/* =========================================================
   WIRTZ HUB · MANUFACTURA · CANALES
   FRONTEND STYLES

   PARTE 2 DE 5

   CONTIENE:
   - Modal base.
   - Overlay.
   - Headers de modal.
   - Formularios.
   - Inputs.
   - Switches.
   - Filtros.
   - Columnas.
   - Exportar / Importar.
   - Estados vacíos.
   - Confirmaciones.
   - Toasts.
   ========================================================= */


/* =========================================================
   OVERLAY ROOT
   ========================================================= */

.canales-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


body.canales-modal-open {
  overflow: hidden;
}


/* =========================================================
   MODAL LAYER
   ========================================================= */

.canales-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: auto;
}


.canales-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(
    0,
    0,
    0,
    0.64
  );
}


/* =========================================================
   MODAL
   ========================================================= */

.canales-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(
    720px,
    calc(100vw - 48px)
  );
  max-height: calc(
    100vh - 48px
  );
  color: var(--canales-text);
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-lg);
  background: var(--canales-surface);
  overflow: hidden;
}


.canales-modal--sm {
  width: min(
    480px,
    calc(100vw - 48px)
  );
}


.canales-modal--md {
  width: min(
    680px,
    calc(100vw - 48px)
  );
}


.canales-modal--lg {
  width: min(
    940px,
    calc(100vw - 48px)
  );
}


.canales-modal--xl {
  width: min(
    1240px,
    calc(100vw - 48px)
  );
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.canales-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--canales-border);
  background: var(--canales-surface);
}


.canales-modal__heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}


.canales-modal__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--canales-text);
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-modal__icon svg {
  width: 18px;
  height: 18px;
}


.canales-modal__heading > div {
  min-width: 0;
}


.canales-modal__title {
  margin: 0;
  color: var(--canales-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


.canales-modal__subtitle {
  margin: 5px 0 0;
  max-width: 760px;
  color: var(--canales-text-muted);
  font-size: 11px;
  line-height: 1.45;
}


.canales-modal__close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--canales-text-muted);
  border: 1px solid transparent;
  border-radius: var(--canales-radius-sm);
  background: transparent;
  cursor: pointer;
}


.canales-modal__close:hover {
  color: var(--canales-text);
  border-color: var(--canales-border);
  background: var(--canales-surface-hover);
}


.canales-modal__close svg {
  width: 17px;
  height: 17px;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.canales-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color:
    var(--canales-border-strong)
    transparent;
}


.canales-modal__body::-webkit-scrollbar {
  width: 8px;
}


.canales-modal__body::-webkit-scrollbar-track {
  background: transparent;
}


.canales-modal__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--canales-border-strong);
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.canales-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 64px;
  padding: 12px 18px;
  border-top: 1px solid var(--canales-border);
  background: var(--canales-surface);
}


/* =========================================================
   MODAL LOADING
   ========================================================= */

.canales-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  color: var(--canales-text-soft);
}


.canales-modal-loading > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.canales-modal-loading strong {
  color: var(--canales-text);
  font-size: 13px;
  font-weight: 800;
}


.canales-modal-loading span {
  color: var(--canales-text-muted);
  font-size: 11px;
}


/* =========================================================
   FORM
   ========================================================= */

.canales-price-form,
.canales-variable-editor,
.canales-rule-editor,
.canales-simulator,
.canales-bulk-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.canales-form-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 14px;
}


.canales-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}


.canales-field__label {
  color: var(--canales-text-soft);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}


.canales-field__help {
  color: var(--canales-text-muted);
  font-size: 9.5px;
  line-height: 1.4;
}


/* =========================================================
   INPUTS
   ========================================================= */

.canales-input,
.canales-textarea {
  width: 100%;
  color: var(--canales-text);
  font-size: 11.5px;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  outline: 0;
  background: var(--canales-surface);
  transition:
    border-color var(--canales-transition),
    background var(--canales-transition);
}


.canales-input {
  height: 38px;
  padding: 0 10px;
}


.canales-textarea {
  min-height: 78px;
  padding: 9px 10px;
  line-height: 1.5;
  resize: vertical;
}


.canales-input:hover,
.canales-textarea:hover {
  border-color: var(--canales-text-muted);
}


.canales-input:focus,
.canales-textarea:focus {
  border-color: var(--canales-text);
}


.canales-input::placeholder,
.canales-textarea::placeholder {
  color: var(--canales-text-muted);
}


.canales-input:disabled,
.canales-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--canales-surface-soft);
}


/* =========================================================
   SELECTS
   ========================================================= */

select.canales-input,
.canales-select {
  appearance: none;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--canales-text-muted) 50%
    ),
    linear-gradient(
      135deg,
      var(--canales-text-muted) 50%,
      transparent 50%
    );
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}


select.canales-input {
  padding-right: 30px;
}


/* =========================================================
   INPUT GROUP
   ========================================================= */

.canales-input-group {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}


.canales-input-group .canales-input {
  flex: 1 1 auto;
}


.canales-input-group__prefix,
.canales-input-group__suffix {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--canales-text-muted);
  font-size: 10px;
  font-weight: 750;
  pointer-events: none;
}


.canales-input-group__prefix {
  left: 10px;
}


.canales-input-group__suffix {
  right: 10px;
}


.canales-input-group__prefix +
.canales-input {
  padding-left: 25px;
}


.canales-input-group .canales-input:has(
  + .canales-input-group__suffix
) {
  padding-right: 26px;
}


/* =========================================================
   FORM SECTION
   ========================================================= */

.canales-form-section {
  padding: 16px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-form-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}


.canales-form-section__heading span {
  display: block;
  margin-bottom: 3px;
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.canales-form-section__heading h3 {
  margin: 0;
  color: var(--canales-text);
  font-size: 14px;
  font-weight: 800;
}


/* =========================================================
   FORM CONTEXT
   ========================================================= */

.canales-form-context,
.canales-simulator__context {
  display: grid;
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
  gap: 10px;
}


.canales-form-context > div,
.canales-simulator__context > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-form-context span,
.canales-simulator__context span {
  color: var(--canales-text-muted);
  font-size: 9.5px;
  font-weight: 750;
}


.canales-form-context strong,
.canales-simulator__context strong {
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-form-context small,
.canales-simulator__context small {
  color: var(--canales-text-muted);
  font-size: 9px;
}


/* =========================================================
   SWITCHES
   ========================================================= */

.canales-form-switches {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 9px;
}


.canales-switch-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
}


.canales-switch-row:hover {
  border-color: var(--canales-border-strong);
  background: var(--canales-surface-hover);
}


.canales-switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


.canales-switch-row__control {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  margin-top: 1px;
  border: 1px solid var(--canales-border-strong);
  border-radius: 999px;
  background: var(--canales-surface-hover);
  transition:
    background var(--canales-transition),
    border-color var(--canales-transition);
}


.canales-switch-row__control::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  content: "";
  border-radius: 50%;
  background: var(--canales-text-muted);
  transition:
    left var(--canales-transition),
    background var(--canales-transition);
}


.canales-switch-row input:checked +
.canales-switch-row__control {
  border-color: var(--canales-dark);
  background: var(--canales-dark);
}


.canales-switch-row input:checked +
.canales-switch-row__control::after {
  left: 15px;
  background: #ffffff;
}


[data-theme="dark"]
.canales-switch-row input:checked +
.canales-switch-row__control::after,
html.dark
.canales-switch-row input:checked +
.canales-switch-row__control::after,
body.dark
.canales-switch-row input:checked +
.canales-switch-row__control::after {
  background: #111214;
}


.canales-switch-row > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}


.canales-switch-row strong {
  color: var(--canales-text);
  font-size: 10.5px;
  font-weight: 800;
}


.canales-switch-row small {
  color: var(--canales-text-muted);
  font-size: 9px;
  line-height: 1.35;
}


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

.canales-filter-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 14px;
}


.canales-filter-grid__separator {
  grid-column: 1 / -1;
  height: 1px;
  margin: 2px 0;
  background: var(--canales-border);
}


/* =========================================================
   COLUMNS PANEL
   ========================================================= */

.canales-columns-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.canales-columns-panel__header p {
  margin: 0;
  color: var(--canales-text-soft);
  font-size: 11px;
  line-height: 1.5;
}


.canales-columns-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 8px;
}


/* =========================================================
   CHECK ROW
   ========================================================= */

.canales-check-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
}


.canales-check-row:hover {
  border-color: var(--canales-border-strong);
  background: var(--canales-surface-hover);
}


.canales-check-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


.canales-check-row__control {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--canales-border-strong);
  border-radius: 4px;
  background: var(--canales-surface);
}


.canales-check-row input:checked +
.canales-check-row__control {
  border-color: var(--canales-dark);
  background: var(--canales-dark);
}


.canales-check-row input:checked +
.canales-check-row__control::after {
  width: 7px;
  height: 4px;
  content: "";
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translateY(-1px) rotate(-45deg);
}


[data-theme="dark"]
.canales-check-row input:checked +
.canales-check-row__control::after,
html.dark
.canales-check-row input:checked +
.canales-check-row__control::after,
body.dark
.canales-check-row input:checked +
.canales-check-row__control::after {
  border-color: #111214;
}


.canales-check-row__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}


.canales-check-row__content strong {
  color: var(--canales-text);
  font-size: 10.5px;
  font-weight: 800;
}


.canales-check-row__content small {
  color: var(--canales-text-muted);
  font-size: 9px;
}


/* =========================================================
   COLUMNS DENSITY
   ========================================================= */

.canales-columns-density {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--canales-border);
}


.canales-columns-density strong {
  display: block;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
}


.canales-columns-density p {
  margin: 4px 0 0;
  color: var(--canales-text-muted);
  font-size: 9.5px;
}


/* =========================================================
   SEGMENTED
   ========================================================= */

.canales-segmented {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-segmented__btn {
  min-height: 29px;
  padding: 0 10px;
  color: var(--canales-text-muted);
  font-size: 10px;
  font-weight: 750;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}


.canales-segmented__btn:hover {
  color: var(--canales-text);
}


.canales-segmented__btn.is-active {
  color: var(--canales-text);
  background: var(--canales-surface);
  border: 1px solid var(--canales-border);
}


/* =========================================================
   ACTION CHOICES
   ========================================================= */

.canales-action-choice-grid {
  display: grid;
  gap: 9px;
}


.canales-action-choice {
  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 66px;
  padding: 11px 12px;
  color: var(--canales-text);
  text-align: left;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
  cursor: pointer;
  transition:
    border-color var(--canales-transition),
    background var(--canales-transition);
}


.canales-action-choice:hover {
  border-color: var(--canales-border-strong);
  background: var(--canales-surface-hover);
}


.canales-action-choice__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--canales-text-soft);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-action-choice__icon svg {
  width: 17px;
  height: 17px;
}


.canales-action-choice__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}


.canales-action-choice__content strong {
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
}


.canales-action-choice__content small {
  color: var(--canales-text-muted);
  font-size: 9.5px;
  line-height: 1.4;
}


.canales-action-choice__arrow {
  width: 16px;
  height: 16px;
  color: var(--canales-text-muted);
}


/* =========================================================
   INFO BOX
   ========================================================= */

.canales-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  color: var(--canales-text-soft);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-info-box > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--canales-text-muted);
}


.canales-info-box strong {
  display: block;
  margin-bottom: 3px;
  color: var(--canales-text);
  font-size: 10.5px;
  font-weight: 800;
}


.canales-info-box p {
  margin: 0;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  line-height: 1.5;
}


/* =========================================================
   IMPORT PANEL
   ========================================================= */

.canales-import-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* =========================================================
   UPLOAD
   ========================================================= */

.canales-upload-zone {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 22px 16px;
  text-align: center;
  border: 1px dashed var(--canales-border-strong);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-upload-zone__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
  cursor: pointer;
}


.canales-upload-zone__button:hover {
  background: var(--canales-surface-hover);
}


.canales-upload-zone__button svg {
  width: 16px;
  height: 16px;
}


.canales-upload-zone__filename {
  max-width: 100%;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.canales-empty-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 58px;
  padding: 12px 13px;
  color: var(--canales-text-muted);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-empty-inline > svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}


.canales-empty-inline strong {
  display: block;
  margin-bottom: 3px;
  color: var(--canales-text);
  font-size: 10.5px;
}


.canales-empty-inline p {
  margin: 0;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  line-height: 1.45;
}


/* =========================================================
   ERROR STATE
   ========================================================= */

.canales-error-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 220px;
  padding: 32px 18px;
  color: var(--canales-text-muted);
  text-align: center;
}


.canales-error-state > svg {
  width: 27px;
  height: 27px;
  color: var(--canales-danger);
}


.canales-error-state strong {
  color: var(--canales-text);
  font-size: 13px;
}


.canales-error-state p {
  max-width: 520px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
}


/* =========================================================
   CONFIRM
   ========================================================= */

.canales-confirm {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 6px 0;
}


.canales-confirm__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--canales-warning);
  border: 1px solid color-mix(
    in srgb,
    var(--canales-warning) 28%,
    var(--canales-border)
  );
  border-radius: 50%;
  background: var(--canales-warning-bg);
}


.canales-confirm__icon svg {
  width: 18px;
  height: 18px;
}


.canales-confirm strong {
  display: block;
  margin: 2px 0 5px;
  color: var(--canales-text);
  font-size: 12px;
  font-weight: 800;
}


.canales-confirm p {
  margin: 0;
  color: var(--canales-text-muted);
  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   TOAST
   ========================================================= */

.canales-toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 15000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(
    360px,
    calc(100vw - 36px)
  );
  pointer-events: none;
}


.canales-toast {
  display: grid;
  grid-template-columns:
    28px
    minmax(0, 1fr)
    28px;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 9px 10px;
  color: var(--canales-text);
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
  pointer-events: auto;
}


.canales-toast__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--canales-text-soft);
  border-radius: 50%;
  background: var(--canales-surface-soft);
}


.canales-toast__icon svg {
  width: 15px;
  height: 15px;
}


.canales-toast__text {
  min-width: 0;
  color: var(--canales-text);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.4;
}


.canales-toast__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--canales-text-muted);
  border: 0;
  border-radius: var(--canales-radius-sm);
  background: transparent;
  cursor: pointer;
}


.canales-toast__close:hover {
  color: var(--canales-text);
  background: var(--canales-surface-hover);
}


.canales-toast__close svg {
  width: 14px;
  height: 14px;
}


.canales-toast--success {
  border-color: color-mix(
    in srgb,
    var(--canales-success) 35%,
    var(--canales-border)
  );
}


.canales-toast--success
.canales-toast__icon {
  color: var(--canales-success);
  background: var(--canales-success-bg);
}


.canales-toast--error {
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 35%,
    var(--canales-border)
  );
}


.canales-toast--error
.canales-toast__icon {
  color: var(--canales-danger);
  background: var(--canales-danger-bg);
}


/* =========================================================
   FATAL ERROR
   ========================================================= */

.canales-fatal-error {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 760px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-lg);
  background: var(--canales-surface);
}


.canales-fatal-error__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--canales-danger);
  border: 1px solid color-mix(
    in srgb,
    var(--canales-danger) 30%,
    var(--canales-border)
  );
  border-radius: 50%;
  background: var(--canales-danger-bg);
}


.canales-fatal-error__icon svg {
  width: 20px;
  height: 20px;
}


.canales-fatal-error__content span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.canales-fatal-error__content h1 {
  margin: 0;
  color: var(--canales-text);
  font-size: 20px;
  font-weight: 800;
}


.canales-fatal-error__content p {
  margin: 8px 0 14px;
  color: var(--canales-text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 760px
) {
  .canales-modal-layer {
    padding: 10px;
  }


  .canales-modal,
  .canales-modal--sm,
  .canales-modal--md,
  .canales-modal--lg,
  .canales-modal--xl {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 10px;
  }


  .canales-modal__header {
    min-height: 64px;
    padding: 13px 14px;
  }


  .canales-modal__body {
    padding: 14px;
  }


  .canales-modal__footer {
    padding: 10px 14px;
  }


  .canales-form-grid,
  .canales-filter-grid,
  .canales-columns-grid,
  .canales-form-switches {
    grid-template-columns: 1fr;
  }


  .canales-form-context,
  .canales-simulator__context {
    grid-template-columns: 1fr;
  }


  .canales-columns-density {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-segmented {
    width: 100%;
  }


  .canales-segmented__btn {
    flex: 1 1 0;
  }


  .canales-modal__footer {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-modal__footer
  .canales-btn {
    width: 100%;
  }
}/* =========================================================
   WIRTZ HUB · MANUFACTURA · CANALES
   FRONTEND STYLES

   PARTE 3 DE 5

   CONTIENE:
   - Producto detalle.
   - Hero producto.
   - KPIs.
   - Cards de canal.
   - Detalle de precio.
   - Resumen financiero.
   - Breakdown.
   - Objetivos.
   - Preview.
   - Simulador.
   ========================================================= */


/* =========================================================
   PRODUCT DETAIL
   ========================================================= */

.canales-product-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* =========================================================
   PRODUCT HERO
   ========================================================= */

.canales-product-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-product-hero__identity {
  min-width: 0;
}


.canales-product-hero__code {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 7px;
  padding: 0 8px;
  color: var(--canales-text-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface);
}


.canales-product-hero h3 {
  margin: 0;
  color: var(--canales-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}


.canales-product-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}


.canales-product-hero__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 700;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface);
}


.canales-product-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}


/* =========================================================
   PRODUCT KPIS
   ========================================================= */

.canales-product-kpis {
  display: grid;
  grid-template-columns: repeat(
    5,
    minmax(0, 1fr)
  );
  gap: 10px;
}


.canales-kpi-card {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-kpi-card__label {
  display: block;
  margin-bottom: 7px;
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 800;
}


.canales-kpi-card__value {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-kpi-card small {
  display: block;
  margin-top: 5px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  line-height: 1.35;
}


.canales-kpi-card[data-tone="healthy"],
.canales-kpi-card[data-tone="excellent"] {
  border-color: color-mix(
    in srgb,
    var(--canales-success) 30%,
    var(--canales-border)
  );
}


.canales-kpi-card[data-tone="healthy"]
.canales-kpi-card__value,
.canales-kpi-card[data-tone="excellent"]
.canales-kpi-card__value {
  color: var(--canales-success);
}


.canales-kpi-card[data-tone="warning"] {
  border-color: color-mix(
    in srgb,
    var(--canales-warning) 32%,
    var(--canales-border)
  );
}


.canales-kpi-card[data-tone="warning"]
.canales-kpi-card__value {
  color: var(--canales-warning);
}


.canales-kpi-card[data-tone="loss"],
.canales-kpi-card[data-tone="critical"] {
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 32%,
    var(--canales-border)
  );
}


.canales-kpi-card[data-tone="loss"]
.canales-kpi-card__value,
.canales-kpi-card[data-tone="critical"]
.canales-kpi-card__value {
  color: var(--canales-danger);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.canales-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}


.canales-section-heading > div {
  min-width: 0;
}


.canales-section-heading__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.canales-section-heading h3 {
  margin: 0;
  color: var(--canales-text);
  font-size: 14px;
  font-weight: 800;
}


.canales-section-heading__count {
  flex: 0 0 auto;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  font-weight: 700;
}


/* =========================================================
   PRODUCT CHANNELS
   ========================================================= */

.canales-product-channels-section {
  min-width: 0;
}


.canales-channel-cards {
  display: grid;
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
  gap: 10px;
}


/* =========================================================
   CHANNEL CARD
   ========================================================= */

.canales-channel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-channel-card[data-tone="healthy"],
.canales-channel-card[data-tone="excellent"] {
  border-color: color-mix(
    in srgb,
    var(--canales-success) 28%,
    var(--canales-border)
  );
}


.canales-channel-card[data-tone="warning"] {
  border-color: color-mix(
    in srgb,
    var(--canales-warning) 32%,
    var(--canales-border)
  );
}


.canales-channel-card[data-tone="loss"],
.canales-channel-card[data-tone="critical"] {
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 32%,
    var(--canales-border)
  );
}


.canales-channel-card--empty {
  border-style: dashed;
  background: var(--canales-surface-soft);
}


.canales-channel-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}


.canales-channel-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--canales-text-soft);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-channel-card__icon svg {
  width: 16px;
  height: 16px;
}


.canales-channel-card__identity,
.canales-channel-card__header > div {
  flex: 1 1 auto;
  min-width: 0;
}


.canales-channel-card__header h4 {
  margin: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-channel-card__header span:not(.canales-status) {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-channel-card__header .canales-status {
  flex: 0 0 auto;
  margin-left: auto;
}


/* =========================================================
   CHANNEL CARD PRICE
   ========================================================= */

.canales-channel-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-channel-card__price span {
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 750;
}


.canales-channel-card__price strong {
  color: var(--canales-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}


/* =========================================================
   CHANNEL CARD METRICS
   ========================================================= */

.canales-channel-card__metrics {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 7px;
}


.canales-channel-card__metrics > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-channel-card__metrics span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 700;
}


.canales-channel-card__metrics strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   EMPTY CHANNEL
   ========================================================= */

.canales-channel-card__empty {
  flex: 1 1 auto;
  padding: 14px 4px;
}


.canales-channel-card__empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
}


.canales-channel-card__empty p {
  margin: 0;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  line-height: 1.45;
}


/* =========================================================
   PRICE DETAIL
   ========================================================= */

.canales-price-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* =========================================================
   PRICE HERO
   ========================================================= */

.canales-price-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-price-hero__identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}


.canales-price-hero__channel-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--canales-text);
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-price-hero__channel-icon svg {
  width: 19px;
  height: 19px;
}


.canales-price-hero__identity > div {
  min-width: 0;
}


.canales-price-hero__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.canales-price-hero h3 {
  margin: 0;
  color: var(--canales-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}


.canales-price-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}


.canales-price-hero__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding-inline: 8px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface);
}


.canales-price-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}


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

.canales-lock-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--canales-text-soft);
  font-size: 9px;
  font-weight: 800;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface);
}


.canales-lock-status svg {
  width: 12px;
  height: 12px;
}


/* =========================================================
   FINANCIAL SUMMARY
   ========================================================= */

.canales-financial-summary {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 9px;
}


.canales-financial-card {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-financial-card > span {
  display: block;
  margin-bottom: 6px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 800;
}


.canales-financial-card > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-financial-card > small {
  display: block;
  margin-top: 5px;
  color: var(--canales-text-muted);
  font-size: 8px;
  line-height: 1.35;
}


.canales-financial-card--primary {
  border-color: var(--canales-border-strong);
  background: var(--canales-surface-soft);
}


.canales-financial-card--primary > strong {
  font-size: 19px;
}


.canales-financial-card[data-tone="healthy"],
.canales-financial-card[data-tone="excellent"] {
  border-color: color-mix(
    in srgb,
    var(--canales-success) 30%,
    var(--canales-border)
  );
}


.canales-financial-card[data-tone="healthy"] > strong,
.canales-financial-card[data-tone="excellent"] > strong {
  color: var(--canales-success);
}


.canales-financial-card[data-tone="warning"] {
  border-color: color-mix(
    in srgb,
    var(--canales-warning) 32%,
    var(--canales-border)
  );
}


.canales-financial-card[data-tone="warning"] > strong {
  color: var(--canales-warning);
}


.canales-financial-card[data-tone="loss"],
.canales-financial-card[data-tone="critical"] {
  border-color: color-mix(
    in srgb,
    var(--canales-danger) 32%,
    var(--canales-border)
  );
}


.canales-financial-card[data-tone="loss"] > strong,
.canales-financial-card[data-tone="critical"] > strong {
  color: var(--canales-danger);
}


/* =========================================================
   PRICE TARGETS
   ========================================================= */

.canales-price-targets {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 8px;
}


.canales-price-targets__item {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-price-targets__item span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 750;
}


.canales-price-targets__item strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   BREAKDOWN
   ========================================================= */

.canales-breakdown-section,
.canales-price-summary-table-section {
  min-width: 0;
}


/* =========================================================
   BREAKDOWN TABLE
   ========================================================= */

.canales-breakdown-table-wrapper,
.canales-summary-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
}


.canales-breakdown-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--canales-text-soft);
  background: var(--canales-surface);
}


.canales-breakdown-table th {
  height: 39px;
  padding: 0 10px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 800;
  text-align: left;
  border-bottom: 1px solid var(--canales-border);
  background: var(--canales-surface-soft);
}


.canales-breakdown-table td {
  height: 46px;
  padding: 7px 10px;
  color: var(--canales-text-soft);
  font-size: 9.5px;
  border-bottom: 1px solid var(--canales-border);
}


.canales-breakdown-table tbody tr:last-child td {
  border-bottom: 0;
}


.canales-breakdown-table tfoot td {
  height: 46px;
  color: var(--canales-text);
  font-size: 10px;
  font-weight: 800;
  border-top: 1px solid var(--canales-border-strong);
  border-bottom: 0;
  background: var(--canales-surface-soft);
}


.canales-breakdown-concept {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.canales-breakdown-concept strong {
  color: var(--canales-text);
  font-size: 9.5px;
  font-weight: 800;
}


.canales-breakdown-concept small {
  color: var(--canales-text-muted);
  font-size: 8px;
}


.canales-breakdown-type {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 6px;
  color: var(--canales-text-soft);
  font-size: 8px;
  font-weight: 750;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface-soft);
}


/* =========================================================
   SUMMARY TABLE
   ========================================================= */

.canales-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--canales-surface);
}


.canales-summary-table td {
  height: 42px;
  padding: 8px 12px;
  color: var(--canales-text-soft);
  font-size: 9.5px;
  border-bottom: 1px solid var(--canales-border);
}


.canales-summary-table td:last-child {
  color: var(--canales-text);
  font-weight: 750;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


.canales-summary-table tr:last-child td {
  border-bottom: 0;
}


.canales-summary-table__subtotal td {
  font-weight: 750;
  background: var(--canales-surface-soft);
}


.canales-summary-table__total td {
  color: var(--canales-text);
  font-size: 10.5px;
  font-weight: 800;
  border-top: 1px solid var(--canales-border-strong);
  background: var(--canales-surface-soft);
}


.canales-summary-table__revenue td {
  color: var(--canales-text);
  font-weight: 800;
}


.canales-summary-table__profit[data-tone="healthy"] td:last-child,
.canales-summary-table__profit[data-tone="excellent"] td:last-child {
  color: var(--canales-success);
}


.canales-summary-table__profit[data-tone="warning"] td:last-child {
  color: var(--canales-warning);
}


.canales-summary-table__profit[data-tone="loss"] td:last-child,
.canales-summary-table__profit[data-tone="critical"] td:last-child {
  color: var(--canales-danger);
}


/* =========================================================
   PRICE DETAIL FOOTER INFO
   ========================================================= */

.canales-price-detail-footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  color: var(--canales-text-muted);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-price-detail-footer-info > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
}


.canales-price-detail-footer-info svg {
  width: 13px;
  height: 13px;
}


.canales-price-detail-footer-info strong {
  color: var(--canales-text-soft);
  font-weight: 750;
}


/* =========================================================
   PRICE ACTIONS
   ========================================================= */

.canales-price-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 2px;
}


/* =========================================================
   PREVIEW CONTAINER
   ========================================================= */

.canales-preview-container {
  width: 100%;
}


.canales-preview-container[hidden] {
  display: none;
}


/* =========================================================
   PREVIEW BOX
   ========================================================= */

.canales-preview-box {
  padding: 14px;
  border: 1px solid var(--canales-border-strong);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-preview-box__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}


.canales-preview-box__heading > div {
  display: flex;
  align-items: center;
  gap: 7px;
}


.canales-preview-box__heading > div svg {
  width: 16px;
  height: 16px;
  color: var(--canales-text-muted);
}


.canales-preview-box__heading strong {
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
}


.canales-preview-box__grid {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 8px;
}


.canales-preview-box__grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-preview-box__grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 8px;
  font-weight: 750;
}


.canales-preview-box__grid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-preview-box__grid > div[data-tone="healthy"] strong,
.canales-preview-box__grid > div[data-tone="excellent"] strong {
  color: var(--canales-success);
}


.canales-preview-box__grid > div[data-tone="warning"] strong {
  color: var(--canales-warning);
}


.canales-preview-box__grid > div[data-tone="loss"] strong,
.canales-preview-box__grid > div[data-tone="critical"] strong {
  color: var(--canales-danger);
}


/* =========================================================
   SIMULATOR
   ========================================================= */

.canales-simulator-result {
  min-height: 120px;
}


.canales-simulator-result__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 13px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-simulator-result__header > div {
  min-width: 0;
}


.canales-simulator-result__header span:first-child {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 750;
}


.canales-simulator-result__header strong {
  display: block;
  color: var(--canales-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}


.canales-simulator-result__metrics {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 8px;
}


.canales-simulator-result__metrics > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
}


.canales-simulator-result__metrics span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 8px;
  font-weight: 750;
}


.canales-simulator-result__metrics strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-simulator-result__metrics > div[data-tone="healthy"] strong,
.canales-simulator-result__metrics > div[data-tone="excellent"] strong {
  color: var(--canales-success);
}


.canales-simulator-result__metrics > div[data-tone="warning"] strong {
  color: var(--canales-warning);
}


.canales-simulator-result__metrics > div[data-tone="loss"] strong,
.canales-simulator-result__metrics > div[data-tone="critical"] strong {
  color: var(--canales-danger);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1100px
) {
  .canales-product-kpis {
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    );
  }


  .canales-channel-cards {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-financial-summary {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-price-targets {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-preview-box__grid,
  .canales-simulator-result__metrics {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }
}


@media (
  max-width: 760px
) {
  .canales-product-hero,
  .canales-price-hero {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-product-hero__actions,
  .canales-price-hero__actions {
    justify-content: flex-start;
  }


  .canales-product-kpis,
  .canales-channel-cards,
  .canales-financial-summary,
  .canales-price-targets,
  .canales-preview-box__grid,
  .canales-simulator-result__metrics {
    grid-template-columns: 1fr;
  }


  .canales-price-actions {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-price-actions
  .canales-btn {
    width: 100%;
  }


  .canales-price-detail-footer-info {
    align-items: flex-start;
    flex-direction: column;
  }
}/* =========================================================
   WIRTZ HUB · MANUFACTURA · CANALES
   FRONTEND STYLES

   PARTE 4 DE 5

   CONTIENE:
   - Configuración general.
   - Tabs de configuración.
   - Resúmenes.
   - Arquitectura.
   - Tablas de configuración.
   - Entidades.
   - Reglas.
   - Variables.
   - Fiscal / IIBB.
   - Financiamiento.
   - Historial de configuración.
   ========================================================= */


/* =========================================================
   CONFIG LAYOUT
   ========================================================= */

.canales-config-layout {
  display: grid;
  grid-template-columns:
    200px
    minmax(0, 1fr);
  gap: 16px;
  min-height: 560px;
}


/* =========================================================
   CONFIG TABS
   ========================================================= */

.canales-config-tabs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-config-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  color: var(--canales-text-soft);
  font-size: 10.5px;
  font-weight: 750;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--canales-radius-sm);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--canales-transition),
    border-color var(--canales-transition),
    background var(--canales-transition);
}


.canales-config-tab:hover {
  color: var(--canales-text);
  background: var(--canales-surface-hover);
}


.canales-config-tab.is-active {
  color: var(--canales-text);
  border-color: var(--canales-border-strong);
  background: var(--canales-surface);
}


.canales-config-tab svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}


.canales-config-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   CONFIG CONTENT
   ========================================================= */

.canales-config-content {
  min-width: 0;
}


.canales-config-content__body {
  min-width: 0;
}


/* =========================================================
   CONFIG SECTION
   ========================================================= */

.canales-config-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}


.canales-config-section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}


.canales-config-section__heading > div {
  min-width: 0;
}


.canales-config-section__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.canales-config-section__heading h3 {
  margin: 0;
  color: var(--canales-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


.canales-config-section__heading p {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--canales-text-muted);
  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   CONFIG SUMMARY
   ========================================================= */

.canales-config-summary-grid {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 9px;
}


.canales-config-summary-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
}


.canales-config-summary-card span {
  display: block;
  margin-bottom: 7px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 750;
}


.canales-config-summary-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-config-summary-card small {
  display: block;
  margin-top: 4px;
  color: var(--canales-text-muted);
  font-size: 8px;
}


/* =========================================================
   CONFIG ARCHITECTURE
   ========================================================= */

.canales-config-architecture {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface-soft);
}


.canales-config-architecture > svg {
  width: 15px;
  height: 15px;
  color: var(--canales-text-muted);
}


.canales-config-architecture__step {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
}


.canales-config-architecture__step > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: var(--canales-text);
  font-size: 9px;
  font-weight: 800;
  border: 1px solid var(--canales-border-strong);
  border-radius: 50%;
  background: var(--canales-surface-soft);
}


.canales-config-architecture__step > div {
  min-width: 0;
}


.canales-config-architecture__step strong {
  display: block;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-config-architecture__step small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 7.8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.canales-config-search {
  position: relative;
  width: min(
    420px,
    100%
  );
}


.canales-config-search > svg {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  width: 15px;
  height: 15px;
  color: var(--canales-text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}


.canales-config-search .canales-input {
  padding-left: 34px;
}


/* =========================================================
   CONFIG TABLE WRAPPER
   ========================================================= */

.canales-config-table-wrapper {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-md);
  background: var(--canales-surface);
  scrollbar-width: thin;
  scrollbar-color:
    var(--canales-border-strong)
    transparent;
}


.canales-config-table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


.canales-config-table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--canales-border-strong);
}


/* =========================================================
   CONFIG TABLE
   ========================================================= */

.canales-config-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  color: var(--canales-text-soft);
  background: var(--canales-surface);
}


.canales-config-table thead {
  background: var(--canales-surface-soft);
}


.canales-config-table th {
  height: 40px;
  padding: 0 10px;
  color: var(--canales-text-muted);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--canales-border-strong);
}


.canales-config-table td {
  height: 50px;
  padding: 8px 10px;
  color: var(--canales-text-soft);
  font-size: 9.5px;
  line-height: 1.35;
  vertical-align: middle;
  border-bottom: 1px solid var(--canales-border);
}


.canales-config-table tbody tr:last-child td {
  border-bottom: 0;
}


.canales-config-table tbody tr:hover {
  background: var(--canales-surface-soft);
}


.canales-config-table td strong {
  color: var(--canales-text);
  font-weight: 800;
}


.canales-config-table code {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 220px;
  padding: 0 6px;
  overflow: hidden;
  color: var(--canales-text-soft);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--canales-border);
  border-radius: 4px;
  background: var(--canales-surface-soft);
}


/* =========================================================
   TABLE SUBTEXT
   ========================================================= */

.canales-table-subtext {
  display: block;
  max-width: 260px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   CONFIG ENTITY
   ========================================================= */

.canales-config-entity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}


.canales-config-entity__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  color: var(--canales-text-soft);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-config-entity__icon svg {
  width: 15px;
  height: 15px;
}


.canales-config-entity > div {
  min-width: 0;
}


.canales-config-entity strong {
  display: block;
  max-width: 280px;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-config-entity small {
  display: block;
  max-width: 320px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   CONFIG TABLE ACTIONS
   ========================================================= */

.canales-config-table__actions {
  width: 1%;
  min-width: 96px;
  text-align: right;
  white-space: nowrap;
}


.canales-config-table__actions
.canales-icon-btn {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}


.canales-config-table__actions
.canales-icon-btn svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   RULE CONTEXT
   ========================================================= */

.canales-rule-context {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  color: var(--canales-text-soft);
  font-size: 8px;
  font-weight: 750;
  border: 1px solid var(--canales-border);
  border-radius: 999px;
  background: var(--canales-surface-soft);
}


.canales-rule-context--global {
  color: var(--canales-text-muted);
}


.canales-rule-context-list {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  max-width: 260px;
}


.canales-rule-context-list span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--canales-text-soft);
  font-size: 8px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   RULE EDITOR
   ========================================================= */

.canales-rule-editor {
  min-width: 0;
}


/* =========================================================
   HISTORY LAYOUT
   ========================================================= */

.canales-history-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}


/* =========================================================
   HISTORY TABS
   ========================================================= */

.canales-history-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-history-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  color: var(--canales-text-muted);
  font-size: 9.5px;
  font-weight: 750;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}


.canales-history-tab:hover {
  color: var(--canales-text);
}


.canales-history-tab.is-active {
  color: var(--canales-text);
  border-color: var(--canales-border);
  background: var(--canales-surface);
}


.canales-history-tab svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   HISTORY CONTENT
   ========================================================= */

.canales-history-content {
  min-width: 0;
}


/* =========================================================
   HISTORY SECTION
   ========================================================= */

.canales-history-section {
  min-width: 0;
}


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

.canales-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}


.canales-history-item {
  display: grid;
  grid-template-columns:
    18px
    minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}


.canales-history-item__timeline {
  position: relative;
  display: flex;
  justify-content: center;
}


.canales-history-item__timeline::after {
  position: absolute;
  top: 16px;
  bottom: -4px;
  width: 1px;
  content: "";
  background: var(--canales-border);
}


.canales-history-item:last-child
.canales-history-item__timeline::after {
  display: none;
}


.canales-history-item__timeline > span {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin-top: 15px;
  border: 2px solid var(--canales-surface);
  border-radius: 50%;
  background: var(--canales-text-muted);
}


.canales-history-item__content {
  min-width: 0;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
}


.canales-history-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
}


.canales-history-item__header > div {
  min-width: 0;
}


.canales-history-item__header strong {
  display: block;
  max-width: 500px;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-history-item__header small {
  display: block;
  max-width: 600px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--canales-text-muted);
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-history-item__meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 3px;
}


.canales-history-item__meta span {
  color: var(--canales-text-soft);
  font-size: 8px;
  font-weight: 800;
}


.canales-history-item__meta small {
  margin: 0;
  color: var(--canales-text-muted);
  font-size: 7.8px;
}


/* =========================================================
   HISTORY CHANGES
   ========================================================= */

.canales-history-item__changes {
  display: grid;
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
  gap: 6px;
}


.canales-history-change {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--canales-border);
  border-radius: 5px;
  background: var(--canales-surface-soft);
}


.canales-history-change > span {
  display: block;
  margin-bottom: 5px;
  color: var(--canales-text-muted);
  font-size: 7.5px;
  font-weight: 750;
}


.canales-history-change > div {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}


.canales-history-change del,
.canales-history-change strong {
  overflow: hidden;
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-history-change del {
  color: var(--canales-text-muted);
}


.canales-history-change strong {
  color: var(--canales-text);
  font-weight: 800;
}


.canales-history-change svg {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  color: var(--canales-text-muted);
}


/* =========================================================
   HISTORY USER
   ========================================================= */

.canales-history-item__user {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--canales-text-muted);
  font-size: 7.8px;
}


.canales-history-item__user svg {
  width: 11px;
  height: 11px;
}


/* =========================================================
   CONFIG HISTORY LIST
   ========================================================= */

.canales-config-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* =========================================================
   CONFIG HISTORY ITEM
   ========================================================= */

.canales-config-history-item {
  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface);
}


.canales-config-history-item__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--canales-text-muted);
  border: 1px solid var(--canales-border);
  border-radius: var(--canales-radius-sm);
  background: var(--canales-surface-soft);
}


.canales-config-history-item__icon svg {
  width: 15px;
  height: 15px;
}


.canales-config-history-item__content {
  min-width: 0;
}


.canales-config-history-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}


.canales-config-history-item__header > div {
  min-width: 0;
}


.canales-config-history-item__header strong {
  display: block;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-config-history-item__header small {
  display: block;
  margin-top: 3px;
  color: var(--canales-text-muted);
  font-size: 7.8px;
}


.canales-config-history-item__header > span {
  flex: 0 0 auto;
  color: var(--canales-text-muted);
  font-size: 7.8px;
}


/* =========================================================
   CONFIG HISTORY JSON
   ========================================================= */

.canales-config-history-item__json {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 7px;
}


.canales-config-history-item__json > div {
  min-width: 0;
}


.canales-config-history-item__json span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 7.5px;
  font-weight: 800;
  text-transform: uppercase;
}


.canales-config-history-item__json pre {
  max-height: 190px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  color: var(--canales-text-soft);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size: 7.8px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--canales-border);
  border-radius: 5px;
  background: var(--canales-surface-soft);
}


/* =========================================================
   CONFIG HISTORY USER
   ========================================================= */

.canales-config-history-item__user {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--canales-text-muted);
  font-size: 7.8px;
}


.canales-config-history-item__user svg {
  width: 11px;
  height: 11px;
}


/* =========================================================
   SNAPSHOT
   ========================================================= */

.canales-snapshot {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.canales-snapshot-section {
  min-width: 0;
}


/* =========================================================
   SNAPSHOT GRID
   ========================================================= */

.canales-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(
    4,
    minmax(0, 1fr)
  );
  gap: 7px;
}


.canales-snapshot-grid__item {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--canales-border);
  border-radius: 5px;
  background: var(--canales-surface-soft);
}


.canales-snapshot-grid__item span {
  display: block;
  margin-bottom: 4px;
  color: var(--canales-text-muted);
  font-size: 7.5px;
  font-weight: 750;
}


.canales-snapshot-grid__item strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 9.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   SNAPSHOT RULES
   ========================================================= */

.canales-rule-snapshot-list {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 7px;
}


.canales-rule-snapshot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--canales-border);
  border-radius: 5px;
  background: var(--canales-surface);
}


.canales-rule-snapshot > div {
  min-width: 0;
}


.canales-rule-snapshot > div:last-child {
  flex: 0 0 auto;
  text-align: right;
}


.canales-rule-snapshot strong {
  display: block;
  max-width: 330px;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-rule-snapshot span {
  color: var(--canales-text);
  font-size: 9px;
  font-weight: 800;
}


.canales-rule-snapshot small {
  display: block;
  margin-top: 2px;
  color: var(--canales-text-muted);
  font-size: 7.5px;
}


/* =========================================================
   SNAPSHOT VARIABLES
   ========================================================= */

.canales-snapshot-variables {
  display: grid;
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
  gap: 7px;
}


.canales-snapshot-variable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--canales-border);
  border-radius: 5px;
  background: var(--canales-surface-soft);
}


.canales-snapshot-variable > div {
  min-width: 0;
}


.canales-snapshot-variable > div:last-child {
  text-align: right;
}


.canales-snapshot-variable strong {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: var(--canales-text);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.canales-snapshot-variable small {
  display: block;
  margin-top: 2px;
  color: var(--canales-text-muted);
  font-size: 7.5px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1100px
) {
  .canales-config-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }


  .canales-config-summary-grid {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-config-architecture {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-config-architecture > svg {
    display: none;
  }


  .canales-history-item__changes {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-snapshot-grid {
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    );
  }


  .canales-snapshot-variables {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }
}


@media (
  max-width: 760px
) {
  .canales-config-layout {
    grid-template-columns: 1fr;
  }


  .canales-config-tabs {
    display: grid;
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-config-section__heading {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-config-section__heading
  .canales-btn {
    width: 100%;
  }


  .canales-config-summary-grid,
  .canales-config-architecture,
  .canales-history-item__changes,
  .canales-config-history-item__json,
  .canales-snapshot-grid,
  .canales-rule-snapshot-list,
  .canales-snapshot-variables {
    grid-template-columns: 1fr;
  }


  .canales-history-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-history-tab {
    width: 100%;
  }


  .canales-history-item__header,
  .canales-config-history-item__header {
    align-items: flex-start;
    flex-direction: column;
  }


  .canales-history-item__meta {
    align-items: flex-start;
  }
}/* =========================================================
   WIRTZ HUB · MANUFACTURA · CANALES
   FRONTEND STYLES

   PARTE 5 DE 5

   CONTIENE:
   - Densidad.
   - Ajustes finos de tablas.
   - Dark mode complementario.
   - Compatibilidad con shell.
   - Responsive final.
   - Correcciones visuales.
   ========================================================= */


/* =========================================================
   SHELL COMPATIBILITY
   ========================================================= */

.app-shell
.canales-page {
  min-width: 0;
}


.app-main
.canales-page {
  min-width: 0;
}


.app-content
.canales-page {
  min-width: 0;
}


/* =========================================================
   DENSITY · COMPACT
   ========================================================= */

.canales-table-frame[data-density="compact"]
.canales-td {
  height: 48px;
  padding-top: 5px;
  padding-bottom: 5px;
}


.canales-table-frame[data-density="compact"]
.canales-channel-cell {
  min-height: 36px;
  padding-top: 4px;
  padding-bottom: 4px;
}


.canales-table-frame[data-density="compact"]
.canales-channel-cell__price {
  font-size: 10px;
}


.canales-table-frame[data-density="compact"]
.canales-channel-cell__margin {
  font-size: 8.5px;
}


.canales-table-frame[data-density="compact"]
.canales-product-link__name {
  font-size: 10.5px;
}


.canales-table-frame[data-density="compact"]
.canales-action-btn {
  min-height: 28px;
}


/* =========================================================
   DENSITY · COMFORTABLE
   ========================================================= */

.canales-table-frame[data-density="comfortable"]
.canales-td {
  height: 62px;
}


/* =========================================================
   STICKY COLUMNS
   ========================================================= */

.canales-table
thead
th:first-child,
.canales-table
tbody
td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--canales-surface);
}


.canales-table
thead
th:first-child {
  z-index: 7;
  background: var(--canales-surface-soft);
}


.canales-table
thead
th:nth-child(2),
.canales-table
tbody
td:nth-child(2) {
  position: sticky;
  left: 52px;
  z-index: 4;
  background: var(--canales-surface);
}


.canales-table
thead
th:nth-child(2) {
  z-index: 7;
  background: var(--canales-surface-soft);
}


.canales-table
tbody
tr:hover
td:first-child,
.canales-table
tbody
tr:hover
td:nth-child(2) {
  background: var(--canales-surface-soft);
}


.canales-table
tbody
tr.is-selected
td:first-child,
.canales-table
tbody
tr.is-selected
td:nth-child(2) {
  background: color-mix(
    in srgb,
    var(--canales-text) 4%,
    var(--canales-surface)
  );
}


/* =========================================================
   STICKY COLUMN BORDER
   ========================================================= */

.canales-table
thead
th:nth-child(2)::after,
.canales-table
tbody
td:nth-child(2)::after {
  position: absolute;
  top: 0;
  right: -1px;
  width: 1px;
  height: 100%;
  content: "";
  background: var(--canales-border);
}


/* =========================================================
   TABLE COLUMN TEXT
   ========================================================= */

.canales-table
td,
.canales-table
th {
  overflow: hidden;
}


.canales-table
td:not(
  .canales-td--channel
):not(
  .canales-td--actions
):not(
  .canales-td--selection
) {
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   CATEGORY CELL
   ========================================================= */

.canales-table
td:nth-child(4) {
  color: var(--canales-text-muted);
}


/* =========================================================
   COST CELL
   ========================================================= */

.canales-table
td:nth-child(5) {
  color: var(--canales-text);
  font-weight: 750;
}


/* =========================================================
   CHANNEL COLUMN HOVER
   ========================================================= */

.canales-th--channel:hover
.canales-channel-column-heading {
  color: var(--canales-text);
}


/* =========================================================
   CHANNEL EMPTY
   ========================================================= */

.canales-channel-cell--empty
.canales-channel-cell__price {
  color: var(--canales-text-muted);
  font-weight: 700;
}


.canales-channel-cell--empty
.canales-channel-cell__margin {
  color: var(--canales-text-soft);
}


/* =========================================================
   PROFITABILITY HIGHLIGHTS
   ========================================================= */

.canales-channel-cell[data-tone="excellent"] {
  border-color: color-mix(
    in srgb,
    var(--canales-excellent) 42%,
    var(--canales-border)
  );
  background: var(--canales-excellent-bg);
}


.canales-channel-cell[data-tone="critical"] {
  border-color: color-mix(
    in srgb,
    var(--canales-critical) 42%,
    var(--canales-border)
  );
  background: var(--canales-critical-bg);
}


/* =========================================================
   CONFIG TABLE STICKY HEADER
   ========================================================= */

.canales-config-table-wrapper {
  max-height: 520px;
}


.canales-config-table
thead
th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--canales-surface-soft);
}


/* =========================================================
   BREAKDOWN TABLE STICKY HEADER
   ========================================================= */

.canales-breakdown-table-wrapper {
  max-height: 460px;
  overflow: auto;
}


.canales-breakdown-table
thead
th {
  position: sticky;
  top: 0;
  z-index: 2;
}


/* =========================================================
   LONG MODALS
   ========================================================= */

.canales-modal--xl
.canales-modal__body {
  padding-bottom: 22px;
}


/* =========================================================
   MODAL STACK
   ========================================================= */

.canales-modal-layer:nth-child(2) {
  z-index: 10010;
}


.canales-modal-layer:nth-child(3) {
  z-index: 10020;
}


.canales-modal-layer:nth-child(4) {
  z-index: 10030;
}


.canales-modal-layer:nth-child(5) {
  z-index: 10040;
}


/* =========================================================
   MODAL BACKDROP STACK
   ========================================================= */

.canales-modal-layer:not(:first-child)
.canales-modal-backdrop {
  background: rgba(
    0,
    0,
    0,
    0.52
  );
}


/* =========================================================
   SCROLL LOCK
   ========================================================= */

body.canales-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}


/* =========================================================
   BUTTON ACTIVE
   ========================================================= */

.canales-btn:active:not(:disabled),
.canales-icon-btn:active:not(:disabled),
.canales-action-btn:active:not(:disabled),
.canales-pagination-btn:active:not(:disabled) {
  transform: translateY(1px);
}


/* =========================================================
   TOOLBAR STICKY OPTION
   ========================================================= */

.canales-workspace {
  position: relative;
}


.canales-toolbar {
  position: relative;
  z-index: 6;
}


/* =========================================================
   PRICE CARDS · VALUE SAFETY
   ========================================================= */

.canales-financial-card strong,
.canales-kpi-card strong,
.canales-channel-card strong,
.canales-price-targets strong {
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   TABLE NUMERIC
   ========================================================= */

.canales-table-number,
.canales-td--number,
.canales-summary-table td:last-child {
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}


/* =========================================================
   FORM ERROR READY
   ========================================================= */

.canales-field.is-invalid
.canales-input,
.canales-field.is-invalid
.canales-textarea {
  border-color: var(--canales-danger);
}


.canales-field.is-invalid
.canales-field__label {
  color: var(--canales-danger);
}


.canales-field__error {
  color: var(--canales-danger);
  font-size: 9px;
  line-height: 1.35;
}


/* =========================================================
   DISABLED CONFIG
   ========================================================= */

.canales-config-tab:disabled,
.canales-history-tab:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}


/* =========================================================
   JSON PRE
   ========================================================= */

.canales-config-history-item__json pre {
  scrollbar-width: thin;
  scrollbar-color:
    var(--canales-border-strong)
    transparent;
}


/* =========================================================
   BULK
   ========================================================= */

.canales-bulk-panel
.canales-form-grid {
  margin-top: 2px;
}


/* =========================================================
   SIMULATOR FINAL
   ========================================================= */

.canales-simulator-result:empty {
  display: none;
}


/* =========================================================
   PRODUCT CHANNEL GRID WIDTH
   ========================================================= */

.canales-channel-cards {
  align-items: stretch;
}


.canales-channel-card {
  height: 100%;
}


/* =========================================================
   PRODUCT MODAL HEADER
   ========================================================= */

.canales-product-hero__identity,
.canales-price-hero__identity {
  flex: 1 1 auto;
}


/* =========================================================
   FIELDSET-LIKE GROUP
   ========================================================= */

.canales-form-section
.canales-form-grid +
.canales-form-grid {
  margin-top: 14px;
}


/* =========================================================
   ACTIVE FILTER COUNTER
   ========================================================= */

.canales-btn__counter[hidden] {
  display: none;
}


/* =========================================================
   HIDDEN
   ========================================================= */

.canales-page [hidden],
.canales-overlay-root [hidden] {
  display: none !important;
}


/* =========================================================
   DARK · BODY / SHELL
   ========================================================= */

[data-theme="dark"]
.canales-page,
html.dark
.canales-page,
body.dark
.canales-page {
  background: #08090a;
}


/* =========================================================
   DARK · INPUT
   ========================================================= */

[data-theme="dark"]
.canales-input,
[data-theme="dark"]
.canales-textarea,
[data-theme="dark"]
.canales-search-input,
[data-theme="dark"]
.canales-select,
html.dark
.canales-input,
html.dark
.canales-textarea,
html.dark
.canales-search-input,
html.dark
.canales-select,
body.dark
.canales-input,
body.dark
.canales-textarea,
body.dark
.canales-search-input,
body.dark
.canales-select {
  color-scheme: dark;
}


/* =========================================================
   DARK · NATIVE OPTIONS
   ========================================================= */

[data-theme="dark"]
.canales-input option,
[data-theme="dark"]
.canales-select option,
html.dark
.canales-input option,
html.dark
.canales-select option,
body.dark
.canales-input option,
body.dark
.canales-select option {
  color: #f2f3f5;
  background: #101113;
}


/* =========================================================
   DARK · DATE INPUT
   ========================================================= */

[data-theme="dark"]
.canales-input[type="datetime-local"],
[data-theme="dark"]
.canales-input[type="date"],
html.dark
.canales-input[type="datetime-local"],
html.dark
.canales-input[type="date"],
body.dark
.canales-input[type="datetime-local"],
body.dark
.canales-input[type="date"] {
  color-scheme: dark;
}


/* =========================================================
   DARK · SCROLLBAR
   ========================================================= */

[data-theme="dark"]
.canales-table-scroll,
[data-theme="dark"]
.canales-modal__body,
[data-theme="dark"]
.canales-config-table-wrapper,
html.dark
.canales-table-scroll,
html.dark
.canales-modal__body,
html.dark
.canales-config-table-wrapper,
body.dark
.canales-table-scroll,
body.dark
.canales-modal__body,
body.dark
.canales-config-table-wrapper {
  scrollbar-color:
    #343840
    transparent;
}


/* =========================================================
   FOCUS
   ========================================================= */

.canales-input:focus-visible,
.canales-textarea:focus-visible,
.canales-search-input:focus-visible,
.canales-select:focus-visible {
  outline: 1px solid var(--canales-text);
  outline-offset: 1px;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .canales-page *,
  .canales-overlay-root * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   RESPONSIVE · 1440
   ========================================================= */

@media (
  max-width: 1440px
) {
  .canales-page {
    padding-inline: 18px;
  }


  .canales-table {
    min-width: 1420px;
  }


  .canales-modal--xl {
    width: min(
      1180px,
      calc(100vw - 36px)
    );
  }
}


/* =========================================================
   RESPONSIVE · 1200
   ========================================================= */

@media (
  max-width: 1200px
) {
  .canales-page {
    padding-inline: 16px;
  }


  .canales-product-kpis {
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    );
  }


  .canales-channel-cards {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-snapshot-grid {
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    );
  }
}


/* =========================================================
   RESPONSIVE · 992
   ========================================================= */

@media (
  max-width: 992px
) {
  .canales-page {
    padding:
      16px
      14px
      22px;
  }


  .canales-metrics {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-page-header {
    flex-direction: column;
  }


  .canales-toolbar {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-toolbar__search {
    width: 100%;
  }


  .canales-toolbar__actions {
    justify-content: flex-start;
  }


  .canales-config-layout {
    grid-template-columns: 1fr;
  }


  .canales-config-tabs {
    display: grid;
    grid-template-columns: repeat(
      4,
      minmax(0, 1fr)
    );
  }


  .canales-financial-summary,
  .canales-preview-box__grid,
  .canales-simulator-result__metrics {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }
}


/* =========================================================
   RESPONSIVE · 768
   ========================================================= */

@media (
  max-width: 768px
) {
  .canales-page {
    padding:
      14px
      10px
      20px;
  }


  .canales-page-header__actions,
  .canales-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
    width: 100%;
  }


  .canales-page-header__actions
  .canales-btn,
  .canales-toolbar__actions
  .canales-btn {
    width: 100%;
  }


  .canales-toolbar__actions
  .canales-icon-btn {
    width: 100%;
  }


  .canales-metrics,
  .canales-product-kpis,
  .canales-channel-cards,
  .canales-financial-summary,
  .canales-price-targets,
  .canales-preview-box__grid,
  .canales-simulator-result__metrics,
  .canales-config-summary-grid,
  .canales-snapshot-grid,
  .canales-snapshot-variables,
  .canales-rule-snapshot-list,
  .canales-history-item__changes {
    grid-template-columns: 1fr;
  }


  .canales-config-tabs {
    grid-template-columns: repeat(
      2,
      minmax(0, 1fr)
    );
  }


  .canales-form-grid,
  .canales-filter-grid,
  .canales-columns-grid,
  .canales-form-switches {
    grid-template-columns: 1fr;
  }


  .canales-form-context,
  .canales-simulator__context {
    grid-template-columns: 1fr;
  }


  .canales-product-hero,
  .canales-price-hero {
    flex-direction: column;
  }


  .canales-product-hero__actions,
  .canales-price-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }


  .canales-price-actions {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-price-actions
  .canales-btn {
    width: 100%;
  }


  .canales-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-selection-bar__actions {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-table-footer {
    align-items: stretch;
    flex-direction: column;
  }


  .canales-table-footer__controls {
    flex-wrap: wrap;
    justify-content: space-between;
  }


  .canales-config-section__heading {
    flex-direction: column;
  }


  .canales-config-section__heading
  .canales-btn {
    width: 100%;
  }


  .canales-config-history-item__json {
    grid-template-columns: 1fr;
  }


  .canales-config-architecture {
    grid-template-columns: 1fr;
  }


  .canales-config-architecture > svg {
    display: none;
  }


  .canales-history-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }


  .canales-history-tab {
    width: 100%;
  }
}


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width: 520px
) {
  .canales-page-heading__icon {
    display: none;
  }


  .canales-page-heading__title {
    font-size: 22px;
  }


  .canales-page-heading__description {
    font-size: 11px;
  }


  .canales-page-header__actions,
  .canales-toolbar__actions {
    grid-template-columns: 1fr;
  }


  .canales-modal-layer {
    padding: 6px;
  }


  .canales-modal,
  .canales-modal--sm,
  .canales-modal--md,
  .canales-modal--lg,
  .canales-modal--xl {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 8px;
  }


  .canales-modal__header {
    padding: 11px 12px;
  }


  .canales-modal__body {
    padding: 12px;
  }


  .canales-modal__footer {
    padding: 10px 12px;
  }


  .canales-config-tabs {
    grid-template-columns: 1fr;
  }


  .canales-product-hero h3,
  .canales-price-hero h3 {
    font-size: 16px;
  }


  .canales-channel-card__price strong,
  .canales-simulator-result__header strong {
    font-size: 17px;
  }


  .canales-toast-container {
    top: 8px;
    right: 8px;
    width: calc(100vw - 16px);
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .canales-page-header__actions,
  .canales-toolbar,
  .canales-selection-bar,
  .canales-table-footer,
  .canales-price-actions,
  .canales-modal__close,
  .canales-modal__footer,
  .canales-toast-container {
    display: none !important;
  }


  .canales-page,
  .canales-modal,
  .canales-modal__body {
    width: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    color: #000000;
    background: #ffffff;
    overflow: visible;
  }


  .canales-modal-layer {
    position: static;
    display: block;
    padding: 0;
  }


  .canales-modal-backdrop {
    display: none;
  }


  .canales-table-scroll,
  .canales-config-table-wrapper,
  .canales-breakdown-table-wrapper {
    overflow: visible;
  }
}


/* =========================================================
   FIN · WIRTZ HUB · MANUFACTURA · CANALES
   CSS COMPLETO · PARTE 5 DE 5
   ========================================================= */
/* =========================================================
   FIX · MODALES TRANSPARENTES
   ========================================================= */

.canales-overlay-root {
  --canales-bg: #f6f7f9;
  --canales-surface: #ffffff;
  --canales-surface-soft: #f8f9fb;
  --canales-surface-hover: #f2f4f7;

  --canales-text: #17191d;
  --canales-text-soft: #555b66;
  --canales-text-muted: #818895;

  --canales-border: #e3e6eb;
  --canales-border-strong: #d4d8df;

  --canales-dark: #111214;
  --canales-dark-hover: #25272b;

  --canales-success: #16794a;
  --canales-success-bg: #eef8f2;

  --canales-warning: #9a6700;
  --canales-warning-bg: #fff7e5;

  --canales-danger: #c43838;
  --canales-danger-bg: #fff0f0;

  --canales-critical: #9e1f1f;
  --canales-critical-bg: #fceaea;

  --canales-excellent: #12613d;
  --canales-excellent-bg: #e9f7ef;

  --canales-radius-sm: 6px;
  --canales-radius-md: 10px;
  --canales-radius-lg: 14px;

  --canales-transition: 140ms ease;
}


[data-theme="dark"] .canales-overlay-root,
html.dark .canales-overlay-root,
body.dark .canales-overlay-root {
  --canales-bg: #08090a;
  --canales-surface: #101113;
  --canales-surface-soft: #15171a;
  --canales-surface-hover: #1b1d21;

  --canales-text: #f2f3f5;
  --canales-text-soft: #b8bdc7;
  --canales-text-muted: #858b96;

  --canales-border: #25282e;
  --canales-border-strong: #343840;

  --canales-dark: #f4f5f6;
  --canales-dark-hover: #ffffff;

  --canales-success: #71d39d;
  --canales-success-bg: #10261a;

  --canales-warning: #e7bc58;
  --canales-warning-bg: #2a220e;

  --canales-danger: #f17575;
  --canales-danger-bg: #2b1212;

  --canales-critical: #ff8989;
  --canales-critical-bg: #321313;

  --canales-excellent: #7be1a8;
  --canales-excellent-bg: #10281c;
}


.canales-modal {
  background-color: var(--canales-surface) !important;
  opacity: 1 !important;
}


.canales-modal__header,
.canales-modal__body,
.canales-modal__footer {
  background-color: var(--canales-surface) !important;
}


.canales-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.68) !important;
  opacity: 1 !important;
}


.canales-modal-layer:not(:first-child)
.canales-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.68) !important;
}


.canales-config-tabs,
.canales-config-content,
.canales-config-content__body,
.canales-columns-panel,
.canales-filter-grid,
.canales-import-panel,
.canales-price-form,
.canales-product-detail,
.canales-price-detail,
.canales-history-layout,
.canales-history-content,
.canales-simulator,
.canales-bulk-panel,
.canales-variable-editor,
.canales-rule-editor {
  opacity: 1 !important;
}


.canales-config-tabs {
  background-color: var(--canales-surface-soft) !important;
}


.canales-config-tab {
  background-color: transparent;
}


.canales-config-tab.is-active {
  background-color: var(--canales-surface) !important;
}


.canales-check-row,
.canales-switch-row,
.canales-action-choice,
.canales-info-box,
.canales-empty-inline,
.canales-form-section,
.canales-config-summary-card,
.canales-config-architecture,
.canales-config-architecture__step {
  opacity: 1 !important;
}


.canales-check-row,
.canales-switch-row,
.canales-action-choice,
.canales-config-summary-card,
.canales-config-architecture__step {
  background-color: var(--canales-surface) !important;
}


.canales-info-box,
.canales-empty-inline,
.canales-form-section,
.canales-config-architecture {
  background-color: var(--canales-surface-soft) !important;
}


.canales-columns-density {
  background-color: var(--canales-surface) !important;
}


.canales-segmented {
  background-color: var(--canales-surface-soft) !important;
}


.canales-segmented__btn.is-active {
  background-color: var(--canales-surface) !important;
}


.canales-modal input,
.canales-modal select,
.canales-modal textarea,
.canales-modal .canales-input,
.canales-modal .canales-textarea,
.canales-modal .canales-select {
  color: var(--canales-text) !important;
  background-color: var(--canales-surface) !important;
}


.canales-modal table,
.canales-modal td,
.canales-modal th {
  opacity: 1 !important;
}


.canales-config-table,
.canales-breakdown-table,
.canales-summary-table {
  background-color: var(--canales-surface) !important;
}


.canales-config-table thead,
.canales-config-table thead th,
.canales-breakdown-table thead,
.canales-breakdown-table thead th {
  background-color: var(--canales-surface-soft) !important;
}


[data-theme="dark"] .canales-modal,
html.dark .canales-modal,
body.dark .canales-modal,
[data-theme="dark"] .canales-modal__header,
[data-theme="dark"] .canales-modal__body,
[data-theme="dark"] .canales-modal__footer,
html.dark .canales-modal__header,
html.dark .canales-modal__body,
html.dark .canales-modal__footer,
body.dark .canales-modal__header,
body.dark .canales-modal__body,
body.dark .canales-modal__footer {
  background-color: #101113 !important;
}


[data-theme="dark"] .canales-config-tabs,
[data-theme="dark"] .canales-info-box,
[data-theme="dark"] .canales-empty-inline,
[data-theme="dark"] .canales-form-section,
[data-theme="dark"] .canales-config-architecture,
html.dark .canales-config-tabs,
html.dark .canales-info-box,
html.dark .canales-empty-inline,
html.dark .canales-form-section,
html.dark .canales-config-architecture,
body.dark .canales-config-tabs,
body.dark .canales-info-box,
body.dark .canales-empty-inline,
body.dark .canales-form-section,
body.dark .canales-config-architecture {
  background-color: #15171a !important;
}


[data-theme="dark"] .canales-check-row,
[data-theme="dark"] .canales-switch-row,
[data-theme="dark"] .canales-action-choice,
[data-theme="dark"] .canales-config-summary-card,
[data-theme="dark"] .canales-config-architecture__step,
html.dark .canales-check-row,
html.dark .canales-switch-row,
html.dark .canales-action-choice,
html.dark .canales-config-summary-card,
html.dark .canales-config-architecture__step,
body.dark .canales-check-row,
body.dark .canales-switch-row,
body.dark .canales-action-choice,
body.dark .canales-config-summary-card,
body.dark .canales-config-architecture__step {
  background-color: #101113 !important;
}