/* =========================================================
   UBICACIÓN:
   frontend/src/pages/envia/configuracion/configuracion.css

   WIRTZ HUB · ENVIA · CONFIGURACIÓN
   CSS COMPLETO
   PARTE 1 DE 2
   ========================================================= */


/* =========================================================
   01. RESET
   ========================================================= */

.envia-config-page,
.envia-config-page *,
.envia-config-page *::before,
.envia-config-page *::after,
.envia-config-toast,
.envia-config-toast *,
.envia-config-toast *::before,
.envia-config-toast *::after {
  box-sizing: border-box;

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

  font-synthesis: none;
}

.envia-config-page button,
.envia-config-page input,
.envia-config-page select {
  font: inherit;
}

.envia-config-page button {
  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
}

.envia-config-page .icon,
.envia-config-page svg,
.envia-config-toast .icon,
.envia-config-toast svg {
  display: block;

  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  min-width: 14px;
  min-height: 14px;

  margin: 0;

  color: currentColor;

  stroke: currentColor;
  stroke-width: 1.9;

  fill: none;

  pointer-events: none;
}


/* =========================================================
   02. VARIABLES · CLARO
   ========================================================= */

.envia-config-page {
  --envia-page-bg: #f5f5f5;

  --envia-bg: #ffffff;
  --envia-bg-soft: #f7f7f7;
  --envia-bg-muted: #eeeeee;
  --envia-bg-strong: #e6e6e6;

  --envia-hover: #f2f2f2;

  --envia-border: #dddddd;
  --envia-border-soft: #ebebeb;
  --envia-border-strong: #bfbfbf;
  --envia-border-dark: #989898;

  --envia-text: #0a0a0a;
  --envia-text-strong: #000000;
  --envia-text-soft: #404040;

  --envia-muted: #737373;
  --envia-muted-2: #a3a3a3;

  --envia-success: #15803d;
  --envia-success-soft: rgba(21, 128, 61, 0.07);
  --envia-success-line: rgba(21, 128, 61, 0.30);

  --envia-warning: #b45309;
  --envia-warning-soft: rgba(180, 83, 9, 0.07);
  --envia-warning-line: rgba(180, 83, 9, 0.30);

  --envia-danger: #dc2626;
  --envia-danger-soft: rgba(220, 38, 38, 0.07);
  --envia-danger-line: rgba(220, 38, 38, 0.30);

  --envia-info: #404040;
  --envia-info-soft: rgba(0, 0, 0, 0.045);
  --envia-info-line: rgba(0, 0, 0, 0.20);

  --envia-radius-xs: 6px;
  --envia-radius-sm: 8px;
  --envia-radius: 10px;
  --envia-radius-lg: 14px;

  --envia-transition-fast: 130ms ease;

  --envia-transition:
    220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


/* =========================================================
   03. VARIABLES · OSCURO
   ========================================================= */

html[data-theme="dark"] .envia-config-page,
body.dark .envia-config-page,
.dark .envia-config-page {
  --envia-page-bg: #080808;

  --envia-bg: #090909;
  --envia-bg-soft: #111111;
  --envia-bg-muted: #181818;
  --envia-bg-strong: #1d1d1d;

  --envia-hover: #151515;

  --envia-border: #272727;
  --envia-border-soft: #1c1c1c;
  --envia-border-strong: #404040;
  --envia-border-dark: #555555;

  --envia-text: #f5f5f5;
  --envia-text-strong: #ffffff;
  --envia-text-soft: #cccccc;

  --envia-muted: #8a8a8a;
  --envia-muted-2: #606060;

  --envia-success: #4ade80;
  --envia-success-soft: rgba(74, 222, 128, 0.075);
  --envia-success-line: rgba(74, 222, 128, 0.28);

  --envia-warning: #fbbf24;
  --envia-warning-soft: rgba(251, 191, 36, 0.075);
  --envia-warning-line: rgba(251, 191, 36, 0.28);

  --envia-danger: #f87171;
  --envia-danger-soft: rgba(248, 113, 113, 0.075);
  --envia-danger-line: rgba(248, 113, 113, 0.28);

  --envia-info: #d4d4d4;
  --envia-info-soft: rgba(255, 255, 255, 0.05);
  --envia-info-line: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   04. APP CONTENT
   ========================================================= */

.app-content:has(.envia-config-page) {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;

  background:
    var(
      --envia-page-bg
    );

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.envia-config-page),
body:has(.envia-config-page) .app-shell,
body:has(.envia-config-page) .app-main {
  min-width: 0 !important;

  overflow-x: hidden !important;
}


/* =========================================================
   05. PAGE
   ========================================================= */

.envia-config-page {
  display: grid;

  grid-auto-rows: max-content;

  align-content: start;

  gap: 8px;

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

  min-height: 100%;

  padding: 8px;

  background:
    var(
      --envia-page-bg
    );

  color:
    var(
      --envia-text
    );

  overflow-x: hidden;

  animation:
    enviaConfigPageIn
    220ms
    ease
    both;
}


/* =========================================================
   06. HEADER
   ========================================================= */

.envia-config-head {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 12px;

  width: 100%;
  min-width: 0;

  min-height: 72px;

  padding:
    10px
    12px;

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

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

  background:
    var(
      --envia-bg
    );

  box-shadow: none;

  overflow: hidden;
}

.envia-config-head::before {
  content: "";

  position: absolute;

  top: 0;
  right: 12px;
  left: 12px;

  height: 1px;

  background:
    var(
      --envia-border-strong
    );
}


/* =========================================================
   07. BRAND
   ========================================================= */

.envia-config-brand {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}

.envia-config-brand__icon {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    38px;

  width: 38px;
  height: 38px;

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

  border-radius: 10px;

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

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

.envia-config-brand__icon::before,
.envia-config-brand__icon::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  opacity: 0.6;
}

.envia-config-brand__icon::before {
  top: 4px;
  left: 4px;

  border-top:
    1px
    solid
    currentColor;

  border-left:
    1px
    solid
    currentColor;
}

.envia-config-brand__icon::after {
  right: 4px;
  bottom: 4px;

  border-right:
    1px
    solid
    currentColor;

  border-bottom:
    1px
    solid
    currentColor;
}

.envia-config-brand__icon .icon,
.envia-config-brand__icon svg {
  width: 17px;
  height: 17px;

  min-width: 17px;
  min-height: 17px;
}

.envia-config-brand__copy {
  min-width: 0;
}

.envia-config-brand__copy > span {
  display: block;

  margin-bottom: 3px;

  color:
    var(
      --envia-muted
    );

  font-size: 9px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.envia-config-brand__copy h2 {
  margin: 0;

  overflow: hidden;

  color:
    var(
      --envia-text-strong
    );

  font-size:
    clamp(
      22px,
      1.8vw,
      27px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.04em;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-brand__copy p {
  max-width: 780px;

  margin:
    5px
    0
    0;

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

  font-size: 12px;

  font-weight: 620;

  line-height: 1.4;
}


/* =========================================================
   08. HEADER ACTIONS
   ========================================================= */

.envia-config-head__actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 6px;

  min-width: 0;
}


/* =========================================================
   09. BOTONES
   ========================================================= */

.envia-config-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  flex: 0 0 auto;

  min-width: 0;

  height: 34px;
  min-height: 34px;

  padding:
    0
    9px;

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

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

  outline: none;

  background:
    var(
      --envia-bg
    );

  color:
    var(
      --envia-text
    );

  font-size: 10.5px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

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

.envia-config-btn:hover:not(:disabled) {
  border-color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-text
    );

  color:
    var(
      --envia-bg
    );

  transform:
    translateY(
      -1px
    );
}

.envia-config-btn:active:not(:disabled) {
  transform:
    scale(
      0.97
    );
}

.envia-config-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;

  transform: none;
}

.envia-config-btn .icon,
.envia-config-btn svg {
  width: 12px;
  height: 12px;

  min-width: 12px;
  min-height: 12px;
}

.envia-config-btn--primary {
  border-color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-text
    );

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

.envia-config-btn--primary:hover:not(:disabled) {
  border-color:
    var(
      --envia-text-strong
    );

  background:
    var(
      --envia-text-strong
    );

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

.envia-config-btn--secondary {
  background:
    var(
      --envia-bg-soft
    );
}

.envia-config-btn--danger {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-btn--danger:hover:not(:disabled) {
  border-color:
    var(
      --envia-danger
    );

  background:
    var(
      --envia-danger
    );

  color: #ffffff;
}


/* =========================================================
   10. ESTADO PRINCIPAL
   ========================================================= */

.envia-config-status-wrapper {
  width: 100%;
  min-width: 0;
}

.envia-config-status {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 10px;

  width: 100%;
  min-width: 0;

  min-height: 70px;

  padding:
    8px
    10px;

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

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

  background:
    var(
      --envia-bg
    );

  overflow: hidden;
}

.envia-config-status::before {
  content: "";

  position: absolute;

  top: 7px;
  bottom: 7px;
  left: 0;

  width: 2px;

  background:
    var(
      --envia-muted
    );
}

.envia-config-status.is-valid::before {
  background:
    var(
      --envia-success
    );
}

.envia-config-status.is-invalid::before,
.envia-config-status.is-error::before {
  background:
    var(
      --envia-danger
    );
}

.envia-config-status.is-pending::before {
  background:
    var(
      --envia-warning
    );
}

.envia-config-status__main {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;
}

.envia-config-status__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    32px;

  width: 32px;
  height: 32px;

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

  border-radius: 7px;

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

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

.envia-config-status.is-valid
.envia-config-status__icon {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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

.envia-config-status.is-invalid
.envia-config-status__icon,
.envia-config-status.is-error
.envia-config-status__icon {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-status.is-pending
.envia-config-status__icon {
  border-color:
    var(
      --envia-warning-line
    );

  background:
    var(
      --envia-warning-soft
    );

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

.envia-config-status__icon .icon,
.envia-config-status__icon svg {
  width: 13px;
  height: 13px;
}

.envia-config-status__copy {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-config-status__copy > span {
  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.envia-config-status__copy strong {
  overflow: hidden;

  color:
    var(
      --envia-text
    );

  font-size: 12px;

  font-weight: 900;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-status__copy small {
  overflow: hidden;

  color:
    var(
      --envia-muted
    );

  font-size: 9px;

  font-weight: 620;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-status__meta {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;
}


/* =========================================================
   11. AMBIENTE / VALIDACIÓN
   ========================================================= */

.envia-config-environment,
.envia-config-status__validation {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 4px;

  min-height: 28px;

  padding:
    0
    7px;

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

  border-radius: 7px;

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

  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 800;

  white-space: nowrap;
}

.envia-config-environment .icon,
.envia-config-environment svg,
.envia-config-status__validation .icon,
.envia-config-status__validation svg {
  width: 10px;
  height: 10px;

  min-width: 10px;
}

.envia-config-environment.is-production {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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


/* =========================================================
   12. RESUMEN
   ========================================================= */

.envia-config-summary {
  display: grid;

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

  gap: 0;

  width: 100%;
  min-width: 0;

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

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

  background:
    var(
      --envia-bg
    );

  overflow: hidden;
}

.envia-config-summary-card {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;
  min-height: 68px;

  padding:
    8px
    9px;

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

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

.envia-config-summary-card:last-child {
  border-right: 0;
}

.envia-config-summary-card__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

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

  border-radius: 7px;

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

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

.envia-config-summary-card__icon .icon,
.envia-config-summary-card__icon svg {
  width: 13px;
  height: 13px;
}

.envia-config-summary-card__copy {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-config-summary-card__copy > span {
  overflow: hidden;

  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 900;

  text-transform: uppercase;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-summary-card__copy strong {
  overflow: hidden;

  color:
    var(
      --envia-text
    );

  font-size: 12px;

  font-weight: 900;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-summary-card__copy small {
  overflow: hidden;

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

  font-size: 7.5px;

  font-weight: 620;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-summary-card.is-valid
.envia-config-summary-card__icon,
.envia-config-summary-card.is-active
.envia-config-summary-card__icon,
.envia-config-summary-card.is-configured
.envia-config-summary-card__icon,
.envia-config-summary-card.is-production
.envia-config-summary-card__icon {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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

.envia-config-summary-card.is-error
.envia-config-summary-card__icon,
.envia-config-summary-card.is-invalid
.envia-config-summary-card__icon {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-summary-card.is-pending
.envia-config-summary-card__icon {
  border-color:
    var(
      --envia-warning-line
    );

  background:
    var(
      --envia-warning-soft
    );

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


/* =========================================================
   13. WORKSPACE
   ========================================================= */

.envia-config-workspace {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1.55fr
    )
    minmax(
      300px,
      0.72fr
    );

  align-items: start;

  gap: 8px;

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

.envia-config-workspace__main,
.envia-config-workspace__side {
  min-width: 0;
}

.envia-config-workspace__side {
  display: grid;

  gap: 8px;
}


/* =========================================================
   14. PANELES
   ========================================================= */

.envia-config-panel {
  width: 100%;
  min-width: 0;

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

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

  background:
    var(
      --envia-bg
    );

  box-shadow: none;

  overflow: hidden;
}

.envia-config-panel__head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-width: 0;
  min-height: 50px;

  padding:
    7px
    9px;

  border-bottom:
    1px
    solid
    var(
      --envia-border-strong
    );

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

.envia-config-panel__heading {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.envia-config-panel__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    30px;

  width: 30px;
  height: 30px;

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

  border-radius: 7px;

  background:
    var(
      --envia-bg
    );

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

.envia-config-panel__icon .icon,
.envia-config-panel__icon svg {
  width: 12px;
  height: 12px;
}

.envia-config-panel__heading > div {
  min-width: 0;
}

.envia-config-panel__heading > div > span {
  display: block;

  color:
    var(
      --envia-muted
    );

  font-size: 7.5px;

  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.envia-config-panel__heading h3 {
  margin:
    2px
    0
    0;

  overflow: hidden;

  color:
    var(
      --envia-text
    );

  font-size: 11px;

  font-weight: 900;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-panel__heading p {
  margin:
    2px
    0
    0;

  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 620;

  line-height: 1.35;
}


/* =========================================================
   15. PANEL RECORD / COUNTER
   ========================================================= */

.envia-config-panel__record,
.envia-config-panel__counter {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 4px;

  flex: 0 0 auto;

  min-height: 27px;

  padding:
    0
    7px;

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

  border-radius: 7px;

  background:
    var(
      --envia-bg
    );

  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 850;
}

.envia-config-panel__record .icon,
.envia-config-panel__record svg {
  width: 10px;
  height: 10px;
}

.envia-config-panel__record.is-active {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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


/* =========================================================
   16. PERMISOS
   ========================================================= */

.envia-config-permission-note {
  display: flex;

  align-items: center;

  gap: 6px;

  margin:
    7px
    8px
    0;

  padding:
    7px
    8px;

  border:
    1px
    solid
    var(
      --envia-warning-line
    );

  border-radius: 7px;

  background:
    var(
      --envia-warning-soft
    );

  color:
    var(
      --envia-warning
    );

  font-size: 8.5px;

  font-weight: 700;
}

.envia-config-permission-note .icon,
.envia-config-permission-note svg {
  width: 12px;
  height: 12px;
}


/* =========================================================
   17. FORMULARIO
   ========================================================= */

.envia-config-form {
  width: 100%;
  min-width: 0;

  padding: 8px;
}

.envia-config-form__grid {
  display: grid;

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

  gap: 7px;

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

.envia-config-field {
  display: grid;

  gap: 5px;

  min-width: 0;

  padding: 7px;

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

  border-radius: 8px;

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

.envia-config-field--token {
  grid-column:
    1 /
    -1;
}

.envia-config-field > span {
  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 900;

  text-transform: uppercase;
}

.envia-config-field > small {
  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 620;

  line-height: 1.35;
}


/* =========================================================
   18. INPUT
   ========================================================= */

.envia-config-input {
  display: grid;

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

  align-items: center;

  gap: 0;

  width: 100%;
  min-width: 0;

  height: 34px;

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

  border-radius: 7px;

  background:
    var(
      --envia-bg
    );

  color:
    var(
      --envia-muted
    );

  overflow: hidden;
}

.envia-config-input--token {
  grid-template-columns:
    28px
    minmax(
      0,
      1fr
    )
    28px
    28px;
}

.envia-config-input:focus-within {
  border-color:
    var(
      --envia-text
    );

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

.envia-config-input > .icon,
.envia-config-input > svg {
  justify-self: center;

  width: 12px;
  height: 12px;
}

.envia-config-input input,
.envia-config-input select {
  width: 100%;
  min-width: 0;

  height: 100%;

  padding:
    0
    7px;

  border: 0;

  outline: 0;

  background: transparent;

  color:
    var(
      --envia-text
    );

  font-size: 10px;

  font-weight: 700;
}

.envia-config-input input::placeholder {
  color:
    var(
      --envia-muted-2
    );
}

.envia-config-input select {
  cursor: pointer;
}


/* =========================================================
   19. INPUT ACTIONS
   ========================================================= */

.envia-config-input__action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;

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

  border-radius: 0;

  background: transparent;

  color:
    var(
      --envia-muted
    );

  cursor: pointer;
}

.envia-config-input__action:hover:not(:disabled) {
  background:
    var(
      --envia-hover
    );

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

.envia-config-input__action .icon,
.envia-config-input__action svg {
  width: 11px;
  height: 11px;
}


/* =========================================================
   20. OPTIONS
   ========================================================= */

.envia-config-options {
  display: grid;

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

  gap: 7px;

  width: 100%;
  min-width: 0;

  margin-top: 7px;
}


/* =========================================================
   21. SWITCH
   ========================================================= */

.envia-config-switch {
  display: grid;

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

  align-items: center;

  gap: 8px;

  min-width: 0;
  min-height: 58px;

  padding: 7px;

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

  border-radius: 8px;

  background:
    var(
      --envia-bg
    );

  cursor: pointer;
}

.envia-config-switch:hover {
  background:
    var(
      --envia-hover
    );
}

.envia-config-switch__copy {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-config-switch__copy strong {
  color:
    var(
      --envia-text
    );

  font-size: 9.5px;

  font-weight: 850;
}

.envia-config-switch__copy small {
  color:
    var(
      --envia-muted
    );

  font-size: 8px;

  font-weight: 620;

  line-height: 1.35;
}

.envia-config-switch input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

.envia-config-switch b {
  position: relative;

  display: block;

  flex: 0 0 auto;

  width: 36px;
  height: 20px;

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

  border-radius: 999px;

  background:
    var(
      --envia-bg-muted
    );
}

.envia-config-switch b::after {
  content: "";

  position: absolute;

  top: 2px;
  left: 2px;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  background:
    var(
      --envia-muted
    );

  transition:
    transform
      var(
        --envia-transition
      ),
    background
      var(
        --envia-transition-fast
      );
}

.envia-config-switch
input:checked + b {
  border-color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-text
    );
}

.envia-config-switch
input:checked + b::after {
  background:
    var(
      --envia-bg
    );

  transform:
    translateX(
      16px
    );
}


/* =========================================================
   22. FOOTER FORM
   ========================================================= */

.envia-config-form__footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  width: 100%;
  min-width: 0;

  margin-top: 7px;

  padding-top: 7px;

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

.envia-config-form__security {
  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;
}

.envia-config-form__security > .icon,
.envia-config-form__security > svg {
  width: 14px;
  height: 14px;

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

.envia-config-form__security > div {
  display: grid;

  gap: 1px;

  min-width: 0;
}

.envia-config-form__security strong {
  color:
    var(
      --envia-text
    );

  font-size: 8.5px;

  font-weight: 850;
}

.envia-config-form__security small {
  color:
    var(
      --envia-muted
    );

  font-size: 7.5px;
}

.envia-config-form__actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 5px;
}


/* =========================================================
   23. LOADING
   ========================================================= */

.envia-config-loader {
  width: 18px;
  height: 18px;

  flex:
    0
    0
    18px;

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

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

  border-radius: 50%;

  animation:
    enviaConfigSpin
    700ms
    linear
    infinite;
}

.envia-config-loading {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 100px;

  padding: 16px;

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

.envia-config-loading--panel {
  min-height: 260px;
}

.envia-config-loading strong {
  display: block;

  color:
    var(
      --envia-text
    );

  font-size: 10px;

  font-weight: 850;
}

.envia-config-loading p {
  margin:
    2px
    0
    0;

  color:
    var(
      --envia-muted
    );

  font-size: 8.5px;
}

.envia-config-page .is-spinning {
  animation:
    enviaConfigSpin
    700ms
    linear
    infinite;
}


/* =========================================================
   24. SKELETON
   ========================================================= */

.envia-config-summary-card.is-skeleton {
  pointer-events: none;
}

.envia-config-summary-card.is-skeleton > span,
.envia-config-summary-card.is-skeleton i,
.envia-config-summary-card.is-skeleton b,
.envia-config-summary-card.is-skeleton small {
  display: block;

  border-radius: 5px;

  background:
    var(
      --envia-bg-muted
    );
}

.envia-config-summary-card.is-skeleton > span {
  width: 30px;
  height: 30px;
}

.envia-config-summary-card.is-skeleton > div {
  display: grid;

  gap: 5px;

  width: 100%;
}

.envia-config-summary-card.is-skeleton i {
  width: 48%;
  height: 7px;
}

.envia-config-summary-card.is-skeleton b {
  width: 68%;
  height: 11px;
}

.envia-config-summary-card.is-skeleton small {
  width: 88%;
  height: 7px;
}


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

   PARTE 2 CONTINÚA CON:
   - prueba de conexión
   - transportistas
   - historial
   - toast
   - responsive
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/envia/configuracion/configuracion.css

   WIRTZ HUB · ENVIA · CONFIGURACIÓN
   CSS COMPLETO
   PARTE 2 DE 2

   CONTINÚA DESPUÉS DE:
   .envia-config-summary-card.is-skeleton small
   ========================================================= */


/* =========================================================
   25. PRUEBA DE CONEXIÓN
   ========================================================= */

.envia-config-test {
  width: 100%;
  min-width: 0;

  padding: 8px;
}

.envia-config-test-empty,
.envia-config-carriers-empty,
.envia-config-logs-empty {
  display: grid;

  place-items: center;
  align-content: center;

  gap: 6px;

  min-height: 140px;

  padding: 18px;

  color:
    var(
      --envia-muted
    );

  text-align: center;
}

.envia-config-test-empty__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

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

  border-radius: 8px;

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

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

.envia-config-test-empty__icon .icon,
.envia-config-test-empty__icon svg,
.envia-config-carriers-empty > .icon,
.envia-config-carriers-empty > svg,
.envia-config-logs-empty > .icon,
.envia-config-logs-empty > svg {
  width: 16px;
  height: 16px;
}

.envia-config-test-empty strong,
.envia-config-carriers-empty strong,
.envia-config-logs-empty strong {
  color:
    var(
      --envia-text
    );

  font-size: 10.5px;

  font-weight: 900;
}

.envia-config-test-empty p,
.envia-config-carriers-empty p,
.envia-config-logs-empty p {
  max-width: 340px;

  margin: 0;

  color:
    var(
      --envia-muted
    );

  font-size: 8.8px;

  font-weight: 620;

  line-height: 1.4;
}


/* =========================================================
   26. RESULTADO DE CONEXIÓN
   ========================================================= */

.envia-config-test-result {
  width: 100%;
  min-width: 0;

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

  border-radius: 8px;

  background:
    var(
      --envia-bg
    );

  overflow: hidden;
}

.envia-config-test-result.is-success {
  border-color:
    var(
      --envia-success-line
    );
}

.envia-config-test-result.is-error {
  border-color:
    var(
      --envia-danger-line
    );
}

.envia-config-test-result__head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-width: 0;

  padding:
    7px
    8px;

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

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

.envia-config-test-result__status {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.envia-config-test-result__status > span {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 30px;

  width: 30px;
  height: 30px;

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

  border-radius: 7px;

  background:
    var(
      --envia-bg
    );

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

.envia-config-test-result.is-success
.envia-config-test-result__status > span {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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

.envia-config-test-result.is-error
.envia-config-test-result__status > span {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-test-result__status .icon,
.envia-config-test-result__status svg {
  width: 12px;
  height: 12px;
}

.envia-config-test-result__status small {
  display: block;

  margin-bottom: 2px;

  color:
    var(
      --envia-muted
    );

  font-size: 7.5px;

  font-weight: 900;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.envia-config-test-result__status strong {
  color:
    var(
      --envia-text
    );

  font-size: 10px;

  font-weight: 900;
}


/* =========================================================
   27. MÉTRICAS DE CONEXIÓN
   ========================================================= */

.envia-config-test-result__metrics {
  display: grid;

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

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

.envia-config-test-result__metrics article {
  display: grid;

  gap: 2px;

  min-width: 0;
  min-height: 50px;

  padding: 7px;

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

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

.envia-config-test-result__metrics article:nth-child(2n) {
  border-right: 0;
}

.envia-config-test-result__metrics article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.envia-config-test-result__metrics span {
  color:
    var(
      --envia-muted
    );

  font-size: 7.5px;

  font-weight: 850;

  text-transform: uppercase;
}

.envia-config-test-result__metrics strong {
  overflow: hidden;

  color:
    var(
      --envia-text
    );

  font-size: 12px;

  font-weight: 900;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   28. TRANSPORTISTAS
   ========================================================= */

.envia-config-carriers {
  width: 100%;
  min-width: 0;

  max-height: 280px;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(
      --envia-border-strong
    )
    transparent;
}

.envia-config-carrier {
  display: grid;

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

  align-items: center;

  gap: 7px;

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

  padding:
    6px
    8px;

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

  background:
    var(
      --envia-bg
    );

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

.envia-config-carrier:last-child {
  border-bottom: 0;
}

.envia-config-carrier:hover {
  background:
    var(
      --envia-hover
    );
}

.envia-config-carrier__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

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

  border-radius: 6px;

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

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

.envia-config-carrier__icon .icon,
.envia-config-carrier__icon svg {
  width: 11px;
  height: 11px;
}

.envia-config-carrier__copy {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-config-carrier__copy strong,
.envia-config-carrier__copy small {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-config-carrier__copy strong {
  color:
    var(
      --envia-text
    );

  font-size: 9.5px;

  font-weight: 850;
}

.envia-config-carrier__copy small {
  color:
    var(
      --envia-muted
    );

  font-size: 7.8px;

  font-weight: 620;
}

.envia-config-carrier__status {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 22px;

  padding:
    0
    6px;

  border:
    1px
    solid
    var(
      --envia-success-line
    );

  border-radius: 999px;

  background:
    var(
      --envia-success-soft
    );

  color:
    var(
      --envia-success
    );

  font-size: 7px;

  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   29. HISTORIAL
   ========================================================= */

.envia-config-logs {
  display: grid;

  width: 100%;
  min-width: 0;

  max-height: 480px;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(
      --envia-border-strong
    )
    transparent;
}

.envia-config-log {
  display: grid;

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

  align-items: start;

  gap: 7px;

  min-width: 0;

  padding:
    8px
    9px;

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

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

.envia-config-log:last-child {
  border-bottom: 0;
}

.envia-config-log:hover {
  background:
    var(
      --envia-hover
    );
}

.envia-config-log__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

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

  border-radius: 7px;

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

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

.envia-config-log.is-success
.envia-config-log__icon {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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

.envia-config-log.is-invalid
.envia-config-log__icon,
.envia-config-log.is-error
.envia-config-log__icon {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-log.is-pending
.envia-config-log__icon {
  border-color:
    var(
      --envia-warning-line
    );

  background:
    var(
      --envia-warning-soft
    );

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

.envia-config-log__icon .icon,
.envia-config-log__icon svg {
  width: 12px;
  height: 12px;
}

.envia-config-log__content {
  min-width: 0;
}

.envia-config-log__head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 8px;

  min-width: 0;
}

.envia-config-log__head > div {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;
}

.envia-config-log__head strong {
  color:
    var(
      --envia-text
    );

  font-size: 9.5px;

  font-weight: 900;

  text-transform: capitalize;
}

.envia-config-log__head > div > span {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 20px;

  padding:
    0
    6px;

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

  border-radius: 999px;

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

  color:
    var(
      --envia-muted
    );

  font-size: 6.8px;

  font-weight: 900;

  text-transform: uppercase;
}

.envia-config-log.is-success
.envia-config-log__head > div > span {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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

.envia-config-log.is-error
.envia-config-log__head > div > span,
.envia-config-log.is-invalid
.envia-config-log__head > div > span {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-log__head time {
  flex: 0 0 auto;

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

  font-size: 7.5px;

  font-weight: 650;

  white-space: nowrap;
}

.envia-config-log__content p {
  margin:
    4px
    0
    0;

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

  font-size: 8.8px;

  font-weight: 620;

  line-height: 1.4;
}

.envia-config-log__meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    5px
    10px;

  margin-top: 5px;
}

.envia-config-log__meta span {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  color:
    var(
      --envia-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}

.envia-config-log__meta .icon,
.envia-config-log__meta svg {
  width: 9px;
  height: 9px;

  min-width: 9px;
}

.envia-config-log__error {
  display: inline-flex;

  margin-top: 5px;

  min-height: 20px;

  align-items: center;

  padding:
    0
    6px;

  border:
    1px
    solid
    var(
      --envia-danger-line
    );

  border-radius: 6px;

  background:
    var(
      --envia-danger-soft
    );

  color:
    var(
      --envia-danger
    );

  font-size: 7px;

  font-weight: 800;
}


/* =========================================================
   30. FOOTER LOGS
   ========================================================= */

.envia-config-logs__footer {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding:
    6px
    8px;

  border-top:
    1px
    solid
    var(
      --envia-border-strong
    );

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


/* =========================================================
   31. TOAST
   ========================================================= */

.envia-config-toast {
  --envia-bg: #ffffff;
  --envia-text: #0a0a0a;
  --envia-border-strong: #bfbfbf;

  --envia-success: #15803d;
  --envia-success-soft: rgba(21, 128, 61, 0.07);
  --envia-success-line: rgba(21, 128, 61, 0.30);

  --envia-warning: #b45309;
  --envia-warning-soft: rgba(180, 83, 9, 0.07);
  --envia-warning-line: rgba(180, 83, 9, 0.30);

  --envia-danger: #dc2626;
  --envia-danger-soft: rgba(220, 38, 38, 0.07);
  --envia-danger-line: rgba(220, 38, 38, 0.30);

  position: fixed;

  right: 12px;
  bottom: 18px;

  z-index: 99999;

  display: grid;

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

  align-items: center;

  gap: 7px;

  width:
    min(
      360px,
      calc(
        100vw -
        24px
      )
    );

  min-height: 48px;

  padding:
    8px
    9px;

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

  border-radius: 9px;

  background:
    var(
      --envia-bg
    );

  color:
    var(
      --envia-text
    );

  box-shadow: none;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(
      7px
    );

  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease;
}

html[data-theme="dark"]
.envia-config-toast,
body.dark
.envia-config-toast,
.dark
.envia-config-toast {
  --envia-bg: #090909;
  --envia-text: #f5f5f5;
  --envia-border-strong: #404040;

  --envia-success: #4ade80;
  --envia-success-soft: rgba(74, 222, 128, 0.075);
  --envia-success-line: rgba(74, 222, 128, 0.28);

  --envia-warning: #fbbf24;
  --envia-warning-soft: rgba(251, 191, 36, 0.075);
  --envia-warning-line: rgba(251, 191, 36, 0.28);

  --envia-danger: #f87171;
  --envia-danger-soft: rgba(248, 113, 113, 0.075);
  --envia-danger-line: rgba(248, 113, 113, 0.28);
}

.envia-config-toast.is-visible {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(
      0
    );
}

.envia-config-toast__icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

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

  border-radius: 7px;

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

.envia-config-toast.is-success
.envia-config-toast__icon {
  border-color:
    var(
      --envia-success-line
    );

  background:
    var(
      --envia-success-soft
    );

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

.envia-config-toast.is-error
.envia-config-toast__icon {
  border-color:
    var(
      --envia-danger-line
    );

  background:
    var(
      --envia-danger-soft
    );

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

.envia-config-toast.is-warning
.envia-config-toast__icon {
  border-color:
    var(
      --envia-warning-line
    );

  background:
    var(
      --envia-warning-soft
    );

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

.envia-config-toast__icon .icon,
.envia-config-toast__icon svg {
  width: 12px;
  height: 12px;
}

.envia-config-toast__message {
  min-width: 0;

  color: inherit;

  font-size: 9px;

  font-weight: 750;

  line-height: 1.35;
}


/* =========================================================
   32. SCROLLBAR
   ========================================================= */

.envia-config-carriers::-webkit-scrollbar,
.envia-config-logs::-webkit-scrollbar {
  width: 7px;
}

.envia-config-carriers::-webkit-scrollbar-track,
.envia-config-logs::-webkit-scrollbar-track {
  background: transparent;
}

.envia-config-carriers::-webkit-scrollbar-thumb,
.envia-config-logs::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

  background:
    var(
      --envia-border-strong
    );

  background-clip: padding-box;
}


/* =========================================================
   33. SELECT DARK
   ========================================================= */

html[data-theme="dark"]
.envia-config-input select,
body.dark
.envia-config-input select,
.dark
.envia-config-input select {
  color-scheme: dark;
}


/* =========================================================
   34. FOCUS
   ========================================================= */

.envia-config-page
button:focus-visible,
.envia-config-page
input:focus-visible,
.envia-config-page
select:focus-visible {
  outline:
    2px
    solid
    var(
      --envia-text
    );

  outline-offset: 2px;
}


/* =========================================================
   35. RESPONSIVE · 1400
   ========================================================= */

@media (max-width: 1400px) {
  .envia-config-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .envia-config-summary-card {
    border-top:
      1px
      solid
      var(
        --envia-border
      );
  }

  .envia-config-summary-card:nth-child(-n + 3) {
    border-top: 0;
  }

  .envia-config-summary-card:nth-child(3n) {
    border-right: 0;
  }

  .envia-config-workspace {
    grid-template-columns:
      minmax(
        0,
        1.4fr
      )
      minmax(
        280px,
        0.72fr
      );
  }
}


/* =========================================================
   36. RESPONSIVE · 1120
   ========================================================= */

@media (max-width: 1120px) {
  .envia-config-workspace {
    grid-template-columns: 1fr;
  }

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

  .envia-config-carriers {
    max-height: 260px;
  }
}


/* =========================================================
   37. RESPONSIVE · 860
   ========================================================= */

@media (max-width: 860px) {
  .envia-config-page {
    gap: 6px;

    padding: 5px;
  }

  .envia-config-head {
    grid-template-columns: 1fr;

    gap: 8px;

    padding: 8px;
  }

  .envia-config-head__actions {
    width: 100%;

    justify-content: stretch;
  }

  .envia-config-head__actions
  .envia-config-btn {
    width: 100%;
  }

  .envia-config-status {
    grid-template-columns: 1fr;

    align-items: start;
  }

  .envia-config-status__meta {
    justify-content: flex-start;
  }

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

  .envia-config-summary-card,
  .envia-config-summary-card:nth-child(3n) {
    border-right:
      1px
      solid
      var(
        --envia-border
      );

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

  .envia-config-summary-card:nth-child(-n + 2) {
    border-top: 0;
  }

  .envia-config-summary-card:nth-child(2n) {
    border-right: 0;
  }

  .envia-config-workspace__side {
    grid-template-columns: 1fr;
  }

  .envia-config-form__grid,
  .envia-config-options {
    grid-template-columns: 1fr;
  }

  .envia-config-field--token {
    grid-column: auto;
  }

  .envia-config-form__footer {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-config-form__actions {
    display: grid;

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

    width: 100%;
  }

  .envia-config-form__actions
  .envia-config-btn {
    width: 100%;
  }
}


/* =========================================================
   38. RESPONSIVE · 620
   ========================================================= */

@media (max-width: 620px) {
  body:has(.envia-config-page),
  body:has(.envia-config-page)
  .app-shell,
  body:has(.envia-config-page)
  .app-main,
  body:has(.envia-config-page)
  .app-content,
  .envia-config-page,
  .envia-config-workspace,
  .envia-config-workspace__main,
  .envia-config-workspace__side,
  .envia-config-panel {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: hidden !important;
  }

  .envia-config-brand {
    align-items: flex-start;
  }

  .envia-config-brand__icon {
    flex-basis: 36px;

    width: 36px;
    height: 36px;
  }

  .envia-config-brand__copy h2 {
    font-size: 20px;
  }

  .envia-config-brand__copy p {
    font-size: 10px;
  }

  .envia-config-summary {
    grid-template-columns: 1fr;
  }

  .envia-config-summary-card,
  .envia-config-summary-card:nth-child(2n),
  .envia-config-summary-card:nth-child(3n) {
    border-right: 0;

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

  .envia-config-summary-card:first-child {
    border-top: 0;
  }

  .envia-config-panel__head {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-config-panel__record,
  .envia-config-panel__counter {
    align-self: flex-start;
  }

  .envia-config-form {
    padding: 6px;
  }

  .envia-config-form__actions {
    grid-template-columns: 1fr;
  }

  .envia-config-form__security {
    width: 100%;
  }

  .envia-config-test-result__head {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-config-test-result__metrics {
    grid-template-columns: 1fr;
  }

  .envia-config-test-result__metrics article,
  .envia-config-test-result__metrics article:nth-child(2n),
  .envia-config-test-result__metrics article:nth-last-child(-n + 2) {
    border-right: 0;

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

  .envia-config-test-result__metrics article:last-child {
    border-bottom: 0;
  }

  .envia-config-carrier {
    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      );
  }

  .envia-config-carrier__status {
    display: none;
  }

  .envia-config-log {
    padding:
      7px
      8px;
  }

  .envia-config-log__head {
    display: grid;
  }

  .envia-config-log__head time {
    justify-self: start;
  }

  .envia-config-toast {
    right: 7px;
    bottom: 10px;
    left: 7px;

    width: auto;
  }
}


/* =========================================================
   39. RESPONSIVE · 420
   ========================================================= */

@media (max-width: 420px) {
  .envia-config-page {
    padding: 4px;
  }

  .envia-config-head,
  .envia-config-panel,
  .envia-config-status,
  .envia-config-summary {
    border-radius: 9px;
  }

  .envia-config-brand__copy p {
    display: none;
  }

  .envia-config-status__main {
    align-items: flex-start;
  }

  .envia-config-status__copy small {
    white-space: normal;
  }

  .envia-config-status__meta {
    display: grid;

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

    width: 100%;
  }

  .envia-config-environment,
  .envia-config-status__validation {
    width: 100%;
  }

  .envia-config-field {
    padding: 6px;
  }

  .envia-config-input {
    height: 33px;
  }

  .envia-config-switch {
    min-height: 54px;

    padding: 6px;
  }

  .envia-config-test,
  .envia-config-logs__footer {
    padding: 6px;
  }
}


/* =========================================================
   40. FOOTER GLOBAL
   ========================================================= */

body:has(.envia-config-page)
.app-footer,
body:has(.envia-config-page)
#footerMount,
body:has(.envia-config-page)
footer.app-footer {
  position: relative !important;

  inset: auto !important;

  width: 100% !important;

  margin-top: 0 !important;

  transform: none !important;
}


/* =========================================================
   41. ANIMACIONES
   ========================================================= */

@keyframes enviaConfigPageIn {
  from {
    opacity: 0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

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


/* =========================================================
   42. REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .envia-config-page,
  .envia-config-page *,
  .envia-config-page *::before,
  .envia-config-page *::after,
  .envia-config-toast,
  .envia-config-toast *,
  .envia-config-toast *::before,
  .envia-config-toast *::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}


/* =========================================================
   FIN CSS COMPLETO
   configuracion.css
   ========================================================= */