.shopify-configuration-host,
.shopify-configuration-host *,
.shopify-configuration-page,
.shopify-configuration-page * {
  box-sizing: border-box;
  font-family:
    "DM Sans",
    "Inter",
    Arial,
    sans-serif;
}

.shopify-configuration-page button,
.shopify-configuration-page input,
.shopify-configuration-page select {
  font: inherit;
}

.shopify-configuration-page button {
  appearance: none;
  -webkit-appearance: none;
}

.shopify-configuration-page {
  --shopify-bg: #ffffff;
  --shopify-bg-soft: #f7f8fa;
  --shopify-bg-muted: #eef1f4;
  --shopify-bg-hover: #f3f5f7;

  --shopify-text: #181a1d;
  --shopify-text-soft: #434950;
  --shopify-muted: #6b737d;
  --shopify-muted-2: #939aa3;

  --shopify-border: #d9dee4;
  --shopify-border-strong: #bcc4cd;

  --shopify-primary: #181a1d;
  --shopify-primary-text: #ffffff;

  --shopify-success: #15803d;
  --shopify-success-soft: rgba(21, 128, 61, 0.08);
  --shopify-success-border: rgba(21, 128, 61, 0.28);

  --shopify-warning: #d97706;
  --shopify-warning-soft: rgba(217, 119, 6, 0.08);
  --shopify-warning-border: rgba(217, 119, 6, 0.28);

  --shopify-danger: #dc2626;
  --shopify-danger-soft: rgba(220, 38, 38, 0.08);
  --shopify-danger-border: rgba(220, 38, 38, 0.28);

  --shopify-info: #2563eb;
  --shopify-info-soft: rgba(37, 99, 235, 0.08);
  --shopify-info-border: rgba(37, 99, 235, 0.28);

  --shopify-radius-xl: 16px;
  --shopify-radius-lg: 13px;
  --shopify-radius-md: 10px;
  --shopify-radius-sm: 8px;

  --shopify-transition-fast: 0.15s ease;
  --shopify-transition: 0.22s ease;

  display: grid;
  align-content: start;
  gap: 12px;

  width: 100%;
  min-width: 0;

  color: var(--shopify-text);

  animation:
    shopifyConfigurationPageIn
    0.24s
    ease
    both;
}

html[data-theme="dark"]
.shopify-configuration-page {
  --shopify-bg: #111315;
  --shopify-bg-soft: #17191c;
  --shopify-bg-muted: #202328;
  --shopify-bg-hover: #1d2024;

  --shopify-text: #f2f3f4;
  --shopify-text-soft: #d2d5d9;
  --shopify-muted: #a5acb4;
  --shopify-muted-2: #737b84;

  --shopify-border: #343941;
  --shopify-border-strong: #505760;

  --shopify-primary: #f2f3f4;
  --shopify-primary-text: #111315;

  --shopify-success: #6fd497;
  --shopify-success-soft: rgba(111, 212, 151, 0.1);
  --shopify-success-border: rgba(111, 212, 151, 0.3);

  --shopify-warning: #fbbf24;
  --shopify-warning-soft: rgba(251, 191, 36, 0.1);
  --shopify-warning-border: rgba(251, 191, 36, 0.3);

  --shopify-danger: #f87171;
  --shopify-danger-soft: rgba(248, 113, 113, 0.1);
  --shopify-danger-border: rgba(248, 113, 113, 0.3);

  --shopify-info: #75a7ef;
  --shopify-info-soft: rgba(117, 167, 239, 0.1);
  --shopify-info-border: rgba(117, 167, 239, 0.3);
}

.shopify-configuration-host {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.shopify-configuration-page svg {
  flex: 0 0 auto;
  stroke-width: 2;
}

.shopify-configuration-eyebrow {
  display: block;

  color: var(--shopify-muted);

  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

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

.shopify-configuration-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 38px;
  padding: 0 12px;

  border:
    1px
    solid
    var(--shopify-border-strong);

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

  background: var(--shopify-bg);
  color: var(--shopify-text);

  font-size: 9.5px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  outline: none;

  transition:
    border-color var(--shopify-transition-fast),
    background var(--shopify-transition-fast),
    color var(--shopify-transition-fast),
    transform var(--shopify-transition-fast),
    opacity var(--shopify-transition-fast);
}

.shopify-configuration-button:hover {
  border-color: var(--shopify-text);
  background: var(--shopify-bg-hover);

  transform: translateY(-1px);
}

.shopify-configuration-button:active {
  transform: translateY(0);
}

.shopify-configuration-button:focus-visible {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(--shopify-text)
      22%,
      transparent
    );

  outline-offset: 2px;
}

.shopify-configuration-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.shopify-configuration-button svg {
  width: 14px;
  height: 14px;
}

.shopify-configuration-button--primary {
  border-color: var(--shopify-primary);
  background: var(--shopify-primary);
  color: var(--shopify-primary-text);
}

.shopify-configuration-button--primary:hover {
  border-color: var(--shopify-primary);
  background: var(--shopify-primary);
  color: var(--shopify-primary-text);

  opacity: 0.9;
}

.shopify-configuration-button--secondary {
  background: var(--shopify-bg);
}

.shopify-configuration-button svg[data-lucide="loader-circle"] {
  animation:
    shopifyConfigurationSpin
    0.8s
    linear
    infinite;
}

.shopify-configuration-icon-button {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;

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

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

  background: var(--shopify-bg);
  color: var(--shopify-muted);

  cursor: pointer;

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

.shopify-configuration-icon-button:hover {
  border-color: var(--shopify-text);
  background: var(--shopify-bg-hover);
  color: var(--shopify-text);
}

.shopify-configuration-icon-button svg {
  width: 14px;
  height: 14px;
}

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

.shopify-configuration-head {
  width: 100%;
  min-width: 0;

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

  border-radius: var(--shopify-radius-xl);

  background: var(--shopify-bg);

  overflow: hidden;
}

.shopify-configuration-head__content {
  display: grid;

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

  align-items: center;
  gap: 16px;

  min-height: 96px;
  padding: 16px;
}

.shopify-configuration-head__identity {
  display: grid;

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

  align-items: center;
  gap: 13px;

  min-width: 0;
}

.shopify-configuration-head__icon {
  display: grid;
  place-items: center;

  width: 48px;
  height: 48px;
  min-width: 48px;

  border:
    1px
    solid
    var(--shopify-border-strong);

  border-radius: 12px;

  background: var(--shopify-bg-soft);
  color: var(--shopify-text);
}

.shopify-configuration-head__icon svg {
  width: 21px;
  height: 21px;
}

.shopify-configuration-head__identity > div:last-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shopify-configuration-head h1 {
  min-width: 0;
  margin: 0;

  color: var(--shopify-text);

  font-size:
    clamp(
      24px,
      2.1vw,
      32px
    );

  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopify-configuration-head p {
  max-width: 760px;
  margin: 0;

  color: var(--shopify-muted);

  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.4;
}

.shopify-configuration-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-wrap: wrap;
}

/* =========================================================
   ENCABEZADO DE SECCIÓN
   ========================================================= */

.shopify-configuration-section-heading {
  display: grid;
  min-width: 0;
  padding: 0 2px;
}

.shopify-configuration-section-heading > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shopify-configuration-section-heading h2 {
  margin: 0;

  color: var(--shopify-text);

  font-size: 15px;
  font-weight: 860;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.shopify-configuration-section-heading p {
  margin: 0;

  color: var(--shopify-muted);

  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.35;
}

/* =========================================================
   ESTADO GENERAL
   ========================================================= */

.shopify-configuration-status {
  display: grid;
  gap: 10px;

  width: 100%;
  min-width: 0;
}

.shopify-configuration-status-grid {
  display: grid;

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

  gap: 8px;
  min-width: 0;
}

.shopify-configuration-status-card {
  display: grid;

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

  align-items: start;
  gap: 10px;

  min-width: 0;
  min-height: 112px;
  padding: 11px;

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

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

  background: var(--shopify-bg);

  transition:
    border-color var(--shopify-transition-fast),
    background var(--shopify-transition-fast),
    transform var(--shopify-transition-fast);
}

.shopify-configuration-status-card:hover {
  border-color: var(--shopify-border-strong);
  background: var(--shopify-bg-hover);

  transform: translateY(-1px);
}

.shopify-configuration-status-card__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  min-width: 38px;

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

  border-radius: 10px;

  background: var(--shopify-bg-soft);
  color: var(--shopify-muted);
}

.shopify-configuration-status-card__icon svg {
  width: 16px;
  height: 16px;
}

.shopify-configuration-status-card > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.shopify-configuration-status-card > div > span {
  color: var(--shopify-muted);

  font-size: 7.5px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.shopify-configuration-status-card strong {
  min-width: 0;

  color: var(--shopify-text);

  font-size: 10px;
  font-weight: 830;
  line-height: 1.2;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopify-configuration-status-card p {
  margin: 0;

  color: var(--shopify-muted);

  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.4;
}

.shopify-configuration-status-card--success {
  border-color: var(--shopify-success-border);
}

.shopify-configuration-status-card--success
.shopify-configuration-status-card__icon {
  border-color: var(--shopify-success-border);
  background: var(--shopify-success-soft);
  color: var(--shopify-success);
}

.shopify-configuration-status-card--warning {
  border-color: var(--shopify-warning-border);
}

.shopify-configuration-status-card--warning
.shopify-configuration-status-card__icon {
  border-color: var(--shopify-warning-border);
  background: var(--shopify-warning-soft);
  color: var(--shopify-warning);
}

.shopify-configuration-status-card--danger {
  border-color: var(--shopify-danger-border);
}

.shopify-configuration-status-card--danger
.shopify-configuration-status-card__icon {
  border-color: var(--shopify-danger-border);
  background: var(--shopify-danger-soft);
  color: var(--shopify-danger);
}

.shopify-configuration-status-card--information
.shopify-configuration-status-card__icon {
  border-color: var(--shopify-info-border);
  background: var(--shopify-info-soft);
  color: var(--shopify-info);
}

.shopify-configuration-status-card--pending
.shopify-configuration-status-card__icon {
  border-color: var(--shopify-border-strong);
  background: var(--shopify-bg-muted);
  color: var(--shopify-muted);
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.shopify-configuration-content {
  width: 100%;
  min-width: 0;
}

.shopify-configuration-form {
  display: grid;
  gap: 12px;

  width: 100%;
  min-width: 0;
}

.shopify-configuration-panel {
  display: grid;
  align-content: start;

  min-width: 0;

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

  border-radius: var(--shopify-radius-xl);

  background: var(--shopify-bg);

  overflow: hidden;

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

.shopify-configuration-panel:hover {
  border-color: var(--shopify-border-strong);
}

.shopify-configuration-panel__head {
  display: grid;

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

  align-items: center;
  gap: 12px;

  min-height: 72px;
  padding: 11px 13px;

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

  background: var(--shopify-bg-soft);
}

.shopify-configuration-panel__identity {
  display: grid;

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

  align-items: center;
  gap: 10px;

  min-width: 0;
}

.shopify-configuration-panel__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  min-width: 38px;

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

  border-radius: 10px;

  background: var(--shopify-bg);
  color: var(--shopify-muted);
}

.shopify-configuration-panel__icon svg {
  width: 16px;
  height: 16px;
}

.shopify-configuration-panel__identity > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shopify-configuration-panel__identity h2 {
  min-width: 0;
  margin: 0;

  color: var(--shopify-text);

  font-size: 14px;
  font-weight: 860;
  line-height: 1.15;
  letter-spacing: -0.025em;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopify-configuration-panel__identity p {
  min-width: 0;
  margin: 0;

  color: var(--shopify-muted);

  font-size: 8.8px;
  font-weight: 650;
  line-height: 1.35;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.shopify-configuration-fields {
  display: grid;

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

  min-width: 0;
}

.shopify-configuration-field {
  display: grid;
  align-content: center;
  gap: 7px;

  min-width: 0;
  min-height: 92px;
  padding: 11px;

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

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

  background: var(--shopify-bg);

  transition:
    background var(--shopify-transition-fast);
}

.shopify-configuration-field:nth-child(3n) {
  border-right: 0;
}

.shopify-configuration-field:hover,
.shopify-configuration-field:focus-within {
  background: var(--shopify-bg-hover);
}

.shopify-configuration-field > span {
  color: var(--shopify-muted);

  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.shopify-configuration-field > small {
  color: var(--shopify-muted);

  font-size: 7.5px;
  font-weight: 650;
  line-height: 1.35;
}

.shopify-configuration-field input,
.shopify-configuration-field select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;

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

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

  outline: 0;

  background: var(--shopify-bg-soft);
  color: var(--shopify-text);

  font-size: 9.5px;
  font-weight: 700;

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

.shopify-configuration-field input:focus,
.shopify-configuration-field select:focus {
  border-color: var(--shopify-info);
  background: var(--shopify-bg);
}

.shopify-configuration-field input::placeholder {
  color: var(--shopify-muted-2);
}

.shopify-configuration-field select {
  cursor: pointer;
}

.shopify-configuration-field select option {
  background: var(--shopify-bg);
  color: var(--shopify-text);
}

.shopify-configuration-field--token {
  grid-column: span 3;
  border-right: 0;
}

.shopify-configuration-token-input {
  display: grid;

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

  align-items: center;
  gap: 7px;

  min-width: 0;
}

.shopify-configuration-token-input input {
  min-width: 0;
}

/* =========================================================
   FIN PARTE 1 DE 2
   ========================================================= *//* =========================================================
   OPCIONES GENERALES
   ========================================================= */

.shopify-configuration-options {
  display: grid;

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

  min-width: 0;

  border-bottom:
    1px
    solid
    var(--shopify-border);
}

.shopify-configuration-switch {
  position: relative;

  display: grid;

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

  align-items: center;
  gap: 10px;

  min-width: 0;
  min-height: 88px;
  padding: 11px;

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

  background: var(--shopify-bg);

  cursor: pointer;

  transition:
    background var(--shopify-transition-fast);
}

.shopify-configuration-switch:hover {
  background: var(--shopify-bg-hover);
}

.shopify-configuration-switch input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.shopify-configuration-switch__control {
  position: relative;

  display: block;

  width: 36px;
  height: 20px;

  border:
    1px
    solid
    var(--shopify-border-strong);

  border-radius: 999px;

  background: var(--shopify-bg-muted);

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

.shopify-configuration-switch__control::after {
  content: "";

  position: absolute;
  top: 3px;
  left: 3px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: var(--shopify-muted);

  transition:
    left var(--shopify-transition),
    background var(--shopify-transition);
}

.shopify-configuration-switch input:checked
+ .shopify-configuration-switch__control {
  border-color: var(--shopify-success);
  background: var(--shopify-success-soft);
}

.shopify-configuration-switch input:checked
+ .shopify-configuration-switch__control::after {
  left: 19px;
  background: var(--shopify-success);
}

.shopify-configuration-switch input:focus-visible
+ .shopify-configuration-switch__control {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(--shopify-info)
      30%,
      transparent
    );

  outline-offset: 2px;
}

.shopify-configuration-switch__content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shopify-configuration-switch__content strong {
  min-width: 0;

  color: var(--shopify-text);

  font-size: 9.5px;
  font-weight: 820;
  line-height: 1.2;
}

.shopify-configuration-switch__content small {
  min-width: 0;

  color: var(--shopify-muted);

  font-size: 8px;
  font-weight: 650;
  line-height: 1.35;
}

.shopify-configuration-field--interval {
  min-height: 88px;
  border-right: 0;
  border-bottom: 0;
}

/* =========================================================
   RECURSOS
   ========================================================= */

.shopify-configuration-resources {
  display: grid;

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

  min-width: 0;
}

.shopify-configuration-resource {
  position: relative;

  display: grid;

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

  align-items: center;
  gap: 10px;

  min-width: 0;
  min-height: 100px;
  padding: 11px;

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

  background: var(--shopify-bg);

  cursor: pointer;

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

.shopify-configuration-resource:last-child {
  border-right: 0;
}

.shopify-configuration-resource:hover {
  background: var(--shopify-bg-hover);
}

.shopify-configuration-resource input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.shopify-configuration-resource__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  min-width: 38px;

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

  border-radius: 10px;

  background: var(--shopify-bg-soft);
  color: var(--shopify-muted);

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

.shopify-configuration-resource__icon svg {
  width: 16px;
  height: 16px;
}

.shopify-configuration-resource > span:nth-child(3) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shopify-configuration-resource strong {
  min-width: 0;

  color: var(--shopify-text);

  font-size: 9.5px;
  font-weight: 820;
  line-height: 1.2;
}

.shopify-configuration-resource small {
  min-width: 0;

  color: var(--shopify-muted);

  font-size: 8px;
  font-weight: 650;
  line-height: 1.35;
}

.shopify-configuration-resource > svg {
  width: 15px;
  height: 15px;

  color: var(--shopify-muted-2);

  opacity: 0.35;

  transition:
    color var(--shopify-transition-fast),
    opacity var(--shopify-transition-fast),
    transform var(--shopify-transition-fast);
}

.shopify-configuration-resource input:checked
~ .shopify-configuration-resource__icon {
  border-color: var(--shopify-success-border);
  background: var(--shopify-success-soft);
  color: var(--shopify-success);
}

.shopify-configuration-resource input:checked
~ svg {
  color: var(--shopify-success);
  opacity: 1;
  transform: scale(1.06);
}

.shopify-configuration-resource:has(input:checked) {
  background:
    color-mix(
      in srgb,
      var(--shopify-success-soft)
      45%,
      var(--shopify-bg)
    );
}

.shopify-configuration-resource:has(input:focus-visible) {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(--shopify-info)
      28%,
      transparent
    );

  outline-offset: -2px;
}

/* =========================================================
   ACCIONES DEL FORMULARIO
   ========================================================= */

.shopify-configuration-form__actions {
  display: grid;

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

  align-items: center;
  gap: 12px;

  min-height: 68px;
  padding: 11px 13px;

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

  border-radius: var(--shopify-radius-xl);

  background: var(--shopify-bg-soft);
}

.shopify-configuration-form__actions > div:first-child {
  min-width: 0;
}

.shopify-configuration-form__actions > div:first-child span {
  display: block;

  min-width: 0;

  color: var(--shopify-muted);

  font-size: 8.5px;
  font-weight: 680;
  line-height: 1.35;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopify-configuration-form__actions > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-wrap: wrap;
}

/* =========================================================
   INPUT NUMBER
   ========================================================= */

.shopify-configuration-field input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.shopify-configuration-field input[type="number"]::-webkit-inner-spin-button,
.shopify-configuration-field input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* =========================================================
   DISABLED
   ========================================================= */

.shopify-configuration-field input:disabled,
.shopify-configuration-field select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.shopify-configuration-switch:has(input:disabled),
.shopify-configuration-resource:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================================
   RESPONSIVE · NOTEBOOK
   ========================================================= */

@media (max-width: 1180px) {
  .shopify-configuration-status-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .shopify-configuration-fields {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .shopify-configuration-field:nth-child(3n) {
    border-right:
      1px
      solid
      var(--shopify-border);
  }

  .shopify-configuration-field:nth-child(2n) {
    border-right: 0;
  }

  .shopify-configuration-field--token {
    grid-column: span 2;
    border-right: 0;
  }

  .shopify-configuration-options {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .shopify-configuration-field--interval {
    grid-column: span 2;

    border-top:
      1px
      solid
      var(--shopify-border);
  }
}

/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (max-width: 860px) {
  .shopify-configuration-head__content {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .shopify-configuration-head__actions {
    justify-content: flex-start;
  }

  .shopify-configuration-resources {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-resource {
    min-height: 84px;

    border-right: 0;
    border-bottom:
      1px
      solid
      var(--shopify-border);
  }

  .shopify-configuration-resource:last-child {
    border-bottom: 0;
  }

  .shopify-configuration-form__actions {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .shopify-configuration-form__actions > div:last-child {
    justify-content: flex-start;
  }
}

/* =========================================================
   RESPONSIVE · MÓVIL
   ========================================================= */

@media (max-width: 620px) {
  .shopify-configuration-page {
    gap: 10px;
  }

  .shopify-configuration-head__content {
    min-height: 0;
    padding: 13px;
  }

  .shopify-configuration-head__identity {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap: 10px;
  }

  .shopify-configuration-head__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .shopify-configuration-head__icon svg {
    width: 18px;
    height: 18px;
  }

  .shopify-configuration-head h1 {
    font-size: 23px;
  }

  .shopify-configuration-head p {
    font-size: 9.5px;
  }

  .shopify-configuration-head__actions,
  .shopify-configuration-head__actions
  .shopify-configuration-button {
    width: 100%;
  }

  .shopify-configuration-status-grid {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-status-card {
    min-height: 92px;
  }

  .shopify-configuration-panel__head {
    min-height: 66px;
    padding: 10px;
  }

  .shopify-configuration-panel__identity {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 9px;
  }

  .shopify-configuration-panel__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .shopify-configuration-panel__icon svg {
    width: 14px;
    height: 14px;
  }

  .shopify-configuration-fields {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-field,
  .shopify-configuration-field:nth-child(2n),
  .shopify-configuration-field:nth-child(3n) {
    min-height: 86px;

    border-right: 0;
    border-bottom:
      1px
      solid
      var(--shopify-border);
  }

  .shopify-configuration-field--token {
    grid-column: auto;
  }

  .shopify-configuration-options {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-switch {
    min-height: 78px;

    border-right: 0;
    border-bottom:
      1px
      solid
      var(--shopify-border);
  }

  .shopify-configuration-field--interval {
    grid-column: auto;
    min-height: 82px;

    border-top: 0;
    border-bottom: 0;
  }

  .shopify-configuration-resource {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      15px;

    gap: 9px;
    padding: 10px;
  }

  .shopify-configuration-resource__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .shopify-configuration-token-input {
    grid-template-columns:
      minmax(0, 1fr)
      38px;
  }

  .shopify-configuration-form__actions {
    padding: 10px;
  }

  .shopify-configuration-form__actions > div:last-child {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
  }

  .shopify-configuration-form__actions
  .shopify-configuration-button {
    width: 100%;
  }
}

/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 390px) {
  .shopify-configuration-head__identity {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-head__icon {
    width: 40px;
    height: 40px;
  }

  .shopify-configuration-status-card {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 9px;
    padding: 10px;
  }

  .shopify-configuration-status-card__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .shopify-configuration-token-input {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-token-input
  .shopify-configuration-icon-button {
    width: 100%;
  }
}

/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .shopify-configuration-page,
  .shopify-configuration-page *,
  .shopify-configuration-page *::before,
  .shopify-configuration-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

@keyframes shopifyConfigurationPageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shopifyConfigurationSpin {
  to {
    transform: rotate(360deg);
  }
}/* =========================================================
   SHOPIFY · CREDENCIALES CLIENT ID / CLIENT SECRET
   AGREGAR AL FINAL DEL CSS
   ========================================================= */

.shopify-configuration-fields {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.shopify-configuration-field:nth-child(4) {
  grid-column:
    span 1;

  border-right:
    1px
    solid
    var(--shopify-border);
}

.shopify-configuration-field--token {
  grid-column:
    span 2;

  border-right: 0;
}

.shopify-configuration-field[data-client-field],
.shopify-configuration-field:has(
  [data-field="client_id"]
),
.shopify-configuration-field:has(
  [data-field="client_secret"]
) {
  min-height: 104px;
}

.shopify-configuration-field:has(
  [data-field="client_id"]
) input {
  font-family:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  letter-spacing: 0.015em;
}

.shopify-configuration-field:has(
  [data-field="client_secret"]
) {
  background:
    color-mix(
      in srgb,
      var(--shopify-bg-soft)
      45%,
      var(--shopify-bg)
    );
}

.shopify-configuration-field:has(
  [data-field="client_secret"]
):focus-within {
  background: var(--shopify-bg-hover);
}

.shopify-configuration-token-input {
  grid-template-columns:
    minmax(0, 1fr)
    40px;
}

.shopify-configuration-token-input
.shopify-configuration-icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

.shopify-configuration-field
[data-field="client_secret"] {
  padding-right: 10px;
}

@media (max-width: 1180px) {
  .shopify-configuration-fields {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .shopify-configuration-field:nth-child(4) {
    grid-column:
      span 1;

    border-right: 0;
  }

  .shopify-configuration-field--token {
    grid-column:
      span 2;

    border-right: 0;
  }
}

@media (max-width: 620px) {
  .shopify-configuration-fields {
    grid-template-columns: 1fr;
  }

  .shopify-configuration-field:nth-child(4),
  .shopify-configuration-field--token {
    grid-column: auto;
    border-right: 0;
  }

  .shopify-configuration-field:has(
    [data-field="client_id"]
  ),
  .shopify-configuration-field:has(
    [data-field="client_secret"]
  ) {
    min-height: 92px;
  }
}

@media (max-width: 390px) {
  .shopify-configuration-token-input {
    grid-template-columns:
      minmax(0, 1fr)
      38px;
  }

  .shopify-configuration-token-input
  .shopify-configuration-icon-button {
    width: 38px;
    height: 40px;
    min-width: 38px;
  }
}