/* =========================================================
   WIRTZ HUB · OPERACIONES
   IMPORTACIONES · COMPRAS

   UBICACIÓN:
   frontend/src/pages/operaciones/importaciones/compras/
   importaciones-compras.css

   PARTE 1 / 3

   CONTIENE:
   - Variables.
   - Base.
   - Layout.
   - Header.
   - Métricas.
   - Toolbar.
   - Filtros.
   - Botones.
   - Tabla base.
   - Loading.
   - Empty.
   - Error.
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {
  --importaciones-bg:
    #f6f7f9;

  --importaciones-surface:
    #ffffff;

  --importaciones-surface-soft:
    #f9fafb;

  --importaciones-surface-hover:
    #f3f4f6;

  --importaciones-border:
    #e5e7eb;

  --importaciones-border-strong:
    #d1d5db;

  --importaciones-text:
    #111827;

  --importaciones-text-soft:
    #4b5563;

  --importaciones-text-muted:
    #6b7280;

  --importaciones-text-faint:
    #9ca3af;

  --importaciones-primary:
    #111827;

  --importaciones-primary-hover:
    #1f2937;

  --importaciones-danger:
    #b91c1c;

  --importaciones-danger-soft:
    #fef2f2;

  --importaciones-warning:
    #92400e;

  --importaciones-warning-soft:
    #fffbeb;

  --importaciones-success:
    #166534;

  --importaciones-success-soft:
    #f0fdf4;

  --importaciones-info:
    #1d4ed8;

  --importaciones-info-soft:
    #eff6ff;

  --importaciones-radius-sm:
    8px;

  --importaciones-radius-md:
    12px;

  --importaciones-radius-lg:
    16px;

  --importaciones-transition:
    140ms ease;
}


/* =========================================================
   02. DARK MODE
   ========================================================= */

html.dark,
body.dark,
[data-theme="dark"] {
  --importaciones-bg:
    #050505;

  --importaciones-surface:
    #0a0a0a;

  --importaciones-surface-soft:
    #0f0f0f;

  --importaciones-surface-hover:
    #151515;

  --importaciones-border:
    #232323;

  --importaciones-border-strong:
    #333333;

  --importaciones-text:
    #f5f5f5;

  --importaciones-text-soft:
    #d4d4d4;

  --importaciones-text-muted:
    #a3a3a3;

  --importaciones-text-faint:
    #737373;

  --importaciones-primary:
    #f5f5f5;

  --importaciones-primary-hover:
    #ffffff;

  --importaciones-danger:
    #f87171;

  --importaciones-danger-soft:
    #1a0a0a;

  --importaciones-warning:
    #fbbf24;

  --importaciones-warning-soft:
    #1a1205;

  --importaciones-success:
    #4ade80;

  --importaciones-success-soft:
    #07140b;

  --importaciones-info:
    #60a5fa;

  --importaciones-info-soft:
    #07111f;
}


/* =========================================================
   03. RESET LOCAL
   ========================================================= */

.importaciones-compras-shell,
.importaciones-compras-shell *,
.importaciones-compras-modal-root,
.importaciones-compras-modal-root * {
  box-sizing:
    border-box;
}


.importaciones-compras-shell,
.importaciones-compras-modal-root {
  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-synthesis:
    none;
}


/* =========================================================
   04. SHELL
   ========================================================= */

.importaciones-compras-shell {
  width:
    100%;

  min-height:
    100vh;
}


.importaciones-compras-content {
  width:
    100%;

  min-width:
    0;

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


.importaciones-compras-page {
  width:
    100%;

  min-width:
    0;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

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


/* =========================================================
   05. HEADER
   ========================================================= */

.importaciones-compras-header {
  width:
    100%;
}


.importaciones-compras-header__content {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.importaciones-compras-header__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  width:
    fit-content;

  font-size:
    13px;

  font-weight:
    700;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-header__title-row {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;
}


.importaciones-compras-header__title {
  margin:
    0;

  font-size:
    clamp(
      28px,
      3vw,
      40px
    );

  line-height:
    1.05;

  font-weight:
    800;

  letter-spacing:
    -0.04em;

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


.importaciones-compras-header__subtitle {
  margin:
    8px 0 0;

  font-size:
    15px;

  line-height:
    1.5;

  font-weight:
    500;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


/* =========================================================
   06. BOTONES
   ========================================================= */

.importaciones-compras-btn,
.importaciones-compras-icon-btn,
.importaciones-compras-row-action,
.importaciones-compras-mini-action,
.importaciones-compras-pagination__button {
  appearance:
    none;

  border:
    0;

  outline:
    0;

  font-family:
    inherit;

  cursor:
    pointer;

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


.importaciones-compras-btn {
  min-height:
    40px;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

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

  border:
    1px solid
    transparent;

  font-size:
    14px;

  font-weight:
    700;

  white-space:
    nowrap;
}


.importaciones-compras-btn:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


.importaciones-compras-btn--primary {
  background:
    var(
      --importaciones-primary
    );

  color:
    var(
      --importaciones-surface
    );

  border-color:
    var(
      --importaciones-primary
    );
}


html.dark
.importaciones-compras-btn--primary,
body.dark
.importaciones-compras-btn--primary,
[data-theme="dark"]
.importaciones-compras-btn--primary {
  color:
    #050505;
}


.importaciones-compras-btn--primary:hover:not(:disabled) {
  background:
    var(
      --importaciones-primary-hover
    );

  border-color:
    var(
      --importaciones-primary-hover
    );
}


.importaciones-compras-btn--secondary {
  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text
    );

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


.importaciones-compras-btn--secondary:hover:not(:disabled) {
  background:
    var(
      --importaciones-surface-hover
    );

  border-color:
    var(
      --importaciones-border-strong
    );
}


.importaciones-compras-btn--ghost {
  background:
    transparent;

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

  border-color:
    transparent;
}


.importaciones-compras-btn--ghost:hover:not(:disabled) {
  background:
    var(
      --importaciones-surface-hover
    );

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


.importaciones-compras-icon-btn {
  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

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

  background:
    var(
      --importaciones-surface
    );

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


.importaciones-compras-icon-btn:hover {
  background:
    var(
      --importaciones-surface-hover
    );

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


/* =========================================================
   07. MÉTRICAS
   ========================================================= */

.importaciones-compras-metrics {
  width:
    100%;

  display:
    grid;

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

  gap:
    10px;
}


.importaciones-compras-metric-card {
  min-width:
    0;

  padding:
    15px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

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

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

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


.importaciones-compras-metric-card__icon {
  flex:
    0 0 auto;

  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

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

  background:
    var(
      --importaciones-surface-soft
    );

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


.importaciones-compras-metric-card__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.importaciones-compras-metric-card__label {
  font-size:
    12px;

  font-weight:
    700;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-metric-card__value {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    20px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.025em;

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


.importaciones-compras-metric-card__detail {
  font-size:
    11px;

  line-height:
    1.35;

  color:
    var(
      --importaciones-text-faint
    );
}


/* =========================================================
   08. TOOLBAR
   ========================================================= */

.importaciones-compras-toolbar {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.importaciones-compras-toolbar__search {
  position:
    relative;

  flex:
    1 1 420px;

  max-width:
    620px;

  min-width:
    220px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 12px;

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

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

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-toolbar__search:focus-within {
  border-color:
    var(
      --importaciones-border-strong
    );
}


.importaciones-compras-search-input {
  flex:
    1 1 auto;

  min-width:
    0;

  height:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    500;
}


.importaciones-compras-search-input::placeholder {
  color:
    var(
      --importaciones-text-faint
    );
}


.importaciones-compras-search-clear {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --importaciones-text-muted
    );

  cursor:
    pointer;
}


.importaciones-compras-search-clear:hover {
  background:
    var(
      --importaciones-surface-hover
    );

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


.importaciones-compras-toolbar__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


/* =========================================================
   09. FILTROS
   ========================================================= */

.importaciones-compras-filters {
  display:
    none;

  width:
    100%;

  padding:
    14px;

  grid-template-columns:
    repeat(
      5,
      minmax(
        140px,
        1fr
      )
    )
    auto;

  align-items:
    end;

  gap:
    10px;

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

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

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


.importaciones-compras-filters.is-open {
  display:
    grid;
}


.importaciones-compras-filter-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.importaciones-compras-filter-field label {
  font-size:
    12px;

  line-height:
    1;

  font-weight:
    700;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-filter-field select,
.importaciones-compras-filter-field input {
  width:
    100%;

  height:
    38px;

  padding:
    0 10px;

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

  border-radius:
    8px;

  outline:
    none;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    600;
}


.importaciones-compras-filter-field select:focus,
.importaciones-compras-filter-field input:focus {
  border-color:
    var(
      --importaciones-border-strong
    );
}


.importaciones-compras-filter-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;
}


/* =========================================================
   10. TABLE CARD
   ========================================================= */

.importaciones-compras-table-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

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

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


.importaciones-compras-table-wrapper {
  width:
    100%;

  min-width:
    0;
}


.importaciones-compras-table-scroll {
  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    visible;
}


.importaciones-compras-table {
  width:
    max-content;

  min-width:
    100%;

  border-collapse:
    collapse;

  border-spacing:
    0;
}


/* =========================================================
   11. TABLE HEADER
   ========================================================= */

.importaciones-compras-table__th {
  position:
    sticky;

  top:
    0;

  z-index:
    4;

  height:
    44px;

  padding:
    0 11px;

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

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;

  vertical-align:
    middle;
}


.importaciones-compras-table__th.is-sortable {
  cursor:
    pointer;

  user-select:
    none;
}


.importaciones-compras-table__th.is-sortable:hover {
  background:
    var(
      --importaciones-surface-hover
    );

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


.importaciones-compras-table__th-content {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.importaciones-compras-table__th.is-left
.importaciones-compras-table__th-content {
  justify-content:
    flex-start;
}


.importaciones-compras-table__th.is-center
.importaciones-compras-table__th-content {
  justify-content:
    center;
}


.importaciones-compras-table__th.is-right
.importaciones-compras-table__th-content {
  justify-content:
    flex-end;
}


.importaciones-compras-table-sort-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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


.importaciones-compras-table-sort-icon.is-muted {
  color:
    var(
      --importaciones-text-faint
    );
}


/* =========================================================
   12. TABLE BODY
   ========================================================= */

.importaciones-compras-table__row {
  transition:
    background-color
    var(
      --importaciones-transition
    );
}


.importaciones-compras-table__row:hover {
  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-table__row.is-excluded {
  opacity:
    0.55;
}


.importaciones-compras-table__td {
  height:
    58px;

  padding:
    8px 11px;

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

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

  font-size:
    13px;

  line-height:
    1.35;

  font-weight:
    500;

  vertical-align:
    middle;
}


.importaciones-compras-table__td.is-left {
  text-align:
    left;
}


.importaciones-compras-table__td.is-center {
  text-align:
    center;
}


.importaciones-compras-table__td.is-right {
  text-align:
    right;
}


.importaciones-compras-table__row:last-child
.importaciones-compras-table__td {
  border-bottom:
    0;
}


/* =========================================================
   13. ACTION COLUMN
   ========================================================= */

.importaciones-compras-table__th--actions,
.importaciones-compras-table__td--actions {
  position:
    sticky;

  right:
    0;

  z-index:
    3;

  width:
    154px;

  min-width:
    154px;

  max-width:
    154px;

  text-align:
    center;
}


.importaciones-compras-table__th--actions {
  z-index:
    6;

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-table__td--actions {
  background:
    var(
      --importaciones-surface
    );
}


.importaciones-compras-table__row:hover
.importaciones-compras-table__td--actions {
  background:
    var(
      --importaciones-surface-soft
    );
}


/* =========================================================
   14. ROW ACTIONS
   ========================================================= */

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

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;
}


.importaciones-compras-row-action {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

  border:
    1px solid
    transparent;

  background:
    transparent;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-row-action:hover {
  border-color:
    var(
      --importaciones-border
    );

  background:
    var(
      --importaciones-surface-hover
    );

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


.importaciones-compras-row-action.is-danger {
  color:
    var(
      --importaciones-danger
    );
}


.importaciones-compras-row-action.is-danger:hover {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-danger
      )
      25%,
      transparent
    );

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


/* =========================================================
   15. LOADING
   ========================================================= */

.importaciones-compras-loading {
  min-height:
    260px;

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    14px;

  font-weight:
    600;
}


.importaciones-compras-spinner {
  width:
    18px;

  height:
    18px;

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

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

  border-radius:
    50%;

  animation:
    importaciones-compras-spin
    0.8s linear infinite;
}


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


/* =========================================================
   16. EMPTY
   ========================================================= */

.importaciones-compras-empty {
  min-height:
    320px;

  padding:
    40px 24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-empty__icon {
  width:
    52px;

  height:
    52px;

  margin-bottom:
    14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    14px;

  background:
    var(
      --importaciones-surface-soft
    );

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


.importaciones-compras-empty h3 {
  margin:
    0;

  font-size:
    18px;

  font-weight:
    800;

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


.importaciones-compras-empty p {
  max-width:
    520px;

  margin:
    8px 0 0;

  font-size:
    14px;

  line-height:
    1.55;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-empty__actions {
  margin-top:
    18px;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;
}


/* =========================================================
   17. ERROR
   ========================================================= */

.importaciones-compras-error-state {
  min-height:
    260px;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  text-align:
    center;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-error-state > svg,
.importaciones-compras-error-state > i {
  color:
    var(
      --importaciones-danger
    );
}


.importaciones-compras-error-state strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    15px;

  font-weight:
    800;
}


.importaciones-compras-error-state span {
  max-width:
    520px;

  font-size:
    13px;

  line-height:
    1.5;
}


/* =========================================================
   18. ACCESS DENIED
   ========================================================= */

.importaciones-compras-access-denied {
  min-height:
    65vh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-access-denied__icon {
  width:
    58px;

  height:
    58px;

  margin-bottom:
    14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    15px;

  background:
    var(
      --importaciones-surface
    );

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


.importaciones-compras-access-denied h1 {
  margin:
    0;

  font-size:
    24px;

  font-weight:
    800;

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


.importaciones-compras-access-denied p {
  margin:
    8px 0 0;

  font-size:
    14px;

  line-height:
    1.5;
}


/* =========================================================
   19. RESPONSIVE
   ========================================================= */

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


  .importaciones-compras-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          160px,
          1fr
        )
      );
  }
}


@media (
  max-width:
  1000px
) {
  .importaciones-compras-page {
    padding:
      18px;
  }


  .importaciones-compras-header__title-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .importaciones-compras-header__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .importaciones-compras-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .importaciones-compras-toolbar__search {
    max-width:
      none;

    flex-basis:
      auto;
  }


  .importaciones-compras-toolbar__actions {
    justify-content:
      flex-start;
  }


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


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

    gap:
      14px;
  }


  .importaciones-compras-header__title {
    font-size:
      28px;
  }


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


  .importaciones-compras-filters {
    grid-template-columns:
      1fr;
  }


  .importaciones-compras-toolbar__actions,
  .importaciones-compras-header__actions {
    display:
      grid;

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


  .importaciones-compras-toolbar__actions
  .importaciones-compras-btn,
  .importaciones-compras-header__actions
  .importaciones-compras-btn {
    width:
      100%;
  }
}


@media (
  max-width:
  480px
) {
  .importaciones-compras-metrics {
    grid-template-columns:
      1fr;
  }


  .importaciones-compras-toolbar__actions,
  .importaciones-compras-header__actions {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   FIN PARTE 1 / 3

   SIGUE PARTE 2:
   - Celdas específicas.
   - Imagen.
   - Producto.
   - Stock.
   - Inputs inline.
   - FOB.
   - Alertas.
   - Resumen tabla.
   - Paginación.
   - Panel de columnas.
   ========================================================= */
   /* =========================================================
   WIRTZ HUB · OPERACIONES
   IMPORTACIONES · COMPRAS

   UBICACIÓN:
   frontend/src/pages/operaciones/importaciones/compras/
   importaciones-compras.css

   PARTE 2 / 3

   CONTIENE:
   - Celdas específicas.
   - Imagen.
   - Proveedor.
   - Producto.
   - Stock.
   - SKU.
   - Inputs inline.
   - Valores calculados.
   - FOB.
   - Alertas.
   - Resumen de tabla.
   - Paginación.
   - Panel de columnas.
   ========================================================= */


/* =========================================================
   20. IMAGEN DE PRODUCTO
   ========================================================= */

.importaciones-compras-product-image {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  overflow:
    hidden;

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

  border-radius:
    9px;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-faint
    );

  cursor:
    pointer;
}


.importaciones-compras-product-image:hover {
  border-color:
    var(
      --importaciones-border-strong
    );

  background:
    var(
      --importaciones-surface-hover
    );
}


.importaciones-compras-product-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;
}


.importaciones-compras-product-image.is-empty {
  cursor:
    default;
}


/* =========================================================
   21. PROVEEDOR
   ========================================================= */

.importaciones-compras-provider-cell {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    2px;
}


.importaciones-compras-provider-cell strong {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    700;

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


/* =========================================================
   22. PRODUCTO
   ========================================================= */

.importaciones-compras-product-cell {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    3px;
}


.importaciones-compras-product-cell__name {
  width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --importaciones-text
    );

  font-size:
    13px;

  font-weight:
    750;
}


.importaciones-compras-product-cell__category {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    11px;

  font-weight:
    600;
}


/* =========================================================
   23. SKU WIRTZ
   ========================================================= */

.importaciones-compras-sku-link {
  max-width:
    100%;

  padding:
    0;

  overflow:
    hidden;

  border:
    0;

  background:
    transparent;

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1.35;

  text-align:
    left;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  cursor:
    pointer;
}


.importaciones-compras-sku-link:hover {
  text-decoration:
    underline;
}


/* =========================================================
   24. STOCK
   ========================================================= */

.importaciones-compras-stock-cell {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


.importaciones-compras-stock-cell strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    13px;

  font-weight:
    800;

  font-variant-numeric:
    tabular-nums;
}


.importaciones-compras-stock-cell__status {
  width:
    18px;

  height:
    18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;
}


.importaciones-compras-stock-cell__status.is-linked {
  color:
    var(
      --importaciones-success
    );

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


.importaciones-compras-stock-cell__status.is-unlinked {
  color:
    var(
      --importaciones-danger
    );

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


/* =========================================================
   25. INPUT INLINE
   ========================================================= */

.importaciones-compras-inline-field {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


.importaciones-compras-inline-input {
  width:
    100%;

  min-width:
    54px;

  height:
    32px;

  padding:
    0 7px;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;

  text-align:
    right;

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


.importaciones-compras-inline-input:hover {
  border-color:
    var(
      --importaciones-border
    );

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-inline-input:focus {
  border-color:
    var(
      --importaciones-border-strong
    );

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


.importaciones-compras-inline-input:disabled {
  opacity:
    0.55;

  cursor:
    wait;
}


.importaciones-compras-inline-input.is-saving {
  border-color:
    var(
      --importaciones-border-strong
    );

  background:
    var(
      --importaciones-surface-hover
    );
}


.importaciones-compras-inline-input--text {
  text-align:
    left;
}


.importaciones-compras-inline-field__suffix {
  flex:
    0 0 auto;

  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    10px;

  font-weight:
    700;
}


/* =========================================================
   26. NUMBER INPUT · QUITAR SPIN
   ========================================================= */

.importaciones-compras-inline-input[type="number"] {
  appearance:
    textfield;
  -moz-appearance:
    textfield;
}


.importaciones-compras-inline-input[type="number"]::-webkit-inner-spin-button,
.importaciones-compras-inline-input[type="number"]::-webkit-outer-spin-button {
  margin:
    0;

  -webkit-appearance:
    none;
}


/* =========================================================
   27. VALORES CALCULADOS
   ========================================================= */

.importaciones-compras-calculated-value {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  min-width:
    28px;

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

  font-size:
    12px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;
}


.importaciones-compras-calculated-value.is-warning {
  color:
    var(
      --importaciones-warning
    );

  font-weight:
    800;
}


/* =========================================================
   28. CANTIDAD SUGERIDA
   ========================================================= */

.importaciones-compras-suggested-cell {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


.importaciones-compras-suggested-cell strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    13px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


.importaciones-compras-mini-action {
  width:
    25px;

  height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    6px;

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-mini-action:hover {
  background:
    var(
      --importaciones-surface-hover
    );

  color:
    var(
      --importaciones-text
    );

  border-color:
    var(
      --importaciones-border-strong
    );
}


/* =========================================================
   29. FOB INLINE
   ========================================================= */

.importaciones-compras-inline-currency {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}


.importaciones-compras-inline-currency__symbol {
  flex:
    0 0 auto;

  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    10px;

  font-weight:
    800;
}


.importaciones-compras-inline-currency
.importaciones-compras-inline-input {
  max-width:
    74px;
}


/* =========================================================
   30. TOTAL FOB
   ========================================================= */

.importaciones-compras-total-fob {
  display:
    inline-block;

  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(
      --importaciones-text
    );

  font-size:
    12px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   31. ALERTAS
   ========================================================= */

.importaciones-compras-alert-badge {
  min-height:
    27px;

  padding:
    4px 8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

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

  border-radius:
    999px;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;
}


.importaciones-compras-alert-badge--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-success
      )
      22%,
      var(
        --importaciones-border
      )
    );

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

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


.importaciones-compras-alert-badge--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-warning
      )
      22%,
      var(
        --importaciones-border
      )
    );

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

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


.importaciones-compras-alert-badge--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-danger
      )
      22%,
      var(
        --importaciones-border
      )
    );

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

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


.importaciones-compras-alert-badge--info {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-info
      )
      22%,
      var(
        --importaciones-border
      )
    );

  background:
    var(
      --importaciones-info-soft
    );

  color:
    var(
      --importaciones-info
    );
}


.importaciones-compras-alert-badge--neutral {
  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-muted
    );
}


/* =========================================================
   32. OBSERVACIÓN
   ========================================================= */

.importaciones-compras-observation-cell {
  display:
    block;

  width:
    100%;

  overflow:
    hidden;

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

  font-size:
    12px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   33. TABLE SUMMARY
   ========================================================= */

.importaciones-compras-table-summary {
  width:
    100%;

  min-height:
    54px;

  padding:
    9px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

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

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-table-summary__item {
  min-width:
    110px;

  padding:
    5px 10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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


.importaciones-compras-table-summary__item:last-child {
  border-right:
    0;
}


.importaciones-compras-table-summary__item span {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    11px;

  font-weight:
    650;
}


.importaciones-compras-table-summary__item strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    12px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   34. PAGINACIÓN
   ========================================================= */

#importaciones-compras-pagination {
  width:
    100%;
}


.importaciones-compras-pagination {
  min-height:
    56px;

  padding:
    10px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

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

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


.importaciones-compras-pagination__info {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    12px;

  font-weight:
    600;
}


.importaciones-compras-pagination__info strong {
  color:
    var(
      --importaciones-text
    );

  font-weight:
    800;
}


.importaciones-compras-pagination__controls {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}


.importaciones-compras-pagination__button {
  width:
    31px;

  height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    7px;

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-pagination__button:hover:not(:disabled) {
  background:
    var(
      --importaciones-surface-hover
    );

  border-color:
    var(
      --importaciones-border-strong
    );

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


.importaciones-compras-pagination__button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


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

  padding:
    0 8px;

  text-align:
    center;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    11px;

  font-weight:
    650;
}


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

  font-weight:
    800;
}


/* =========================================================
   35. PANEL DE COLUMNAS
   ========================================================= */

.importaciones-compras-column-panel {
  position:
    fixed;

  inset:
    0;

  z-index:
    10020;

  display:
    none;
}


.importaciones-compras-column-panel.is-open {
  display:
    block;
}


.importaciones-compras-column-panel__backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.45
    );
}


.importaciones-compras-column-panel__drawer {
  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    min(
      390px,
      92vw
    );

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

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

  background:
    var(
      --importaciones-surface
    );

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


/* =========================================================
   36. COLUMN PANEL HEADER
   ========================================================= */

.importaciones-compras-column-panel__header {
  padding:
    18px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

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


.importaciones-compras-column-panel__header > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.importaciones-compras-column-panel__header h2 {
  margin:
    0;

  color:
    var(
      --importaciones-text
    );

  font-size:
    20px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.02em;
}


.importaciones-compras-column-panel__eyebrow {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    11px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


.importaciones-compras-column-panel__description {
  padding:
    14px 18px;

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

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    12px;

  line-height:
    1.55;
}


/* =========================================================
   37. COLUMN LIST
   ========================================================= */

.importaciones-compras-column-list {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    10px;
}


.importaciones-compras-column-item {
  min-height:
    46px;

  padding:
    6px 8px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  border-radius:
    8px;

  border:
    1px solid
    transparent;
}


.importaciones-compras-column-item:hover {
  border-color:
    var(
      --importaciones-border
    );

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-column-item__handle {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --importaciones-text-faint
    );
}


.importaciones-compras-column-item__toggle {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  cursor:
    pointer;
}


.importaciones-compras-column-item__toggle input {
  width:
    16px;

  height:
    16px;

  margin:
    0;

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


html.dark
.importaciones-compras-column-item__toggle input,
body.dark
.importaciones-compras-column-item__toggle input,
[data-theme="dark"]
.importaciones-compras-column-item__toggle input {
  accent-color:
    #e5e5e5;
}


.importaciones-compras-column-item__toggle span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

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

  font-size:
    13px;

  font-weight:
    650;
}


.importaciones-compras-column-item__required {
  padding:
    3px 6px;

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

  border-radius:
    999px;

  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


/* =========================================================
   38. COLUMN PANEL FOOTER
   ========================================================= */

.importaciones-compras-column-panel__footer {
  padding:
    14px 16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

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

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


.importaciones-compras-column-empty {
  min-height:
    150px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    13px;

  text-align:
    center;
}


/* =========================================================
   39. SCROLLBAR TABLA
   ========================================================= */

.importaciones-compras-table-scroll {
  scrollbar-width:
    thin;

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


.importaciones-compras-table-scroll::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


.importaciones-compras-table-scroll::-webkit-scrollbar-track {
  background:
    transparent;
}


.importaciones-compras-table-scroll::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   40. SCROLLBAR PANEL COLUMNAS
   ========================================================= */

.importaciones-compras-column-list {
  scrollbar-width:
    thin;

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


.importaciones-compras-column-list::-webkit-scrollbar {
  width:
    7px;
}


.importaciones-compras-column-list::-webkit-scrollbar-track {
  background:
    transparent;
}


.importaciones-compras-column-list::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   41. RESPONSIVE · TABLE SUMMARY
   ========================================================= */

@media (
  max-width:
  800px
) {
  .importaciones-compras-table-summary {
    justify-content:
      flex-start;
  }


  .importaciones-compras-table-summary__item {
    min-width:
      140px;
  }


  .importaciones-compras-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .importaciones-compras-pagination__controls {
    width:
      100%;

    justify-content:
      space-between;
  }


  .importaciones-compras-pagination__page {
    flex:
      1 1 auto;
  }
}


@media (
  max-width:
  520px
) {
  .importaciones-compras-table-summary {
    display:
      grid;

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


  .importaciones-compras-table-summary__item {
    min-width:
      0;

    border-right:
      0;
  }


  .importaciones-compras-column-panel__drawer {
    width:
      100%;
  }
}


/* =========================================================
   FIN PARTE 2 / 3

   SIGUE PARTE 3:
   - Modal base.
   - Formularios.
   - Buscador Inventario.
   - Detalle.
   - Imágenes.
   - Tránsitos.
   - Carga masiva CSV.
   - Preview importación.
   - Toasts.
   - Responsive final.
   ========================================================= */
   /* =========================================================
   WIRTZ HUB · OPERACIONES
   IMPORTACIONES · COMPRAS

   UBICACIÓN:
   frontend/src/pages/operaciones/importaciones/compras/
   importaciones-compras.css

   PARTE 3 / 3

   CONTIENE:
   - Modal base.
   - Formularios.
   - Buscador Inventario.
   - Detalle.
   - Imágenes.
   - Tránsitos.
   - Carga masiva CSV.
   - Preview importación.
   - Toasts.
   - Responsive final.
   ========================================================= */


/* =========================================================
   42. MODAL ROOT
   ========================================================= */

.importaciones-compras-modal-root {
  position:
    fixed;

  inset:
    0;

  z-index:
    11000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

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


.importaciones-compras-modal-root.is-open {
  display:
    flex;
}


/* =========================================================
   43. MODAL BACKDROP
   ========================================================= */

.importaciones-compras-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.62
    );
}


/* =========================================================
   44. MODAL
   ========================================================= */

.importaciones-compras-modal {
  position:
    relative;

  z-index:
    1;

  width:
    100%;

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

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

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

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


.importaciones-compras-modal--lg {
  max-width:
    860px;
}


.importaciones-compras-modal--xl {
  max-width:
    1180px;
}


/* =========================================================
   45. MODAL HEADER
   ========================================================= */

.importaciones-compras-modal__header {
  flex:
    0 0 auto;

  min-height:
    76px;

  padding:
    18px 20px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

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

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


.importaciones-compras-modal__header > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.importaciones-compras-modal__header h2 {
  margin:
    0;

  color:
    var(
      --importaciones-text
    );

  font-size:
    21px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.025em;
}


.importaciones-compras-modal__header p {
  margin:
    0;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    13px;

  line-height:
    1.5;
}


/* =========================================================
   46. MODAL BODY
   ========================================================= */

.importaciones-compras-modal__body {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    20px;

  background:
    var(
      --importaciones-surface
    );

  scrollbar-width:
    thin;

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


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


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


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

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


/* =========================================================
   47. MODAL FOOTER
   ========================================================= */

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

  min-height:
    64px;

  padding:
    12px 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

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

  background:
    var(
      --importaciones-surface-soft
    );
}


/* =========================================================
   48. FORMULARIO
   ========================================================= */

.importaciones-compras-form {
  width:
    100%;
}


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

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

  gap:
    16px;
}


.importaciones-compras-form-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.importaciones-compras-form-field--wide {
  grid-column:
    1 / -1;
}


.importaciones-compras-form-field label {
  color:
    var(
      --importaciones-text-soft
    );

  font-size:
    12px;

  font-weight:
    750;
}


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

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

  border-radius:
    9px;

  outline:
    0;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    550;

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


.importaciones-compras-form-field input,
.importaciones-compras-form-field select {
  height:
    42px;

  padding:
    0 11px;
}


.importaciones-compras-form-field textarea {
  min-height:
    94px;

  padding:
    10px 11px;

  resize:
    vertical;
}


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

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


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

  color:
    var(
      --importaciones-text-muted
    );

  background:
    var(
      --importaciones-surface-hover
    );
}


/* =========================================================
   49. INVENTORY SEARCH
   ========================================================= */

.importaciones-compras-inventory-search {
  position:
    relative;

  width:
    100%;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 11px;

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

  border-radius:
    9px;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-inventory-search:focus-within {
  border-color:
    var(
      --importaciones-border-strong
    );

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


.importaciones-compras-inventory-search input {
  flex:
    1 1 auto;

  min-width:
    0;

  height:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    600;
}


/* =========================================================
   50. INVENTORY RESULTS
   ========================================================= */

.importaciones-compras-inventory-results {
  width:
    100%;

  max-height:
    330px;

  overflow-y:
    auto;

  display:
    flex;

  flex-direction:
    column;

  border-radius:
    9px;

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


.importaciones-compras-inventory-result {
  width:
    100%;

  min-height:
    66px;

  padding:
    8px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  border:
    0;

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

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.importaciones-compras-inventory-result:first-child {
  border-top:
    1px solid
    var(
      --importaciones-border
    );
}


.importaciones-compras-inventory-result:hover {
  background:
    var(
      --importaciones-surface-hover
    );
}


.importaciones-compras-inventory-result__image {
  width:
    42px;

  height:
    42px;

  overflow:
    hidden;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-faint
    );
}


.importaciones-compras-inventory-result__image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


.importaciones-compras-inventory-result__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.importaciones-compras-inventory-result__content strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    750;
}


.importaciones-compras-inventory-result__content span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    11px;

  font-weight:
    650;
}


.importaciones-compras-inventory-result__stock {
  min-width:
    70px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


.importaciones-compras-inventory-result__stock span {
  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    10px;

  font-weight:
    650;
}


.importaciones-compras-inventory-result__stock strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    13px;

  font-weight:
    800;
}


.importaciones-compras-inventory-result-state {
  padding:
    14px;

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

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    12px;

  text-align:
    center;
}


/* =========================================================
   51. DETAIL
   ========================================================= */

.importaciones-compras-detail {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;
}


.importaciones-compras-detail__hero {
  padding:
    14px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

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

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

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-detail__image {
  width:
    82px;

  height:
    82px;

  flex:
    0 0 82px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    11px;

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text-faint
    );
}


.importaciones-compras-detail__image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


.importaciones-compras-detail__hero > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.importaciones-compras-detail__hero span {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    11px;

  font-weight:
    700;
}


.importaciones-compras-detail__hero strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    15px;

  font-weight:
    800;
}


.importaciones-compras-detail-grid {
  display:
    grid;

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

  gap:
    10px;
}


.importaciones-compras-detail-value {
  min-height:
    74px;

  padding:
    11px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    5px;

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

  border-radius:
    9px;

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-detail-value > span:first-child {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    10px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    0.03em;
}


.importaciones-compras-detail-value > strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    14px;

  font-weight:
    800;
}


/* =========================================================
   52. IMAGE UPLOAD
   ========================================================= */

.importaciones-compras-image-upload {
  margin-bottom:
    16px;

  padding:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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

  border-radius:
    10px;

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-image-upload input[type="file"] {
  min-width:
    0;

  flex:
    1 1 auto;

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

  font-family:
    inherit;

  font-size:
    12px;
}


/* =========================================================
   53. IMAGES GRID
   ========================================================= */

.importaciones-compras-images-grid {
  display:
    grid;

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

  gap:
    10px;
}


.importaciones-compras-image-card {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    10px;

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


.importaciones-compras-image-card.is-main {
  border-color:
    var(
      --importaciones-border-strong
    );
}


.importaciones-compras-image-card__preview {
  width:
    100%;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-faint
    );
}


.importaciones-compras-image-card__preview img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


.importaciones-compras-image-card__meta {
  min-width:
    0;

  padding:
    9px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.importaciones-compras-image-card__meta span {
  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    10px;

  font-weight:
    700;
}


.importaciones-compras-image-card__meta strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-compras-image-card__actions {
  position:
    absolute;

  top:
    7px;

  right:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}


.importaciones-compras-image-card__actions
.importaciones-compras-row-action {
  background:
    var(
      --importaciones-surface
    );

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


.importaciones-compras-images-empty {
  grid-column:
    1 / -1;

  min-height:
    180px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

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

  border-radius:
    10px;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    12px;
}


/* =========================================================
   54. TRANSIT FORM
   ========================================================= */

.importaciones-compras-transit-form {
  margin-bottom:
    14px;

  padding:
    12px;

  display:
    grid;

  grid-template-columns:
    minmax(
      130px,
      1.4fr
    )
    minmax(
      90px,
      0.7fr
    )
    minmax(
      130px,
      1fr
    )
    minmax(
      150px,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    8px;

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

  border-radius:
    10px;

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-transit-form input,
.importaciones-compras-transit-form select {
  width:
    100%;

  min-width:
    0;

  height:
    39px;

  padding:
    0 9px;

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

  border-radius:
    8px;

  outline:
    0;

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text
    );

  font-family:
    inherit;

  font-size:
    12px;
}


/* =========================================================
   55. TRANSITS LIST
   ========================================================= */

.importaciones-compras-transits-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.importaciones-compras-transit-card {
  min-height:
    62px;

  padding:
    9px 10px;

  display:
    grid;

  grid-template-columns:
    1.5fr
    0.7fr
    1fr
    1fr
    34px;

  align-items:
    center;

  gap:
    10px;

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

  border-radius:
    9px;

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


.importaciones-compras-transit-card > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.importaciones-compras-transit-card span {
  color:
    var(
      --importaciones-text-faint
    );

  font-size:
    9px;

  font-weight:
    700;

  text-transform:
    uppercase;
}


.importaciones-compras-transit-card strong {
  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-compras-transits-empty {
  min-height:
    140px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    12px;
}


/* =========================================================
   56. IMPORT BOX
   ========================================================= */

.importaciones-compras-import-box {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


/* =========================================================
   57. DROPZONE
   ========================================================= */

.importaciones-compras-import-dropzone {
  position:
    relative;

  min-height:
    180px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  overflow:
    hidden;

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

  border-radius:
    12px;

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-muted
    );

  text-align:
    center;

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


.importaciones-compras-import-dropzone.is-dragging {
  border-color:
    var(
      --importaciones-text-muted
    );

  background:
    var(
      --importaciones-surface-hover
    );
}


.importaciones-compras-import-dropzone > svg,
.importaciones-compras-import-dropzone > i {
  color:
    var(
      --importaciones-text-soft
    );
}


.importaciones-compras-import-dropzone strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    14px;

  font-weight:
    800;
}


.importaciones-compras-import-dropzone span {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    12px;
}


.importaciones-compras-import-dropzone input[type="file"] {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  opacity:
    0;

  cursor:
    pointer;
}


/* =========================================================
   58. FILE INFO
   ========================================================= */

.importaciones-compras-file-info:empty {
  display:
    none;
}


.importaciones-compras-file-info {
  padding:
    10px 12px;

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

  border-radius:
    9px;

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-file-info > div {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-file-info strong {
  flex:
    1 1 auto;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --importaciones-text
    );

  font-size:
    12px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.importaciones-compras-file-info span {
  flex:
    0 0 auto;

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================================
   59. IMPORT SUMMARY
   ========================================================= */

.importaciones-compras-import-summary {
  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    12px;
}


.importaciones-compras-import-summary > div {
  min-height:
    62px;

  padding:
    10px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

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

  border-radius:
    9px;

  background:
    var(
      --importaciones-surface-soft
    );
}


.importaciones-compras-import-summary span {
  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  text-transform:
    uppercase;
}


.importaciones-compras-import-summary strong {
  color:
    var(
      --importaciones-text
    );

  font-size:
    18px;

  font-weight:
    850;
}


/* =========================================================
   60. IMPORT TABLE
   ========================================================= */

.importaciones-compras-import-table-wrap {
  width:
    100%;

  max-height:
    440px;

  overflow:
    auto;

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

  border-radius:
    9px;
}


.importaciones-compras-import-table {
  width:
    100%;

  min-width:
    900px;

  border-collapse:
    collapse;
}


.importaciones-compras-import-table th {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  height:
    40px;

  padding:
    0 9px;

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

  background:
    var(
      --importaciones-surface-soft
    );

  color:
    var(
      --importaciones-text-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  text-align:
    left;

  text-transform:
    uppercase;
}


.importaciones-compras-import-table td {
  padding:
    8px 9px;

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

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

  font-size:
    11px;

  line-height:
    1.4;

  vertical-align:
    top;
}


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


/* =========================================================
   61. IMPORT STATUS
   ========================================================= */

.importaciones-compras-import-status {
  min-height:
    24px;

  padding:
    4px 7px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    999px;

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

  font-size:
    9px;

  font-weight:
    850;
}


.importaciones-compras-import-status.is-valid {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-success
      )
      22%,
      var(
        --importaciones-border
      )
    );

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

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


.importaciones-compras-import-status.is-invalid {
  border-color:
    color-mix(
      in srgb,
      var(
        --importaciones-danger
      )
      22%,
      var(
        --importaciones-border
      )
    );

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

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


/* =========================================================
   62. IMPORT ERRORS
   ========================================================= */

.importaciones-compras-import-errors,
.importaciones-compras-import-warnings {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.importaciones-compras-import-errors span {
  color:
    var(
      --importaciones-danger
    );
}


.importaciones-compras-import-warnings span {
  color:
    var(
      --importaciones-warning
    );
}


/* =========================================================
   63. TOAST ROOT
   ========================================================= */

.importaciones-compras-toast-root {
  position:
    fixed;

  top:
    18px;

  right:
    18px;

  z-index:
    12000;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  pointer-events:
    none;
}


/* =========================================================
   64. TOAST
   ========================================================= */

.importaciones-compras-toast {
  min-height:
    48px;

  padding:
    9px 9px 9px 11px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

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

  border-radius:
    10px;

  background:
    var(
      --importaciones-surface
    );

  color:
    var(
      --importaciones-text
    );

  pointer-events:
    auto;
}


.importaciones-compras-toast__icon {
  width:
    24px;

  height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

  color:
    var(
      --importaciones-text-muted
    );
}


.importaciones-compras-toast__message {
  min-width:
    0;

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

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    650;
}


.importaciones-compras-toast__close {
  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --importaciones-text-muted
    );

  cursor:
    pointer;
}


.importaciones-compras-toast__close:hover {
  background:
    var(
      --importaciones-surface-hover
    );

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


.importaciones-compras-toast--success
.importaciones-compras-toast__icon {
  background:
    var(
      --importaciones-success-soft
    );

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


.importaciones-compras-toast--danger
.importaciones-compras-toast__icon,
.importaciones-compras-toast--error
.importaciones-compras-toast__icon {
  background:
    var(
      --importaciones-danger-soft
    );

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


.importaciones-compras-toast--warning
.importaciones-compras-toast__icon {
  background:
    var(
      --importaciones-warning-soft
    );

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


.importaciones-compras-toast--info
.importaciones-compras-toast__icon {
  background:
    var(
      --importaciones-info-soft
    );

  color:
    var(
      --importaciones-info
    );
}


/* =========================================================
   65. RESPONSIVE MODAL
   ========================================================= */

@media (
  max-width:
  1100px
) {
  .importaciones-compras-modal-root {
    padding:
      16px;
  }


  .importaciones-compras-modal {
    max-height:
      calc(
        100vh - 32px
      );
  }


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


  .importaciones-compras-images-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .importaciones-compras-transit-form {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .importaciones-compras-transit-form
  .importaciones-compras-btn {
    width:
      100%;
  }
}


/* =========================================================
   66. RESPONSIVE TABLET
   ========================================================= */

@media (
  max-width:
  760px
) {
  .importaciones-compras-modal-root {
    padding:
      10px;
  }


  .importaciones-compras-modal {
    max-height:
      calc(
        100vh - 20px
      );

    border-radius:
      12px;
  }


  .importaciones-compras-modal__header {
    padding:
      15px;
  }


  .importaciones-compras-modal__body {
    padding:
      15px;
  }


  .importaciones-compras-modal__footer {
    padding:
      10px 14px;
  }


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


  .importaciones-compras-form-field--wide {
    grid-column:
      auto;
  }


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


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


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


  .importaciones-compras-transit-card {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      )
      34px;
  }


  .importaciones-compras-transit-card
  > div:nth-child(3),
  .importaciones-compras-transit-card
  > div:nth-child(4) {
    grid-row:
      2;
  }


  .importaciones-compras-import-summary {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   67. RESPONSIVE MOBILE
   ========================================================= */

@media (
  max-width:
  520px
) {
  .importaciones-compras-modal-root {
    padding:
      0;

    align-items:
      stretch;
  }


  .importaciones-compras-modal {
    max-width:
      none;

    max-height:
      100vh;

    height:
      100vh;

    border-left:
      0;

    border-right:
      0;

    border-radius:
      0;
  }


  .importaciones-compras-modal__header {
    min-height:
      68px;
  }


  .importaciones-compras-modal__header h2 {
    font-size:
      18px;
  }


  .importaciones-compras-modal__footer {
    display:
      grid;

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


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


  .importaciones-compras-detail__hero {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .importaciones-compras-detail-grid {
    grid-template-columns:
      1fr;
  }


  .importaciones-compras-images-grid {
    grid-template-columns:
      1fr;
  }


  .importaciones-compras-image-upload {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .importaciones-compras-image-upload
  .importaciones-compras-btn {
    width:
      100%;
  }


  .importaciones-compras-transit-card {
    grid-template-columns:
      1fr 34px;
  }


  .importaciones-compras-transit-card
  > div {
    grid-column:
      1;
  }


  .importaciones-compras-transit-card
  > button {
    grid-column:
      2;

    grid-row:
      1;
  }


  .importaciones-compras-transit-card
  > div:nth-child(3),
  .importaciones-compras-transit-card
  > div:nth-child(4) {
    grid-row:
      auto;
  }


  .importaciones-compras-toast-root {
    top:
      10px;

    right:
      10px;

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


/* =========================================================
   68. DARK · INPUT AUTOFILL
   ========================================================= */

html.dark
.importaciones-compras-modal input:-webkit-autofill,
body.dark
.importaciones-compras-modal input:-webkit-autofill,
[data-theme="dark"]
.importaciones-compras-modal input:-webkit-autofill {
  -webkit-text-fill-color:
    var(
      --importaciones-text
    );

  transition:
    background-color
    9999s ease-in-out
    0s;
}


/* =========================================================
   69. FOCUS ACCESSIBILITY
   ========================================================= */

.importaciones-compras-btn:focus-visible,
.importaciones-compras-icon-btn:focus-visible,
.importaciones-compras-row-action:focus-visible,
.importaciones-compras-mini-action:focus-visible,
.importaciones-compras-pagination__button:focus-visible,
.importaciones-compras-sku-link:focus-visible,
.importaciones-compras-product-image:focus-visible,
.importaciones-compras-inventory-result:focus-visible,
.importaciones-compras-toast__close:focus-visible {
  outline:
    2px solid
    var(
      --importaciones-text-muted
    );

  outline-offset:
    2px;
}


/* =========================================================
   70. SELECTION
   ========================================================= */

.importaciones-compras-page ::selection,
.importaciones-compras-modal-root ::selection {
  background:
    var(
      --importaciones-text
    );

  color:
    var(
      --importaciones-surface
    );
}


/* =========================================================
   FIN PARTE 3 / 3
   ========================================================= */