/* =========================================================
   WIRTZ HUB · OPERACIONES · IMPORTACIONES
   PRODUCTOS DE IMPORTACIÓN

   PARTE 1 DE 3

   CONTIENE:
   - Variables
   - Base
   - Shell interno
   - Header
   - Botones
   - KPIs
   - Filtros
   - Estados
   - Toast
   ========================================================= */


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

.importaciones-productos-page,
.importaciones-productos-page *,
.importaciones-productos-toast,
.importaciones-productos-toast *,
.importaciones-productos-modal,
.importaciones-productos-modal * {
  box-sizing: border-box;
}


.importaciones-productos-page {
  --ip-bg:
    #ffffff;

  --ip-bg-soft:
    #f8fafc;

  --ip-bg-soft-2:
    #f1f5f9;

  --ip-surface:
    #ffffff;

  --ip-surface-2:
    #fbfcfe;

  --ip-text:
    #111827;

  --ip-text-strong:
    #020617;

  --ip-muted:
    #64748b;

  --ip-muted-2:
    #94a3b8;

  --ip-border:
    rgba(
      15,
      23,
      42,
      0.1
    );

  --ip-border-strong:
    rgba(
      15,
      23,
      42,
      0.18
    );

  --ip-primary:
    #111827;

  --ip-primary-hover:
    #020617;

  --ip-primary-contrast:
    #ffffff;

  --ip-success:
    #15803d;

  --ip-success-soft:
    rgba(
      21,
      128,
      61,
      0.1
    );

  --ip-warning:
    #a16207;

  --ip-warning-soft:
    rgba(
      161,
      98,
      7,
      0.11
    );

  --ip-danger:
    #b91c1c;

  --ip-danger-soft:
    rgba(
      185,
      28,
      28,
      0.1
    );

  --ip-info:
    #1d4ed8;

  --ip-info-soft:
    rgba(
      29,
      78,
      216,
      0.1
    );

  --ip-radius-xs:
    7px;

  --ip-radius-sm:
    10px;

  --ip-radius-md:
    14px;

  --ip-radius-lg:
    18px;

  --ip-shadow-sm:
    0
    1px
    2px
    rgba(
      15,
      23,
      42,
      0.04
    );

  --ip-shadow-md:
    0
    10px
    26px
    rgba(
      15,
      23,
      42,
      0.06
    );

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  gap:
    14px;

  padding:
    14px;

  color:
    var(
      --ip-text
    );

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

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


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"]
.importaciones-productos-page {
  --ip-bg:
    #000000;

  --ip-bg-soft:
    #050505;

  --ip-bg-soft-2:
    #0b0b0b;

  --ip-surface:
    #090909;

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

  --ip-text:
    #e5e7eb;

  --ip-text-strong:
    #ffffff;

  --ip-muted:
    #a1a1aa;

  --ip-muted-2:
    #71717a;

  --ip-border:
    rgba(
      255,
      255,
      255,
      0.08
    );

  --ip-border-strong:
    rgba(
      255,
      255,
      255,
      0.14
    );

  --ip-primary:
    #ffffff;

  --ip-primary-hover:
    #e5e7eb;

  --ip-primary-contrast:
    #000000;

  --ip-success:
    #4ade80;

  --ip-success-soft:
    rgba(
      74,
      222,
      128,
      0.1
    );

  --ip-warning:
    #facc15;

  --ip-warning-soft:
    rgba(
      250,
      204,
      21,
      0.1
    );

  --ip-danger:
    #f87171;

  --ip-danger-soft:
    rgba(
      248,
      113,
      113,
      0.1
    );

  --ip-info:
    #60a5fa;

  --ip-info-soft:
    rgba(
      96,
      165,
      250,
      0.1
    );

  --ip-shadow-sm:
    none;

  --ip-shadow-md:
    none;
}


/* =========================================================
   MAIN
   ========================================================= */

.importaciones-productos-main {
  display:
    grid;

  gap:
    14px;

  min-width:
    0;
}


/* =========================================================
   KICKER
   ========================================================= */

.importaciones-productos-kicker {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


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

.importaciones-productos-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  min-width:
    0;

  padding:
    16px;

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

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

  background:
    var(
      --ip-surface
    );

  box-shadow:
    var(
      --ip-shadow-sm
    );
}


.importaciones-productos-head__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}


.importaciones-productos-head__icon {
  flex:
    0
    0
    auto;

  width:
    40px;

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    12px;

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

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


.importaciones-productos-head__icon svg {
  width:
    19px;

  height:
    19px;

  stroke-width:
    1.9;
}


.importaciones-productos-head__identity > div {
  min-width:
    0;
}


.importaciones-productos-head h1 {
  margin:
    4px
    0
    3px;

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

  font-size:
    clamp(
      20px,
      2vw,
      26px
    );

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;
}


.importaciones-productos-head p {
  margin:
    0;

  max-width:
    700px;

  color:
    var(
      --ip-muted
    );

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;
}


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

.importaciones-productos-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;
}


.importaciones-productos-updated {
  display:
    grid;

  gap:
    2px;

  min-width:
    110px;

  padding:
    7px
    9px;

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

  border-radius:
    9px;

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


.importaciones-productos-updated span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.importaciones-productos-updated strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;
}


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

.importaciones-productos-btn,
.importaciones-productos-icon-btn {
  appearance:
    none;

  border:
    0;

  outline:
    0;

  font:
    inherit;

  cursor:
    pointer;

  transition:
    background-color
    140ms
    ease,
    border-color
    140ms
    ease,
    color
    140ms
    ease,
    opacity
    140ms
    ease,
    transform
    140ms
    ease;
}


.importaciones-productos-btn {
  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    7px
    10px;

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

  border-radius:
    9px;

  color:
    var(
      --ip-text
    );

  background:
    var(
      --ip-surface
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1;
}


.importaciones-productos-btn:hover:not(:disabled) {
  border-color:
    var(
      --ip-border-strong
    );

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


.importaciones-productos-btn:active:not(:disabled) {
  transform:
    translateY(
      1px
    );
}


.importaciones-productos-btn svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2;
}


.importaciones-productos-btn--primary {
  border-color:
    var(
      --ip-primary
    );

  color:
    var(
      --ip-primary-contrast
    );

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


.importaciones-productos-btn--primary:hover:not(:disabled) {
  border-color:
    var(
      --ip-primary-hover
    );

  background:
    var(
      --ip-primary-hover
    );
}


.importaciones-productos-btn--quiet {
  color:
    var(
      --ip-muted
    );

  background:
    transparent;
}


.importaciones-productos-btn--danger {
  border-color:
    var(
      --ip-danger
    );

  color:
    #ffffff;

  background:
    var(
      --ip-danger
    );
}


.importaciones-productos-btn--danger:hover:not(:disabled) {
  border-color:
    var(
      --ip-danger
    );

  background:
    var(
      --ip-danger
    );

  opacity:
    0.9;
}


.importaciones-productos-btn:disabled,
.importaciones-productos-icon-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    0.48;
}


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

.importaciones-productos-icon-btn {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    8px;

  color:
    var(
      --ip-text
    );

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


.importaciones-productos-icon-btn:hover:not(:disabled) {
  border-color:
    var(
      --ip-border-strong
    );

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


.importaciones-productos-icon-btn.is-danger {
  color:
    var(
      --ip-danger
    );
}


.importaciones-productos-icon-btn.is-danger:hover:not(:disabled) {
  border-color:
    var(
      --ip-danger
    );

  background:
    var(
      --ip-danger-soft
    );
}


.importaciones-productos-icon-btn svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


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

.importaciones-productos-kpis {
  display:
    grid;

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

  gap:
    10px;

  min-width:
    0;
}


.importaciones-productos-kpi {
  min-width:
    0;

  min-height:
    118px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    13px;

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

  border-radius:
    var(
      --ip-radius-md
    );

  background:
    var(
      --ip-surface
    );

  box-shadow:
    var(
      --ip-shadow-sm
    );
}


.importaciones-productos-kpi__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.importaciones-productos-kpi__icon {
  width:
    29px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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

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


.importaciones-productos-kpi__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.importaciones-productos-kpi__body {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.importaciones-productos-kpi__body > span {
  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  text-transform:
    uppercase;

  letter-spacing:
    0.045em;
}


.importaciones-productos-kpi__body > strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    24px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.importaciones-productos-kpi__body > p {
  margin:
    2px
    0
    0;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;
}


.importaciones-productos-kpi.is-success
.importaciones-productos-kpi__icon {
  border-color:
    transparent;

  color:
    var(
      --ip-success
    );

  background:
    var(
      --ip-success-soft
    );
}


.importaciones-productos-kpi.is-warning
.importaciones-productos-kpi__icon {
  border-color:
    transparent;

  color:
    var(
      --ip-warning
    );

  background:
    var(
      --ip-warning-soft
    );
}


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

.importaciones-productos-filters {
  display:
    grid;

  gap:
    10px;

  min-width:
    0;

  padding:
    12px;

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

  border-radius:
    var(
      --ip-radius-md
    );

  background:
    var(
      --ip-surface
    );

  box-shadow:
    var(
      --ip-shadow-sm
    );
}


.importaciones-productos-filters__top {
  display:
    grid;

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

  gap:
    8px;

  align-items:
    center;

  min-width:
    0;
}


.importaciones-productos-search {
  min-width:
    0;

  min-height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0
    10px;

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

  border-radius:
    9px;

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


.importaciones-productos-search:focus-within {
  border-color:
    var(
      --ip-border-strong
    );
}


.importaciones-productos-search svg {
  width:
    14px;

  height:
    14px;

  flex:
    0
    0
    auto;

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


.importaciones-productos-search input {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  padding:
    0;

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

  background:
    transparent;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    700;
}


.importaciones-productos-search input::placeholder {
  color:
    var(
      --ip-muted-2
    );

  font-weight:
    600;
}


/* =========================================================
   FILTER GRID
   ========================================================= */

.importaciones-productos-filters__grid {
  display:
    grid;

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

  gap:
    8px;

  min-width:
    0;
}


/* =========================================================
   FIELD
   ========================================================= */

.importaciones-productos-field {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.importaciones-productos-field > span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


.importaciones-productos-field input,
.importaciones-productos-field select,
.importaciones-productos-field textarea {
  width:
    100%;

  min-width:
    0;

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

  outline:
    0;

  border-radius:
    8px;

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

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

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    700;

  transition:
    border-color
    140ms
    ease,
    background-color
    140ms
    ease;
}


.importaciones-productos-field input,
.importaciones-productos-field select {
  height:
    34px;

  padding:
    0
    9px;
}


.importaciones-productos-field textarea {
  min-height:
    88px;

  padding:
    9px;

  resize:
    vertical;

  line-height:
    1.5;
}


.importaciones-productos-field input:focus,
.importaciones-productos-field select:focus,
.importaciones-productos-field textarea:focus {
  border-color:
    var(
      --ip-border-strong
    );

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


.importaciones-productos-field input[readonly] {
  cursor:
    default;

  color:
    var(
      --ip-muted
    );

  background:
    var(
      --ip-bg-soft-2
    );
}


.importaciones-productos-field.is-wide {
  grid-column:
    1
    /
    -1;
}


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

.importaciones-productos-state,
.importaciones-productos-empty {
  min-height:
    190px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    24px;

  text-align:
    center;

  border:
    1px
    dashed
    var(
      --ip-border-strong
    );

  border-radius:
    var(
      --ip-radius-md
    );

  color:
    var(
      --ip-muted
    );

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


.importaciones-productos-state__icon,
.importaciones-productos-empty__icon {
  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

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

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


.importaciones-productos-state__icon svg,
.importaciones-productos-empty__icon svg {
  width:
    18px;

  height:
    18px;
}


.importaciones-productos-state strong,
.importaciones-productos-empty strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    13px;

  font-weight:
    800;
}


.importaciones-productos-state p,
.importaciones-productos-empty p {
  max-width:
    500px;

  margin:
    0;

  color:
    var(
      --ip-muted
    );

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.5;
}


.importaciones-productos-state.is-error
.importaciones-productos-state__icon {
  color:
    var(
      --ip-danger
    );

  background:
    var(
      --ip-danger-soft
    );
}


/* =========================================================
   SPINNER
   ========================================================= */

.importaciones-productos-page
.is-spinning,
.importaciones-productos-toast
.is-spinning,
.importaciones-productos-modal
.is-spinning {
  animation:
    importaciones-productos-spin
    0.9s
    linear
    infinite;
}


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


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

.importaciones-productos-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    99999;

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

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  padding:
    11px
    12px;

  border:
    1px
    solid
    rgba(
      15,
      23,
      42,
      0.12
    );

  border-radius:
    11px;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      8px
    );

  pointer-events:
    none;

  color:
    #111827;

  background:
    #ffffff;

  box-shadow:
    0
    14px
    40px
    rgba(
      15,
      23,
      42,
      0.14
    );

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


html[data-theme="dark"]
.importaciones-productos-toast {
  border-color:
    rgba(
      255,
      255,
      255,
      0.1
    );

  color:
    #f4f4f5;

  background:
    #0a0a0a;

  box-shadow:
    0
    18px
    45px
    rgba(
      0,
      0,
      0,
      0.45
    );
}


.importaciones-productos-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );

  pointer-events:
    auto;
}


.importaciones-productos-toast__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    rgba(
      15,
      23,
      42,
      0.06
    );
}


html[data-theme="dark"]
.importaciones-productos-toast__icon {
  background:
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.importaciones-productos-toast__icon svg {
  width:
    15px;

  height:
    15px;
}


.importaciones-productos-toast__body {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.importaciones-productos-toast__body strong {
  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;
}


.importaciones-productos-toast__body p {
  margin:
    0;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.45;

  opacity:
    0.8;
}


.importaciones-productos-toast.is-success
.importaciones-productos-toast__icon {
  color:
    #15803d;

  background:
    rgba(
      21,
      128,
      61,
      0.1
    );
}


.importaciones-productos-toast.is-warning
.importaciones-productos-toast__icon {
  color:
    #a16207;

  background:
    rgba(
      161,
      98,
      7,
      0.1
    );
}


.importaciones-productos-toast.is-error
.importaciones-productos-toast__icon {
  color:
    #b91c1c;

  background:
    rgba(
      185,
      28,
      28,
      0.1
    );
}


/* =========================================================
   RESPONSIVE · PARTE BASE
   ========================================================= */

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


  .importaciones-productos-filters__grid {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    980px
) {
  .importaciones-productos-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .importaciones-productos-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .importaciones-productos-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .importaciones-productos-filters__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    700px
) {
  .importaciones-productos-page {
    padding:
      10px;

    gap:
      10px;
  }


  .importaciones-productos-head {
    padding:
      12px;
  }


  .importaciones-productos-head__identity {
    align-items:
      flex-start;
  }


  .importaciones-productos-head__icon {
    width:
      36px;

    height:
      36px;
  }


  .importaciones-productos-head__actions {
    display:
      grid;

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


  .importaciones-productos-updated {
    grid-column:
      1
      /
      -1;

    width:
      100%;
  }


  .importaciones-productos-btn {
    width:
      100%;
  }


  .importaciones-productos-kpis {
    grid-template-columns:
      1fr
      1fr;

    gap:
      8px;
  }


  .importaciones-productos-kpi {
    min-height:
      105px;

    padding:
      11px;
  }


  .importaciones-productos-kpi__body > strong {
    font-size:
      21px;
  }


  .importaciones-productos-filters__top {
    grid-template-columns:
      1fr;
  }


  .importaciones-productos-filters__grid {
    grid-template-columns:
      1fr
      1fr;
  }
}


@media (
  max-width:
    480px
) {
  .importaciones-productos-head__actions,
  .importaciones-productos-kpis,
  .importaciones-productos-filters__grid {
    grid-template-columns:
      1fr;
  }


  .importaciones-productos-head h1 {
    font-size:
      19px;
  }
}


/* =========================================================
   CONTINÚA EN PARTE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · OPERACIONES · IMPORTACIONES
   PRODUCTOS DE IMPORTACIÓN

   PARTE 2 DE 3

   CONTIENE:
   - Panel principal
   - Tabla
   - Celdas
   - Imagen
   - Estados
   - Acciones
   - Paginación
   - Responsive tabla
   ========================================================= */


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

.importaciones-productos-panel {
  min-width:
    0;

  display:
    grid;

  gap:
    0;

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

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

  background:
    var(
      --ip-surface
    );

  box-shadow:
    var(
      --ip-shadow-sm
    );

  overflow:
    hidden;
}


.importaciones-productos-panel__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  min-width:
    0;

  padding:
    14px
    16px;

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


.importaciones-productos-panel__head > div:first-child {
  min-width:
    0;
}


.importaciones-productos-panel__head h2 {
  margin:
    3px
    0
    3px;

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

  font-size:
    16px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}


.importaciones-productos-panel__head p {
  margin:
    0;

  max-width:
    760px;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.45;
}


.importaciones-productos-panel__meta {
  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.importaciones-productos-panel__meta span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

  padding:
    5px
    8px;

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

  border-radius:
    8px;

  color:
    var(
      --ip-muted
    );

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

  font-size:
    10px;

  font-weight:
    800;
}


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

.importaciones-productos-table-shell {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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


.importaciones-productos-table-shell::-webkit-scrollbar {
  height:
    8px;

  width:
    8px;
}


.importaciones-productos-table-shell::-webkit-scrollbar-track {
  background:
    transparent;
}


.importaciones-productos-table-shell::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


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

.importaciones-productos-table {
  width:
    100%;

  min-width:
    1620px;

  border-collapse:
    collapse;

  border-spacing:
    0;

  table-layout:
    auto;

  color:
    var(
      --ip-text
    );

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


.importaciones-productos-table thead {
  position:
    sticky;

  top:
    0;

  z-index:
    4;
}


.importaciones-productos-table th {
  height:
    38px;

  padding:
    0
    10px;

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

  color:
    var(
      --ip-muted
    );

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

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.045em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.importaciones-productos-table th.is-number,
.importaciones-productos-table td.is-number {
  text-align:
    right;
}


.importaciones-productos-table th.is-image {
  width:
    58px;

  min-width:
    58px;
}


.importaciones-productos-table th.is-product {
  min-width:
    260px;
}


.importaciones-productos-table th.is-actions {
  width:
    74px;

  min-width:
    74px;
}


.importaciones-productos-table td {
  min-width:
    0;

  padding:
    8px
    10px;

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

  vertical-align:
    middle;

  color:
    var(
      --ip-text
    );

  background:
    var(
      --ip-surface
    );

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.35;
}


.importaciones-productos-table tbody tr:last-child td {
  border-bottom:
    0;
}


.importaciones-productos-table tbody tr {
  transition:
    background-color
    120ms
    ease,
    opacity
    120ms
    ease;
}


.importaciones-productos-table tbody tr:hover td {
  background:
    var(
      --ip-bg-soft
    );
}


.importaciones-productos-table tbody tr.is-inactive {
  opacity:
    0.58;
}


.importaciones-productos-table tbody tr.is-inactive td {
  background:
    var(
      --ip-bg-soft
    );
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.importaciones-productos-table th:nth-child(2),
.importaciones-productos-table td:nth-child(2) {
  min-width:
    110px;
}


.importaciones-productos-table th:nth-child(3),
.importaciones-productos-table td:nth-child(3) {
  min-width:
    128px;
}


.importaciones-productos-table th:nth-child(4),
.importaciones-productos-table td:nth-child(4) {
  min-width:
    270px;

  max-width:
    360px;
}


.importaciones-productos-table th:nth-child(5),
.importaciones-productos-table td:nth-child(5) {
  min-width:
    130px;
}


.importaciones-productos-table th:nth-child(6),
.importaciones-productos-table td:nth-child(6) {
  min-width:
    150px;
}


.importaciones-productos-table th:nth-child(7),
.importaciones-productos-table td:nth-child(7) {
  min-width:
    135px;
}


.importaciones-productos-table th:nth-child(8),
.importaciones-productos-table td:nth-child(8) {
  min-width:
    180px;

  max-width:
    240px;
}


.importaciones-productos-table th:nth-child(9),
.importaciones-productos-table td:nth-child(9) {
  min-width:
    90px;
}


.importaciones-productos-table th:nth-child(10),
.importaciones-productos-table td:nth-child(10) {
  min-width:
    140px;

  max-width:
    190px;
}


.importaciones-productos-table th:nth-child(11),
.importaciones-productos-table td:nth-child(11) {
  min-width:
    120px;
}


.importaciones-productos-table th:nth-child(12),
.importaciones-productos-table td:nth-child(12) {
  min-width:
    78px;
}


.importaciones-productos-table th:nth-child(13),
.importaciones-productos-table td:nth-child(13) {
  min-width:
    135px;

  max-width:
    170px;
}


.importaciones-productos-table th:nth-child(14),
.importaciones-productos-table td:nth-child(14) {
  min-width:
    112px;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.importaciones-productos-image {
  position:
    relative;

  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

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

  border-radius:
    9px;

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


.importaciones-productos-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;
}


.importaciones-productos-image-placeholder {
  width:
    100%;

  height:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

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


.importaciones-productos-image-placeholder.is-fallback {
  display:
    none;
}


.importaciones-productos-image-placeholder.is-fallback.is-visible {
  display:
    inline-flex;
}


.importaciones-productos-image-placeholder svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    1.8;
}


/* =========================================================
   PRODUCT CELL
   ========================================================= */

.importaciones-productos-product {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.importaciones-productos-product strong {
  display:
    block;

  max-width:
    330px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-productos-product span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.25;
}


/* =========================================================
   CODES
   ========================================================= */

.importaciones-productos-code {
  display:
    inline-block;

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

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

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;

  white-space:
    nowrap;
}


.importaciones-productos-code.is-secondary {
  color:
    var(
      --ip-muted
    );
}


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

.importaciones-productos-category {
  display:
    inline-flex;

  align-items:
    center;

  max-width:
    180px;

  min-height:
    24px;

  padding:
    4px
    7px;

  overflow:
    hidden;

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

  border-radius:
    7px;

  color:
    var(
      --ip-text
    );

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

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TEXT
   ========================================================= */

.importaciones-productos-text-strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;
}


.importaciones-productos-description {
  display:
    block;

  max-width:
    220px;

  overflow:
    hidden;

  color:
    var(
      --ip-text
    );

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-productos-missing {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    4px
    7px;

  border:
    1px
    dashed
    var(
      --ip-border-strong
    );

  border-radius:
    7px;

  color:
    var(
      --ip-muted
    );

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

  font-size:
    9px;

  font-weight:
    700;
}


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

.importaciones-productos-price {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    10px;

  font-weight:
    850;

  white-space:
    nowrap;
}


/* =========================================================
   CURRENCY
   ========================================================= */

.importaciones-productos-currency {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    42px;

  min-height:
    24px;

  padding:
    4px
    7px;

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

  border-radius:
    7px;

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

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

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1;
}


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

.importaciones-productos-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    25px;

  padding:
    4px
    7px;

  border:
    1px
    solid
    transparent;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;
}


.importaciones-productos-status svg {
  width:
    12px;

  height:
    12px;

  stroke-width:
    2.2;
}


.importaciones-productos-status.is-complete {
  color:
    var(
      --ip-success
    );

  background:
    var(
      --ip-success-soft
    );
}


.importaciones-productos-status.is-pending {
  color:
    var(
      --ip-warning
    );

  background:
    var(
      --ip-warning-soft
    );
}


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

.importaciones-productos-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  white-space:
    nowrap;
}


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

.importaciones-productos-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    48px;

  padding:
    8px
    12px;

  border-top:
    1px
    solid
    var(
      --ip-border
    );

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


.importaciones-productos-pagination__summary {
  display:
    flex;

  align-items:
    baseline;

  gap:
    4px;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}


.importaciones-productos-pagination__summary strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.importaciones-productos-pagination__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


.importaciones-productos-pagination__page {
  min-width:
    110px;

  text-align:
    center;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}


.importaciones-productos-pagination__page strong {
  color:
    var(
      --ip-text-strong
    );

  font-weight:
    850;
}


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

.importaciones-productos-table.is-preview {
  min-width:
    760px;
}


.importaciones-productos-table.is-preview th,
.importaciones-productos-table.is-preview td {
  padding-left:
    9px;

  padding-right:
    9px;
}


/* =========================================================
   HISTORY DETAIL TABLE
   ========================================================= */

.importaciones-productos-table.is-history-detail {
  min-width:
    760px;
}


.importaciones-productos-table.is-history-detail th:nth-child(1),
.importaciones-productos-table.is-history-detail td:nth-child(1) {
  width:
    65px;

  min-width:
    65px;
}


.importaciones-productos-table.is-history-detail th:nth-child(2),
.importaciones-productos-table.is-history-detail td:nth-child(2) {
  min-width:
    120px;
}


.importaciones-productos-table.is-history-detail th:nth-child(3),
.importaciones-productos-table.is-history-detail td:nth-child(3) {
  min-width:
    100px;
}


.importaciones-productos-table.is-history-detail th:nth-child(4),
.importaciones-productos-table.is-history-detail td:nth-child(4) {
  min-width:
    100px;
}


.importaciones-productos-table.is-history-detail th:nth-child(5),
.importaciones-productos-table.is-history-detail td:nth-child(5) {
  min-width:
    320px;

  white-space:
    normal;
}


/* =========================================================
   EMPTY INSIDE TABLE
   ========================================================= */

.importaciones-productos-table td
.importaciones-productos-empty {
  min-height:
    130px;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}


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

@media (
  max-width:
    1180px
) {
  .importaciones-productos-panel__head {
    align-items:
      flex-start;
  }


  .importaciones-productos-table {
    min-width:
      1540px;
  }
}


@media (
  max-width:
    760px
) {
  .importaciones-productos-panel {
    border-radius:
      12px;
  }


  .importaciones-productos-panel__head {
    flex-direction:
      column;

    gap:
      8px;

    padding:
      12px;
  }


  .importaciones-productos-panel__meta {
    width:
      100%;
  }


  .importaciones-productos-panel__meta span {
    width:
      100%;

    justify-content:
      center;
  }


  .importaciones-productos-table {
    min-width:
      1460px;
  }


  .importaciones-productos-table th {
    height:
      35px;

    padding:
      0
      8px;

    font-size:
      8px;
  }


  .importaciones-productos-table td {
    padding:
      7px
      8px;

    font-size:
      9px;
  }


  .importaciones-productos-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .importaciones-productos-pagination__summary {
    justify-content:
      center;
  }


  .importaciones-productos-pagination__actions {
    justify-content:
      center;
  }
}


@media (
  max-width:
    480px
) {
  .importaciones-productos-pagination__actions {
    width:
      100%;

    display:
      grid;

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


  .importaciones-productos-pagination__page {
    min-width:
      0;
  }
}


/* =========================================================
   CONTINÚA EN PARTE 3
   ========================================================= *//* =========================================================
   WIRTZ HUB · OPERACIONES · IMPORTACIONES
   PRODUCTOS DE IMPORTACIÓN

   PARTE 3 DE 3

   CONTIENE:
   - Modal base
   - Modal editor
   - Confirmación
   - Carga masiva
   - Dropzone
   - Preview
   - Resultado de carga
   - Historial
   - Detalle historial
   - Responsive modales
   ========================================================= */


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

body.importaciones-productos-modal-open {
  overflow:
    hidden;
}


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

.importaciones-productos-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    100000;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    82px
    18px
    24px;

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


.importaciones-productos-modal__backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      2,
      6,
      23,
      0.54
    );

  backdrop-filter:
    blur(
      3px
    );
}


html[data-theme="dark"]
.importaciones-productos-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.72
    );
}


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

.importaciones-productos-modal__panel {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      860px,
      100%
    );

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

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

  border-radius:
    16px;

  color:
    var(
      --ip-text
    );

  background:
    var(
      --ip-surface
    );

  box-shadow:
    0
    24px
    70px
    rgba(
      15,
      23,
      42,
      0.22
    );
}


html[data-theme="dark"]
.importaciones-productos-modal__panel {
  box-shadow:
    0
    30px
    90px
    rgba(
      0,
      0,
      0,
      0.65
    );
}


.importaciones-productos-modal.is-editor
.importaciones-productos-modal__panel {
  width:
    min(
      920px,
      100%
    );
}


.importaciones-productos-modal.is-import
.importaciones-productos-modal__panel {
  width:
    min(
      1040px,
      100%
    );
}


.importaciones-productos-modal.is-history
.importaciones-productos-modal__panel,
.importaciones-productos-modal.is-history-detail
.importaciones-productos-modal__panel {
  width:
    min(
      980px,
      100%
    );
}


.importaciones-productos-modal.is-confirm
.importaciones-productos-modal__panel {
  width:
    min(
      520px,
      100%
    );
}


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

.importaciones-productos-modal__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  flex:
    0
    0
    auto;

  min-height:
    68px;

  padding:
    13px
    15px;

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

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


.importaciones-productos-modal__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.importaciones-productos-modal__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    10px;

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

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


.importaciones-productos-modal__icon svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    2;
}


.importaciones-productos-modal__identity > div {
  min-width:
    0;
}


.importaciones-productos-modal__identity h3 {
  margin:
    3px
    0
    2px;

  overflow:
    hidden;

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

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-productos-modal__identity p {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.importaciones-productos-modal__body {
  min-height:
    0;

  flex:
    1
    1
    auto;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    14px;

  scrollbar-width:
    thin;

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


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


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


.importaciones-productos-modal__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


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

.importaciones-productos-modal__footer {
  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px
    14px;

  border-top:
    1px
    solid
    var(
      --ip-border
    );

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


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

.importaciones-productos-modal-error {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  margin-bottom:
    12px;

  padding:
    9px
    10px;

  border:
    1px
    solid
    color-mix(
      in srgb,
      var(
        --ip-danger
      )
      28%,
      transparent
    );

  border-radius:
    9px;

  color:
    var(
      --ip-danger
    );

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

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;
}


.importaciones-productos-modal-error svg {
  width:
    14px;

  height:
    14px;

  flex:
    0
    0
    auto;

  margin-top:
    1px;
}


/* =========================================================
   EDITOR PRODUCT IDENTITY
   ========================================================= */

.importaciones-productos-editor-product {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    14px;

  padding:
    11px;

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

  border-radius:
    11px;

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


.importaciones-productos-editor-product__image {
  position:
    relative;

  width:
    54px;

  height:
    54px;

  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

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

  border-radius:
    10px;

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


.importaciones-productos-editor-product__image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;
}


.importaciones-productos-editor-product__image
.importaciones-productos-image-placeholder {
  width:
    100%;

  height:
    100%;
}


.importaciones-productos-editor-product__identity {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.importaciones-productos-editor-product__identity > span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.importaciones-productos-editor-product__identity > strong {
  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-productos-editor-product__identity > p {
  margin:
    0;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


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

.importaciones-productos-form-grid {
  display:
    grid;

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

  gap:
    10px;
}


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

.importaciones-productos-confirm {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  padding:
    14px;

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

  border-radius:
    11px;

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


.importaciones-productos-confirm__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  color:
    var(
      --ip-danger
    );

  background:
    var(
      --ip-danger-soft
    );
}


.importaciones-productos-confirm__icon svg {
  width:
    17px;

  height:
    17px;
}


.importaciones-productos-confirm > div {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.importaciones-productos-confirm strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    12px;

  font-weight:
    850;
}


.importaciones-productos-confirm p {
  margin:
    0;

  color:
    var(
      --ip-muted
    );

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.45;
}


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

.importaciones-productos-import {
  display:
    grid;

  gap:
    12px;
}


/* =========================================================
   DROPZONE
   ========================================================= */

.importaciones-productos-dropzone {
  min-height:
    108px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    14px;

  border:
    1px
    dashed
    var(
      --ip-border-strong
    );

  border-radius:
    12px;

  cursor:
    pointer;

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

  transition:
    border-color
    140ms
    ease,
    background-color
    140ms
    ease;
}


.importaciones-productos-dropzone:hover {
  border-color:
    var(
      --ip-text
    );

  background:
    var(
      --ip-bg-soft-2
    );
}


.importaciones-productos-dropzone input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.importaciones-productos-dropzone__icon {
  width:
    42px;

  height:
    42px;

  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    11px;

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

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


.importaciones-productos-dropzone__icon svg {
  width:
    19px;

  height:
    19px;
}


.importaciones-productos-dropzone > div {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}


.importaciones-productos-dropzone strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.importaciones-productos-dropzone span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.4;
}


/* =========================================================
   IMPORT OPTIONS
   ========================================================= */

.importaciones-productos-import-options {
  display:
    grid;

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

  gap:
    8px;
}


.importaciones-productos-check {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  min-height:
    44px;

  padding:
    9px
    10px;

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

  border-radius:
    9px;

  cursor:
    pointer;

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


.importaciones-productos-check input {
  width:
    15px;

  height:
    15px;

  flex:
    0
    0
    auto;

  margin:
    1px
    0
    0;

  accent-color:
    var(
      --ip-primary
    );
}


.importaciones-productos-check span {
  color:
    var(
      --ip-text
    );

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;
}


/* =========================================================
   IMPORT EMPTY
   ========================================================= */

.importaciones-productos-import-empty {
  min-height:
    135px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    18px;

  border:
    1px
    dashed
    var(
      --ip-border
    );

  border-radius:
    10px;

  text-align:
    center;

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


.importaciones-productos-import-empty > svg {
  width:
    22px;

  height:
    22px;

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


.importaciones-productos-import-empty strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.importaciones-productos-import-empty p {
  margin:
    0;

  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


/* =========================================================
   IMPORT PREVIEW
   ========================================================= */

.importaciones-productos-import-preview {
  display:
    grid;

  gap:
    8px;

  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    10px;

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


.importaciones-productos-import-preview__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.importaciones-productos-import-preview__head span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


.importaciones-productos-import-preview__head strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    10px;

  font-weight:
    850;
}


.importaciones-productos-import-more {
  margin:
    0;

  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  text-align:
    center;
}


/* =========================================================
   IMPORT RESULT
   ========================================================= */

.importaciones-productos-import-result {
  display:
    grid;

  gap:
    10px;

  padding:
    11px;

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

  border-radius:
    10px;

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


.importaciones-productos-import-result > header {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.importaciones-productos-import-result > header > svg {
  width:
    18px;

  height:
    18px;

  flex:
    0
    0
    auto;

  color:
    var(
      --ip-text-strong
    );
}


.importaciones-productos-import-result > header > div {
  display:
    grid;

  gap:
    1px;
}


.importaciones-productos-import-result > header strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.importaciones-productos-import-result > header span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.importaciones-productos-import-result__grid {
  display:
    grid;

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

  gap:
    7px;
}


.importaciones-productos-import-result__grid article {
  display:
    grid;

  gap:
    3px;

  padding:
    8px;

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

  border-radius:
    8px;

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


.importaciones-productos-import-result__grid span {
  color:
    var(
      --ip-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  text-transform:
    uppercase;
}


.importaciones-productos-import-result__grid strong {
  color:
    var(
      --ip-text-strong
    );

  font-size:
    17px;

  font-weight:
    850;

  line-height:
    1;
}


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

.importaciones-productos-history {
  display:
    grid;

  gap:
    7px;
}


.importaciones-productos-history-item {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  padding:
    9px
    10px;

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

  border-radius:
    9px;

  cursor:
    pointer;

  color:
    var(
      --ip-text
    );

  background:
    var(
      --ip-surface
    );

  font:
    inherit;

  text-align:
    left;

  transition:
    border-color
    140ms
    ease,
    background-color
    140ms
    ease;
}


.importaciones-productos-history-item:hover {
  border-color:
    var(
      --ip-border-strong
    );

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


.importaciones-productos-history-item__icon {
  width:
    32px;

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

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

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


.importaciones-productos-history-item__icon svg {
  width:
    15px;

  height:
    15px;
}


.importaciones-productos-history-item__body {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.importaciones-productos-history-item__body strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-productos-history-item__body span {
  color:
    var(
      --ip-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.importaciones-productos-history-item__metrics {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


.importaciones-productos-history-item__metrics span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    3px
    6px;

  border-radius:
    6px;

  color:
    var(
      --ip-muted
    );

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

  font-size:
    8px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.importaciones-productos-history-item > svg {
  width:
    14px;

  height:
    14px;

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


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

.importaciones-productos-load-summary {
  display:
    grid;

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

  gap:
    7px;

  margin-bottom:
    11px;
}


.importaciones-productos-load-summary article {
  display:
    grid;

  gap:
    3px;

  padding:
    9px;

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

  border-radius:
    8px;

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


.importaciones-productos-load-summary span {
  color:
    var(
      --ip-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.importaciones-productos-load-summary strong {
  overflow:
    hidden;

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

  font-size:
    13px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

@media (
  max-width:
    900px
) {
  .importaciones-productos-modal {
    padding-top:
      72px;
  }


  .importaciones-productos-modal__panel {
    max-height:
      calc(
        100vh -
        92px
      );
  }


  .importaciones-productos-import-result__grid,
  .importaciones-productos-load-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    700px
) {
  .importaciones-productos-modal {
    padding:
      62px
      10px
      10px;
  }


  .importaciones-productos-modal__panel {
    width:
      100%;

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

    border-radius:
      12px;
  }


  .importaciones-productos-modal.is-editor
  .importaciones-productos-modal__panel,
  .importaciones-productos-modal.is-import
  .importaciones-productos-modal__panel,
  .importaciones-productos-modal.is-history
  .importaciones-productos-modal__panel,
  .importaciones-productos-modal.is-history-detail
  .importaciones-productos-modal__panel,
  .importaciones-productos-modal.is-confirm
  .importaciones-productos-modal__panel {
    width:
      100%;
  }


  .importaciones-productos-modal__head {
    min-height:
      60px;

    padding:
      10px
      11px;
  }


  .importaciones-productos-modal__body {
    padding:
      11px;
  }


  .importaciones-productos-modal__footer {
    padding:
      9px
      11px;
  }


  .importaciones-productos-form-grid {
    grid-template-columns:
      1fr;
  }


  .importaciones-productos-import-options {
    grid-template-columns:
      1fr;
  }


  .importaciones-productos-import-result__grid,
  .importaciones-productos-load-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .importaciones-productos-history-item {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      )
      16px;
  }


  .importaciones-productos-history-item__metrics {
    grid-column:
      2
      /
      3;

    justify-content:
      flex-start;
  }
}


@media (
  max-width:
    500px
) {
  .importaciones-productos-modal {
    padding:
      56px
      6px
      6px;
  }


  .importaciones-productos-modal__panel {
    max-height:
      calc(
        100vh -
        62px
      );

    border-radius:
      10px;
  }


  .importaciones-productos-modal__identity h3 {
    font-size:
      13px;
  }


  .importaciones-productos-modal__identity p {
    display:
      none;
  }


  .importaciones-productos-modal__footer {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .importaciones-productos-modal__footer
  .importaciones-productos-btn {
    width:
      100%;
  }


  .importaciones-productos-editor-product {
    align-items:
      flex-start;
  }


  .importaciones-productos-dropzone {
    align-items:
      flex-start;

    min-height:
      96px;
  }


  .importaciones-productos-import-result__grid,
  .importaciones-productos-load-summary {
    grid-template-columns:
      1fr
      1fr;
  }


  .importaciones-productos-history-item__metrics {
    flex-wrap:
      wrap;
  }
}


/* =========================================================
   FIN
   ========================================================= */
   /* =========================================================
   FIX MODAL · VARIABLES FUERA DEL CONTENEDOR
   ========================================================= */

.importaciones-productos-modal {
  --ip-bg:
    #ffffff;

  --ip-bg-soft:
    #f8fafc;

  --ip-bg-soft-2:
    #f1f5f9;

  --ip-surface:
    #ffffff;

  --ip-surface-2:
    #fbfcfe;

  --ip-text:
    #111827;

  --ip-text-strong:
    #020617;

  --ip-muted:
    #64748b;

  --ip-muted-2:
    #94a3b8;

  --ip-border:
    rgba(
      15,
      23,
      42,
      0.12
    );

  --ip-border-strong:
    rgba(
      15,
      23,
      42,
      0.22
    );

  --ip-primary:
    #111827;

  --ip-primary-hover:
    #020617;

  --ip-primary-contrast:
    #ffffff;

  --ip-success:
    #15803d;

  --ip-success-soft:
    rgba(
      21,
      128,
      61,
      0.10
    );

  --ip-warning:
    #a16207;

  --ip-warning-soft:
    rgba(
      161,
      98,
      7,
      0.11
    );

  --ip-danger:
    #b91c1c;

  --ip-danger-soft:
    rgba(
      185,
      28,
      28,
      0.10
    );

  --ip-info:
    #1d4ed8;

  --ip-info-soft:
    rgba(
      29,
      78,
      216,
      0.10
    );

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


html[data-theme="dark"]
.importaciones-productos-modal {
  --ip-bg:
    #000000;

  --ip-bg-soft:
    #080808;

  --ip-bg-soft-2:
    #111111;

  --ip-surface:
    #0b0b0b;

  --ip-surface-2:
    #101010;

  --ip-text:
    #e5e7eb;

  --ip-text-strong:
    #ffffff;

  --ip-muted:
    #a1a1aa;

  --ip-muted-2:
    #71717a;

  --ip-border:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --ip-border-strong:
    rgba(
      255,
      255,
      255,
      0.18
    );

  --ip-primary:
    #ffffff;

  --ip-primary-hover:
    #e5e7eb;

  --ip-primary-contrast:
    #000000;

  --ip-success:
    #4ade80;

  --ip-success-soft:
    rgba(
      74,
      222,
      128,
      0.10
    );

  --ip-warning:
    #facc15;

  --ip-warning-soft:
    rgba(
      250,
      204,
      21,
      0.10
    );

  --ip-danger:
    #f87171;

  --ip-danger-soft:
    rgba(
      248,
      113,
      113,
      0.10
    );

  --ip-info:
    #60a5fa;

  --ip-info-soft:
    rgba(
      96,
      165,
      250,
      0.10
    );
}


/* =========================================================
   MODAL · VISIBILIDAD
   ========================================================= */

.importaciones-productos-modal__backdrop {
  background:
    rgba(
      15,
      23,
      42,
      0.58
    );

  backdrop-filter:
    blur(
      2px
    );

  -webkit-backdrop-filter:
    blur(
      2px
    );
}


html[data-theme="dark"]
.importaciones-productos-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.76
    );
}


.importaciones-productos-modal__panel {
  opacity:
    1;

  color:
    var(
      --ip-text
    );

  background:
    var(
      --ip-surface
    );

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

  box-shadow:
    0
    24px
    70px
    rgba(
      0,
      0,
      0,
      0.28
    );
}


.importaciones-productos-modal__head,
.importaciones-productos-modal__footer {
  background:
    var(
      --ip-surface
    );
}


.importaciones-productos-modal__body {
  color:
    var(
      --ip-text
    );

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


/* =========================================================
   CARGA MASIVA
   ========================================================= */

.importaciones-productos-dropzone,
.importaciones-productos-check,
.importaciones-productos-import-preview,
.importaciones-productos-import-result,
.importaciones-productos-import-empty {
  color:
    var(
      --ip-text
    );

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

  border-color:
    var(
      --ip-border
    );
}


.importaciones-productos-dropzone strong,
.importaciones-productos-check span,
.importaciones-productos-import-preview strong,
.importaciones-productos-import-result strong,
.importaciones-productos-import-empty strong {
  color:
    var(
      --ip-text-strong
    );
}


.importaciones-productos-dropzone span,
.importaciones-productos-import-preview span,
.importaciones-productos-import-result span,
.importaciones-productos-import-empty p {
  color:
    var(
      --ip-muted
    );
}