/* =========================================================
   WIRTZ HUB · MERCADO LIBRE · MERCADO PAGO
   CONFIGURACIÓN

   UBICACIÓN:
   frontend/src/pages/mercado-libre/mercado-pago/configuracion/
   mercado-pago-configuracion.css

   PARTE 1 DE 2

   DISEÑO:
   - Premium
   - Compacto pero legible
   - Negro real
   - Sin glow
   - Sin transparencias innecesarias
   - Sin scroll horizontal
   - Responsive
   - Texto fuerte
   - Divisiones finas
   - Integrado con Sidebar / Topbar / Rightbar / Footer
   ========================================================= */


/* =========================================================
   TOKENS LOCALES
   ========================================================= */

.mercado-pago-config-page {
  --mpc-bg:
    #f6f7f9;

  --mpc-surface:
    #ffffff;

  --mpc-surface-2:
    #f7f8fa;

  --mpc-surface-3:
    #f0f2f5;

  --mpc-surface-4:
    #e9ecef;

  --mpc-text:
    #090909;

  --mpc-text-soft:
    #292d32;

  --mpc-muted:
    #5d626a;

  --mpc-muted-strong:
    #454a51;

  --mpc-line:
    #d7dbe0;

  --mpc-line-strong:
    #bcc2c9;

  --mpc-hover:
    #f1f3f5;

  --mpc-input:
    #ffffff;

  --mpc-input-hover:
    #fbfbfc;

  --mpc-primary:
    #111111;

  --mpc-primary-text:
    #ffffff;

  --mpc-success:
    #147844;

  --mpc-success-bg:
    #edf8f2;

  --mpc-success-line:
    #aedec2;

  --mpc-warning:
    #8e5d14;

  --mpc-warning-bg:
    #fff7e8;

  --mpc-warning-line:
    #ead3a2;

  --mpc-danger:
    #b42323;

  --mpc-danger-bg:
    #fff0f0;

  --mpc-danger-line:
    #ecc0c0;

  --mpc-info:
    #245f96;

  --mpc-info-bg:
    #edf5fc;

  --mpc-info-line:
    #b8d4ec;

  --mpc-radius:
    12px;

  --mpc-radius-sm:
    8px;

  --mpc-radius-xs:
    6px;

  --mpc-shadow:
    0 1px 2px rgba(0, 0, 0, 0.035);

  --mpc-transition:
    140ms ease;

  position:
    relative;

  display:
    block;

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  margin:
    0;

  padding:
    18px 20px 28px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-bg);

  overflow-x:
    hidden;
}


/* =========================================================
   DARK · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.mercado-pago-config-page {
  --mpc-bg:
    #000000;

  --mpc-surface:
    #080808;

  --mpc-surface-2:
    #0d0d0d;

  --mpc-surface-3:
    #121212;

  --mpc-surface-4:
    #181818;

  --mpc-text:
    #ffffff;

  --mpc-text-soft:
    #f0f0f0;

  --mpc-muted:
    #b9b9b9;

  --mpc-muted-strong:
    #d3d3d3;

  --mpc-line:
    #252525;

  --mpc-line-strong:
    #3a3a3a;

  --mpc-hover:
    #131313;

  --mpc-input:
    #090909;

  --mpc-input-hover:
    #101010;

  --mpc-primary:
    #ffffff;

  --mpc-primary-text:
    #000000;

  --mpc-success:
    #72d79b;

  --mpc-success-bg:
    #0b1b12;

  --mpc-success-line:
    #1d5332;

  --mpc-warning:
    #e7bb67;

  --mpc-warning-bg:
    #1b1408;

  --mpc-warning-line:
    #58411b;

  --mpc-danger:
    #ff8b8b;

  --mpc-danger-bg:
    #1d0909;

  --mpc-danger-line:
    #5b2020;

  --mpc-info:
    #8fc3ef;

  --mpc-info-bg:
    #091624;

  --mpc-info-line:
    #203f5b;

  --mpc-shadow:
    none;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.mercado-pago-config-page,
.mercado-pago-config-page *,
.mercado-pago-config-page *::before,
.mercado-pago-config-page *::after {
  box-sizing:
    border-box;
}


.mercado-pago-config-page button,
.mercado-pago-config-page input,
.mercado-pago-config-page select,
.mercado-pago-config-page textarea {
  font:
    inherit;
}


.mercado-pago-config-page button {
  color:
    inherit;
}


.mercado-pago-config-page svg {
  display:
    block;

  flex:
    0 0 auto;
}


/* =========================================================
   SCROLLBAR LOCAL
   ========================================================= */

.mercado-pago-config-page * {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(--mpc-line-strong)
    transparent;
}


.mercado-pago-config-page *::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.mercado-pago-config-page *::-webkit-scrollbar-track {
  background:
    transparent;
}


.mercado-pago-config-page *::-webkit-scrollbar-thumb {
  background:
    var(--mpc-line-strong);

  border-radius:
    999px;
}


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

.mercado-pago-config-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  width:
    100%;

  min-width:
    0;

  margin:
    0 0 16px;

  padding:
    16px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface);

  box-shadow:
    var(--mpc-shadow);
}


.mercado-pago-config-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  min-width:
    0;
}


.mercado-pago-config-brand__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    42px;

  height:
    42px;

  border:
    1px solid var(--mpc-line-strong);

  border-radius:
    10px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-brand__icon svg {
  width:
    20px;

  height:
    20px;

  stroke-width:
    2;
}


.mercado-pago-config-brand__body {
  min-width:
    0;
}


.mercado-pago-config-brand__body > span {
  display:
    block;

  margin:
    0 0 3px;

  color:
    var(--mpc-muted-strong);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.mercado-pago-config-brand__body h1 {
  margin:
    0;

  color:
    var(--mpc-text);

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

  line-height:
    1.12;

  font-weight:
    800;

  letter-spacing:
    -0.025em;
}


.mercado-pago-config-brand__body p {
  margin:
    5px 0 0;

  max-width:
    700px;

  color:
    var(--mpc-muted);

  font-size:
    13px;

  line-height:
    1.45;

  font-weight:
    550;
}


.mercado-pago-config-head__actions {
  display:
    flex;

  align-items:
    stretch;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;

  min-width:
    0;
}


.mercado-pago-config-head-stat {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    112px;

  min-height:
    44px;

  padding:
    7px 10px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-head-stat > span {
  margin-bottom:
    2px;

  color:
    var(--mpc-muted);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.15;
}


.mercado-pago-config-head-stat > strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--mpc-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.mercado-pago-config-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    38px;

  padding:
    0 13px;

  border:
    1px solid var(--mpc-line-strong);

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

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface);

  cursor:
    pointer;

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

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


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

  background:
    var(--mpc-hover);
}


.mercado-pago-config-btn:active:not(:disabled) {
  transform:
    translateY(
      1px
    );
}


.mercado-pago-config-btn:disabled {
  opacity:
    0.52;

  cursor:
    not-allowed;
}


.mercado-pago-config-btn svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2;
}


.mercado-pago-config-btn--primary {
  border-color:
    var(--mpc-primary);

  color:
    var(--mpc-primary-text);

  background:
    var(--mpc-primary);
}


.mercado-pago-config-btn--primary:hover:not(:disabled) {
  border-color:
    var(--mpc-primary);

  color:
    var(--mpc-primary-text);

  background:
    var(--mpc-primary);
}


.mercado-pago-config-btn--danger {
  border-color:
    var(--mpc-danger-line);

  color:
    var(--mpc-danger);

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


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

  color:
    var(--mpc-danger);

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


.mercado-pago-config-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  padding:
    0;

  border:
    1px solid var(--mpc-line);

  border-radius:
    8px;

  color:
    var(--mpc-muted-strong);

  background:
    var(--mpc-surface);

  cursor:
    pointer;

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


.mercado-pago-config-icon-btn:hover {
  color:
    var(--mpc-text);

  border-color:
    var(--mpc-line-strong);

  background:
    var(--mpc-hover);
}


.mercado-pago-config-icon-btn svg {
  width:
    16px;

  height:
    16px;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.mercado-pago-config-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  width:
    fit-content;

  max-width:
    100%;

  color:
    var(--mpc-muted-strong);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;
}


.mercado-pago-config-status svg {
  width:
    14px;

  height:
    14px;
}


.mercado-pago-config-status.is-conectado {
  color:
    var(--mpc-success);
}


.mercado-pago-config-status.is-desconectado,
.mercado-pago-config-status.is-configurado {
  color:
    var(--mpc-muted-strong);
}


.mercado-pago-config-status.is-conectando {
  color:
    var(--mpc-info);
}


.mercado-pago-config-status.is-token_vencido,
.mercado-pago-config-status.is-error {
  color:
    var(--mpc-danger);
}


.mercado-pago-config-status.is-deshabilitado {
  color:
    var(--mpc-muted);
}


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

.mercado-pago-config-summary {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  margin:
    0 0 16px;
}


.mercado-pago-config-summary-card {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  min-height:
    84px;

  padding:
    12px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface);

  box-shadow:
    var(--mpc-shadow);
}


.mercado-pago-config-summary-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    38px;

  height:
    38px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    9px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-summary-card__icon svg {
  width:
    18px;

  height:
    18px;

  stroke-width:
    2;
}


.mercado-pago-config-summary-card__body {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.mercado-pago-config-summary-card__body > span {
  margin-bottom:
    2px;

  color:
    var(--mpc-muted);

  font-size:
    10px;

  font-weight:
    700;
}


.mercado-pago-config-summary-card__body > strong {
  overflow:
    hidden;

  color:
    var(--mpc-text);

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mercado-pago-config-summary-card__body > small {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    3px;

  color:
    var(--mpc-muted);

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.mercado-pago-config-layout {
  display:
    grid;

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

  gap:
    14px;

  width:
    100%;

  min-width:
    0;
}


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

.mercado-pago-config-panel {
  width:
    100%;

  min-width:
    0;

  padding:
    15px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface);

  box-shadow:
    var(--mpc-shadow);
}


.mercado-pago-config-panel__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  min-width:
    0;

  margin-bottom:
    14px;

  padding-bottom:
    12px;

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


.mercado-pago-config-panel__head > div {
  min-width:
    0;
}


.mercado-pago-config-panel__head > div > span {
  display:
    block;

  margin:
    0 0 3px;

  color:
    var(--mpc-muted-strong);

  font-size:
    9.5px;

  font-weight:
    850;

  letter-spacing:
    0.085em;
}


.mercado-pago-config-panel__head h2,
.mercado-pago-config-panel__head h3 {
  margin:
    0;

  color:
    var(--mpc-text);

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.25;

  letter-spacing:
    -0.015em;
}


.mercado-pago-config-panel__head p {
  margin:
    4px 0 0;

  max-width:
    760px;

  color:
    var(--mpc-muted);

  font-size:
    11.5px;

  font-weight:
    550;

  line-height:
    1.45;
}


.mercado-pago-config-panel__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    14px;

  padding-top:
    13px;

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


.mercado-pago-config-panel__count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    28px;

  padding:
    0 9px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    999px;

  color:
    var(--mpc-muted-strong);

  background:
    var(--mpc-surface-2);

  font-size:
    10px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   SAVE STATE
   ========================================================= */

.mercado-pago-config-save-state {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    0 9px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    999px;

  color:
    var(--mpc-muted);

  background:
    var(--mpc-surface-2);

  font-size:
    10px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.mercado-pago-config-save-state.is-dirty {
  border-color:
    var(--mpc-warning-line);

  color:
    var(--mpc-warning);

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


/* =========================================================
   NAVEGACIÓN INTERNA
   ========================================================= */

.mercado-pago-config-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  width:
    100%;

  min-width:
    0;

  padding:
    6px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface);

  overflow-x:
    auto;

  overscroll-behavior-x:
    contain;
}


.mercado-pago-config-nav__item {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  flex:
    0 0 auto;

  min-height:
    34px;

  padding:
    0 11px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  color:
    var(--mpc-muted-strong);

  background:
    transparent;

  cursor:
    pointer;

  font-size:
    11px;

  font-weight:
    750;

  white-space:
    nowrap;

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


.mercado-pago-config-nav__item:hover {
  color:
    var(--mpc-text);

  background:
    var(--mpc-hover);
}


.mercado-pago-config-nav__item.is-active {
  border-color:
    var(--mpc-line-strong);

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface-3);
}


.mercado-pago-config-nav__item svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.mercado-pago-config-sections {
  width:
    100%;

  min-width:
    0;
}


.mercado-pago-config-section {
  display:
    none;
}


.mercado-pago-config-section.is-active {
  display:
    block;
}


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

.mercado-pago-config-form-grid {
  display:
    grid;

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

  gap:
    13px 14px;

  min-width:
    0;
}


.mercado-pago-config-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}


.mercado-pago-config-field--wide {
  grid-column:
    1 /
    -1;
}


.mercado-pago-config-field > span {
  color:
    var(--mpc-text-soft);

  font-size:
    11px;

  font-weight:
    750;

  line-height:
    1.2;
}


.mercado-pago-config-field input,
.mercado-pago-config-field select,
.mercado-pago-config-field textarea {
  width:
    100%;

  min-width:
    0;

  min-height:
    39px;

  padding:
    0 11px;

  border:
    1px solid var(--mpc-line-strong);

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

  outline:
    none;

  color:
    var(--mpc-text);

  background:
    var(--mpc-input);

  font-size:
    12px;

  font-weight:
    650;

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


.mercado-pago-config-field textarea {
  min-height:
    90px;

  padding-top:
    10px;

  padding-bottom:
    10px;

  resize:
    vertical;
}


.mercado-pago-config-field input:hover,
.mercado-pago-config-field select:hover,
.mercado-pago-config-field textarea:hover {
  background:
    var(--mpc-input-hover);
}


.mercado-pago-config-field input:focus,
.mercado-pago-config-field select:focus,
.mercado-pago-config-field textarea:focus {
  border-color:
    var(--mpc-text);
}


.mercado-pago-config-field input::placeholder,
.mercado-pago-config-field textarea::placeholder {
  color:
    var(--mpc-muted);

  opacity:
    0.78;
}


.mercado-pago-config-field select {
  appearance:
    auto;

  cursor:
    pointer;
}


.mercado-pago-config-field__hint {
  display:
    block;

  color:
    var(--mpc-muted);

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


.mercado-pago-config-field__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  width:
    fit-content;

  max-width:
    100%;

  color:
    var(--mpc-muted);

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.35;
}


.mercado-pago-config-field__status.is-ok {
  color:
    var(--mpc-success);
}


.mercado-pago-config-field__status svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   INPUT CON UNIDAD
   ========================================================= */

.mercado-pago-config-input-unit {
  display:
    flex;

  align-items:
    stretch;

  width:
    100%;

  min-width:
    0;
}


.mercado-pago-config-input-unit input {
  border-top-right-radius:
    0;

  border-bottom-right-radius:
    0;
}


.mercado-pago-config-input-unit > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  min-width:
    43px;

  padding:
    0 8px;

  border:
    1px solid var(--mpc-line-strong);

  border-left:
    0;

  border-radius:
    0 var(--mpc-radius-sm) var(--mpc-radius-sm) 0;

  color:
    var(--mpc-muted-strong);

  background:
    var(--mpc-surface-3);

  font-size:
    10px;

  font-weight:
    750;
}


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

.mercado-pago-config-secret {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-width:
    0;
}


.mercado-pago-config-secret input {
  padding-right:
    43px;
}


.mercado-pago-config-secret__toggle {
  position:
    absolute;

  top:
    50%;

  right:
    5px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  color:
    var(--mpc-muted);

  background:
    transparent;

  cursor:
    pointer;

  transform:
    translateY(
      -50%
    );

  transition:
    color
      var(--mpc-transition),
    background
      var(--mpc-transition);
}


.mercado-pago-config-secret__toggle:hover {
  color:
    var(--mpc-text);

  background:
    var(--mpc-hover);
}


.mercado-pago-config-secret__toggle svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   NOTICE
   ========================================================= */

.mercado-pago-config-notice {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  margin-top:
    14px;

  padding:
    11px 12px;

  border:
    1px solid var(--mpc-info-line);

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

  color:
    var(--mpc-info);

  background:
    var(--mpc-info-bg);
}


.mercado-pago-config-notice__icon {
  display:
    inline-flex;

  flex:
    0 0 auto;

  margin-top:
    1px;
}


.mercado-pago-config-notice__icon svg {
  width:
    17px;

  height:
    17px;
}


.mercado-pago-config-notice strong {
  display:
    block;

  margin:
    0 0 2px;

  font-size:
    11px;

  font-weight:
    800;
}


.mercado-pago-config-notice p {
  margin:
    0;

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.4;
}


/* =========================================================
   ACCOUNT GRID
   ========================================================= */

.mercado-pago-config-account-grid {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


.mercado-pago-config-account-item {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  min-width:
    0;

  min-height:
    64px;

  padding:
    10px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-account-item > span {
  color:
    var(--mpc-muted);

  font-size:
    9.5px;

  font-weight:
    700;
}


.mercado-pago-config-account-item > strong {
  overflow:
    hidden;

  color:
    var(--mpc-text);

  font-size:
    11.5px;

  font-weight:
    800;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SWITCH
   ========================================================= */

.mercado-pago-config-switch-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  width:
    100%;

  min-width:
    0;

  min-height:
    54px;

  padding:
    9px 10px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface-2);

  cursor:
    pointer;
}


.mercado-pago-config-switch-row__text {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.mercado-pago-config-switch-row__text strong {
  color:
    var(--mpc-text);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;
}


.mercado-pago-config-switch-row__text span {
  margin-top:
    2px;

  color:
    var(--mpc-muted);

  font-size:
    9.5px;

  font-weight:
    550;

  line-height:
    1.35;
}


.mercado-pago-config-switch {
  position:
    relative;

  display:
    inline-flex;

  flex:
    0 0 auto;

  width:
    38px;

  height:
    22px;
}


.mercado-pago-config-switch input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.mercado-pago-config-switch > span {
  position:
    relative;

  display:
    block;

  width:
    38px;

  height:
    22px;

  border:
    1px solid var(--mpc-line-strong);

  border-radius:
    999px;

  background:
    var(--mpc-surface-4);

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


.mercado-pago-config-switch > span::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    var(--mpc-muted-strong);

  transition:
    transform
      var(--mpc-transition),
    background
      var(--mpc-transition);
}


.mercado-pago-config-switch input:checked + span {
  border-color:
    var(--mpc-primary);

  background:
    var(--mpc-primary);
}


.mercado-pago-config-switch input:checked + span::after {
  background:
    var(--mpc-primary-text);

  transform:
    translateX(
      16px
    );
}


/* =========================================================
   SYNC
   ========================================================= */

.mercado-pago-config-sync-main {
  display:
    grid;

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

  gap:
    12px;

  align-items:
    stretch;

  min-width:
    0;
}


.mercado-pago-config-switch-grid {
  display:
    grid;

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

  gap:
    8px;
}


.mercado-pago-config-sync-status {
  display:
    grid;

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

  gap:
    8px;

  margin-top:
    13px;
}


.mercado-pago-config-sync-status article {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;

  min-height:
    60px;

  padding:
    9px 10px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-sync-status span {
  color:
    var(--mpc-muted);

  font-size:
    9.5px;

  font-weight:
    700;
}


.mercado-pago-config-sync-status strong {
  overflow:
    hidden;

  color:
    var(--mpc-text);

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SUBSECTION
   ========================================================= */

.mercado-pago-config-subsection {
  margin-top:
    14px;

  padding-top:
    13px;

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


.mercado-pago-config-subsection__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    10px;
}


.mercado-pago-config-subsection__head span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--mpc-muted-strong);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mercado-pago-config-subsection__head h3 {
  margin:
    0;

  color:
    var(--mpc-text);

  font-size:
    13px;

  font-weight:
    800;
}


/* =========================================================
   DETAIL LIST
   ========================================================= */

.mercado-pago-config-detail-list {
  border:
    1px solid var(--mpc-line);

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

  overflow:
    hidden;
}


.mercado-pago-config-detail-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  min-height:
    42px;

  padding:
    8px 11px;

  border-bottom:
    1px solid var(--mpc-line);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-detail-row:last-child {
  border-bottom:
    0;
}


.mercado-pago-config-detail-row > span {
  color:
    var(--mpc-muted);

  font-size:
    10.5px;

  font-weight:
    650;
}


.mercado-pago-config-detail-row > strong {
  min-width:
    0;

  color:
    var(--mpc-text);

  font-size:
    10.5px;

  font-weight:
    800;

  text-align:
    right;

  overflow-wrap:
    anywhere;
}


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

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


.mercado-pago-config-page
.is-spinning {
  animation:
    mercadoPagoConfigSpin
    0.8s
    linear
    infinite;
}


/* =========================================================
   CONTINÚA EN PARTE 2 DE 2
   ========================================================= *//* =========================================================
   CONTINÚA DIRECTAMENTE DEBAJO DE LA PARTE 1
   ========================================================= */


/* =========================================================
   TÉCNICO
   ========================================================= */

.mercado-pago-config-technical-grid {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


.mercado-pago-config-technical-card {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  min-height:
    74px;

  padding:
    10px;

  border:
    1px solid var(--mpc-line);

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

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-technical-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    34px;

  height:
    34px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    8px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface);
}


.mercado-pago-config-technical-card__icon svg {
  width:
    16px;

  height:
    16px;
}


.mercado-pago-config-technical-card__body {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.mercado-pago-config-technical-card__body > span {
  margin-bottom:
    2px;

  color:
    var(--mpc-muted);

  font-size:
    9.5px;

  font-weight:
    700;
}


.mercado-pago-config-technical-card__body > strong {
  overflow:
    hidden;

  color:
    var(--mpc-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mercado-pago-config-technical-card__body > small {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    2px;

  color:
    var(--mpc-muted);

  font-size:
    9.5px;

  font-weight:
    550;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   ERROR BOX
   ========================================================= */

.mercado-pago-config-error-box {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  margin-top:
    14px;

  padding:
    11px 12px;

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

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

  color:
    var(--mpc-danger);

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


.mercado-pago-config-error-box__icon {
  display:
    inline-flex;

  flex:
    0 0 auto;

  margin-top:
    1px;
}


.mercado-pago-config-error-box__icon svg {
  width:
    17px;

  height:
    17px;
}


.mercado-pago-config-error-box > div {
  min-width:
    0;
}


.mercado-pago-config-error-box strong {
  display:
    block;

  margin-bottom:
    2px;

  font-size:
    11px;

  font-weight:
    800;
}


.mercado-pago-config-error-box p {
  margin:
    0;

  color:
    inherit;

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


.mercado-pago-config-error-box code {
  display:
    inline-flex;

  max-width:
    100%;

  margin-top:
    7px;

  padding:
    4px 6px;

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

  border-radius:
    5px;

  color:
    inherit;

  background:
    var(--mpc-surface);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    9.5px;

  font-weight:
    700;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   EVENTOS
   ========================================================= */

.mercado-pago-config-events-content {
  width:
    100%;

  min-width:
    0;
}


.mercado-pago-config-events {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;

  border:
    1px solid var(--mpc-line);

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

  overflow:
    hidden;
}


.mercado-pago-config-event {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  padding:
    10px 11px;

  border-bottom:
    1px solid var(--mpc-line);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-event:last-child {
  border-bottom:
    0;
}


.mercado-pago-config-event:hover {
  background:
    var(--mpc-hover);
}


.mercado-pago-config-event__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    7px;

  color:
    var(--mpc-muted-strong);

  background:
    var(--mpc-surface);
}


.mercado-pago-config-event__icon svg {
  width:
    14px;

  height:
    14px;
}


.mercado-pago-config-event.is-success
.mercado-pago-config-event__icon {
  border-color:
    var(--mpc-success-line);

  color:
    var(--mpc-success);

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


.mercado-pago-config-event.is-error
.mercado-pago-config-event__icon {
  border-color:
    var(--mpc-danger-line);

  color:
    var(--mpc-danger);

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


.mercado-pago-config-event__body {
  min-width:
    0;
}


.mercado-pago-config-event__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;
}


.mercado-pago-config-event__head strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--mpc-text);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mercado-pago-config-event__head time {
  flex:
    0 0 auto;

  color:
    var(--mpc-muted);

  font-size:
    9.5px;

  font-weight:
    650;

  white-space:
    nowrap;
}


.mercado-pago-config-event__body p {
  margin:
    3px 0 0;

  color:
    var(--mpc-muted-strong);

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


.mercado-pago-config-event__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px 10px;

  margin-top:
    6px;
}


.mercado-pago-config-event__meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(--mpc-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.mercado-pago-config-event__meta svg {
  width:
    11px;

  height:
    11px;
}


.mercado-pago-config-events-loading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    100px;

  color:
    var(--mpc-muted);

  font-size:
    11px;

  font-weight:
    700;
}


.mercado-pago-config-events-loading svg {
  width:
    16px;

  height:
    16px;
}


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

.mercado-pago-config-empty {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    140px;

  padding:
    20px;

  border:
    1px dashed var(--mpc-line-strong);

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

  color:
    var(--mpc-muted);

  background:
    var(--mpc-surface-2);

  text-align:
    center;
}


.mercado-pago-config-empty__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  margin-bottom:
    9px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    9px;

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

  background:
    var(--mpc-surface);
}


.mercado-pago-config-empty__icon svg {
  width:
    17px;

  height:
    17px;
}


.mercado-pago-config-empty strong {
  color:
    var(--mpc-text);

  font-size:
    12px;

  font-weight:
    800;
}


.mercado-pago-config-empty p {
  max-width:
    520px;

  margin:
    4px 0 0;

  color:
    var(--mpc-muted);

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.45;
}


/* =========================================================
   LOADING / ERROR PRINCIPAL
   ========================================================= */

.mercado-pago-config-state {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  min-height:
    360px;

  padding:
    32px;

  border:
    1px solid var(--mpc-line);

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

  color:
    var(--mpc-muted);

  background:
    var(--mpc-surface);

  text-align:
    center;
}


.mercado-pago-config-state__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    44px;

  height:
    44px;

  margin-bottom:
    11px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    10px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-state__icon svg {
  width:
    20px;

  height:
    20px;
}


.mercado-pago-config-state strong {
  color:
    var(--mpc-text);

  font-size:
    13px;

  font-weight:
    800;
}


.mercado-pago-config-state p {
  max-width:
    500px;

  margin:
    5px 0 15px;

  color:
    var(--mpc-muted);

  font-size:
    11px;

  font-weight:
    550;

  line-height:
    1.45;
}


.mercado-pago-config-state.is-error
.mercado-pago-config-state__icon {
  border-color:
    var(--mpc-danger-line);

  color:
    var(--mpc-danger);

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


/* =========================================================
   ZONA DE ADMINISTRACIÓN
   ========================================================= */

.mercado-pago-config-danger {
  border-color:
    var(--mpc-line-strong);
}


.mercado-pago-config-danger__items {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  border:
    1px solid var(--mpc-line);

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

  overflow:
    hidden;
}


.mercado-pago-config-danger-item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  min-width:
    0;

  padding:
    11px;

  border-bottom:
    1px solid var(--mpc-line);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-danger-item:last-child {
  border-bottom:
    0;
}


.mercado-pago-config-danger-item > div {
  min-width:
    0;
}


.mercado-pago-config-danger-item strong {
  display:
    block;

  color:
    var(--mpc-text);

  font-size:
    11px;

  font-weight:
    800;
}


.mercado-pago-config-danger-item p {
  margin:
    3px 0 0;

  color:
    var(--mpc-muted);

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.4;
}


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

.mercado-pago-config-toast {
  position:
    fixed;

  z-index:
    10050;

  right:
    18px;

  bottom:
    18px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

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

  padding:
    11px 12px;

  border:
    1px solid var(--mpc-line-strong, #bfc4ca);

  border-radius:
    10px;

  color:
    var(--mpc-text, #090909);

  background:
    var(--mpc-surface, #ffffff);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.16);

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      10px
    );

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


html[data-theme="dark"]
.mercado-pago-config-toast {
  --mpc-line-strong:
    #3a3a3a;

  --mpc-text:
    #ffffff;

  --mpc-surface:
    #090909;

  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.42);
}


.mercado-pago-config-toast.is-visible {
  opacity:
    1;

  pointer-events:
    auto;

  transform:
    translateY(
      0
    );
}


.mercado-pago-config-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    30px;

  height:
    30px;

  border:
    1px solid currentColor;

  border-radius:
    7px;
}


.mercado-pago-config-toast__icon svg {
  width:
    14px;

  height:
    14px;
}


.mercado-pago-config-toast__body {
  min-width:
    0;
}


.mercado-pago-config-toast__body strong {
  display:
    block;

  color:
    inherit;

  font-size:
    11px;

  font-weight:
    800;
}


.mercado-pago-config-toast__body p {
  margin:
    3px 0 0;

  color:
    inherit;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;

  opacity:
    0.88;
}


.mercado-pago-config-toast.is-success {
  border-color:
    #9ed5b6;

  color:
    #12683a;

  background:
    #f0faf4;
}


.mercado-pago-config-toast.is-error {
  border-color:
    #e6b3b3;

  color:
    #9f1d1d;

  background:
    #fff3f3;
}


.mercado-pago-config-toast.is-warning {
  border-color:
    #e5cb92;

  color:
    #81520e;

  background:
    #fff9ed;
}


.mercado-pago-config-toast.is-info {
  border-color:
    #afd0ea;

  color:
    #205681;

  background:
    #f0f7fd;
}


html[data-theme="dark"]
.mercado-pago-config-toast.is-success {
  border-color:
    #1e5a35;

  color:
    #82dfa7;

  background:
    #0a1710;
}


html[data-theme="dark"]
.mercado-pago-config-toast.is-error {
  border-color:
    #5e2525;

  color:
    #ff9494;

  background:
    #1a0909;
}


html[data-theme="dark"]
.mercado-pago-config-toast.is-warning {
  border-color:
    #5e471f;

  color:
    #e9c16f;

  background:
    #191307;
}


html[data-theme="dark"]
.mercado-pago-config-toast.is-info {
  border-color:
    #234a68;

  color:
    #93c8f3;

  background:
    #081624;
}


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

.mercado-pago-config-modal-backdrop {
  position:
    fixed;

  z-index:
    10040;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    rgba(0, 0, 0, 0.56);

  overflow-y:
    auto;
}


.mercado-pago-config-modal {
  width:
    min(
      480px,
      100%
    );

  border:
    1px solid var(--mpc-line-strong);

  border-radius:
    12px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface);

  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.22);

  overflow:
    hidden;
}


html[data-theme="dark"]
.mercado-pago-config-modal {
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.55);
}


.mercado-pago-config-modal__head {
  display:
    grid;

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

  gap:
    10px;

  align-items:
    center;

  padding:
    12px;

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


.mercado-pago-config-modal__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  border:
    1px solid var(--mpc-line);

  border-radius:
    8px;

  color:
    var(--mpc-text);

  background:
    var(--mpc-surface-2);
}


.mercado-pago-config-modal__icon svg {
  width:
    16px;

  height:
    16px;
}


.mercado-pago-config-modal.is-danger
.mercado-pago-config-modal__icon {
  border-color:
    var(--mpc-danger-line);

  color:
    var(--mpc-danger);

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


.mercado-pago-config-modal__head > div {
  min-width:
    0;
}


.mercado-pago-config-modal__head > div > span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(--mpc-muted);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mercado-pago-config-modal__head h3 {
  margin:
    0;

  color:
    var(--mpc-text);

  font-size:
    14px;

  font-weight:
    800;
}


.mercado-pago-config-modal__body {
  padding:
    15px 12px;
}


.mercado-pago-config-modal__body p {
  margin:
    0;

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

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.5;
}


.mercado-pago-config-modal__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 12px;

  border-top:
    1px solid var(--mpc-line);

  background:
    var(--mpc-surface-2);
}


/* =========================================================
   FOCUS
   ========================================================= */

.mercado-pago-config-page button:focus-visible,
.mercado-pago-config-page input:focus-visible,
.mercado-pago-config-page select:focus-visible,
.mercado-pago-config-page textarea:focus-visible,
.mercado-pago-config-toast button:focus-visible {
  outline:
    2px solid var(--mpc-text);

  outline-offset:
    2px;
}


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

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


  .mercado-pago-config-technical-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .mercado-pago-config-account-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


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

@media (
  max-width:
    980px
) {
  .mercado-pago-config-page {
    padding:
      14px;
  }


  .mercado-pago-config-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mercado-pago-config-head__actions {
    justify-content:
      flex-start;

    width:
      100%;
  }


  .mercado-pago-config-head-stat {
    flex:
      1 1 150px;
  }


  .mercado-pago-config-form-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .mercado-pago-config-field--wide {
    grid-column:
      auto;
  }


  .mercado-pago-config-sync-main {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .mercado-pago-config-switch-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .mercado-pago-config-sync-status {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


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

@media (
  max-width:
    680px
) {
  .mercado-pago-config-page {
    padding:
      10px;

    overflow-x:
      hidden;
  }


  .mercado-pago-config-head,
  .mercado-pago-config-panel {
    padding:
      12px;

    border-radius:
      10px;
  }


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


  .mercado-pago-config-brand__icon {
    width:
      38px;

    height:
      38px;
  }


  .mercado-pago-config-brand__body h1 {
    font-size:
      21px;
  }


  .mercado-pago-config-brand__body p {
    font-size:
      11px;
  }


  .mercado-pago-config-head__actions {
    display:
      grid;

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


  .mercado-pago-config-head-stat {
    min-width:
      0;
  }


  .mercado-pago-config-head__actions
  > .mercado-pago-config-btn {
    width:
      100%;
  }


  .mercado-pago-config-summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      8px;
  }


  .mercado-pago-config-summary-card {
    min-height:
      72px;
  }


  .mercado-pago-config-panel__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mercado-pago-config-panel__actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .mercado-pago-config-panel__actions
  .mercado-pago-config-btn {
    width:
      100%;
  }


  .mercado-pago-config-account-grid,
  .mercado-pago-config-technical-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .mercado-pago-config-nav {
    padding:
      5px;
  }


  .mercado-pago-config-nav__item {
    min-height:
      32px;

    padding:
      0 9px;
  }


  .mercado-pago-config-danger-item {
    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      10px;
  }


  .mercado-pago-config-danger-item
  .mercado-pago-config-btn {
    width:
      100%;
  }


  .mercado-pago-config-detail-row {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      3px;
  }


  .mercado-pago-config-detail-row > strong {
    text-align:
      left;
  }


  .mercado-pago-config-event {
    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      );

    gap:
      8px;

    padding:
      9px;
  }


  .mercado-pago-config-event__icon {
    width:
      28px;

    height:
      28px;
  }


  .mercado-pago-config-event__head {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      2px;
  }


  .mercado-pago-config-event__head strong {
    white-space:
      normal;
  }


  .mercado-pago-config-event__head time {
    white-space:
      normal;
  }


  .mercado-pago-config-modal-backdrop {
    align-items:
      flex-end;

    padding:
      10px;
  }


  .mercado-pago-config-modal {
    width:
      100%;

    max-height:
      calc(
        100vh -
        20px
      );

    border-radius:
      12px;

    overflow-y:
      auto;
  }


  .mercado-pago-config-modal__actions {
    align-items:
      stretch;

    flex-direction:
      column-reverse;
  }


  .mercado-pago-config-modal__actions
  .mercado-pago-config-btn {
    width:
      100%;
  }


  .mercado-pago-config-toast {
    right:
      10px;

    bottom:
      10px;

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


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (
  max-width:
    430px
) {
  .mercado-pago-config-head__actions {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .mercado-pago-config-brand__icon {
    width:
      34px;

    height:
      34px;
  }


  .mercado-pago-config-brand__icon svg {
    width:
      17px;

    height:
      17px;
  }


  .mercado-pago-config-brand__body h1 {
    font-size:
      19px;
  }


  .mercado-pago-config-summary-card {
    padding:
      10px;
  }


  .mercado-pago-config-switch-row {
    gap:
      9px;

    padding:
      9px;
  }


  .mercado-pago-config-field input,
  .mercado-pago-config-field select,
  .mercado-pago-config-field textarea {
    font-size:
      11px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .mercado-pago-config-page *,
  .mercado-pago-config-page *::before,
  .mercado-pago-config-page *::after,
  .mercado-pago-config-toast {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .mercado-pago-config-page {
    padding:
      0;

    color:
      #000000;

    background:
      #ffffff;
  }


  .mercado-pago-config-head__actions,
  .mercado-pago-config-nav,
  .mercado-pago-config-panel__actions,
  .mercado-pago-config-danger,
  .mercado-pago-config-toast,
  .mercado-pago-config-modal-backdrop {
    display:
      none !important;
  }


  .mercado-pago-config-section {
    display:
      block !important;

    margin-bottom:
      12px;
  }


  .mercado-pago-config-head,
  .mercado-pago-config-panel,
  .mercado-pago-config-summary-card {
    break-inside:
      avoid;

    box-shadow:
      none;
  }
}


/* =========================================================
   FIN
   WIRTZ HUB · MERCADO PAGO · CONFIGURACIÓN
   ========================================================= */