/* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/kits/kits.css

   WIRTZ HUB · RECURSOS · KITS
   CSS COMPLETO NUEVO
   PARTE 1 DE 3

   DISEÑO:
   - Layout limpio
   - Modal completamente nuevo
   - Sin fixes acumulados
   - Sin superposiciones
   - Full responsive
   - Dark real
   - Sin glow
   - Rápido
   - Tabla desktop
   - Cards mobile
   ========================================================= */


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

.kits-page,
.kits-page *,
.kits-page *::before,
.kits-page *::after,
.kits-modal,
.kits-modal *,
.kits-modal *::before,
.kits-modal *::after,
.kits-toast,
.kits-toast *,
.kits-toast *::before,
.kits-toast *::after {
  box-sizing:
    border-box;

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


.kits-page,
.kits-modal {
  width:
    100%;

  min-width:
    0;
}


.kits-page button,
.kits-page input,
.kits-page select,
.kits-page textarea,
.kits-modal button,
.kits-modal input,
.kits-modal select,
.kits-modal textarea {
  font:
    inherit;
}


.kits-page button,
.kits-modal button {
  appearance:
    none;

  -webkit-appearance:
    none;

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


.kits-page img,
.kits-modal img,
.kits-toast img {
  display:
    block;

  max-width:
    100%;
}


.kits-page svg,
.kits-modal svg,
.kits-toast svg,
.kits-page .icon,
.kits-modal .icon,
.kits-toast .icon {
  display:
    block;

  flex:
    0 0
    auto;

  width:
    14px;

  height:
    14px;

  color:
    currentColor;

  stroke:
    currentColor;

  stroke-width:
    2;

  fill:
    none;

  pointer-events:
    none;
}


/* =========================================================
   02. VARIABLES · LIGHT
   ========================================================= */

.kits-page,
.kits-modal {
  --kits-page:
    #f4f5f6;

  --kits-surface:
    #ffffff;

  --kits-surface-2:
    #f8f9fa;

  --kits-surface-3:
    #eef0f2;

  --kits-surface-4:
    #e5e7ea;

  --kits-hover:
    #f0f2f4;

  --kits-active:
    #e9ecef;

  --kits-text:
    #0a0b0c;

  --kits-text-strong:
    #000000;

  --kits-text-soft:
    #31353a;

  --kits-muted:
    #626970;

  --kits-muted-2:
    #7c838b;

  --kits-border:
    #cfd3d7;

  --kits-border-soft:
    #dfe2e5;

  --kits-border-strong:
    #9ca4ad;

  --kits-border-dark:
    #7f8790;

  --kits-primary:
    #0a0a0a;

  --kits-primary-hover:
    #1b1b1b;

  --kits-primary-text:
    #ffffff;

  --kits-green:
    #15803d;

  --kits-green-soft:
    rgba(
      21,
      128,
      61,
      0.08
    );

  --kits-green-line:
    rgba(
      21,
      128,
      61,
      0.35
    );

  --kits-amber:
    #a16207;

  --kits-amber-soft:
    rgba(
      161,
      98,
      7,
      0.08
    );

  --kits-amber-line:
    rgba(
      161,
      98,
      7,
      0.35
    );

  --kits-red:
    #c81e1e;

  --kits-red-soft:
    rgba(
      200,
      30,
      30,
      0.08
    );

  --kits-red-line:
    rgba(
      200,
      30,
      30,
      0.35
    );

  --kits-radius-xs:
    6px;

  --kits-radius-sm:
    8px;

  --kits-radius:
    10px;

  --kits-radius-lg:
    12px;

  --kits-radius-xl:
    14px;

  --kits-fast:
    70ms
    ease;

  --kits-normal:
    110ms
    ease;
}


/* =========================================================
   03. VARIABLES · DARK
   ========================================================= */

html[data-theme="dark"]
.kits-page,
html[data-theme="dark"]
.kits-modal,
body.dark
.kits-page,
body.dark
.kits-modal,
body[data-theme="dark"]
.kits-page,
body[data-theme="dark"]
.kits-modal,
.dark
.kits-page,
.dark
.kits-modal {
  --kits-page:
    #050505;

  --kits-surface:
    #090909;

  --kits-surface-2:
    #0f0f0f;

  --kits-surface-3:
    #151515;

  --kits-surface-4:
    #1b1b1b;

  --kits-hover:
    #141414;

  --kits-active:
    #1b1b1b;

  --kits-text:
    #f5f5f5;

  --kits-text-strong:
    #ffffff;

  --kits-text-soft:
    #d4d7da;

  --kits-muted:
    #a0a6ad;

  --kits-muted-2:
    #777e86;

  --kits-border:
    #34393f;

  --kits-border-soft:
    #272b2f;

  --kits-border-strong:
    #545c64;

  --kits-border-dark:
    #6b747d;

  --kits-primary:
    #f4f4f4;

  --kits-primary-hover:
    #ffffff;

  --kits-primary-text:
    #050505;

  --kits-green:
    #4ade80;

  --kits-green-soft:
    rgba(
      74,
      222,
      128,
      0.08
    );

  --kits-green-line:
    rgba(
      74,
      222,
      128,
      0.34
    );

  --kits-amber:
    #fbbf24;

  --kits-amber-soft:
    rgba(
      251,
      191,
      36,
      0.08
    );

  --kits-amber-line:
    rgba(
      251,
      191,
      36,
      0.34
    );

  --kits-red:
    #f87171;

  --kits-red-soft:
    rgba(
      248,
      113,
      113,
      0.08
    );

  --kits-red-line:
    rgba(
      248,
      113,
      113,
      0.34
    );
}


/* =========================================================
   04. CONTENEDORES GLOBALES
   ========================================================= */

html,
body {
  max-width:
    100vw;

  overflow-x:
    hidden;
}


body:has(
  .kits-page
)
.app-shell,
body:has(
  .kits-page
)
.app-main,
body:has(
  .kits-page
)
.app-content {
  min-width:
    0;

  max-width:
    100%;
}


.app-content:has(
  .kits-page
) {
  display:
    block;

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  padding:
    0;

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


/* =========================================================
   05. PÁGINA
   ========================================================= */

.kits-page {
  display:
    grid;

  grid-auto-rows:
    max-content;

  align-content:
    start;

  gap:
    8px;

  width:
    100%;

  min-height:
    100%;

  padding:
    8px;

  color:
    var(
      --kits-text
    );

  background:
    var(
      --kits-page
    );

  overflow-x:
    hidden;

  animation:
    kitsPageIn
    100ms
    ease
    both;
}


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

.kits-head {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

  width:
    100%;

  min-width:
    0;

  padding:
    11px
    13px;

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

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

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-head::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    13px;

  right:
    13px;

  height:
    1px;

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

  opacity:
    0.65;
}


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

.kits-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;
}


.kits-brand__icon {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    42px;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    10px;

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

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


.kits-brand__icon
svg,
.kits-brand__icon
.icon {
  width:
    18px;

  height:
    18px;
}


.kits-brand
> div {
  min-width:
    0;
}


.kits-eyebrow {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --kits-muted
    );

  font-size:
    9px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.085em;

  text-transform:
    uppercase;
}


.kits-brand
h1 {
  margin:
    0;

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

  font-size:
    clamp(
      23px,
      1.9vw,
      28px
    );

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.kits-brand
p {
  max-width:
    850px;

  margin:
    5px
    0
    0;

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

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.4;
}


/* =========================================================
   08. ACCIONES HEADER
   ========================================================= */

.kits-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  min-width:
    0;
}


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

.kits-btn,
.kits-row-btn,
.kits-detail-close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  height:
    36px;

  min-height:
    36px;

  padding:
    0
    11px;

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

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

  outline:
    none;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    none;

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


.kits-btn:hover:not(
  :disabled
),
.kits-row-btn:hover:not(
  :disabled
),
.kits-detail-close:hover:not(
  :disabled
) {
  border-color:
    var(
      --kits-text
    );

  background:
    var(
      --kits-text
    );

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


.kits-btn:disabled,
.kits-row-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


.kits-btn
svg,
.kits-btn
.icon,
.kits-row-btn
svg,
.kits-row-btn
.icon,
.kits-detail-close
svg,
.kits-detail-close
.icon {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   10. BOTONES ESTADOS
   ========================================================= */

.kits-btn--dark {
  border-color:
    var(
      --kits-primary
    );

  background:
    var(
      --kits-primary
    );

  color:
    var(
      --kits-primary-text
    );
}


.kits-btn--dark:hover:not(
  :disabled
) {
  border-color:
    var(
      --kits-primary-hover
    );

  background:
    var(
      --kits-primary-hover
    );

  color:
    var(
      --kits-primary-text
    );
}


.kits-btn--clear {
  color:
    var(
      --kits-muted
    );
}


.kits-row-btn--danger {
  border-color:
    var(
      --kits-red-line
    );

  background:
    var(
      --kits-red-soft
    );

  color:
    var(
      --kits-red
    );
}


.kits-row-btn--danger:hover:not(
  :disabled
) {
  border-color:
    var(
      --kits-red
    );

  background:
    var(
      --kits-red
    );

  color:
    #ffffff;
}


.kits-row-btn.is-added {
  border-color:
    var(
      --kits-green-line
    );

  background:
    var(
      --kits-green-soft
    );

  color:
    var(
      --kits-green
    );
}


/* =========================================================
   11. MÉTRICAS
   ========================================================= */

.kits-metrics {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-metric {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  min-height:
    70px;

  padding:
    9px;

  border-right:
    1px
    solid
    var(
      --kits-border-strong
    );

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


.kits-metric:last-child {
  border-right:
    0;
}


.kits-metric::before {
  content:
    "";

  position:
    absolute;

  top:
    8px;

  bottom:
    8px;

  left:
    0;

  width:
    2px;

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


.kits-metric:hover {
  background:
    var(
      --kits-hover
    );
}


.kits-metric__icon {
  display:
    grid;

  place-items:
    center;

  width:
    32px;

  height:
    32px;

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

  border-radius:
    8px;

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

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


.kits-metric__icon
svg,
.kits-metric__icon
.icon {
  width:
    14px;

  height:
    14px;
}


.kits-metric__content {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-metric__content
> span {
  overflow:
    hidden;

  color:
    var(
      --kits-muted
    );

  font-size:
    8.3px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.06em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.kits-metric__content
> strong {
  overflow:
    hidden;

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

  font-size:
    20px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-metric__content
> small {
  overflow:
    hidden;

  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-metric.is-active::before,
.kits-metric.is-available::before {
  background:
    var(
      --kits-green
    );
}


.kits-metric.is-inactive::before,
.kits-metric.is-stockless::before {
  background:
    var(
      --kits-red
    );
}


.kits-metric.is-incomplete::before {
  background:
    var(
      --kits-amber
    );
}


.kits-metric.is-active
.kits-metric__icon,
.kits-metric.is-available
.kits-metric__icon {
  border-color:
    var(
      --kits-green-line
    );

  background:
    var(
      --kits-green-soft
    );

  color:
    var(
      --kits-green
    );
}


.kits-metric.is-inactive
.kits-metric__icon,
.kits-metric.is-stockless
.kits-metric__icon {
  border-color:
    var(
      --kits-red-line
    );

  background:
    var(
      --kits-red-soft
    );

  color:
    var(
      --kits-red
    );
}


.kits-metric.is-incomplete
.kits-metric__icon {
  border-color:
    var(
      --kits-amber-line
    );

  background:
    var(
      --kits-amber-soft
    );

  color:
    var(
      --kits-amber
    );
}


/* =========================================================
   12. WORKSPACE
   ========================================================= */

.kits-workspace,
.kits-workspace--table {
  display:
    grid;

  grid-template-columns:
    1fr;

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

  width:
    100%;

  min-width:
    0;

  min-height:
    520px;

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

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

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


/* =========================================================
   13. TOOLBAR HEADER
   ========================================================= */

.kits-table-toolbar {
  display:
    grid;

  width:
    100%;

  min-width:
    0;

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

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


.kits-table-toolbar__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    52px;

  padding:
    8px
    10px;

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

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


.kits-table-toolbar__head
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-table-toolbar__head
> div
> span {
  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.075em;
}


.kits-table-toolbar__head
> div
> strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    12.5px;

  font-weight:
    900;
}


.kits-table-toolbar__head
> div
> small {
  color:
    var(
      --kits-muted
    );

  font-size:
    9px;

  font-weight:
    700;
}


/* =========================================================
   14. CONTADOR
   ========================================================= */

.kits-list-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    29px;

  padding:
    0
    8px;

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

  border-radius:
    999px;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.kits-list-count
strong {
  color:
    var(
      --kits-text
    );

  font-weight:
    900;
}


/* =========================================================
   15. TOOLBAR
   ========================================================= */

.kits-toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(
      300px,
      1.65fr
    )
    minmax(
      150px,
      0.65fr
    )
    minmax(
      170px,
      0.75fr
    )
    auto;

  align-items:
    end;

  gap:
    7px;

  width:
    100%;

  min-width:
    0;

  padding:
    8px;

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

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


/* =========================================================
   16. SEARCH
   ========================================================= */

.kits-search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-width:
    0;
}


.kits-search
> svg,
.kits-search
> .icon {
  position:
    absolute;

  left:
    11px;

  z-index:
    2;

  width:
    13px;

  height:
    13px;

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


.kits-search
input {
  width:
    100%;

  min-width:
    0;

  height:
    36px;

  padding:
    0
    10px
    0
    33px;

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

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

  outline:
    none;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    10.5px;

  font-weight:
    750;

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


.kits-search
input::placeholder {
  color:
    var(
      --kits-muted-2
    );
}


.kits-search
input:hover {
  border-color:
    var(
      --kits-border-dark
    );
}


.kits-search
input:focus {
  border-color:
    var(
      --kits-text
    );

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


/* =========================================================
   17. FILTROS
   ========================================================= */

.kits-filter-control {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}


.kits-filter-control
> span {
  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.kits-filter-control
select {
  width:
    100%;

  min-width:
    0;

  height:
    36px;

  padding:
    0
    9px;

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

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

  outline:
    none;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    10px;

  font-weight:
    750;
}


/* =========================================================
   18. CHIPS
   ========================================================= */

.kits-filter-chips {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-height:
    36px;

  padding:
    5px
    8px;

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


.kits-filter-chips__empty {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.kits-filter-chips__label {
  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;
}


.kits-filter-chip {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    26px;

  max-width:
    100%;

  padding:
    0
    8px;

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

  border-radius:
    999px;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    8.5px;

  font-weight:
    750;

  cursor:
    pointer;
}


.kits-filter-chip
span {
  color:
    var(
      --kits-muted
    );
}


.kits-filter-chip
strong {
  min-width:
    0;

  overflow:
    hidden;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   19. PANEL TABLA
   ========================================================= */

.kits-table-panel {
  width:
    100%;

  min-width:
    0;

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


.kits-table-main-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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


/* =========================================================
   20. TABLA PRINCIPAL
   ========================================================= */

.kits-main-table {
  width:
    100%;

  min-width:
    980px;

  border-collapse:
    collapse;

  table-layout:
    fixed;

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


.kits-main-table
th,
.kits-main-table
td {
  min-width:
    0;

  padding:
    8px;

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

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

  vertical-align:
    middle;

  overflow:
    hidden;
}


.kits-main-table
th:last-child,
.kits-main-table
td:last-child {
  border-right:
    0;
}


.kits-main-table
thead
th {
  height:
    40px;

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

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

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.055em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.kits-main-table
tbody
td {
  height:
    58px;

  color:
    var(
      --kits-text
    );

  font-size:
    9.5px;

  font-weight:
    750;
}


.kits-main-table
tbody
tr {
  cursor:
    pointer;

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


.kits-main-table
tbody
tr:hover {
  background:
    var(
      --kits-hover
    );
}


.kits-main-table
tbody
tr.is-selected {
  background:
    var(
      --kits-active
    );
}


.kits-main-table
tbody
tr.is-selected
td:first-child {
  box-shadow:
    2px
    0
    0
    var(
      --kits-text
    )
    inset;
}


/* =========================================================
   21. ANCHOS TABLA
   ========================================================= */

.kits-main-table
th:nth-child(1),
.kits-main-table
td:nth-child(1) {
  width:
    21%;
}


.kits-main-table
th:nth-child(2),
.kits-main-table
td:nth-child(2) {
  width:
    9%;
}


.kits-main-table
th:nth-child(3),
.kits-main-table
td:nth-child(3) {
  width:
    10%;
}


.kits-main-table
th:nth-child(4),
.kits-main-table
td:nth-child(4) {
  width:
    8%;
}


.kits-main-table
th:nth-child(5),
.kits-main-table
td:nth-child(5) {
  width:
    8%;
}


.kits-main-table
th:nth-child(6),
.kits-main-table
td:nth-child(6) {
  width:
    8%;
}


.kits-main-table
th:nth-child(7),
.kits-main-table
td:nth-child(7) {
  width:
    8%;
}


.kits-main-table
th:nth-child(8),
.kits-main-table
td:nth-child(8) {
  width:
    9%;
}


.kits-main-table
th:nth-child(9),
.kits-main-table
td:nth-child(9) {
  width:
    13%;
}


.kits-main-table
th:nth-child(10),
.kits-main-table
td:nth-child(10) {
  width:
    6%;
}


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

.kits-table-product {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


.kits-table-product__image {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  min-width:
    34px;

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

  border-radius:
    8px;

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

  color:
    var(
      --kits-text
    );

  overflow:
    hidden;
}


.kits-table-product__image
img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.kits-table-product__image
svg,
.kits-table-product__image
.icon {
  width:
    14px;

  height:
    14px;
}


.kits-table-product
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-table-product
> div
> strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-table-product
> div
> small {
  overflow:
    hidden;

  color:
    var(
      --kits-muted
    );

  font-size:
    8.8px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   23. CÓDIGOS
   ========================================================= */

.kits-code {
  display:
    inline-flex;

  align-items:
    center;

  max-width:
    100%;

  min-height:
    25px;

  padding:
    0
    7px;

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

  border-radius:
    6px;

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

  color:
    var(
      --kits-text
    );

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

  font-size:
    8.5px;

  font-weight:
    850;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   24. BADGES
   ========================================================= */

.kits-status,
.kits-availability,
.kits-pill {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    27px;

  max-width:
    100%;

  padding:
    0
    9px;

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

  border-radius:
    999px;

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

  color:
    var(
      --kits-text
    );

  font-size:
    8.5px;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.kits-status
svg,
.kits-status
.icon,
.kits-availability
svg,
.kits-availability
.icon {
  width:
    10px;

  height:
    10px;
}


.kits-status.is-active,
.kits-availability.is-ok {
  border-color:
    var(
      --kits-green-line
    );

  background:
    var(
      --kits-green-soft
    );

  color:
    var(
      --kits-green
    );
}


.kits-status.is-inactive,
.kits-availability.is-zero {
  border-color:
    var(
      --kits-red-line
    );

  background:
    var(
      --kits-red-soft
    );

  color:
    var(
      --kits-red
    );
}


.kits-availability.is-warning {
  border-color:
    var(
      --kits-amber-line
    );

  background:
    var(
      --kits-amber-soft
    );

  color:
    var(
      --kits-amber
    );
}


.kits-pill {
  color:
    var(
      --kits-muted
    );
}


.kits-table-statuses {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  min-width:
    0;
}


/* =========================================================
   25. ACCIONES FILA
   ========================================================= */

.kits-table-actions-cell {
  text-align:
    center;
}


.kits-table-actions-cell
.kits-row-btn {
  width:
    30px;

  height:
    30px;

  min-width:
    30px;

  min-height:
    30px;

  padding:
    0;

  margin:
    1px;

  border-radius:
    7px;
}


/* =========================================================
   26. ESTADOS TABLA
   ========================================================= */

.kits-table-state-cell {
  padding:
    0;

  border-right:
    0;
}


.kits-list-state {
  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    6px;

  min-height:
    260px;

  padding:
    24px;

  color:
    var(
      --kits-muted
    );

  text-align:
    center;
}


.kits-list-state__icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    10px;

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


.kits-list-state__icon
svg,
.kits-list-state__icon
.icon {
  width:
    17px;

  height:
    17px;
}


.kits-list-state
> strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    12px;

  font-weight:
    900;
}


.kits-list-state
> p {
  max-width:
    360px;

  margin:
    0;

  color:
    var(
      --kits-muted
    );

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1.45;
}


/* =========================================================
   27. BODY CON MODAL
   ========================================================= */

body.kits-modal-open {
  overflow:
    hidden;
}


/* =========================================================
   28. MODAL ROOT
   ========================================================= */

.kits-modal[hidden] {
  display:
    none;
}


body
> .kits-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    2147483000;

  display:
    grid;

  place-items:
    center;

  width:
    100vw;

  height:
    100dvh;

  padding:
    18px;

  overflow:
    hidden;

  isolation:
    isolate;

  pointer-events:
    auto;
}


/* =========================================================
   29. BACKDROP
   ========================================================= */

body
> .kits-modal
> .kits-modal__backdrop {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    0;

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

  cursor:
    default;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* =========================================================
   30. MODAL DIALOG · NUEVO LAYOUT
   ========================================================= */

body
> .kits-modal
> .kits-modal__dialog {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

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

  min-width:
    0;

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

  height:
    min(
      900px,
      calc(
        100dvh -
        36px
      )
    );

  min-height:
    0;

  max-height:
    calc(
      100dvh -
      36px
    );

  margin:
    0;

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

  border-radius:
    var(
      --kits-radius-xl
    );

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  overflow:
    hidden;

  box-shadow:
    0
    26px
    80px
    rgba(
      0,
      0,
      0,
      0.38
    );

  animation:
    kitsModalIn
    110ms
    ease-out
    both;
}


/* =========================================================
   31. MODAL CONTENT
   ========================================================= */

.kits-modal__content {
  display:
    flex;

  flex:
    1
    1
    auto;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  overflow:
    hidden;
}


/* =========================================================
   32. DETALLE ROOT
   ========================================================= */

.kits-detail {
  display:
    flex;

  flex:
    1
    1
    auto;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


/* =========================================================
   33. HEADER MODAL
   ========================================================= */

.kits-detail-head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    14px;

  flex:
    0
    0
    auto;

  min-height:
    78px;

  padding:
    10px
    12px;

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

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


/* =========================================================
   34. PRODUCTO HEADER MODAL
   ========================================================= */

.kits-detail-product {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}


.kits-detail-product__image {
  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    46px;

  width:
    46px;

  height:
    46px;

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

  border-radius:
    10px;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  overflow:
    hidden;
}


.kits-detail-product__image
img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.kits-detail-product__image
svg,
.kits-detail-product__image
.icon {
  width:
    18px;

  height:
    18px;
}


.kits-detail-product
> div {
  min-width:
    0;
}


.kits-detail-product
> div
> span:first-child {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.kits-detail-product
h3 {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    16px;

  font-weight:
    900;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-detail-product
p {
  margin:
    4px
    0
    0;

  color:
    var(
      --kits-muted
    );

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1.35;
}


/* =========================================================
   35. CÓDIGOS HEADER MODAL
   ========================================================= */

.kits-detail-product__codes {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  margin-top:
    5px;
}


.kits-detail-product__codes
span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    22px;

  margin:
    0;

  padding:
    0
    6px;

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

  border-radius:
    5px;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

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

  font-size:
    7.8px;

  font-weight:
    850;

  letter-spacing:
    0;

  text-transform:
    none;
}


/* =========================================================
   36. ESTADOS HEADER MODAL
   ========================================================= */

.kits-detail-product__states {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  margin-top:
    5px;
}


/* =========================================================
   37. ACCIONES HEADER MODAL
   ========================================================= */

.kits-detail-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  min-width:
    0;
}


.kits-detail-close {
  width:
    36px;

  min-width:
    36px;

  padding:
    0;
}


/* =========================================================
   38. TABS
   ========================================================= */

.kits-tabs {
  display:
    grid;

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

  gap:
    5px;

  flex:
    0
    0
    auto;

  width:
    100%;

  min-width:
    0;

  padding:
    6px;

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

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


.kits-tab {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  width:
    100%;

  min-width:
    0;

  min-height:
    36px;

  padding:
    0
    9px;

  border:
    1px
    solid
    transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(
      --kits-muted
    );

  font-size:
    10px;

  font-weight:
    850;

  cursor:
    pointer;

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


.kits-tab:hover {
  border-color:
    var(
      --kits-border
    );

  background:
    var(
      --kits-hover
    );

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


.kits-tab.is-active {
  border-color:
    var(
      --kits-primary
    );

  background:
    var(
      --kits-primary
    );

  color:
    var(
      --kits-primary-text
    );
}


.kits-tab
svg,
.kits-tab
.icon {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   39. PANEL PRINCIPAL DEL MODAL
   ========================================================= */

.kits-tab-panel {
  display:
    grid;

  align-content:
    start;

  gap:
    10px;

  flex:
    1
    1
    auto;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  padding:
    10px;

  background:
    var(
      --kits-page
    );

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.kits-tab-panel::-webkit-scrollbar {
  width:
    6px;
}


.kits-tab-panel::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-tab-panel::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   40. SECCIONES INTERNAS
   ========================================================= */

.kits-detail-section,
.kits-editor-section,
.kits-import-step {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


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

   PARTE 2:
   - títulos internos
   - detalle
   - disponibilidad
   - editor nuevo
   - formulario
   - switch
   - buscador componentes
   - resultados
   - componentes seleccionados
   ========================================================= *//* =========================================================
   41. TÍTULOS INTERNOS
   ========================================================= */

.kits-panel-title {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    48px;

  padding:
    8px
    10px;

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

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


.kits-panel-title
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-panel-title
> div
> span {
  color:
    var(
      --kits-muted
    );

  font-size:
    7.8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.kits-panel-title
> div
> strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    11px;

  font-weight:
    900;
}


.kits-panel-title
> div
> small {
  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;

  line-height:
    1.35;
}


/* =========================================================
   42. DETALLE VALUES
   ========================================================= */

.kits-detail-values {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;
}


.kits-detail-value {
  display:
    grid;

  align-content:
    center;

  gap:
    4px;

  min-width:
    0;

  min-height:
    62px;

  padding:
    9px;

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

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


.kits-detail-value:nth-child(
  4n
) {
  border-right:
    0;
}


.kits-detail-value.is-wide {
  grid-column:
    span
    2;
}


.kits-detail-value
span {
  color:
    var(
      --kits-muted
    );

  font-size:
    7.5px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.kits-detail-value
strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --kits-text
    );

  font-size:
    10px;

  font-weight:
    850;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-detail-value.is-multiline
strong {
  overflow:
    visible;

  white-space:
    normal;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   43. GRID DISPONIBILIDAD
   ========================================================= */

.kits-detail-grid {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   44. CARDS DISPONIBILIDAD
   ========================================================= */

.kits-detail-card {
  position:
    relative;

  display:
    grid;

  align-content:
    center;

  gap:
    4px;

  min-width:
    0;

  min-height:
    88px;

  padding:
    11px;

  border-right:
    1px
    solid
    var(
      --kits-border-strong
    );

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-detail-card:last-child {
  border-right:
    0;
}


.kits-detail-card::before {
  content:
    "";

  position:
    absolute;

  top:
    10px;

  bottom:
    10px;

  left:
    0;

  width:
    2px;

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


.kits-detail-card
span {
  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.kits-detail-card
strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    21px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.kits-detail-card
small {
  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.kits-detail-card.is-general::before {
  background:
    var(
      --kits-green
    );
}


.kits-detail-card.is-local::before {
  background:
    var(
      --kits-text
    );
}


.kits-detail-card.is-full::before {
  background:
    #7367df;
}


.kits-detail-card.is-components::before {
  background:
    var(
      --kits-amber
    );
}


/* =========================================================
   45. COMPONENTE LIMITANTE
   ========================================================= */

.kits-limit-card {
  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  width:
    100%;

  min-width:
    0;

  padding:
    9px;

  border:
    1px
    solid
    var(
      --kits-amber-line
    );

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

  background:
    var(
      --kits-amber-soft
    );

  color:
    var(
      --kits-amber
    );
}


.kits-limit-card__icon {
  display:
    grid;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

  border:
    1px
    solid
    var(
      --kits-amber-line
    );

  border-radius:
    8px;
}


.kits-limit-card
> div {
  min-width:
    0;
}


.kits-limit-card
> div
> span {
  display:
    block;

  margin-bottom:
    2px;

  font-size:
    7.5px;

  font-weight:
    900;

  letter-spacing:
    0.06em;
}


.kits-limit-card
> div
> strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --kits-text
    );

  font-size:
    10px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-limit-card
> div
> small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.kits-limit-card
> b {
  padding:
    5px
    8px;

  border:
    1px
    solid
    var(
      --kits-amber-line
    );

  border-radius:
    6px;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    8.5px;

  font-weight:
    900;

  white-space:
    nowrap;
}


/* =========================================================
   46. EMPTY
   ========================================================= */

.kits-inline-empty {
  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    6px;

  min-height:
    150px;

  padding:
    20px;

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

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

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-muted
    );

  text-align:
    center;
}


.kits-inline-empty--small {
  min-height:
    118px;
}


.kits-inline-empty
> svg,
.kits-inline-empty
> .icon {
  width:
    21px;

  height:
    21px;
}


.kits-inline-empty
> strong {
  color:
    var(
      --kits-text
    );

  font-size:
    10.5px;

  font-weight:
    900;
}


.kits-inline-empty
> span {
  max-width:
    380px;

  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;

  line-height:
    1.4;
}


.kits-inline-empty.is-error
> svg,
.kits-inline-empty.is-error
> .icon,
.kits-inline-empty.is-error
> strong {
  color:
    var(
      --kits-red
    );
}


/* =========================================================
   47. TABLAS INTERNAS
   ========================================================= */

.kits-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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


.kits-table {
  width:
    100%;

  min-width:
    760px;

  border-collapse:
    collapse;

  table-layout:
    fixed;

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


.kits-table
th,
.kits-table
td {
  min-width:
    0;

  padding:
    8px;

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

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

  vertical-align:
    middle;

  overflow:
    hidden;
}


.kits-table
th:last-child,
.kits-table
td:last-child {
  border-right:
    0;
}


.kits-table
thead
th {
  height:
    38px;

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

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

  font-size:
    7.8px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.kits-table
tbody
td {
  min-height:
    50px;

  color:
    var(
      --kits-text
    );

  font-size:
    9px;

  font-weight:
    750;
}


.kits-table
tbody
tr:hover {
  background:
    var(
      --kits-hover
    );
}


/* =========================================================
   48. EDITOR · NUEVO LAYOUT
   ========================================================= */

.kits-editor-layout {
  display:
    grid;

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

  grid-template-areas:
    "form form"
    "picker selected";

  align-items:
    start;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


.kits-editor-layout
> .kits-editor-section:nth-child(
  1
) {
  grid-area:
    form;
}


.kits-editor-layout
> .kits-editor-section:nth-child(
  2
) {
  grid-area:
    picker;
}


.kits-editor-layout
> .kits-editor-section:nth-child(
  3
) {
  grid-area:
    selected;
}


/* =========================================================
   49. FORM GRID
   ========================================================= */

.kits-form-grid {
  display:
    grid;

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

  gap:
    8px;

  padding:
    10px;
}


.kits-field {
  display:
    grid;

  align-content:
    start;

  gap:
    5px;

  min-width:
    0;
}


.kits-field--wide {
  grid-column:
    span
    2;
}


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

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


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

  min-width:
    0;

  max-width:
    100%;

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

  border-radius:
    8px;

  outline:
    none;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    9.5px;

  font-weight:
    750;

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


.kits-field
input,
.kits-field
select {
  height:
    36px;

  padding:
    0
    9px;
}


.kits-field
textarea {
  min-height:
    80px;

  padding:
    9px;

  resize:
    vertical;
}


.kits-field
input::placeholder,
.kits-field
textarea::placeholder {
  color:
    var(
      --kits-muted-2
    );
}


.kits-field
input:hover,
.kits-field
select:hover,
.kits-field
textarea:hover {
  border-color:
    var(
      --kits-border-dark
    );
}


.kits-field
input:focus,
.kits-field
select:focus,
.kits-field
textarea:focus {
  border-color:
    var(
      --kits-text
    );

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


.kits-field
input:disabled,
.kits-field
input:read-only {
  background:
    var(
      --kits-surface-3
    );

  color:
    var(
      --kits-muted
    );

  cursor:
    not-allowed;
}


/* =========================================================
   50. SWITCH
   ========================================================= */

.kits-switch {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  min-height:
    62px;

  padding:
    10px;

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

  border-radius:
    9px;

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

  cursor:
    pointer;
}


.kits-switch
> span {
  display:
    grid;

  gap:
    3px;

  min-width:
    0;
}


.kits-switch
strong {
  color:
    var(
      --kits-text
    );

  font-size:
    9.8px;

  font-weight:
    900;
}


.kits-switch
small {
  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1.3;
}


.kits-switch
input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;
}


.kits-switch
b {
  position:
    relative;

  display:
    block;

  width:
    38px;

  height:
    22px;

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

  border-radius:
    999px;

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


.kits-switch
b::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    var(
      --kits-muted
    );

  transition:
    left
      var(
        --kits-fast
      ),
    background
      var(
        --kits-fast
      );
}


.kits-switch
input:checked
+
b {
  border-color:
    var(
      --kits-green-line
    );

  background:
    var(
      --kits-green-soft
    );
}


.kits-switch
input:checked
+
b::after {
  left:
    19px;

  background:
    var(
      --kits-green
    );
}


/* =========================================================
   51. COMPONENT PICKER
   ========================================================= */

.kits-component-picker {
  display:
    grid;

  align-content:
    start;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    9px;

  overflow:
    hidden;
}


.kits-component-search {
  display:
    grid;

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

  gap:
    6px;

  width:
    100%;

  min-width:
    0;
}


.kits-component-search
.kits-btn {
  min-width:
    92px;
}


/* =========================================================
   52. COMPONENT RESULTS
   ========================================================= */

.kits-component-results {
  width:
    100%;

  min-width:
    0;

  max-height:
    340px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  scrollbar-width:
    thin;

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


.kits-component-results::-webkit-scrollbar {
  width:
    5px;
}


.kits-component-results::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   53. COMPONENT GRID
   ========================================================= */

.kits-component-grid {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    6px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   54. COMPONENT OPTION
   ========================================================= */

.kits-component-option {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    7px;

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

  border-radius:
    9px;

  background:
    var(
      --kits-surface
    );

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


.kits-component-option:hover {
  border-color:
    var(
      --kits-border-strong
    );

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


.kits-component-option__image {
  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

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

  border-radius:
    8px;

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

  overflow:
    hidden;
}


.kits-component-option__image
img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.kits-component-option__body {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-component-option__body
> strong {
  overflow:
    hidden;

  color:
    var(
      --kits-text
    );

  font-size:
    10px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-component-option__body
> small {
  overflow:
    hidden;

  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-component-stock {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    700;
}


.kits-component-stock
strong {
  color:
    var(
      --kits-text
    );

  font-weight:
    900;
}


.kits-component-option
.kits-row-btn {
  min-width:
    82px;

  height:
    32px;

  min-height:
    32px;

  padding:
    0
    8px;

  font-size:
    8px;
}


/* =========================================================
   55. COMPONENTES SELECCIONADOS
   ========================================================= */

.kits-draft-components {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    9px;
}


/* =========================================================
   56. CARD COMPONENTE
   ========================================================= */

.kits-draft-component {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

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

  border-radius:
    10px;

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-draft-component__head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px;

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

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


.kits-draft-component__image {
  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

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

  border-radius:
    8px;

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-draft-component__image
img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.kits-draft-component__head
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-draft-component__head
> div
> strong {
  overflow:
    hidden;

  color:
    var(
      --kits-text
    );

  font-size:
    10px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-draft-component__head
> div
> small {
  overflow:
    hidden;

  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-draft-component__head
.kits-row-btn {
  min-width:
    72px;

  height:
    31px;

  min-height:
    31px;

  padding:
    0
    7px;

  font-size:
    7.8px;
}


/* =========================================================
   57. BODY COMPONENTE
   ========================================================= */

.kits-draft-component__body {
  display:
    grid;

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

  gap:
    8px;

  padding:
    9px;
}


/* =========================================================
   58. CANTIDAD / SERIALES
   ========================================================= */

.kits-quantity-field,
.kits-serial-field {
  display:
    grid;

  align-content:
    start;

  gap:
    5px;

  min-width:
    0;
}


.kits-quantity-field
> span,
.kits-serial-field
> span {
  color:
    var(
      --kits-muted
    );

  font-size:
    7.5px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.kits-quantity-field
input,
.kits-serial-field
textarea {
  width:
    100%;

  min-width:
    0;

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

  border-radius:
    8px;

  outline:
    none;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    9px;

  font-weight:
    750;
}


.kits-quantity-field
input {
  height:
    36px;

  padding:
    0
    8px;
}


.kits-serial-field
textarea {
  min-height:
    76px;

  padding:
    8px;

  resize:
    vertical;

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


/* =========================================================
   59. SERIAL COUNTER
   ========================================================= */

.kits-serial-counter {
  display:
    inline-flex;

  align-items:
    center;

  justify-self:
    start;

  min-height:
    22px;

  padding:
    0
    7px;

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

  border-radius:
    999px;

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

  color:
    var(
      --kits-muted
    );

  font-size:
    7.5px;

  font-weight:
    850;
}


.kits-serial-counter.is-complete {
  border-color:
    var(
      --kits-green-line
    );

  background:
    var(
      --kits-green-soft
    );

  color:
    var(
      --kits-green
    );
}


.kits-serial-counter.is-pending {
  border-color:
    var(
      --kits-amber-line
    );

  background:
    var(
      --kits-amber-soft
    );

  color:
    var(
      --kits-amber
    );
}


.kits-serial-counter.is-error {
  border-color:
    var(
      --kits-red-line
    );

  background:
    var(
      --kits-red-soft
    );

  color:
    var(
      --kits-red
    );
}


/* =========================================================
   60. STOCK COMPONENTE
   ========================================================= */

.kits-draft-component__stock {
  display:
    grid;

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

  grid-column:
    1
    /
    -1;

  gap:
    6px;
}


.kits-draft-component__stock
article {
  display:
    grid;

  gap:
    2px;

  min-height:
    52px;

  padding:
    8px;

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

  border-radius:
    8px;

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


.kits-draft-component__stock
span {
  color:
    var(
      --kits-muted
    );

  font-size:
    7.5px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.kits-draft-component__stock
strong {
  color:
    var(
      --kits-text
    );

  font-size:
    14px;

  font-weight:
    900;
}


/* =========================================================
   61. LOADING DETALLE
   ========================================================= */

.kits-detail-loading {
  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    7px;

  flex:
    1
    1
    auto;

  min-height:
    360px;

  padding:
    24px;

  color:
    var(
      --kits-muted
    );

  text-align:
    center;
}


.kits-detail-loading
> svg,
.kits-detail-loading
> .icon {
  width:
    22px;

  height:
    22px;
}


.kits-detail-loading
> strong {
  color:
    var(
      --kits-text
    );

  font-size:
    11px;

  font-weight:
    900;
}


.kits-detail-loading
> span {
  font-size:
    8.5px;

  font-weight:
    700;
}


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

   PARTE 3:
   - importación
   - toast
   - responsive desktop/tablet/mobile
   - modal mobile
   - cards mobile
   - protecciones
   - animaciones
   ========================================================= *//* =========================================================
   62. IMPORTACIÓN · LAYOUT
   ========================================================= */

.kits-import-layout {
  display:
    grid;

  align-content:
    start;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   63. DROP DE ARCHIVO
   ========================================================= */

.kits-file-drop {
  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    7px;

  min-height:
    170px;

  margin:
    9px;

  padding:
    18px;

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

  border-radius:
    10px;

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

  color:
    var(
      --kits-muted
    );

  text-align:
    center;

  cursor:
    pointer;

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


.kits-file-drop:hover {
  border-color:
    var(
      --kits-text
    );

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


.kits-file-drop
input {
  display:
    none;
}


.kits-file-drop
> svg,
.kits-file-drop
> .icon {
  width:
    27px;

  height:
    27px;

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


.kits-file-drop
> strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    11px;

  font-weight:
    900;
}


.kits-file-drop
> span {
  color:
    var(
      --kits-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.kits-file-drop
> b {
  display:
    inline-flex;

  align-items:
    center;

  max-width:
    100%;

  min-height:
    28px;

  padding:
    0
    9px;

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

  border-radius:
    7px;

  background:
    var(
      --kits-surface
    );

  color:
    var(
      --kits-text
    );

  font-size:
    8.5px;

  font-weight:
    850;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   64. IMPORTACIÓN · MÉTRICAS
   ========================================================= */

.kits-import-metrics {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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


.kits-import-metrics
article {
  position:
    relative;

  display:
    grid;

  align-content:
    center;

  gap:
    3px;

  min-width:
    0;

  min-height:
    72px;

  padding:
    9px;

  border-right:
    1px
    solid
    var(
      --kits-border-strong
    );

  overflow:
    hidden;
}


.kits-import-metrics
article:last-child {
  border-right:
    0;
}


.kits-import-metrics
article::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    2px;

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


.kits-import-metrics
article:nth-child(
  3
)::before {
  background:
    var(
      --kits-green
    );
}


.kits-import-metrics
article:nth-child(
  4
)::before {
  background:
    var(
      --kits-red
    );
}


.kits-import-metrics
span {
  color:
    var(
      --kits-muted
    );

  font-size:
    7.8px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.kits-import-metrics
strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    19px;

  font-weight:
    900;

  line-height:
    1;
}


/* =========================================================
   65. IMPORTACIÓN · ERRORES
   ========================================================= */

.kits-import-errors {
  margin:
    9px;

  border:
    1px
    solid
    var(
      --kits-red-line
    );

  border-radius:
    9px;

  background:
    var(
      --kits-red-soft
    );

  overflow:
    hidden;
}


.kits-import-errors__list {
  display:
    grid;
}


.kits-import-errors__list
> div {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    7px;

  padding:
    8px
    9px;

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


.kits-import-errors__list
> div:last-child {
  border-bottom:
    0;
}


.kits-import-errors__list
svg,
.kits-import-errors__list
.icon {
  width:
    12px;

  height:
    12px;

  min-width:
    12px;

  margin-top:
    2px;

  color:
    var(
      --kits-red
    );
}


.kits-import-errors__list
span {
  color:
    var(
      --kits-red
    );

  font-size:
    8.5px;

  font-weight:
    750;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   66. IMPORTACIÓN · COMPONENTES PREVIEW
   ========================================================= */

.kits-import-components {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    4px;

  min-width:
    0;
}


.kits-import-components
span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  min-height:
    24px;

  max-width:
    100%;

  padding:
    0
    7px;

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

  border-radius:
    6px;

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

  color:
    var(
      --kits-muted
    );

  font-size:
    7.8px;

  font-weight:
    700;

  overflow:
    hidden;
}


.kits-import-components
b {
  min-width:
    0;

  max-width:
    160px;

  overflow:
    hidden;

  color:
    var(
      --kits-text
    );

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

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-import-components
strong {
  color:
    var(
      --kits-text
    );

  font-weight:
    900;
}


/* =========================================================
   67. IMPORTACIÓN · ACCIONES
   ========================================================= */

.kits-import-actions {
  position:
    sticky;

  bottom:
    0;

  z-index:
    6;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  min-height:
    50px;

  padding:
    8px;

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

  border-radius:
    9px;

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


/* =========================================================
   68. TOAST
   ========================================================= */

.kits-toast {
  --kits-toast-bg:
    #ffffff;

  --kits-toast-text:
    #090909;

  --kits-toast-border:
    #9fa6ae;

  position:
    fixed;

  right:
    12px;

  bottom:
    14px;

  z-index:
    2147483640;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

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

  padding:
    8px;

  border:
    1px
    solid
    var(
      --kits-toast-border
    );

  border-radius:
    9px;

  background:
    var(
      --kits-toast-bg
    );

  color:
    var(
      --kits-toast-text
    );

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(
      4px
    );

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


html[data-theme="dark"]
.kits-toast,
body.dark
.kits-toast,
body[data-theme="dark"]
.kits-toast {
  --kits-toast-bg:
    #090909;

  --kits-toast-text:
    #f6f6f6;

  --kits-toast-border:
    #596068;
}


.kits-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(
      0
    );
}


.kits-toast__icon {
  display:
    grid;

  place-items:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px
    solid
    currentColor;

  border-radius:
    7px;
}


.kits-toast--success
.kits-toast__icon {
  background:
    var(
      --kits-green-soft
    );

  color:
    var(
      --kits-green
    );
}


.kits-toast--warning
.kits-toast__icon {
  background:
    var(
      --kits-amber-soft
    );

  color:
    var(
      --kits-amber
    );
}


.kits-toast--error
.kits-toast__icon {
  background:
    var(
      --kits-red-soft
    );

  color:
    var(
      --kits-red
    );
}


.kits-toast__message {
  color:
    inherit;

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1.35;
}


.kits-toast__close {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  color:
    inherit;

  cursor:
    pointer;
}


/* =========================================================
   69. FOOTER
   ========================================================= */

body:has(
  .kits-page
)
.app-footer,
body:has(
  .kits-page
)
#footerMount,
body:has(
  .kits-page
)
footer.app-footer {
  position:
    relative;

  inset:
    auto;

  width:
    100%;

  margin-top:
    0;

  transform:
    none;
}


/* =========================================================
   70. RESPONSIVE · 1450
   ========================================================= */

@media (
  max-width:
  1450px
) {

  .kits-editor-layout {
    grid-template-columns:
      minmax(
        0,
        0.82fr
      )
      minmax(
        0,
        1.18fr
      );
  }


  .kits-draft-components {
    grid-template-columns:
      1fr;
  }


  .kits-main-table {
    min-width:
      1040px;
  }

}


/* =========================================================
   71. RESPONSIVE · 1220
   ========================================================= */

@media (
  max-width:
  1220px
) {

  .kits-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .kits-metric {
    border-bottom:
      1px
      solid
      var(
        --kits-border-strong
      );
  }


  .kits-metric:nth-child(
    3n
  ) {
    border-right:
      0;
  }


  .kits-metric:nth-last-child(
    -n + 3
  ) {
    border-bottom:
      0;
  }


  .kits-toolbar {
    grid-template-columns:
      minmax(
        230px,
        1fr
      )
      minmax(
        140px,
        0.55fr
      )
      minmax(
        160px,
        0.65fr
      )
      auto;
  }


  .kits-form-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .kits-editor-layout {
    grid-template-columns:
      1fr;

    grid-template-areas:
      "form"
      "picker"
      "selected";
  }


  .kits-component-results {
    max-height:
      300px;
  }


  .kits-draft-components {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* =========================================================
   72. RESPONSIVE · 1000
   ========================================================= */

@media (
  max-width:
  1000px
) {

  .kits-head {
    grid-template-columns:
      1fr;
  }


  .kits-actions {
    justify-content:
      flex-start;
  }


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


  .kits-search {
    grid-column:
      1
      /
      -1;
  }


  .kits-toolbar
  .kits-btn {
    width:
      100%;
  }


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


  .kits-detail-card {
    border-bottom:
      1px
      solid
      var(
        --kits-border-strong
      );
  }


  .kits-detail-card:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .kits-detail-card:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0;
  }


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


  .kits-detail-value,
  .kits-detail-value:nth-child(
    4n
  ) {
    border-right:
      1px
      solid
      var(
        --kits-border
      );
  }


  .kits-detail-value:nth-child(
    2n
  ) {
    border-right:
      0;
  }


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


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


  .kits-draft-components {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   73. TABLET · 820
   ========================================================= */

@media (
  max-width:
  820px
) {

  .kits-page {
    gap:
      7px;

    padding:
      6px;
  }


  .kits-head {
    padding:
      10px;

    gap:
      10px;
  }


  .kits-brand {
    align-items:
      flex-start;
  }


  .kits-brand__icon {
    flex-basis:
      40px;

    width:
      40px;

    height:
      40px;
  }


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


  .kits-brand
  p {
    font-size:
      10px;
  }


  .kits-actions {
    display:
      grid;

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

    width:
      100%;
  }


  .kits-actions
  .kits-btn {
    width:
      100%;

    height:
      40px;

    min-height:
      40px;
  }


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


  .kits-metric,
  .kits-metric:nth-child(
    3n
  ),
  .kits-metric:nth-last-child(
    -n + 3
  ) {
    border-right:
      1px
      solid
      var(
        --kits-border-strong
      );

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


  .kits-metric:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .kits-metric:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0;
  }


  .kits-workspace,
  .kits-workspace--table {
    min-height:
      0;
  }


  .kits-table-toolbar__head {
    align-items:
      flex-start;
  }


  .kits-toolbar {
    grid-template-columns:
      1fr;
  }


  .kits-search {
    grid-column:
      auto;
  }


  .kits-search
  input,
  .kits-filter-control
  select,
  .kits-toolbar
  .kits-btn {
    height:
      40px;

    min-height:
      40px;
  }


  .kits-table-main-wrap {
    padding:
      7px;

    background:
      var(
        --kits-page
      );

    overflow:
      hidden;
  }


  .kits-main-table {
    min-width:
      0;
  }


  .kits-main-table,
  .kits-main-table
  tbody,
  .kits-main-table
  tr,
  .kits-main-table
  td {
    display:
      block;

    width:
      100%;
  }


  .kits-main-table
  thead {
    display:
      none;
  }


  .kits-main-table
  tbody {
    display:
      grid;

    gap:
      8px;
  }


  .kits-main-table
  tbody
  tr {
    display:
      grid;

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

    width:
      100%;

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

    border-radius:
      10px;

    background:
      var(
        --kits-surface
      );

    overflow:
      hidden;
  }


  .kits-main-table
  tbody
  tr:hover {
    background:
      var(
        --kits-surface
      );
  }


  .kits-main-table
  tbody
  td {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    width:
      100%;

    min-width:
      0;

    min-height:
      62px;

    height:
      auto;

    padding:
      9px;

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

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

    overflow:
      visible;
  }


  .kits-main-table
  tbody
  td:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .kits-main-table
  tbody
  td::before {
    content:
      attr(
        data-label
      );

    display:
      block;

    width:
      100%;

    margin-bottom:
      4px;

    color:
      var(
        --kits-muted
      );

    font-size:
      7.5px;

    font-weight:
      900;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


  .kits-main-table
  tbody
  td:first-child {
    grid-column:
      1
      /
      -1;

    min-height:
      72px;

    border-right:
      0;
  }


  .kits-main-table
  tbody
  td:first-child::before {
    display:
      none;
  }


  .kits-main-table
  tbody
  td:nth-child(
    9
  ) {
    grid-column:
      1
      /
      -1;

    border-right:
      0;
  }


  .kits-main-table
  tbody
  td:nth-child(
    10
  ) {
    grid-column:
      1
      /
      -1;

    display:
      grid;

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

    gap:
      7px;

    border-right:
      0;

    border-bottom:
      0;
  }


  .kits-main-table
  tbody
  td:nth-child(
    10
  )::before {
    grid-column:
      1
      /
      -1;
  }


  .kits-table-actions-cell
  .kits-row-btn {
    width:
      100%;

    height:
      40px;

    min-height:
      40px;

    margin:
      0;
  }


  .kits-table-product {
    grid-template-columns:
      40px
      minmax(
        0,
        1fr
      );

    gap:
      9px;
  }


  .kits-table-product__image {
    width:
      40px;

    height:
      40px;

    min-width:
      40px;
  }


  .kits-table-product
  > div
  > strong {
    font-size:
      11.5px;

    white-space:
      normal;
  }


  .kits-table-statuses {
    gap:
      6px;
  }


  .kits-status,
  .kits-availability,
  .kits-pill {
    min-height:
      28px;

    padding:
      0
      9px;

    font-size:
      8.8px;
  }


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

  body
  > .kits-modal {
    padding:
      8px;
  }


  body
  > .kits-modal
  > .kits-modal__dialog {
    width:
      calc(
        100vw -
        16px
      );

    max-width:
      calc(
        100vw -
        16px
      );

    height:
      calc(
        100dvh -
        16px
      );

    max-height:
      calc(
        100dvh -
        16px
      );

    border-radius:
      11px;
  }


  .kits-detail-head {
    min-height:
      0;

    padding:
      9px;
  }


  .kits-detail-product
  h3 {
    font-size:
      15px;

    white-space:
      normal;
  }


  .kits-tabs {
    padding:
      5px;
  }


  .kits-tab {
    min-height:
      36px;

    font-size:
      9.5px;
  }


  .kits-tab-panel {
    gap:
      8px;

    padding:
      8px;
  }


  .kits-editor-layout {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      8px;
  }


  .kits-editor-layout
  > .kits-editor-section {
    width:
      100%;
  }


  .kits-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    padding:
      9px;
  }


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


  .kits-switch {
    grid-column:
      1
      /
      -1;

    width:
      100%;
  }


  .kits-component-picker {
    padding:
      8px;
  }


  .kits-component-search {
    grid-template-columns:
      1fr;
  }


  .kits-component-search
  .kits-btn {
    width:
      100%;

    height:
      40px;

    min-height:
      40px;
  }


  .kits-component-results {
    max-height:
      280px;
  }


  .kits-draft-components {
    grid-template-columns:
      1fr;

    padding:
      8px;
  }


  .kits-draft-component__body {
    grid-template-columns:
      minmax(
        110px,
        0.35fr
      )
      minmax(
        0,
        1fr
      );
  }


  .kits-table-wrap {
    padding:
      6px;

    background:
      var(
        --kits-page
      );
  }


  .kits-table {
    min-width:
      0;
  }


  .kits-table,
  .kits-table
  tbody,
  .kits-table
  tr,
  .kits-table
  td {
    display:
      block;

    width:
      100%;
  }


  .kits-table
  thead {
    display:
      none;
  }


  .kits-table
  tbody {
    display:
      grid;

    gap:
      6px;
  }


  .kits-table
  tbody
  tr {
    display:
      grid;

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

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

    border-radius:
      9px;

    background:
      var(
        --kits-surface
      );

    overflow:
      hidden;
  }


  .kits-table
  tbody
  td {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    width:
      100%;

    min-height:
      52px;

    padding:
      8px;

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

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


  .kits-table
  tbody
  td:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .kits-table
  tbody
  td::before {
    content:
      attr(
        data-label
      );

    display:
      block;

    margin-bottom:
      4px;

    color:
      var(
        --kits-muted
      );

    font-size:
      7.2px;

    font-weight:
      900;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


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


  .kits-import-metrics
  article {
    border-bottom:
      1px
      solid
      var(
        --kits-border-strong
      );
  }


  .kits-import-metrics
  article:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .kits-import-metrics
  article:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0;
  }

}


/* =========================================================
   74. MOBILE · 620
   ========================================================= */

@media (
  max-width:
  620px
) {

  .kits-page {
    padding:
      5px;
  }


  .kits-actions {
    grid-template-columns:
      1fr;
  }


  .kits-actions
  .kits-btn {
    height:
      42px;

    min-height:
      42px;
  }


  .kits-brand
  p {
    font-size:
      9.5px;
  }


  .kits-table-toolbar__head {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .kits-list-count {
    align-self:
      flex-start;
  }


  .kits-main-table
  tbody
  tr {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .kits-main-table
  tbody
  td:first-child,
  .kits-main-table
  tbody
  td:nth-child(
    9
  ),
  .kits-main-table
  tbody
  td:nth-child(
    10
  ) {
    grid-column:
      1
      /
      -1;
  }


  .kits-detail-head {
    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .kits-detail-actions {
    display:
      grid;

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

    width:
      100%;
  }


  .kits-detail-actions
  .kits-btn {
    width:
      100%;
  }


  .kits-detail-product {
    align-items:
      flex-start;
  }


  .kits-detail-product__image {
    flex-basis:
      42px;

    width:
      42px;

    height:
      42px;
  }


  .kits-tabs {
    gap:
      4px;
  }


  .kits-tab {
    padding:
      0
      5px;

    font-size:
      9px;
  }


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


  .kits-detail-card,
  .kits-detail-card:nth-child(
    2n
  ),
  .kits-detail-card:nth-last-child(
    -n + 2
  ) {
    border-right:
      0;

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


  .kits-detail-card:last-child {
    border-bottom:
      0;
  }


  .kits-limit-card {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }


  .kits-limit-card
  > b {
    grid-column:
      1
      /
      -1;

    justify-self:
      start;
  }


  .kits-form-grid {
    grid-template-columns:
      1fr;

    gap:
      8px;

    padding:
      8px;
  }


  .kits-field,
  .kits-field--wide,
  .kits-switch {
    grid-column:
      1
      /
      -1;
  }


  .kits-field
  input,
  .kits-field
  select {
    height:
      40px;
  }


  .kits-switch {
    min-height:
      60px;
  }


  .kits-component-search {
    grid-template-columns:
      1fr;
  }


  .kits-component-results {
    max-height:
      none;

    overflow-y:
      visible;
  }


  .kits-component-option {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .kits-component-option
  .kits-row-btn {
    grid-column:
      1
      /
      -1;

    width:
      100%;

    height:
      36px;

    min-height:
      36px;
  }


  .kits-draft-component__head {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .kits-draft-component__head
  .kits-row-btn {
    grid-column:
      1
      /
      -1;

    width:
      100%;

    height:
      34px;

    min-height:
      34px;
  }


  .kits-draft-component__body {
    grid-template-columns:
      1fr;
  }


  .kits-draft-component__stock {
    grid-column:
      auto;

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


  .kits-import-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .kits-import-actions
  .kits-btn {
    width:
      100%;
  }


  body
  > .kits-modal {
    align-items:
      flex-start;

    padding:
      5px;
  }


  body
  > .kits-modal
  > .kits-modal__dialog {
    width:
      calc(
        100vw -
        10px
      );

    max-width:
      calc(
        100vw -
        10px
      );

    height:
      calc(
        100dvh -
        10px
      );

    max-height:
      calc(
        100dvh -
        10px
      );

    border-radius:
      9px;
  }

}


/* =========================================================
   75. MOBILE CHICO · 460
   ========================================================= */

@media (
  max-width:
  460px
) {

  .kits-page {
    padding:
      4px;
  }


  .kits-brand
  p {
    display:
      none;
  }


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


  .kits-metrics {
    grid-template-columns:
      1fr;
  }


  .kits-metric,
  .kits-metric:nth-child(
    2n
  ),
  .kits-metric:nth-child(
    3n
  ),
  .kits-metric:nth-last-child(
    -n + 2
  ),
  .kits-metric:nth-last-child(
    -n + 3
  ) {
    border-right:
      0;

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


  .kits-metric:last-child {
    border-bottom:
      0;
  }


  .kits-toolbar {
    padding:
      7px;
  }


  .kits-filter-chips {
    padding:
      5px
      7px;
  }


  .kits-main-table
  tbody
  tr {
    grid-template-columns:
      1fr;
  }


  .kits-main-table
  tbody
  td,
  .kits-main-table
  tbody
  td:nth-child(
    2n
  ),
  .kits-main-table
  tbody
  td:first-child,
  .kits-main-table
  tbody
  td:nth-child(
    9
  ),
  .kits-main-table
  tbody
  td:nth-child(
    10
  ) {
    grid-column:
      auto;

    border-right:
      0;
  }


  .kits-main-table
  tbody
  td:nth-child(
    10
  ) {
    display:
      grid;

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


  .kits-main-table
  tbody
  td:nth-child(
    10
  )::before {
    grid-column:
      1
      /
      -1;
  }


  .kits-detail-values {
    grid-template-columns:
      1fr;
  }


  .kits-detail-value,
  .kits-detail-value:nth-child(
    2n
  ),
  .kits-detail-value:nth-child(
    4n
  ) {
    border-right:
      0;
  }


  .kits-detail-value.is-wide {
    grid-column:
      auto;
  }


  .kits-tab {
    min-height:
      34px;

    padding:
      0
      4px;

    font-size:
      0;
  }


  .kits-tab
  svg,
  .kits-tab
  .icon {
    width:
      14px;

    height:
      14px;
  }


  .kits-panel-title {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .kits-draft-component__stock {
    grid-template-columns:
      1fr;
  }


  .kits-import-metrics {
    grid-template-columns:
      1fr;
  }


  .kits-import-metrics
  article,
  .kits-import-metrics
  article:nth-child(
    2n
  ),
  .kits-import-metrics
  article:nth-last-child(
    -n + 2
  ) {
    border-right:
      0;

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


  .kits-import-metrics
  article:last-child {
    border-bottom:
      0;
  }


  .kits-file-drop {
    min-height:
      140px;

    margin:
      7px;

    padding:
      12px;
  }


  .kits-toast {
    right:
      7px;

    bottom:
      8px;

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

}


/* =========================================================
   76. TOPBAR / SIDEBAR CON MODAL ABIERTO
   ========================================================= */

body.kits-modal-open
.app-topbar,
body.kits-modal-open
.topbar,
body.kits-modal-open
#topbarMount,
body.kits-modal-open
.app-sidebar,
body.kits-modal-open
.sidebar,
body.kits-modal-open
.rightbar,
body.kits-modal-open
.app-rightbar {
  z-index:
    1;
}


/* =========================================================
   77. PROTECCIÓN GENERAL
   ========================================================= */

.kits-page,
.kits-head,
.kits-brand,
.kits-actions,
.kits-metrics,
.kits-workspace,
.kits-workspace--table,
.kits-table-toolbar,
.kits-table-toolbar__head,
.kits-toolbar,
.kits-filter-chips,
.kits-table-panel,
.kits-table-product,
.kits-table-statuses,
.kits-modal__dialog,
.kits-modal__content,
.kits-detail,
.kits-detail-head,
.kits-detail-product,
.kits-detail-product__codes,
.kits-detail-product__states,
.kits-detail-actions,
.kits-tabs,
.kits-tab-panel,
.kits-detail-section,
.kits-detail-values,
.kits-detail-grid,
.kits-limit-card,
.kits-editor-layout,
.kits-editor-section,
.kits-form-grid,
.kits-component-picker,
.kits-component-search,
.kits-component-results,
.kits-component-grid,
.kits-component-option,
.kits-draft-components,
.kits-draft-component,
.kits-draft-component__head,
.kits-draft-component__body,
.kits-draft-component__stock,
.kits-import-layout,
.kits-import-step,
.kits-import-metrics,
.kits-import-errors,
.kits-import-actions {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   78. CONTROLES
   ========================================================= */

.kits-page
input,
.kits-page
select,
.kits-page
textarea,
.kits-page
button,
.kits-modal
input,
.kits-modal
select,
.kits-modal
textarea,
.kits-modal
button {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   79. SPINNER
   ========================================================= */

.is-spinning {
  animation:
    kitsSpin
    520ms
    linear
    infinite;
}


/* =========================================================
   80. ANIMACIONES
   ========================================================= */

@keyframes kitsPageIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        2px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes kitsModalIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        4px
      )
      scale(
        0.996
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}


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


/* =========================================================
   81. REDUCIR MOVIMIENTO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .kits-page,
  .kits-page *,
  .kits-page *::before,
  .kits-page *::after,
  .kits-modal,
  .kits-modal *,
  .kits-modal *::before,
  .kits-modal *::after,
  .kits-toast,
  .kits-toast * {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }

}


/* =========================================================
   FIN CSS COMPLETO
   PARTE 3 DE 3
   ========================================================= */
   /* =========================================================
   KITS · IMPORTACIÓN MASIVA
   FIX SCROLL MODAL / ERRORES / PRODUCTOS
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   MODAL IMPORTACIÓN
   PERMITIR SCROLL INTERNO REAL
   ========================================================= */

.kits-detail--import {
  min-height:
    0;

  overflow:
    hidden;
}


.kits-detail--import
.kits-tab-panel {
  min-height:
    0;

  max-height:
    100%;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.kits-detail--import
.kits-tab-panel::-webkit-scrollbar {
  width:
    7px;
}


.kits-detail--import
.kits-tab-panel::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-detail--import
.kits-tab-panel::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   LAYOUT IMPORTACIÓN
   ========================================================= */

.kits-import-layout {
  display:
    grid;

  grid-auto-rows:
    max-content;

  align-content:
    start;

  min-height:
    0;

  max-height:
    100%;

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


/* =========================================================
   ERRORES
   SCROLL INDEPENDIENTE
   ========================================================= */

.kits-import-errors {
  width:
    auto;

  min-width:
    0;

  max-height:
    220px;

  overflow:
    hidden;
}


.kits-import-errors__list {
  display:
    grid;

  width:
    100%;

  min-width:
    0;

  max-height:
    220px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --kits-red-line
    )
    transparent;
}


.kits-import-errors__list::-webkit-scrollbar {
  width:
    6px;
}


.kits-import-errors__list::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-import-errors__list::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(
      --kits-red-line
    );
}


/* =========================================================
   VISTA PREVIA
   LIMITAR ALTURA
   ========================================================= */

.kits-import-table-wrap {
  width:
    100%;

  min-width:
    0;

  max-height:
    360px;

  overflow-x:
    auto;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.kits-import-table-wrap::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.kits-import-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-import-table-wrap::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   HEADER TABLA PREVIEW FIJO
   ========================================================= */

.kits-import-table-wrap
.kits-table
thead {
  position:
    sticky;

  top:
    0;

  z-index:
    4;
}


.kits-import-table-wrap
.kits-table
thead
th {
  position:
    sticky;

  top:
    0;

  z-index:
    4;

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


/* =========================================================
   EVITAR QUE LA TABLA ESTIRE EL MODAL
   ========================================================= */

.kits-detail--import
.kits-import-step {
  min-height:
    0;

  max-width:
    100%;
}


.kits-detail--import
.kits-import-step:has(
  .kits-import-table-wrap
) {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    0;

  max-height:
    430px;
}


.kits-detail--import
.kits-import-step:has(
  .kits-import-table-wrap
)
.kits-import-table-wrap {
  flex:
    1
    1
    auto;

  min-height:
    0;
}


/* =========================================================
   ACCIONES INFERIORES
   SIEMPRE VISIBLES
   ========================================================= */

.kits-detail--import
.kits-import-actions {
  position:
    sticky;

  bottom:
    0;

  z-index:
    20;

  flex:
    0
    0
    auto;

  margin-top:
    2px;

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

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


/* =========================================================
   MODAL · ASEGURAR ALTURA DISPONIBLE
   ========================================================= */

body
> .kits-modal
> .kits-modal__dialog {
  min-height:
    0;
}


.kits-modal__content {
  min-height:
    0;
}


.kits-detail--import {
  flex:
    1
    1
    auto;

  min-height:
    0;
}


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

@media (
  max-width:
  820px
) {

  .kits-import-errors,
  .kits-import-errors__list {
    max-height:
      190px;
  }


  .kits-import-table-wrap {
    max-height:
      320px;
  }


  .kits-detail--import
  .kits-import-step:has(
    .kits-import-table-wrap
  ) {
    max-height:
      390px;
  }

}


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

@media (
  max-width:
  620px
) {

  .kits-detail--import
  .kits-tab-panel {
    padding-bottom:
      8px;
  }


  .kits-import-errors,
  .kits-import-errors__list {
    max-height:
      170px;
  }


  .kits-import-table-wrap {
    max-height:
      300px;

    padding:
      0;
  }


  .kits-detail--import
  .kits-import-step:has(
    .kits-import-table-wrap
  ) {
    max-height:
      370px;
  }


  .kits-detail--import
  .kits-import-actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  .kits-detail--import
  .kits-import-actions
  .kits-btn {
    width:
      100%;
  }

}


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

@media (
  max-width:
  440px
) {

  .kits-import-errors,
  .kits-import-errors__list {
    max-height:
      150px;
  }


  .kits-import-table-wrap {
    max-height:
      270px;
  }


  .kits-detail--import
  .kits-import-step:has(
    .kits-import-table-wrap
  ) {
    max-height:
      340px;
  }

}/* =========================================================
   KITS · IMPORTACIÓN
   COMPATIBILIDAD CON JS ACTUAL
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   MODAL IMPORTACIÓN
   ========================================================= */

.kits-detail--import {
  display:
    flex;

  flex:
    1
    1
    auto;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  overflow:
    hidden;
}


.kits-detail--import
.kits-tab-panel {
  display:
    block;

  flex:
    1
    1
    auto;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  padding:
    10px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.kits-detail--import
.kits-tab-panel::-webkit-scrollbar {
  width:
    7px;
}


.kits-detail--import
.kits-tab-panel::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-detail--import
.kits-tab-panel::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


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

.kits-detail--import
.kits-import-layout {
  display:
    grid;

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

  grid-auto-rows:
    max-content;

  align-content:
    start;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  max-width:
    100%;

  overflow:
    visible;
}


/* =========================================================
   PASOS
   ========================================================= */

.kits-detail--import
.kits-import-step {
  display:
    block;

  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

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

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

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


/* =========================================================
   DROP ARCHIVO · CLASE DEL JS NUEVO
   ========================================================= */

.kits-import-drop {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  width:
    auto;

  min-width:
    0;

  min-height:
    94px;

  margin:
    10px;

  padding:
    12px;

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

  border-radius:
    10px;

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

  color:
    var(
      --kits-text
    );

  cursor:
    pointer;

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


.kits-import-drop:hover {
  border-color:
    var(
      --kits-text
    );

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


.kits-import-drop
input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.kits-import-drop__icon {
  display:
    grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

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

  border-radius:
    9px;

  background:
    var(
      --kits-surface
    );

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


.kits-import-drop__icon
svg,
.kits-import-drop__icon
.icon {
  width:
    18px;

  height:
    18px;
}


.kits-import-drop
> div {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}


.kits-import-drop
> div
> strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.kits-import-drop
> div
> small {
  color:
    var(
      --kits-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   MÉTRICAS IMPORTACIÓN · CLASE DEL JS NUEVO
   ========================================================= */

.kits-import-summary-grid {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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


.kits-import-summary-grid
> article {
  position:
    relative;

  display:
    grid;

  align-content:
    center;

  gap:
    4px;

  min-width:
    0;

  min-height:
    72px;

  padding:
    10px;

  border-right:
    1px
    solid
    var(
      --kits-border-strong
    );

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-import-summary-grid
> article:last-child {
  border-right:
    0;
}


.kits-import-summary-grid
> article::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    2px;

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


.kits-import-summary-grid
> article:nth-child(
  3
)::before {
  background:
    var(
      --kits-green
    );
}


.kits-import-summary-grid
> article:nth-child(
  4
)::before {
  background:
    var(
      --kits-red
    );
}


.kits-import-summary-grid
span {
  color:
    var(
      --kits-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}


.kits-import-summary-grid
strong {
  color:
    var(
      --kits-text-strong
    );

  font-size:
    20px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.035em;
}


/* =========================================================
   ERRORES · HEADER NUEVO
   ========================================================= */

.kits-import-errors {
  width:
    auto;

  min-width:
    0;

  max-width:
    calc(
      100% -
      20px
    );

  margin:
    10px;

  border:
    1px
    solid
    var(
      --kits-red-line
    );

  border-radius:
    9px;

  background:
    var(
      --kits-red-soft
    );

  overflow:
    hidden;
}


.kits-import-errors
> header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    46px;

  padding:
    8px
    10px;

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

  background:
    var(
      --kits-red-soft
    );

  color:
    var(
      --kits-red
    );
}


.kits-import-errors
> header
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.kits-import-errors
> header
span {
  color:
    var(
      --kits-red
    );

  font-size:
    7.8px;

  font-weight:
    900;

  letter-spacing:
    0.06em;
}


.kits-import-errors
> header
strong {
  color:
    var(
      --kits-red
    );

  font-size:
    11px;

  font-weight:
    900;
}


.kits-import-errors
> header
svg,
.kits-import-errors
> header
.icon {
  width:
    15px;

  height:
    15px;

  color:
    var(
      --kits-red
    );
}


/* =========================================================
   ERRORES · SCROLL
   JS NUEVO GENERA ARTICLE
   ========================================================= */

.kits-import-errors__list {
  display:
    grid;

  width:
    100%;

  min-width:
    0;

  max-height:
    210px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --kits-red-line
    )
    transparent;
}


.kits-import-errors__list::-webkit-scrollbar {
  width:
    6px;
}


.kits-import-errors__list::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-import-errors__list::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(
      --kits-red-line
    );
}


.kits-import-errors__list
> article {
  display:
    grid;

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

  align-items:
    start;

  gap:
    7px;

  width:
    100%;

  min-width:
    0;

  padding:
    8px
    10px;

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

  color:
    var(
      --kits-red
    );
}


.kits-import-errors__list
> article:last-child {
  border-bottom:
    0;
}


.kits-import-errors__list
> article
svg,
.kits-import-errors__list
> article
.icon {
  width:
    13px;

  height:
    13px;

  margin-top:
    2px;

  color:
    var(
      --kits-red
    );
}


.kits-import-errors__list
> article
> span {
  min-width:
    0;

  color:
    var(
      --kits-red
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}


.kits-import-errors__list
> article
> span
strong {
  display:
    inline;

  margin-right:
    5px;

  color:
    var(
      --kits-red
    );

  font-weight:
    900;
}


/* =========================================================
   PREVIEW · CONTENEDOR CON SCROLL
   ========================================================= */

.kits-import-table-wrap {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

  max-height:
    360px;

  overflow-x:
    auto;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.kits-import-table-wrap::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.kits-import-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.kits-import-table-wrap::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


.kits-import-table-wrap
.kits-table {
  min-width:
    820px;

  margin:
    0;
}


.kits-import-table-wrap
.kits-table
thead {
  position:
    sticky;

  top:
    0;

  z-index:
    6;
}


.kits-import-table-wrap
.kits-table
thead
th {
  position:
    sticky;

  top:
    0;

  z-index:
    6;

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


/* =========================================================
   PREVIEW · COMPONENTES
   CLASE DEL JS NUEVO
   ========================================================= */

.kits-import-components-preview {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    4px;

  width:
    100%;

  min-width:
    0;
}


.kits-import-components-preview
> span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    25px;

  max-width:
    100%;

  padding:
    0
    7px;

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

  border-radius:
    6px;

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

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.kits-import-components-preview
b {
  display:
    block;

  max-width:
    170px;

  overflow:
    hidden;

  color:
    var(
      --kits-text
    );

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

  font-size:
    8px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   RESULTADO IMPORTACIÓN
   ========================================================= */

.kits-import-result {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --kits-surface
    );

  overflow:
    hidden;
}


.kits-import-result
.kits-import-summary-grid {
  border-bottom:
    0;
}


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

.kits-detail--import
.kits-import-actions {
  position:
    sticky;

  bottom:
    -1px;

  z-index:
    30;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  width:
    100%;

  min-width:
    0;

  min-height:
    54px;

  margin:
    0;

  padding:
    8px;

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

  border-radius:
    9px;

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


/* =========================================================
   DARK · DROP Y RESULTADOS
   ========================================================= */

html[data-theme="dark"]
.kits-import-drop,
body.dark
.kits-import-drop,
body[data-theme="dark"]
.kits-import-drop {
  background:
    var(
      --kits-surface-2
    );

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

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


html[data-theme="dark"]
.kits-import-summary-grid
> article,
body.dark
.kits-import-summary-grid
> article,
body[data-theme="dark"]
.kits-import-summary-grid
> article {
  background:
    var(
      --kits-surface
    );
}


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

@media (
  max-width:
  820px
) {

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


  .kits-import-summary-grid
  > article {
    border-bottom:
      1px
      solid
      var(
        --kits-border-strong
      );
  }


  .kits-import-summary-grid
  > article:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .kits-import-summary-grid
  > article:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0;
  }


  .kits-import-errors__list {
    max-height:
      190px;
  }


  .kits-import-table-wrap {
    max-height:
      320px;
  }


  .kits-import-table-wrap
  .kits-table {
    min-width:
      700px;
  }

}


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

@media (
  max-width:
  620px
) {

  .kits-detail--import
  .kits-tab-panel {
    padding:
      7px;
  }


  .kits-import-drop {
    grid-template-columns:
      40px
      minmax(
        0,
        1fr
      );

    min-height:
      84px;

    margin:
      8px;

    padding:
      9px;
  }


  .kits-import-drop__icon {
    width:
      40px;

    height:
      40px;
  }


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


  .kits-import-summary-grid
  > article {
    min-height:
      64px;

    padding:
      8px;
  }


  .kits-import-summary-grid
  strong {
    font-size:
      18px;
  }


  .kits-import-errors {
    max-width:
      calc(
        100% -
        16px
      );

    margin:
      8px;
  }


  .kits-import-errors__list {
    max-height:
      170px;
  }


  .kits-import-table-wrap {
    max-height:
      300px;

    overflow-x:
      hidden;
  }


  .kits-import-table-wrap
  .kits-table {
    min-width:
      0;
  }


  .kits-import-table-wrap
  .kits-table,
  .kits-import-table-wrap
  .kits-table
  tbody,
  .kits-import-table-wrap
  .kits-table
  tr,
  .kits-import-table-wrap
  .kits-table
  td {
    display:
      block;

    width:
      100%;
  }


  .kits-import-table-wrap
  .kits-table
  thead {
    display:
      none;
  }


  .kits-import-table-wrap
  .kits-table
  tbody {
    display:
      grid;

    gap:
      7px;

    padding:
      7px;
  }


  .kits-import-table-wrap
  .kits-table
  tbody
  tr {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;

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

    border-radius:
      8px;

    background:
      var(
        --kits-surface
      );

    overflow:
      hidden;
  }


  .kits-import-table-wrap
  .kits-table
  tbody
  td {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    min-height:
      52px;

    padding:
      8px;

    border-right:
      0;

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


  .kits-import-table-wrap
  .kits-table
  tbody
  td:last-child {
    border-bottom:
      0;
  }


  .kits-import-table-wrap
  .kits-table
  tbody
  td::before {
    content:
      attr(
        data-label
      );

    display:
      block;

    margin-bottom:
      5px;

    color:
      var(
        --kits-muted
      );

    font-size:
      7.5px;

    font-weight:
      900;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


  .kits-import-components-preview {
    width:
      100%;
  }


  .kits-import-components-preview
  > span {
    max-width:
      100%;
  }


  .kits-import-components-preview
  b {
    max-width:
      190px;
  }


  .kits-detail--import
  .kits-import-actions {
    position:
      sticky;

    bottom:
      0;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  .kits-detail--import
  .kits-import-actions
  .kits-btn {
    width:
      100%;

    min-height:
      40px;
  }

}


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

@media (
  max-width:
  440px
) {

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


  .kits-import-summary-grid
  > article,
  .kits-import-summary-grid
  > article:nth-child(
    2n
  ),
  .kits-import-summary-grid
  > article:nth-last-child(
    -n + 2
  ) {
    border-right:
      0;

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


  .kits-import-summary-grid
  > article:last-child {
    border-bottom:
      0;
  }


  .kits-import-errors__list {
    max-height:
      150px;
  }


  .kits-import-table-wrap {
    max-height:
      270px;
  }


  .kits-import-drop {
    grid-template-columns:
      1fr;

    place-items:
      center;

    text-align:
      center;
  }


  .kits-import-drop
  > div
  > strong {
    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }

}