/* =========================================================
   PAAQ · CONFIGURACIÓN
   ========================================================= */

.paaq-configuration-page,
.paaq-configuration-page *,
.paaq-configuration-toast,
.paaq-configuration-toast * {
  box-sizing: border-box;
}

.paaq-configuration-page {
  --paaq-bg:
    #ffffff;

  --paaq-bg-soft:
    #f8f8f8;

  --paaq-bg-muted:
    #f3f3f3;

  --paaq-bg-hover:
    #eeeeee;

  --paaq-text:
    #111111;

  --paaq-text-soft:
    #3f3f46;

  --paaq-muted:
    #71717a;

  --paaq-muted-light:
    #a1a1aa;

  --paaq-border:
    #d4d4d8;

  --paaq-border-strong:
    #b4b4bb;

  --paaq-success:
    #15803d;

  --paaq-success-bg:
    #f0fdf4;

  --paaq-warning:
    #a16207;

  --paaq-warning-bg:
    #fefce8;

  --paaq-danger:
    #b91c1c;

  --paaq-danger-bg:
    #fef2f2;

  --paaq-radius:
    14px;

  --paaq-radius-small:
    10px;

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    12px;

  color:
    var(--paaq-text);

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

html[data-theme="dark"] .paaq-configuration-page {
  --paaq-bg:
    #111111;

  --paaq-bg-soft:
    #171717;

  --paaq-bg-muted:
    #1d1d1d;

  --paaq-bg-hover:
    #242424;

  --paaq-text:
    #f5f5f5;

  --paaq-text-soft:
    #d4d4d8;

  --paaq-muted:
    #a1a1aa;

  --paaq-muted-light:
    #71717a;

  --paaq-border:
    #343434;

  --paaq-border-strong:
    #4a4a4a;

  --paaq-success:
    #4ade80;

  --paaq-success-bg:
    #102416;

  --paaq-warning:
    #facc15;

  --paaq-warning-bg:
    #29240d;

  --paaq-danger:
    #f87171;

  --paaq-danger-bg:
    #2b1515;
}

/* =========================================================
   HEAD
   ========================================================= */

.paaq-configuration-head {
  width:
    100%;

  min-width:
    0;

  min-height:
    104px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    18px 20px;

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

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

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

.paaq-configuration-brand {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.paaq-configuration-brand__icon {
  width:
    48px;

  height:
    48px;

  flex:
    0 0 48px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    12px;

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

  color:
    var(--paaq-text);
}

.paaq-configuration-brand__icon .icon {
  width:
    23px;

  height:
    23px;

  stroke-width:
    1.8;
}

.paaq-configuration-brand > div {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}

.paaq-configuration-brand > div > span {
  color:
    var(--paaq-muted);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.12em;
}

.paaq-configuration-brand h1 {
  margin:
    0;

  color:
    var(--paaq-text);

  font-size:
    clamp(
      22px,
      2vw,
      28px
    );

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -0.03em;
}

.paaq-configuration-brand p {
  margin:
    3px 0 0;

  max-width:
    720px;

  color:
    var(--paaq-muted);

  font-size:
    13px;

  font-weight:
    500;

  line-height:
    1.45;
}

.paaq-configuration-head__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

/* =========================================================
   METRICS
   ========================================================= */

.paaq-configuration-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}

.paaq-configuration-metric {
  min-width:
    0;

  min-height:
    102px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px;

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

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

  background:
    var(--paaq-bg);

  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.paaq-configuration-metric:hover {
  border-color:
    var(--paaq-border-strong);

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

  transform:
    translateY(
      -1px
    );
}

.paaq-configuration-metric__icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

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

  color:
    var(--paaq-text-soft);
}

.paaq-configuration-metric__icon .icon {
  width:
    20px;

  height:
    20px;

  stroke-width:
    1.9;
}

.paaq-configuration-metric__content {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}

.paaq-configuration-metric__content small {
  color:
    var(--paaq-muted);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}

.paaq-configuration-metric__content strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--paaq-text);

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.paaq-configuration-metric__content > span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--paaq-muted);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.paaq-configuration-metric.is-connected {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-success) 38%,
      var(--paaq-border)
    );
}

.paaq-configuration-metric.is-connected
.paaq-configuration-metric__icon {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-success) 42%,
      var(--paaq-border)
    );

  background:
    var(--paaq-success-bg);

  color:
    var(--paaq-success);
}

.paaq-configuration-metric.is-warning {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-warning) 38%,
      var(--paaq-border)
    );
}

.paaq-configuration-metric.is-warning
.paaq-configuration-metric__icon {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-warning) 42%,
      var(--paaq-border)
    );

  background:
    var(--paaq-warning-bg);

  color:
    var(--paaq-warning);
}

.paaq-configuration-metric.is-pending
.paaq-configuration-metric__icon {
  color:
    var(--paaq-muted);
}

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

.paaq-configuration-content {
  width:
    100%;

  min-width:
    0;
}

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

.paaq-configuration-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

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

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

.paaq-configuration-panel__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    18px 20px;

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

.paaq-configuration-panel__head > div {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}

.paaq-configuration-panel__head > div > span {
  color:
    var(--paaq-muted);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.1em;
}

.paaq-configuration-panel__head h2 {
  margin:
    0;

  color:
    var(--paaq-text);

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}

.paaq-configuration-panel__head p {
  margin:
    2px 0 0;

  max-width:
    700px;

  color:
    var(--paaq-muted);

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.5;
}

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

.paaq-configuration-status {
  flex:
    0 0 auto;

  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    7px 10px;

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

  border-radius:
    999px;

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

  color:
    var(--paaq-text-soft);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1;
}

.paaq-configuration-status .icon {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2;
}

.paaq-configuration-status.is-connected {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-success) 42%,
      var(--paaq-border)
    );

  background:
    var(--paaq-success-bg);

  color:
    var(--paaq-success);
}

.paaq-configuration-status.is-warning {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-warning) 42%,
      var(--paaq-border)
    );

  background:
    var(--paaq-warning-bg);

  color:
    var(--paaq-warning);
}

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

.paaq-configuration-form {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  gap:
    16px;

  padding:
    20px;
}

.paaq-configuration-form__grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    14px;
}

.paaq-configuration-field {
  min-width:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    7px;
}

.paaq-configuration-field--wide {
  grid-column:
    1 / -1;
}

.paaq-configuration-field > span {
  color:
    var(--paaq-text-soft);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;
}

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

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.4;
}

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

.paaq-configuration-input {
  width:
    100%;

  min-width:
    0;

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    0 11px;

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

  border-radius:
    var(--paaq-radius-small);

  background:
    var(--paaq-bg);

  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.paaq-configuration-input:focus-within {
  border-color:
    var(--paaq-text);

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

.paaq-configuration-input > .icon {
  width:
    18px;

  height:
    18px;

  flex:
    0 0 18px;

  color:
    var(--paaq-muted);

  stroke-width:
    1.8;
}

.paaq-configuration-input input {
  width:
    100%;

  min-width:
    0;

  height:
    42px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--paaq-text);

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    650;
}

.paaq-configuration-input input::placeholder {
  color:
    var(--paaq-muted-light);

  opacity:
    1;
}

.paaq-configuration-input__action {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--paaq-muted);

  cursor:
    pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.paaq-configuration-input__action:hover {
  border-color:
    var(--paaq-border);

  background:
    var(--paaq-bg-hover);

  color:
    var(--paaq-text);
}

.paaq-configuration-input__action .icon {
  width:
    17px;

  height:
    17px;

  stroke-width:
    1.9;
}

/* =========================================================
   CONNECTION
   ========================================================= */

.paaq-configuration-connection {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px;

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

  border-radius:
    var(--paaq-radius-small);

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

.paaq-configuration-connection__icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

  background:
    var(--paaq-bg);

  color:
    var(--paaq-muted);
}

.paaq-configuration-connection__icon .icon {
  width:
    20px;

  height:
    20px;

  stroke-width:
    1.9;
}

.paaq-configuration-connection__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.paaq-configuration-connection__content strong {
  color:
    var(--paaq-text);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.3;
}

.paaq-configuration-connection__content small {
  color:
    var(--paaq-muted);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.4;
}

.paaq-configuration-connection__content > span {
  margin-top:
    2px;

  color:
    var(--paaq-muted-light);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.3;
}

.paaq-configuration-connection.is-connected {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-success) 42%,
      var(--paaq-border)
    );

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

.paaq-configuration-connection.is-connected
.paaq-configuration-connection__icon {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-success) 42%,
      var(--paaq-border)
    );

  color:
    var(--paaq-success);
}

.paaq-configuration-connection.is-warning {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-warning) 42%,
      var(--paaq-border)
    );

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

.paaq-configuration-connection.is-warning
.paaq-configuration-connection__icon {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-warning) 42%,
      var(--paaq-border)
    );

  color:
    var(--paaq-warning);
}

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

.paaq-configuration-form__actions {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding-top:
    2px;
}

.paaq-configuration-form__secondary-actions,
.paaq-configuration-form__primary-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}

.paaq-configuration-btn {
  min-height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    8px 12px;

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

  border-radius:
    9px;

  background:
    var(--paaq-bg);

  color:
    var(--paaq-text);

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.paaq-configuration-btn:hover:not(:disabled) {
  border-color:
    var(--paaq-text);

  background:
    var(--paaq-bg-hover);

  transform:
    translateY(
      -1px
    );
}

.paaq-configuration-btn:active:not(:disabled) {
  transform:
    translateY(
      0
    );
}

.paaq-configuration-btn:disabled {
  opacity:
    0.5;

  cursor:
    not-allowed;
}

.paaq-configuration-btn .icon {
  width:
    16px;

  height:
    16px;

  stroke-width:
    1.9;
}

.paaq-configuration-btn--primary {
  border-color:
    var(--paaq-text);

  background:
    var(--paaq-text);

  color:
    var(--paaq-bg);
}

.paaq-configuration-btn--primary:hover:not(:disabled) {
  border-color:
    var(--paaq-text);

  background:
    color-mix(
      in srgb,
      var(--paaq-text) 88%,
      var(--paaq-bg)
    );

  color:
    var(--paaq-bg);
}

.paaq-configuration-btn--danger {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-danger) 45%,
      var(--paaq-border)
    );

  background:
    var(--paaq-danger-bg);

  color:
    var(--paaq-danger);
}

.paaq-configuration-btn--danger:hover:not(:disabled) {
  border-color:
    var(--paaq-danger);

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

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

.paaq-configuration-state {
  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    30px;

  text-align:
    center;

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

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

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

.paaq-configuration-state__icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    4px;

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

  border-radius:
    12px;

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

  color:
    var(--paaq-muted);
}

.paaq-configuration-state__icon .icon {
  width:
    21px;

  height:
    21px;

  stroke-width:
    1.9;
}

.paaq-configuration-state strong {
  color:
    var(--paaq-text);

  font-size:
    15px;

  font-weight:
    800;
}

.paaq-configuration-state p {
  max-width:
    500px;

  margin:
    0;

  color:
    var(--paaq-muted);

  font-size:
    12px;

  line-height:
    1.5;
}

.paaq-configuration-state.is-error
.paaq-configuration-state__icon {
  border-color:
    color-mix(
      in srgb,
      var(--paaq-danger) 45%,
      var(--paaq-border)
    );

  background:
    var(--paaq-danger-bg);

  color:
    var(--paaq-danger);
}

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

.paaq-configuration-toast {
  position:
    fixed;

  z-index:
    99999;

  right:
    18px;

  bottom:
    18px;

  max-width:
    min(
      420px,
      calc(
        100vw - 36px
      )
    );

  padding:
    11px 14px;

  border:
    1px solid #cfcfcf;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #111111;

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.4;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      8px
    );

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.paaq-configuration-toast.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}

.paaq-configuration-toast.is-success {
  border-color:
    #86c997;

  background:
    #f0fdf4;

  color:
    #166534;
}

.paaq-configuration-toast.is-error {
  border-color:
    #e5a0a0;

  background:
    #fef2f2;

  color:
    #991b1b;
}

html[data-theme="dark"]
.paaq-configuration-toast {
  border-color:
    #444444;

  background:
    #151515;

  color:
    #f5f5f5;
}

html[data-theme="dark"]
.paaq-configuration-toast.is-success {
  border-color:
    #2f6f42;

  background:
    #102416;

  color:
    #86efac;
}

html[data-theme="dark"]
.paaq-configuration-toast.is-error {
  border-color:
    #713434;

  background:
    #2b1515;

  color:
    #fca5a5;
}

/* =========================================================
   ANIMATION
   ========================================================= */

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

.paaq-configuration-page .is-spinning {
  animation:
    paaqConfigurationSpin
    0.75s linear infinite;
}

/* =========================================================
   TABLET
   ========================================================= */

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

/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 720px
) {
  .paaq-configuration-page {
    gap:
      9px;
  }

  .paaq-configuration-head {
    min-height:
      0;

    align-items:
      stretch;

    flex-direction:
      column;

    padding:
      14px;
  }

  .paaq-configuration-brand {
    align-items:
      flex-start;

    gap:
      11px;
  }

  .paaq-configuration-brand__icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }

  .paaq-configuration-brand h1 {
    font-size:
      22px;
  }

  .paaq-configuration-brand p {
    font-size:
      12px;
  }

  .paaq-configuration-head__actions {
    width:
      100%;
  }

  .paaq-configuration-head__actions
  .paaq-configuration-btn {
    width:
      100%;
  }

  .paaq-configuration-metrics {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }

  .paaq-configuration-metric {
    min-height:
      82px;

    padding:
      11px 12px;
  }

  .paaq-configuration-panel__head {
    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      14px;
  }

  .paaq-configuration-status {
    width:
      fit-content;
  }

  .paaq-configuration-form {
    padding:
      14px;

    gap:
      13px;
  }

  .paaq-configuration-form__grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .paaq-configuration-field--wide {
    grid-column:
      auto;
  }

  .paaq-configuration-form__actions {
    flex-direction:
      column-reverse;

    align-items:
      stretch;
  }

  .paaq-configuration-form__secondary-actions,
  .paaq-configuration-form__primary-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .paaq-configuration-btn {
    width:
      100%;

    min-height:
      42px;
  }

  .paaq-configuration-connection {
    align-items:
      flex-start;

    padding:
      12px;
  }

  .paaq-configuration-toast {
    right:
      10px;

    bottom:
      10px;

    max-width:
      calc(
        100vw - 20px
      );
  }
}

/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width: 420px
) {
  .paaq-configuration-head,
  .paaq-configuration-panel__head,
  .paaq-configuration-form {
    padding:
      12px;
  }

  .paaq-configuration-brand__icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }

  .paaq-configuration-brand__icon .icon {
    width:
      19px;

    height:
      19px;
  }

  .paaq-configuration-brand h1 {
    font-size:
      20px;
  }

  .paaq-configuration-metric {
    min-height:
      76px;
  }

  .paaq-configuration-metric__icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }

  .paaq-configuration-input {
    min-height:
      42px;
  }

  .paaq-configuration-input input {
    height:
      40px;
  }
}