/* =========================================================
   WIRTZ HUB · RECURSOS
   CONTROL DE MÍNIMOS

   UBICACIÓN:
   frontend/src/pages/recursos/control-minimos/
   control-minimos.css

   CSS COMPLETO NUEVO
   PARTE 1 DE 3

   DISEÑO:
   - Técnico
   - Moderno
   - Compacto
   - Tipografía marcada
   - Divisiones visibles
   - Dark negro real
   - Sin glow
   - Sin blur
   - Animaciones rápidas
   - Responsive completo
   ========================================================= */


/* =========================================================
   01. VARIABLES · LIGHT
   ========================================================= */

:root {
  --cm-bg:
    #f2f3f4;

  --cm-surface:
    #ffffff;

  --cm-surface-2:
    #f7f8f9;

  --cm-surface-3:
    #eef0f2;

  --cm-surface-4:
    #e5e8eb;

  --cm-hover:
    #f0f2f4;

  --cm-active:
    #e9ecef;

  --cm-border-soft:
    #d9dde1;

  --cm-border:
    #c5cbd1;

  --cm-border-strong:
    #969fa8;

  --cm-border-dark:
    #747d86;

  --cm-text:
    #101214;

  --cm-text-strong:
    #000000;

  --cm-text-soft:
    #2f3438;

  --cm-text-muted:
    #5f676e;

  --cm-primary:
    #0a0a0a;

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

  --cm-primary-text:
    #ffffff;

  --cm-success-bg:
    rgba(
      21,
      128,
      61,
      0.08
    );

  --cm-success-border:
    rgba(
      21,
      128,
      61,
      0.38
    );

  --cm-success-text:
    #15703a;

  --cm-warning-bg:
    rgba(
      180,
      109,
      0,
      0.08
    );

  --cm-warning-border:
    rgba(
      180,
      109,
      0,
      0.40
    );

  --cm-warning-text:
    #8a5900;

  --cm-danger-bg:
    rgba(
      190,
      35,
      35,
      0.08
    );

  --cm-danger-border:
    rgba(
      190,
      35,
      35,
      0.40
    );

  --cm-danger-text:
    #b42323;

  --cm-info-bg:
    rgba(
      40,
      105,
      190,
      0.08
    );

  --cm-info-border:
    rgba(
      40,
      105,
      190,
      0.35
    );

  --cm-info-text:
    #245e9f;

  --cm-neutral-bg:
    #f1f2f3;

  --cm-neutral-border:
    #c8cdd2;

  --cm-neutral-text:
    #545b62;

  --cm-radius-xs:
    5px;

  --cm-radius-sm:
    7px;

  --cm-radius:
    9px;

  --cm-radius-lg:
    11px;

  --cm-radius-xl:
    13px;

  --cm-fast:
    70ms
    ease;

  --cm-transition:
    105ms
    ease;
}


/* =========================================================
   02. VARIABLES · DARK
   ========================================================= */

html[data-theme="dark"] {
  --cm-bg:
    #050505;

  --cm-surface:
    #090909;

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

  --cm-surface-3:
    #151515;

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

  --cm-hover:
    #131313;

  --cm-active:
    #1a1a1a;

  --cm-border-soft:
    #24282c;

  --cm-border:
    #353a3f;

  --cm-border-strong:
    #535b63;

  --cm-border-dark:
    #707981;

  --cm-text:
    #f1f2f3;

  --cm-text-strong:
    #ffffff;

  --cm-text-soft:
    #d0d4d7;

  --cm-text-muted:
    #a1a7ad;

  --cm-primary:
    #f5f5f5;

  --cm-primary-hover:
    #ffffff;

  --cm-primary-text:
    #050505;

  --cm-success-bg:
    rgba(
      74,
      222,
      128,
      0.08
    );

  --cm-success-border:
    rgba(
      74,
      222,
      128,
      0.35
    );

  --cm-success-text:
    #4ade80;

  --cm-warning-bg:
    rgba(
      251,
      191,
      36,
      0.08
    );

  --cm-warning-border:
    rgba(
      251,
      191,
      36,
      0.38
    );

  --cm-warning-text:
    #f4c84c;

  --cm-danger-bg:
    rgba(
      248,
      113,
      113,
      0.08
    );

  --cm-danger-border:
    rgba(
      248,
      113,
      113,
      0.38
    );

  --cm-danger-text:
    #f87171;

  --cm-info-bg:
    rgba(
      96,
      165,
      250,
      0.08
    );

  --cm-info-border:
    rgba(
      96,
      165,
      250,
      0.34
    );

  --cm-info-text:
    #8bbcff;

  --cm-neutral-bg:
    #151515;

  --cm-neutral-border:
    #353a3f;

  --cm-neutral-text:
    #c1c5c9;
}


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

.control-minimos-shell,
.control-minimos-shell *,
.control-minimos-shell *::before,
.control-minimos-shell *::after {
  box-sizing:
    border-box;

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


.control-minimos-shell {
  width:
    100%;

  min-width:
    0;

  background:
    var(
      --cm-bg
    );

  color:
    var(
      --cm-text
    );

  font-weight:
    700;
}


.control-minimos-content {
  width:
    100%;

  min-width:
    0;

  background:
    var(
      --cm-bg
    );

  overflow-x:
    hidden;
}


.control-minimos-page {
  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

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


.control-minimos-page
button,
.control-minimos-page
input,
.control-minimos-page
select,
.control-minimos-page
textarea {
  min-width:
    0;

  max-width:
    100%;

  font:
    inherit;
}


.control-minimos-page
button {
  appearance:
    none;

  -webkit-appearance:
    none;

  color:
    inherit;

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


.control-minimos-page
svg {
  display:
    block;

  width:
    14px;

  height:
    14px;

  flex:
    0
    0
    auto;

  stroke-width:
    2.2;

  pointer-events:
    none;
}


/* =========================================================
   04. CONTENEDOR
   ========================================================= */

.cm-page__inner {
  display:
    grid;

  align-content:
    start;

  gap:
    9px;

  width:
    100%;

  min-width:
    0;

  padding:
    9px;

  animation:
    cmPageEnter
    110ms
    ease
    both;
}


/* =========================================================
   05. EYEBROW
   ========================================================= */

.cm-eyebrow {
  display:
    block;

  margin:
    0
    0
    3px;

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

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1.1;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


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

.cm-page-head {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

  width:
    100%;

  min-width:
    0;

  padding:
    11px
    13px;

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

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

  background:
    var(
      --cm-surface
    );

  overflow:
    hidden;
}


.cm-page-head::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    14px;

  right:
    14px;

  height:
    1px;

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

  opacity:
    0.75;
}


/* =========================================================
   07. PAGE HEADER MAIN
   ========================================================= */

.cm-page-head__main {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;
}


.cm-page-head__icon {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    40px;

  width:
    40px;

  height:
    40px;

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

  border-radius:
    9px;

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

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


.cm-page-head__icon::before {
  content:
    "";

  position:
    absolute;

  top:
    5px;

  left:
    5px;

  width:
    6px;

  height:
    6px;

  border-top:
    1px
    solid
    currentColor;

  border-left:
    1px
    solid
    currentColor;

  opacity:
    0.55;
}


.cm-page-head__icon::after {
  content:
    "";

  position:
    absolute;

  right:
    5px;

  bottom:
    5px;

  width:
    6px;

  height:
    6px;

  border-right:
    1px
    solid
    currentColor;

  border-bottom:
    1px
    solid
    currentColor;

  opacity:
    0.55;
}


.cm-page-head__icon
svg {
  width:
    17px;

  height:
    17px;
}


.cm-page-head__content {
  min-width:
    0;
}


.cm-page-head__content
h1 {
  margin:
    0;

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

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

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.cm-page-head__content
p {
  max-width:
    760px;

  margin:
    5px
    0
    0;

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

  font-size:
    10.5px;

  font-weight:
    750;

  line-height:
    1.4;
}


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

.cm-page-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  min-width:
    0;
}


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

.cm-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    0
    10px;

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

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

  outline:
    none;

  background:
    var(
      --cm-surface
    );

  color:
    var(
      --cm-text
    );

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    none;

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


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

  background:
    var(
      --cm-hover
    );

  transform:
    translateY(
      -1px
    );
}


.cm-btn:active:not(
  :disabled
) {
  transform:
    translateY(
      0
    );
}


.cm-btn:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


.cm-btn
svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   10. BOTONES VARIANTES
   ========================================================= */

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

  background:
    var(
      --cm-primary
    );

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


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

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

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


.cm-btn--secondary {
  border-color:
    var(
      --cm-border-strong
    );

  background:
    var(
      --cm-surface
    );

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


.cm-btn--secondary:hover:not(
  :disabled
) {
  border-color:
    var(
      --cm-border-dark
    );

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


.cm-btn--ghost {
  border-color:
    var(
      --cm-border
    );

  background:
    transparent;

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


.cm-btn--ghost:hover:not(
  :disabled
) {
  border-color:
    var(
      --cm-border-strong
    );

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

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


.cm-btn--compact {
  min-height:
    31px;

  padding:
    0
    9px;

  font-size:
    9px;
}


.cm-btn__chevron {
  width:
    11px !important;

  height:
    11px !important;

  opacity:
    0.7;
}


/* =========================================================
   11. ICON BUTTON
   ========================================================= */

.cm-icon-btn {
  display:
    grid;

  place-items:
    center;

  width:
    32px;

  height:
    32px;

  min-width:
    32px;

  padding:
    0;

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

  border-radius:
    7px;

  background:
    var(
      --cm-surface
    );

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

  cursor:
    pointer;

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


.cm-icon-btn:hover {
  border-color:
    var(
      --cm-text
    );

  background:
    var(
      --cm-text
    );

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


/* =========================================================
   12. KPI GRID
   ========================================================= */

.cm-kpis {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --cm-surface
    );

  overflow:
    hidden;
}


/* =========================================================
   13. KPI
   ========================================================= */

.cm-kpi {
  position:
    relative;

  display:
    grid;

  grid-template-rows:
    auto
    1fr;

  align-content:
    stretch;

  gap:
    8px;

  min-width:
    0;

  min-height:
    82px;

  padding:
    9px
    10px;

  border:
    0;

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

  border-radius:
    0;

  background:
    var(
      --cm-surface
    );

  color:
    var(
      --cm-text
    );

  text-align:
    left;

  cursor:
    pointer;

  box-shadow:
    none;

  overflow:
    hidden;

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


.cm-kpi:last-child {
  border-right:
    0;
}


.cm-kpi:hover {
  background:
    var(
      --cm-hover
    );
}


.cm-kpi::before {
  content:
    "";

  position:
    absolute;

  top:
    9px;

  bottom:
    9px;

  left:
    0;

  width:
    2px;

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


/* =========================================================
   14. KPI HEADER
   ========================================================= */

.cm-kpi__head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.cm-kpi__icon {
  display:
    grid;

  place-items:
    center;

  width:
    29px;

  height:
    29px;

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

  border-radius:
    7px;

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

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


.cm-kpi__icon
svg {
  width:
    13px;

  height:
    13px;
}


.cm-kpi__label {
  overflow:
    hidden;

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

  font-size:
    8.5px;

  font-weight:
    900;

  line-height:
    1.1;

  letter-spacing:
    0.035em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* =========================================================
   15. KPI BODY
   ========================================================= */

.cm-kpi__body {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}


.cm-kpi__body
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    21px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.cm-kpi__body
span {
  max-width:
    120px;

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.25;

  text-align:
    right;
}


/* =========================================================
   16. KPI ARROW
   ========================================================= */

.cm-kpi__arrow {
  position:
    absolute;

  top:
    8px;

  right:
    8px;

  display:
    grid;

  place-items:
    center;

  width:
    20px;

  height:
    20px;

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

  border-radius:
    5px;

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

  opacity:
    0;

  transform:
    translateY(
      2px
    );

  transition:
    opacity
      var(
        --cm-fast
      ),
    transform
      var(
        --cm-fast
      );
}


.cm-kpi:hover
.cm-kpi__arrow {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}


.cm-kpi__arrow
svg {
  width:
    10px;

  height:
    10px;
}


/* =========================================================
   17. KPI TONES
   ========================================================= */

.cm-kpi--warning::before {
  background:
    var(
      --cm-warning-text
    );
}


.cm-kpi--warning
.cm-kpi__icon {
  border-color:
    var(
      --cm-warning-border
    );

  background:
    var(
      --cm-warning-bg
    );

  color:
    var(
      --cm-warning-text
    );
}


.cm-kpi--danger::before {
  background:
    var(
      --cm-danger-text
    );
}


.cm-kpi--danger
.cm-kpi__icon {
  border-color:
    var(
      --cm-danger-border
    );

  background:
    var(
      --cm-danger-bg
    );

  color:
    var(
      --cm-danger-text
    );
}


.cm-kpi--success::before {
  background:
    var(
      --cm-success-text
    );
}


.cm-kpi--success
.cm-kpi__icon {
  border-color:
    var(
      --cm-success-border
    );

  background:
    var(
      --cm-success-bg
    );

  color:
    var(
      --cm-success-text
    );
}


.cm-kpi--info::before {
  background:
    var(
      --cm-info-text
    );
}


.cm-kpi--info
.cm-kpi__icon {
  border-color:
    var(
      --cm-info-border
    );

  background:
    var(
      --cm-info-bg
    );

  color:
    var(
      --cm-info-text
    );
}


/* =========================================================
   18. WORKSPACE
   ========================================================= */

.cm-workspace {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --cm-surface
    );

  overflow:
    hidden;
}


.cm-workspace__tabs,
.cm-workspace__content,
.cm-tab-content {
  min-width:
    0;

  max-width:
    100%;
}


.cm-tab-content {
  animation:
    cmTabEnter
    90ms
    ease
    both;
}


/* =========================================================
   19. TABS
   ========================================================= */

.cm-tabs {
  display:
    flex;

  align-items:
    stretch;

  gap:
    0;

  width:
    100%;

  min-width:
    0;

  min-height:
    42px;

  margin:
    0;

  padding:
    0;

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

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


.cm-tab {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-width:
    0;

  min-height:
    42px;

  padding:
    0
    13px;

  border:
    0;

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

  border-radius:
    0;

  background:
    transparent;

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

  cursor:
    pointer;

  font-size:
    9.5px;

  font-weight:
    900;

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


.cm-tab:hover {
  background:
    var(
      --cm-hover
    );

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


.cm-tab.is-active {
  background:
    var(
      --cm-surface
    );

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


.cm-tab.is-active::after {
  content:
    "";

  position:
    absolute;

  left:
    9px;

  right:
    9px;

  bottom:
    0;

  height:
    2px;

  background:
    var(
      --cm-text-strong
    );
}


.cm-tab
svg {
  width:
    12px;

  height:
    12px;
}


.cm-tab
strong {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    21px;

  height:
    19px;

  padding:
    0
    5px;

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

  border-radius:
    999px;

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

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

  font-size:
    8px;

  font-weight:
    900;
}


/* =========================================================
   20. TOOLBAR
   ========================================================= */

.cm-toolbar {
  display:
    grid;

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

  align-items:
    end;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    8px;

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

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


/* =========================================================
   21. SEARCH
   ========================================================= */

.cm-toolbar__search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-width:
    0;

  max-width:
    none;
}


.cm-toolbar__search
> svg {
  position:
    absolute;

  left:
    10px;

  z-index:
    2;

  width:
    13px;

  height:
    13px;

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

  pointer-events:
    none;
}


.cm-toolbar__search
input {
  width:
    100%;

  min-width:
    0;

  height:
    35px;

  padding:
    0
    34px
    0
    31px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --cm-surface
    );

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

  font-size:
    9.5px;

  font-weight:
    800;

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


.cm-toolbar__search
input::placeholder {
  color:
    var(
      --cm-text-muted
    );

  font-weight:
    750;
}


.cm-toolbar__search
input:hover {
  border-color:
    var(
      --cm-border-dark
    );
}


.cm-toolbar__search
input:focus {
  border-color:
    var(
      --cm-text
    );

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


/* =========================================================
   22. SEARCH CLEAR
   ========================================================= */

.cm-search-clear {
  position:
    absolute;

  right:
    4px;

  display:
    grid;

  place-items:
    center;

  width:
    27px;

  height:
    27px;

  padding:
    0;

  border:
    0;

  border-radius:
    5px;

  background:
    transparent;

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

  cursor:
    pointer;
}


.cm-search-clear:hover {
  background:
    var(
      --cm-surface-3
    );

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


.cm-search-clear
svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   23. FILTERS
   ========================================================= */

.cm-toolbar__filters {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  min-width:
    0;
}


/* =========================================================
   24. CAMPOS
   ========================================================= */

.cm-field {
  display:
    grid;

  align-content:
    start;

  gap:
    4px;

  min-width:
    0;

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


.cm-field
> span {
  color:
    var(
      --cm-text-soft
    );

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}


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

  min-width:
    0;

  min-height:
    35px;

  padding:
    0
    9px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --cm-surface
    );

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

  font-size:
    9.5px;

  font-weight:
    800;

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


.cm-field
textarea {
  min-height:
    78px;

  padding:
    8px;

  resize:
    vertical;
}


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


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

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


.cm-field
small {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.3;
}


.cm-field--compact {
  min-width:
    120px;
}


.cm-field--compact
select,
.cm-field--compact
input {
  min-height:
    35px;

  padding:
    0
    8px;

  font-size:
    9px;
}


.cm-field--readonly {
  min-height:
    66px;

  padding:
    8px;

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

  border-radius:
    7px;

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


.cm-field--readonly
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    10px;

  font-weight:
    900;
}


/* =========================================================
   25. SELECTION BAR
   ========================================================= */

.cm-selection-bar {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  width:
    calc(
      100% -
      16px
    );

  min-width:
    0;

  margin:
    8px;

  padding:
    8px;

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

  border-radius:
    8px;

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

  animation:
    cmSelectionEnter
    90ms
    ease
    both;
}


/* =========================================================
   26. SELECTION INFO
   ========================================================= */

.cm-selection-bar__info {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.cm-selection-bar__icon {
  display:
    grid;

  place-items:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0
    0
    29px;

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

  border-radius:
    7px;

  background:
    var(
      --cm-surface
    );

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


.cm-selection-bar__info
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.cm-selection-bar__info
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.cm-selection-bar__info
span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


.cm-selection-bar__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;
}


/* =========================================================
   27. PANEL
   ========================================================= */

.cm-panel {
  width:
    100%;

  min-width:
    0;

  margin:
    0;

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

  background:
    var(
      --cm-surface
    );

  overflow:
    hidden;
}


.cm-panel__head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  min-height:
    52px;

  padding:
    8px
    10px;

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

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


/* =========================================================
   28. PANEL TITLE
   ========================================================= */

.cm-panel__title {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.cm-panel__icon {
  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    29px;

  width:
    29px;

  height:
    29px;

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

  border-radius:
    7px;

  background:
    var(
      --cm-surface
    );

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


.cm-panel__icon
svg {
  width:
    13px;

  height:
    13px;
}


.cm-panel__title
> div {
  min-width:
    0;
}


.cm-panel__title
h2 {
  margin:
    0;

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

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1.15;

  letter-spacing:
    -0.015em;
}


.cm-panel__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}


.cm-panel__counter {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    8.5px;

  font-weight:
    850;
}


.cm-panel__body {
  min-width:
    0;

  padding:
    10px;
}


.cm-panel__body--flush {
  padding:
    0;
}


/* =========================================================
   29. STATES
   ========================================================= */

.cm-state {
  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  min-height:
    130px;

  margin:
    9px;

  padding:
    14px;

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

  border-radius:
    10px;

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


.cm-state__icon {
  display:
    grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

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

  border-radius:
    9px;

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

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


.cm-state__icon
svg {
  width:
    17px;

  height:
    17px;
}


.cm-state__content {
  min-width:
    0;
}


.cm-state__content
strong {
  display:
    block;

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

  font-size:
    11px;

  font-weight:
    900;
}


.cm-state__content
p {
  margin:
    3px
    0
    0;

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

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.4;
}


.cm-state--error {
  border-color:
    var(
      --cm-danger-border
    );
}


.cm-state--error
.cm-state__icon {
  border-color:
    var(
      --cm-danger-border
    );

  background:
    var(
      --cm-danger-bg
    );

  color:
    var(
      --cm-danger-text
    );
}


/* =========================================================
   30. EMPTY
   ========================================================= */

.cm-empty {
  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    6px;

  min-height:
    220px;

  padding:
    24px;

  text-align:
    center;
}


.cm-empty__icon {
  display:
    grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  margin-bottom:
    2px;

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

  border-radius:
    9px;

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

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


.cm-empty__icon
svg {
  width:
    17px;

  height:
    17px;
}


.cm-empty
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    11px;

  font-weight:
    900;
}


.cm-empty
p {
  max-width:
    360px;

  margin:
    0
    0
    6px;

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

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.4;
}


/* =========================================================
   31. HELPERS
   ========================================================= */

.is-hidden {
  display:
    none !important;
}


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


/* =========================================================
   32. ANIMACIONES
   ========================================================= */

@keyframes cmPageEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        2px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes cmTabEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        2px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes cmSelectionEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        -2px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


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


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

   PARTE 2:
   - Tabla principal
   - Mobile cards
   - SKU
   - Producto
   - Estados
   - Alertas
   - Paginación
   - Historial
   ========================================================= *//* =========================================================
   33. TABLE SHELL
   ========================================================= */

.cm-table-shell {
  width:
    100%;

  min-width:
    0;

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


.cm-table-scroll {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  overscroll-behavior-x:
    contain;

  scrollbar-width:
    thin;

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


.cm-table-scroll::-webkit-scrollbar {
  height:
    7px;
}


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


.cm-table-scroll::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    var(
      --cm-surface
    );

  border-radius:
    999px;

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


/* =========================================================
   34. TABLE
   ========================================================= */

.cm-table {
  width:
    100%;

  min-width:
    1120px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  background:
    var(
      --cm-surface
    );

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


.cm-table
thead {
  position:
    relative;

  z-index:
    2;
}


.cm-table
thead
th {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  height:
    38px;

  padding:
    8px
    9px;

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

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

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

  font-size:
    7.8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.045em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.cm-table
thead
th
+
th {
  border-left:
    1px
    solid
    var(
      --cm-border
    );
}


.cm-table
tbody
td {
  padding:
    8px
    9px;

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

  color:
    var(
      --cm-text
    );

  font-size:
    9px;

  font-weight:
    780;

  line-height:
    1.3;

  vertical-align:
    middle;
}


.cm-table
tbody
td
+
td {
  border-left:
    1px
    solid
    var(
      --cm-border-soft
    );
}


.cm-table
tbody
tr {
  position:
    relative;

  background:
    var(
      --cm-surface
    );

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


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


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


/* =========================================================
   35. FILA PRODUCTO · ESTADO
   ========================================================= */

.cm-product-row::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    2px;

  background:
    transparent;

  pointer-events:
    none;
}


.cm-product-row.is-danger::before {
  background:
    var(
      --cm-danger-text
    );
}


.cm-product-row.is-warning::before {
  background:
    var(
      --cm-warning-text
    );
}


.cm-product-row.is-success::before {
  background:
    var(
      --cm-success-text
    );

  opacity:
    0.7;
}


.cm-product-row.is-neutral::before {
  background:
    var(
      --cm-border-strong
    );
}


.cm-product-row.is-selected {
  background:
    var(
      --cm-active
    );
}


.cm-product-row.is-selected:hover {
  background:
    var(
      --cm-active
    );
}


/* =========================================================
   36. COLUMNAS
   ========================================================= */

.cm-cell-check {
  width:
    42px;

  min-width:
    42px;

  max-width:
    42px;

  text-align:
    center !important;
}


.cm-cell-sku {
  min-width:
    138px;
}


.cm-cell-product {
  min-width:
    230px;

  max-width:
    340px;
}


.cm-cell-category {
  min-width:
    135px;

  max-width:
    200px;
}


.cm-cell-number {
  min-width:
    78px;

  text-align:
    right !important;

  font-variant-numeric:
    tabular-nums;
}


.cm-th-number {
  text-align:
    right !important;
}


.cm-cell-status {
  min-width:
    125px;
}


.cm-cell-alert {
  min-width:
    140px;
}


.cm-cell-date {
  min-width:
    120px;
}


.cm-cell-actions,
.cm-th-actions {
  width:
    68px;

  min-width:
    68px;

  text-align:
    center !important;
}


/* =========================================================
   37. CHECKBOX
   ========================================================= */

.cm-checkbox {
  position:
    relative;

  display:
    inline-grid;

  place-items:
    center;

  width:
    21px;

  height:
    21px;

  cursor:
    pointer;

  user-select:
    none;
}


.cm-checkbox
input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.cm-checkbox
> span {
  display:
    grid;

  place-items:
    center;

  width:
    17px;

  height:
    17px;

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

  border-radius:
    4px;

  background:
    var(
      --cm-surface
    );

  color:
    transparent;

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


.cm-checkbox
> span
svg {
  width:
    10px;

  height:
    10px;

  stroke-width:
    3;
}


.cm-checkbox:hover
> span {
  border-color:
    var(
      --cm-text
    );
}


.cm-checkbox
input:checked
+
span {
  border-color:
    var(
      --cm-text-strong
    );

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

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


html[data-theme="dark"]
.cm-checkbox
input:checked
+
span {
  color:
    #000000;
}


/* =========================================================
   38. SKU
   ========================================================= */

.cm-sku {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.cm-sku
strong {
  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    900;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cm-sku
span {
  overflow:
    hidden;

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

  font-size:
    7.8px;

  font-weight:
    750;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   39. PRODUCTO
   ========================================================= */

.cm-product {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.cm-product--compact {
  grid-template-columns:
    26px
    minmax(
      0,
      1fr
    );

  gap:
    6px;
}


.cm-product__icon {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

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

  border-radius:
    6px;

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

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


.cm-product--compact
.cm-product__icon {
  width:
    26px;

  height:
    26px;
}


.cm-product__icon
svg {
  width:
    12px;

  height:
    12px;
}


.cm-product__content {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.cm-product__content
strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    900;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cm-product__content
span {
  overflow:
    hidden;

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

  font-size:
    7.8px;

  font-weight:
    750;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   40. CATEGORÍA
   ========================================================= */

.cm-category {
  display:
    inline-block;

  max-width:
    175px;

  overflow:
    hidden;

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

  font-size:
    8.5px;

  font-weight:
    850;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   41. STOCK
   ========================================================= */

.cm-stock-value {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   42. INLINE VALUE
   ========================================================= */

.cm-inline-value {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;

  min-width:
    44px;

  min-height:
    27px;

  padding:
    0
    6px;

  border:
    1px
    solid
    transparent;

  border-radius:
    5px;

  background:
    transparent;

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

  cursor:
    pointer;

  font-size:
    10px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;

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


.cm-inline-value
svg {
  width:
    10px;

  height:
    10px;

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

  opacity:
    0;

  transition:
    opacity
      var(
        --cm-fast
      );
}


.cm-inline-value:hover {
  border-color:
    var(
      --cm-border
    );

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


.cm-inline-value:hover
svg {
  opacity:
    1;
}


/* =========================================================
   43. DIFERENCIA
   ========================================================= */

.cm-difference {
  display:
    inline-block;

  min-width:
    38px;

  text-align:
    right;

  font-size:
    10px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


.cm-difference.is-negative {
  color:
    var(
      --cm-danger-text
    );
}


.cm-difference.is-positive {
  color:
    var(
      --cm-success-text
    );
}


.cm-difference.is-zero {
  color:
    var(
      --cm-text-muted
    );
}


/* =========================================================
   44. STATUS BADGE
   ========================================================= */

.cm-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    24px;

  padding:
    0
    7px;

  border:
    1px
    solid
    var(
      --cm-neutral-border
    );

  border-radius:
    6px;

  background:
    var(
      --cm-neutral-bg
    );

  color:
    var(
      --cm-neutral-text
    );

  font-size:
    7.8px;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;
}


.cm-status
svg {
  width:
    10px;

  height:
    10px;

  stroke-width:
    2.5;
}


.cm-status.is-success {
  border-color:
    var(
      --cm-success-border
    );

  background:
    var(
      --cm-success-bg
    );

  color:
    var(
      --cm-success-text
    );
}


.cm-status.is-warning {
  border-color:
    var(
      --cm-warning-border
    );

  background:
    var(
      --cm-warning-bg
    );

  color:
    var(
      --cm-warning-text
    );
}


.cm-status.is-danger {
  border-color:
    var(
      --cm-danger-border
    );

  background:
    var(
      --cm-danger-bg
    );

  color:
    var(
      --cm-danger-text
    );
}


.cm-status.is-neutral {
  border-color:
    var(
      --cm-neutral-border
    );

  background:
    var(
      --cm-neutral-bg
    );

  color:
    var(
      --cm-neutral-text
    );
}


/* =========================================================
   45. ALERT STATE
   ========================================================= */

.cm-alert-state {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    24px;

  padding:
    0
    7px;

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

  border-radius:
    6px;

  font-size:
    7.8px;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;
}


.cm-alert-state
svg {
  width:
    10px;

  height:
    10px;

  stroke-width:
    2.4;
}


.cm-alert-state.is-enabled {
  border-color:
    var(
      --cm-info-border
    );

  background:
    var(
      --cm-info-bg
    );

  color:
    var(
      --cm-info-text
    );
}


.cm-alert-state.is-disabled {
  border-color:
    var(
      --cm-border
    );

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

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


/* =========================================================
   46. DATE
   ========================================================= */

.cm-date {
  color:
    var(
      --cm-text-soft
    );

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.2;

  white-space:
    nowrap;
}


.cm-date-stack {
  display:
    grid;

  gap:
    2px;
}


.cm-date-stack
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    8.5px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.cm-date-stack
span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


/* =========================================================
   47. EMAIL
   ========================================================= */

.cm-email {
  display:
    inline-block;

  max-width:
    220px;

  overflow:
    hidden;

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

  font-size:
    8.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   48. ROW ACTION
   ========================================================= */

.cm-row-action {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  padding:
    0;

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

  border-radius:
    6px;

  background:
    var(
      --cm-surface
    );

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

  cursor:
    pointer;

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


.cm-row-action:hover {
  border-color:
    var(
      --cm-text
    );

  background:
    var(
      --cm-text
    );

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


.cm-row-action
svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   49. ERROR DETAIL
   ========================================================= */

.cm-error-detail {
  display:
    grid;

  place-items:
    center;

  width:
    27px;

  height:
    27px;

  padding:
    0;

  border:
    1px
    solid
    var(
      --cm-danger-border
    );

  border-radius:
    6px;

  background:
    var(
      --cm-danger-bg
    );

  color:
    var(
      --cm-danger-text
    );

  cursor:
    pointer;
}


.cm-error-detail:hover {
  border-color:
    var(
      --cm-danger-text
    );
}


.cm-error-detail
svg {
  width:
    11px;

  height:
    11px;
}


/* =========================================================
   50. PAGINACIÓN
   ========================================================= */

.cm-pagination {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  padding:
    8px
    10px;

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

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


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

  font-size:
    8.5px;

  font-weight:
    800;
}


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

  font-weight:
    900;
}


.cm-pagination__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


.cm-pagination__btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    29px;

  padding:
    0
    8px;

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

  border-radius:
    6px;

  background:
    var(
      --cm-surface
    );

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

  cursor:
    pointer;

  font-size:
    8.5px;

  font-weight:
    900;

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


.cm-pagination__btn:hover:not(
  :disabled
) {
  border-color:
    var(
      --cm-text
    );

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


.cm-pagination__btn:disabled {
  cursor:
    not-allowed;

  opacity:
    0.38;
}


.cm-pagination__btn
svg {
  width:
    10px;

  height:
    10px;
}


.cm-pagination__current {
  padding:
    0
    4px;

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

  font-size:
    8.5px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.cm-pagination__current
strong {
  color:
    var(
      --cm-text-strong
    );

  font-weight:
    900;
}


/* =========================================================
   51. HISTORY SUMMARY
   ========================================================= */

.cm-history-summary {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

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


.cm-history-summary
article {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  min-height:
    64px;

  padding:
    8px;

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

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


.cm-history-summary
article:last-child {
  border-right:
    0;
}


.cm-history-summary__icon {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

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

  border-radius:
    6px;

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

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


.cm-history-summary__icon
svg {
  width:
    12px;

  height:
    12px;
}


.cm-history-summary
article
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.cm-history-summary
article
span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    7.8px;

  font-weight:
    900;

  line-height:
    1;
}


.cm-history-summary
article
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    15px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.03em;
}


/* =========================================================
   52. HISTORY TABLE
   ========================================================= */

.cm-table--history {
  min-width:
    1320px;
}


.cm-table--history
tbody
td {
  padding-top:
    8px;

  padding-bottom:
    8px;
}


/* =========================================================
   53. MOBILE TABLE · BASE
   ========================================================= */

@media (
  max-width:
  820px
) {

  .cm-table-scroll {
    padding:
      7px;

    overflow:
      hidden;

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


  .cm-table,
  .cm-table--history {
    width:
      100%;

    min-width:
      0;
  }


  .cm-table
  thead {
    display:
      none;
  }


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

    width:
      100%;
  }


  .cm-table
  tbody {
    display:
      grid;

    gap:
      8px;
  }


  .cm-table
  tbody
  tr {
    display:
      grid;

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

    width:
      100%;

    min-width:
      0;

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

    border-radius:
      9px;

    background:
      var(
        --cm-surface
      );

    overflow:
      hidden;
  }


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


  .cm-table
  tbody
  td,
  .cm-table
  tbody
  td
  +
  td {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    width:
      100%;

    min-width:
      0;

    max-width:
      none;

    min-height:
      56px;

    padding:
      8px;

    border-left:
      0;

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

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

    text-align:
      left !important;

    overflow:
      visible;
  }


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


  .cm-table
  tbody
  td::before {
    display:
      block;

    width:
      100%;

    margin-bottom:
      4px;

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

    font-size:
      7px;

    font-weight:
      900;

    line-height:
      1;

    letter-spacing:
      0.055em;

    text-transform:
      uppercase;
  }


  .cm-table
  tbody
  td:nth-child(
    1
  )::before {
    content:
      "Seleccionar";
  }


  .cm-table
  tbody
  td:nth-child(
    2
  )::before {
    content:
      "SKU";
  }


  .cm-table
  tbody
  td:nth-child(
    3
  )::before {
    content:
      "Producto";
  }


  .cm-table
  tbody
  td:nth-child(
    4
  )::before {
    content:
      "Categoría";
  }


  .cm-table
  tbody
  td:nth-child(
    5
  )::before {
    content:
      "Stock";
  }


  .cm-table
  tbody
  td:nth-child(
    6
  )::before {
    content:
      "Mínimo";
  }


  .cm-table
  tbody
  td:nth-child(
    7
  )::before {
    content:
      "Diferencia";
  }


  .cm-table
  tbody
  td:nth-child(
    8
  )::before {
    content:
      "Estado";
  }


  .cm-table
  tbody
  td:nth-child(
    9
  )::before {
    content:
      "Alerta";
  }


  .cm-table
  tbody
  td:nth-child(
    10
  )::before {
    content:
      "Debajo desde";
  }


  .cm-table
  tbody
  td:nth-child(
    11
  )::before {
    content:
      "Acciones";
  }


  .cm-table
  tbody
  td:nth-child(
    3
  ) {
    grid-column:
      1
      /
      -1;

    min-height:
      68px;

    border-right:
      0;
  }


  .cm-table
  tbody
  td:nth-child(
    8
  ),
  .cm-table
  tbody
  td:nth-child(
    9
  ) {
    min-height:
      60px;
  }


  .cm-table
  tbody
  td:nth-child(
    11
  ) {
    grid-column:
      1
      /
      -1;

    display:
      grid;

    grid-template-columns:
      1fr;

    border-right:
      0;

    border-bottom:
      0;
  }


  .cm-table
  tbody
  td:nth-child(
    11
  )::before {
    margin-bottom:
      5px;
  }


  .cm-row-action {
    width:
      100%;

    height:
      38px;
  }


  .cm-product {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );

    width:
      100%;
  }


  .cm-product__icon {
    width:
      34px;

    height:
      34px;
  }


  .cm-product__content
  strong {
    font-size:
      10px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      initial;
  }


  .cm-sku
  strong {
    white-space:
      normal;
  }


  .cm-category,
  .cm-date,
  .cm-email {
    max-width:
      100%;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .cm-stock-value,
  .cm-inline-value,
  .cm-difference {
    font-size:
      10.5px;
  }


  .cm-status,
  .cm-alert-state {
    min-height:
      27px;

    font-size:
      8px;
  }


  .cm-cell-number {
    text-align:
      left !important;
  }

}


/* =========================================================
   54. MOBILE HISTORY TABLE
   ========================================================= */

@media (
  max-width:
  820px
) {

  .cm-table--history
  tbody
  td:nth-child(
    1
  )::before {
    content:
      "Detección";
  }


  .cm-table--history
  tbody
  td:nth-child(
    2
  )::before {
    content:
      "SKU";
  }


  .cm-table--history
  tbody
  td:nth-child(
    3
  )::before {
    content:
      "Producto";
  }


  .cm-table--history
  tbody
  td:nth-child(
    4
  )::before {
    content:
      "Stock";
  }


  .cm-table--history
  tbody
  td:nth-child(
    5
  )::before {
    content:
      "Mínimo";
  }


  .cm-table--history
  tbody
  td:nth-child(
    6
  )::before {
    content:
      "Diferencia";
  }


  .cm-table--history
  tbody
  td:nth-child(
    7
  )::before {
    content:
      "Tipo";
  }


  .cm-table--history
  tbody
  td:nth-child(
    8
  )::before {
    content:
      "Estado";
  }


  .cm-table--history
  tbody
  td:nth-child(
    9
  )::before {
    content:
      "Email";
  }


  .cm-table--history
  tbody
  td:nth-child(
    10
  )::before {
    content:
      "Enviado";
  }


  .cm-table--history
  tbody
  td:nth-child(
    11
  )::before {
    content:
      "Error";
  }


  .cm-table--history
  tbody
  td:nth-child(
    3
  ) {
    grid-column:
      1
      /
      -1;
  }


  .cm-table--history
  tbody
  td:nth-child(
    11
  ) {
    grid-column:
      1
      /
      -1;

    display:
      flex;
  }

}


/* =========================================================
   55. RESPONSIVE HISTORY SUMMARY
   ========================================================= */

@media (
  max-width:
  1100px
) {

  .cm-history-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .cm-history-summary
  article {
    border-bottom:
      1px
      solid
      var(
        --cm-border-strong
      );
  }


  .cm-history-summary
  article:nth-child(
    3n
  ) {
    border-right:
      0;
  }

}


@media (
  max-width:
  700px
) {

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


  .cm-history-summary
  article,
  .cm-history-summary
  article:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --cm-border-strong
      );
  }


  .cm-history-summary
  article:nth-child(
    2n
  ) {
    border-right:
      0;
  }

}


/* =========================================================
   56. RESPONSIVE PAGINACIÓN
   ========================================================= */

@media (
  max-width:
  700px
) {

  .cm-pagination {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  .cm-pagination__actions {
    justify-content:
      space-between;

    width:
      100%;
  }


  .cm-pagination__btn {
    flex:
      1
      1
      0;
  }


  .cm-pagination__current {
    flex:
      0
      0
      auto;
  }

}


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

   PARTE 3:
   - Modales
   - formularios
   - switches
   - segmentados
   - dropdowns
   - toast
   - responsive general
   - header mobile
   - KPI responsive
   - toolbar responsive
   - animaciones finales
   ========================================================= *//* =========================================================
   57. BODY · MODAL ABIERTO
   ========================================================= */

body.control-minimos-modal-open {
  overflow:
    hidden !important;
}


/* =========================================================
   58. MODAL LAYER
   ========================================================= */

.cm-modal-layer {
  position:
    fixed;

  inset:
    0;

  z-index:
    2147482000;

  display:
    grid;

  place-items:
    center;

  width:
    100vw;

  height:
    100dvh;

  padding:
    14px;

  pointer-events:
    none;

  overflow:
    hidden;

  isolation:
    isolate;
}


.cm-modal-layer:empty {
  display:
    none;
}


/* =========================================================
   59. MODAL BACKDROP
   ========================================================= */

.cm-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  width:
    100%;

  height:
    100%;

  border:
    0;

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

  pointer-events:
    auto;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  animation:
    cmBackdropEnter
    80ms
    ease
    both;
}


/* =========================================================
   60. MODAL BASE
   ========================================================= */

.cm-modal {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

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

  min-width:
    0;

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

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

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

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

  background:
    var(
      --cm-surface
    );

  color:
    var(
      --cm-text
    );

  overflow:
    hidden;

  pointer-events:
    auto;

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

  animation:
    cmModalEnter
    100ms
    ease-out
    both;
}


.cm-modal--small {
  width:
    min(
      480px,
      calc(
        100vw -
        28px
      )
    );
}


.cm-modal--medium {
  width:
    min(
      680px,
      calc(
        100vw -
        28px
      )
    );
}


.cm-modal--product {
  width:
    min(
      860px,
      calc(
        100vw -
        28px
      )
    );
}


/* =========================================================
   61. MODAL HEADER
   ========================================================= */

.cm-modal__head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  flex:
    0
    0
    auto;

  min-height:
    58px;

  padding:
    9px
    10px;

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

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


.cm-modal__identity {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.cm-modal__icon {
  display:
    grid;

  place-items:
    center;

  width:
    32px;

  height:
    32px;

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

  border-radius:
    7px;

  background:
    var(
      --cm-surface
    );

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


.cm-modal__icon
svg {
  width:
    14px;

  height:
    14px;
}


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


.cm-modal__identity
h2 {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    13px;

  font-weight:
    900;

  line-height:
    1.15;

  letter-spacing:
    -0.02em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   62. MODAL BODY
   ========================================================= */

.cm-modal__body {
  min-width:
    0;

  min-height:
    0;

  flex:
    1
    1
    auto;

  padding:
    10px;

  background:
    var(
      --cm-bg
    );

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.cm-modal__body::-webkit-scrollbar {
  width:
    6px;
}


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


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

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


/* =========================================================
   63. MODAL FOOTER
   ========================================================= */

.cm-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  flex:
    0
    0
    auto;

  min-height:
    52px;

  padding:
    8px
    10px;

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

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


/* =========================================================
   64. MODAL LOADING
   ========================================================= */

.cm-modal-loading {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-height:
    100px;

  padding:
    10px;
}


.cm-modal-loading
> span {
  display:
    grid;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

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

  border-radius:
    8px;

  background:
    var(
      --cm-surface
    );

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


.cm-modal-loading
strong {
  display:
    block;

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

  font-size:
    10.5px;

  font-weight:
    900;
}


.cm-modal-loading
p {
  margin:
    3px
    0
    0;

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

  font-size:
    8.5px;

  font-weight:
    750;

  line-height:
    1.35;
}


/* =========================================================
   65. PRODUCT MODAL
   ========================================================= */

.cm-product-modal {
  display:
    grid;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   66. PRODUCT OVERVIEW
   ========================================================= */

.cm-product-overview {
  display:
    grid;

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

  width:
    100%;

  min-width:
    0;

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

  border-radius:
    9px;

  background:
    var(
      --cm-surface
    );

  overflow:
    hidden;
}


.cm-product-overview
article {
  display:
    grid;

  align-content:
    center;

  gap:
    4px;

  min-width:
    0;

  min-height:
    66px;

  padding:
    8px
    9px;

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

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


.cm-product-overview
article:last-child {
  border-right:
    0;
}


.cm-product-overview
article
> span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    7.5px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


.cm-product-overview
article
> strong {
  margin:
    0;

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

  font-size:
    16px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.03em;
}


/* =========================================================
   67. FORM
   ========================================================= */

.cm-form {
  display:
    grid;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   68. FORM SECTION
   ========================================================= */

.cm-form-section {
  width:
    100%;

  min-width:
    0;

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

  border-radius:
    9px;

  background:
    var(
      --cm-surface
    );

  overflow:
    hidden;
}


.cm-form-section__head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-height:
    46px;

  margin:
    0;

  padding:
    7px
    8px;

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

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


.cm-form-section__icon {
  display:
    grid;

  place-items:
    center;

  width:
    29px;

  height:
    29px;

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

  border-radius:
    6px;

  background:
    var(
      --cm-surface
    );

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


.cm-form-section__icon
svg {
  width:
    12px;

  height:
    12px;
}


.cm-form-section__head
> div {
  min-width:
    0;
}


.cm-form-section__head
h3 {
  margin:
    0;

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

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1.15;
}


/* =========================================================
   69. FORM GRID
   ========================================================= */

.cm-form-grid {
  display:
    grid;

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

  gap:
    8px;

  padding:
    9px;
}


/* =========================================================
   70. TOGGLE ROW
   ========================================================= */

.cm-toggle-row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  margin:
    9px;

  padding:
    9px;

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

  border-radius:
    8px;

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


.cm-toggle-row
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.cm-toggle-row
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.cm-toggle-row
span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.3;
}


/* =========================================================
   71. SWITCH
   ========================================================= */

.cm-switch {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    22px;

  flex:
    0
    0
    38px;

  cursor:
    pointer;
}


.cm-switch
input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.cm-switch
> span {
  position:
    relative;

  display:
    block;

  width:
    38px;

  height:
    22px;

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

  border-radius:
    999px;

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

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


.cm-switch
> span::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    var(
      --cm-text-muted
    );

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


.cm-switch
input:checked
+
span {
  border-color:
    var(
      --cm-success-border
    );

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


.cm-switch
input:checked
+
span::after {
  background:
    var(
      --cm-success-text
    );

  transform:
    translateX(
      16px
    );
}


/* =========================================================
   72. SEGMENTED
   ========================================================= */

.cm-segmented {
  display:
    grid;

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

  gap:
    6px;

  padding:
    9px;
}


.cm-segmented
label {
  position:
    relative;

  min-width:
    0;

  cursor:
    pointer;
}


.cm-segmented
input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.cm-segmented
label
> span {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    36px;

  padding:
    0
    7px;

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

  border-radius:
    7px;

  background:
    var(
      --cm-surface
    );

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

  font-size:
    8.5px;

  font-weight:
    900;

  text-align:
    center;

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


.cm-segmented
label
> span
svg {
  width:
    11px;

  height:
    11px;
}


.cm-segmented
label
> span
strong {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    18px;

  height:
    17px;

  padding:
    0
    4px;

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

  border-radius:
    999px;

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

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

  font-size:
    7.5px;

  font-weight:
    900;
}


.cm-segmented
label:hover
> span {
  border-color:
    var(
      --cm-text-soft
    );

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


.cm-segmented
input:checked
+
span {
  border-color:
    var(
      --cm-primary
    );

  background:
    var(
      --cm-primary
    );

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


.cm-segmented
input:checked
+
span
strong {
  border-color:
    rgba(
      255,
      255,
      255,
      0.24
    );

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

  color:
    inherit;
}


html[data-theme="dark"]
.cm-segmented
input:checked
+
span
strong {
  border-color:
    rgba(
      0,
      0,
      0,
      0.2
    );

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


.cm-segmented
input:disabled
+
span {
  opacity:
    0.38;

  cursor:
    not-allowed;
}


/* =========================================================
   73. INFO GRID
   ========================================================= */

.cm-info-grid {
  display:
    grid;

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

  gap:
    6px;

  padding:
    9px;
}


.cm-info-grid
article {
  display:
    grid;

  gap:
    3px;

  min-width:
    0;

  min-height:
    52px;

  padding:
    8px;

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

  border-radius:
    7px;

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


.cm-info-grid
article
span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    7.5px;

  font-weight:
    900;
}


.cm-info-grid
article
strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    8.5px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   74. INPUT SUFFIX
   ========================================================= */

.cm-input-suffix {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-width:
    0;
}


.cm-input-suffix
input {
  padding-right:
    44px;
}


.cm-input-suffix
> span {
  position:
    absolute;

  right:
    9px;

  display:
    flex;

  align-items:
    center;

  height:
    20px;

  padding-left:
    7px;

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

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

  font-size:
    7.5px;

  font-weight:
    900;

  pointer-events:
    none;
}


/* =========================================================
   75. CALLOUT
   ========================================================= */

.cm-callout {
  display:
    grid;

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

  align-items:
    start;

  gap:
    8px;

  margin:
    0;

  padding:
    9px;

  border:
    1px
    solid
    var(
      --cm-info-border
    );

  border-radius:
    8px;

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


.cm-callout
> span {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  border:
    1px
    solid
    var(
      --cm-info-border
    );

  border-radius:
    6px;

  color:
    var(
      --cm-info-text
    );
}


.cm-callout
> span
svg {
  width:
    11px;

  height:
    11px;
}


.cm-callout
> div {
  min-width:
    0;
}


.cm-callout
strong {
  display:
    block;

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

  font-size:
    9px;

  font-weight:
    900;
}


.cm-callout
p {
  margin:
    2px
    0
    0;

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

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.35;
}


/* =========================================================
   76. ERROR BOX
   ========================================================= */

.cm-error-box {
  display:
    grid;

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

  align-items:
    start;

  gap:
    8px;

  padding:
    9px;

  border:
    1px
    solid
    var(
      --cm-danger-border
    );

  border-radius:
    8px;

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


.cm-error-box
> span {
  display:
    grid;

  place-items:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px
    solid
    var(
      --cm-danger-border
    );

  border-radius:
    6px;

  color:
    var(
      --cm-danger-text
    );
}


.cm-error-box
strong {
  color:
    var(
      --cm-danger-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.cm-error-box
p {
  margin:
    3px
    0
    0;

  color:
    var(
      --cm-text
    );

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.4;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   77. DROPDOWN LAYER
   ========================================================= */

.cm-dropdown-layer {
  position:
    fixed;

  inset:
    0;

  z-index:
    2147481000;

  pointer-events:
    none;
}


.cm-dropdown-layer:empty {
  display:
    none;
}


/* =========================================================
   78. FLOATING MENU
   ========================================================= */

.cm-floating-menu {
  position:
    fixed;

  display:
    flex;

  flex-direction:
    column;

  width:
    270px;

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

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

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

  border-radius:
    9px;

  background:
    var(
      --cm-surface
    );

  overflow-x:
    hidden;

  overflow-y:
    auto;

  pointer-events:
    auto;

  box-shadow:
    0
    18px
    46px
    rgba(
      0,
      0,
      0,
      0.24
    );

  animation:
    cmFloatingEnter
    85ms
    ease
    both;
}


/* =========================================================
   79. FLOATING HEADER
   ========================================================= */

.cm-floating-menu__head {
  display:
    grid;

  gap:
    2px;

  padding:
    8px
    9px;

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

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


.cm-floating-menu__head
span {
  color:
    var(
      --cm-text-muted
    );

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.cm-floating-menu__head
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


/* =========================================================
   80. FLOATING ITEMS
   ========================================================= */

.cm-floating-menu
> button {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-height:
    48px;

  padding:
    7px
    8px;

  border:
    0;

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

  background:
    var(
      --cm-surface
    );

  color:
    var(
      --cm-text
    );

  cursor:
    pointer;

  text-align:
    left;

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


.cm-floating-menu
> button:last-child {
  border-bottom:
    0;
}


.cm-floating-menu
> button:hover {
  background:
    var(
      --cm-hover
    );
}


.cm-floating-menu
> button
> span {
  display:
    grid;

  place-items:
    center;

  width:
    29px;

  height:
    29px;

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

  border-radius:
    6px;

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

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


.cm-floating-menu
> button
> span
svg {
  width:
    12px;

  height:
    12px;
}


.cm-floating-menu
> button
> div {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.cm-floating-menu
> button
strong {
  color:
    var(
      --cm-text-strong
    );

  font-size:
    8.8px;

  font-weight:
    900;

  line-height:
    1.15;
}


.cm-floating-menu
> button
small {
  overflow:
    hidden;

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

  font-size:
    7.5px;

  font-weight:
    750;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   81. TOAST
   ========================================================= */

.cm-toast {
  position:
    fixed;

  right:
    12px;

  bottom:
    12px;

  z-index:
    2147483000;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

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

  padding:
    8px;

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

  border-radius:
    8px;

  background:
    var(
      --cm-surface
    );

  color:
    var(
      --cm-text
    );

  box-shadow:
    0
    16px
    44px
    rgba(
      0,
      0,
      0,
      0.25
    );

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(
      4px
    );

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


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

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


.cm-toast__icon {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

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

  border-radius:
    6px;

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


.cm-toast__icon
svg {
  width:
    12px;

  height:
    12px;
}


.cm-toast
strong {
  min-width:
    0;

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

  font-size:
    8.8px;

  font-weight:
    900;

  line-height:
    1.3;
}


.cm-toast.is-success {
  border-color:
    var(
      --cm-success-border
    );
}


.cm-toast.is-success
.cm-toast__icon {
  border-color:
    var(
      --cm-success-border
    );

  background:
    var(
      --cm-success-bg
    );

  color:
    var(
      --cm-success-text
    );
}


.cm-toast.is-error {
  border-color:
    var(
      --cm-danger-border
    );
}


.cm-toast.is-error
.cm-toast__icon {
  border-color:
    var(
      --cm-danger-border
    );

  background:
    var(
      --cm-danger-bg
    );

  color:
    var(
      --cm-danger-text
    );
}


.cm-toast.is-warning {
  border-color:
    var(
      --cm-warning-border
    );
}


.cm-toast.is-warning
.cm-toast__icon {
  border-color:
    var(
      --cm-warning-border
    );

  background:
    var(
      --cm-warning-bg
    );

  color:
    var(
      --cm-warning-text
    );
}


.cm-toast.is-info {
  border-color:
    var(
      --cm-info-border
    );
}


.cm-toast.is-info
.cm-toast__icon {
  border-color:
    var(
      --cm-info-border
    );

  background:
    var(
      --cm-info-bg
    );

  color:
    var(
      --cm-info-text
    );
}


/* =========================================================
   82. ACCESSIBILITY
   ========================================================= */

.cm-btn:focus-visible,
.cm-icon-btn:focus-visible,
.cm-row-action:focus-visible,
.cm-pagination__btn:focus-visible,
.cm-search-clear:focus-visible,
.cm-error-detail:focus-visible,
.cm-floating-menu
> button:focus-visible,
.cm-tab:focus-visible,
.cm-kpi:focus-visible {
  outline:
    2px
    solid
    var(
      --cm-text-strong
    );

  outline-offset:
    2px;
}


/* =========================================================
   83. DARK INPUTS
   ========================================================= */

html[data-theme="dark"]
.cm-field
select,
html[data-theme="dark"]
.cm-toolbar
select,
html[data-theme="dark"]
.cm-field
input[type="date"] {
  color-scheme:
    dark;
}


/* =========================================================
   84. RESPONSIVE · 1280
   ========================================================= */

@media (
  max-width:
  1280px
) {

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


  .cm-kpi {
    border-bottom:
      1px
      solid
      var(
        --cm-border-strong
      );
  }


  .cm-kpi:nth-child(
    3n
  ) {
    border-right:
      0;
  }


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


  .cm-toolbar__filters {
    justify-content:
      flex-start;
  }

}


/* =========================================================
   85. RESPONSIVE · 1000
   ========================================================= */

@media (
  max-width:
  1000px
) {

  .cm-page-head {
    grid-template-columns:
      1fr;

    align-items:
      start;
  }


  .cm-page-head__actions {
    justify-content:
      flex-start;
  }


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


  .cm-kpi,
  .cm-kpi:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --cm-border-strong
      );
  }


  .cm-kpi:nth-child(
    2n
  ) {
    border-right:
      0;
  }


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


  .cm-product-overview {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .cm-product-overview
  article {
    border-bottom:
      1px
      solid
      var(
        --cm-border-strong
      );
  }


  .cm-product-overview
  article:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .cm-product-overview
  article:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0;
  }

}


/* =========================================================
   86. RESPONSIVE · 820
   ========================================================= */

@media (
  max-width:
  820px
) {

  .cm-page__inner {
    gap:
      7px;

    padding:
      6px;
  }


  .cm-page-head {
    gap:
      10px;

    padding:
      9px;
  }


  .cm-page-head__main {
    align-items:
      flex-start;
  }


  .cm-page-head__icon {
    flex-basis:
      38px;

    width:
      38px;

    height:
      38px;
  }


  .cm-page-head__content
  h1 {
    font-size:
      21px;
  }


  .cm-page-head__content
  p {
    font-size:
      9.5px;
  }


  .cm-page-head__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .cm-page-head__actions
  .cm-btn {
    width:
      100%;

    min-height:
      39px;
  }


  .cm-toolbar {
    padding:
      7px;
  }


  .cm-toolbar__filters {
    display:
      grid;

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

    width:
      100%;
  }


  .cm-field--compact {
    min-width:
      0;
  }


  .cm-toolbar__filters
  .cm-btn {
    width:
      100%;
  }


  .cm-selection-bar {
    grid-template-columns:
      1fr;

    width:
      calc(
        100% -
        14px
      );

    margin:
      7px;
  }


  .cm-selection-bar__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .cm-selection-bar__actions
  .cm-btn {
    width:
      100%;
  }


  .cm-panel__head {
    grid-template-columns:
      1fr;

    align-items:
      start;
  }


  .cm-panel__actions {
    width:
      100%;

    justify-content:
      space-between;
  }


  .cm-tabs {
    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .cm-tabs::-webkit-scrollbar {
    display:
      none;
  }


  .cm-tab {
    flex:
      0
      0
      auto;
  }


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


  .cm-history-summary
  article {
    border-right:
      1px
      solid
      var(
        --cm-border-strong
      );

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


  .cm-history-summary
  article:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .cm-modal-layer {
    padding:
      7px;
  }


  .cm-modal {
    width:
      calc(
        100vw -
        14px
      );

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

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

    border-radius:
      10px;
  }


  .cm-modal--small,
  .cm-modal--medium,
  .cm-modal--product {
    width:
      calc(
        100vw -
        14px
      );

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


  .cm-info-grid {
    grid-template-columns:
      1fr;
  }


  .cm-segmented {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   87. RESPONSIVE · 620
   ========================================================= */

@media (
  max-width:
  620px
) {

  .cm-page__inner {
    padding:
      5px;
  }


  .cm-page-head {
    border-radius:
      9px;
  }


  .cm-page-head__actions {
    grid-template-columns:
      1fr;
  }


  .cm-page-head__actions
  .cm-btn {
    min-height:
      41px;

    font-size:
      9.5px;
  }


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


  .cm-kpi {
    min-height:
      78px;

    padding:
      8px;
  }


  .cm-kpi__body
  strong {
    font-size:
      19px;
  }


  .cm-kpi__body
  span {
    font-size:
      7.5px;
  }


  .cm-toolbar__filters {
    grid-template-columns:
      1fr;
  }


  .cm-toolbar__search
  input,
  .cm-field--compact
  select,
  .cm-field--compact
  input {
    height:
      39px;

    min-height:
      39px;
  }


  .cm-selection-bar__actions {
    grid-template-columns:
      1fr;
  }


  .cm-panel__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    align-items:
      stretch;
  }


  .cm-panel__actions
  .cm-btn {
    width:
      100%;
  }


  .cm-panel__counter {
    display:
      block;
  }


  .cm-history-summary {
    grid-template-columns:
      1fr;
  }


  .cm-history-summary
  article,
  .cm-history-summary
  article:nth-child(
    2n
  ) {
    border-right:
      0;

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


  .cm-history-summary
  article:last-child {
    border-bottom:
      0;
  }


  .cm-product-overview {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .cm-modal-layer {
    align-items:
      flex-start;

    padding:
      5px;
  }


  .cm-modal {
    width:
      calc(
        100vw -
        10px
      );

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

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

    border-radius:
      9px;
  }


  .cm-modal--small,
  .cm-modal--medium,
  .cm-modal--product {
    width:
      calc(
        100vw -
        10px
      );

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


  .cm-modal__head {
    min-height:
      54px;

    padding:
      8px;
  }


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


  .cm-modal__icon {
    width:
      30px;

    height:
      30px;
  }


  .cm-modal__identity
  h2 {
    font-size:
      11.5px;
  }


  .cm-modal__body {
    padding:
      7px;
  }


  .cm-modal__footer {
    position:
      sticky;

    bottom:
      0;

    z-index:
      3;

    display:
      grid;

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

    gap:
      6px;

    padding:
      7px;
  }


  .cm-modal__footer
  .cm-btn {
    width:
      100%;

    min-height:
      39px;
  }


  .cm-form-grid {
    padding:
      7px;
  }


  .cm-form-section__head {
    padding:
      7px;
  }


  .cm-toggle-row {
    margin:
      7px;

    padding:
      8px;
  }


  .cm-floating-menu {
    top:
      auto !important;

    right:
      6px !important;

    bottom:
      6px;

    left:
      6px;

    width:
      auto;

    max-width:
      none;

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

    border-radius:
      9px;
  }


  .cm-floating-menu
  > button {
    min-height:
      50px;
  }


  .cm-toast {
    right:
      6px;

    bottom:
      6px;

    left:
      6px;

    width:
      auto;

    max-width:
      none;
  }

}


/* =========================================================
   88. RESPONSIVE · 470
   ========================================================= */

@media (
  max-width:
  470px
) {

  .cm-page-head__content
  p {
    font-size:
      9px;
  }


  .cm-kpis {
    grid-template-columns:
      1fr;
  }


  .cm-kpi,
  .cm-kpi:nth-child(
    2n
  ),
  .cm-kpi:nth-child(
    3n
  ) {
    border-right:
      0;

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


  .cm-kpi:last-child {
    border-bottom:
      0;
  }


  .cm-kpi {
    min-height:
      72px;
  }


  .cm-kpi__body {
    align-items:
      center;
  }


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


  .cm-table
  tbody
  td,
  .cm-table
  tbody
  td:nth-child(
    2n
  ),
  .cm-table
  tbody
  td:nth-child(
    3
  ),
  .cm-table
  tbody
  td:nth-child(
    11
  ) {
    grid-column:
      auto;

    border-right:
      0;
  }


  .cm-table
  tbody
  td:nth-child(
    11
  ) {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .cm-table--history
  tbody
  td:nth-child(
    3
  ),
  .cm-table--history
  tbody
  td:nth-child(
    11
  ) {
    grid-column:
      auto;
  }


  .cm-pagination__actions {
    display:
      grid;

    grid-template-columns:
      1fr
      auto
      1fr;

    width:
      100%;
  }


  .cm-pagination__btn {
    width:
      100%;

    min-width:
      0;
  }


  .cm-product-overview {
    grid-template-columns:
      1fr;
  }


  .cm-product-overview
  article,
  .cm-product-overview
  article:nth-child(
    2n
  ),
  .cm-product-overview
  article:nth-last-child(
    -n + 2
  ) {
    border-right:
      0;

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


  .cm-product-overview
  article:last-child {
    border-bottom:
      0;
  }


  .cm-modal__footer {
    grid-template-columns:
      1fr;
  }


  .cm-toggle-row {
    align-items:
      center;

    gap:
      8px;
  }


  .cm-info-grid {
    padding:
      7px;
  }

}


/* =========================================================
   89. PROTECCIÓN CONTRA OVERFLOW
   ========================================================= */

.control-minimos-shell,
.control-minimos-content,
.control-minimos-page,
.cm-page__inner,
.cm-page-head,
.cm-page-head__main,
.cm-page-head__content,
.cm-page-head__actions,
.cm-kpis,
.cm-kpi,
.cm-workspace,
.cm-workspace__tabs,
.cm-workspace__content,
.cm-tab-content,
.cm-toolbar,
.cm-toolbar__search,
.cm-toolbar__filters,
.cm-selection-bar,
.cm-selection-bar__info,
.cm-selection-bar__actions,
.cm-panel,
.cm-panel__head,
.cm-panel__title,
.cm-panel__actions,
.cm-table-shell,
.cm-product,
.cm-product__content,
.cm-pagination,
.cm-pagination__actions,
.cm-history-summary,
.cm-modal,
.cm-modal__head,
.cm-modal__identity,
.cm-modal__body,
.cm-modal__footer,
.cm-product-modal,
.cm-product-overview,
.cm-form,
.cm-form-section,
.cm-form-grid,
.cm-toggle-row,
.cm-segmented,
.cm-info-grid,
.cm-callout,
.cm-error-box,
.cm-floating-menu,
.cm-toast {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   90. NO SCROLL HORIZONTAL GLOBAL
   ========================================================= */

.control-minimos-shell,
.control-minimos-content,
.control-minimos-page,
.cm-page__inner,
.cm-workspace,
.cm-workspace__content,
.cm-tab-content {
  overflow-x:
    hidden;
}


/* =========================================================
   91. DIVISIONES EXTRA MARCADAS
   ========================================================= */

.cm-page-head,
.cm-kpis,
.cm-workspace,
.cm-panel,
.cm-form-section,
.cm-modal,
.cm-selection-bar {
  border-color:
    var(
      --cm-border-strong
    );
}


.cm-table
thead
th,
.cm-table
tbody
td,
.cm-panel__head,
.cm-toolbar,
.cm-tabs,
.cm-pagination,
.cm-form-section__head,
.cm-modal__head,
.cm-modal__footer {
  border-color:
    var(
      --cm-border-strong
    );
}


/* =========================================================
   92. TIPOGRAFÍA MÁS MARCADA
   ========================================================= */

.control-minimos-page,
.control-minimos-page
button,
.control-minimos-page
input,
.control-minimos-page
select,
.control-minimos-page
textarea {
  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


.control-minimos-page
button,
.control-minimos-page
input,
.control-minimos-page
select,
.control-minimos-page
textarea {
  letter-spacing:
    0;
}


/* =========================================================
   93. SIN GLOW
   ========================================================= */

.cm-btn,
.cm-icon-btn,
.cm-row-action,
.cm-kpi,
.cm-panel,
.cm-form-section,
.cm-modal,
.cm-toolbar__search
input,
.cm-field
input,
.cm-field
select,
.cm-field
textarea,
.cm-segmented
label
> span,
.cm-switch
> span {
  text-shadow:
    none !important;

  filter:
    none;
}


.cm-toolbar__search
input:focus,
.cm-field
input:focus,
.cm-field
select:focus,
.cm-field
textarea:focus {
  box-shadow:
    none;
}


/* =========================================================
   94. ANIMACIONES FINALES
   ========================================================= */

@keyframes cmBackdropEnter {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes cmModalEnter {
  from {
    opacity:
      0;

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

  to {
    opacity:
      1;

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


@keyframes cmFloatingEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   95. REDUCED MOTION
   ========================================================= */

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

  .control-minimos-page *,
  .control-minimos-page *::before,
  .control-minimos-page *::after,
  .cm-modal-layer *,
  .cm-modal-layer *::before,
  .cm-modal-layer *::after,
  .cm-dropdown-layer *,
  .cm-dropdown-layer *::before,
  .cm-dropdown-layer *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/* =========================================================
   FIN
   WIRTZ HUB · RECURSOS
   CONTROL DE MÍNIMOS
   CSS COMPLETO
   PARTE 3 DE 3
   ========================================================= *//* =========================================================
   CONTROL DE MÍNIMOS
   CORRECCIÓN DEFINITIVA TABLA + SINCRONIZAR

   UBICACIÓN:
   frontend/src/pages/recursos/control-minimos/
   control-minimos.css
   ========================================================= */


/* =========================================================
   IMPORTANTE
   Nunca generar pseudo-elementos directamente sobre <tr>.
   Eso crea una columna fantasma y desplaza todo el tbody.
   ========================================================= */

.cm-product-row::before,
.cm-product-row::after {
  content:
    none !important;

  display:
    none !important;
}


/* =========================================================
   TABLA PRINCIPAL
   ========================================================= */

.cm-table:not(.cm-table--history) {
  width:
    100% !important;

  min-width:
    1180px !important;

  table-layout:
    auto !important;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-check {
  width:
    42px !important;

  min-width:
    42px !important;

  max-width:
    42px !important;

  text-align:
    center !important;
}


/* =========================================================
   INDICADOR DE ESTADO
   Ahora va dentro de la primera celda y NO sobre el <tr>
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-product-row
> td:first-child {
  position:
    relative !important;
}


.cm-table:not(.cm-table--history)
.cm-product-row.is-danger
> td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(
      --cm-danger-text
    ) !important;
}


.cm-table:not(.cm-table--history)
.cm-product-row.is-warning
> td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(
      --cm-warning-text
    ) !important;
}


.cm-table:not(.cm-table--history)
.cm-product-row.is-success
> td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(
      --cm-success-text
    ) !important;
}


.cm-table:not(.cm-table--history)
.cm-product-row.is-neutral
> td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(
      --cm-border-strong
    ) !important;
}


/* =========================================================
   SKU
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-sku {
  min-width:
    145px !important;

  width:
    145px !important;
}


/* =========================================================
   PRODUCTO
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-product {
  width:
    auto !important;

  min-width:
    250px !important;

  max-width:
    none !important;
}


/* =========================================================
   CATEGORÍA
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-category {
  width:
    145px !important;

  min-width:
    145px !important;

  max-width:
    145px !important;
}


/* =========================================================
   STOCK / MÍNIMO / DIFERENCIA
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-number {
  width:
    90px !important;

  min-width:
    90px !important;

  max-width:
    90px !important;

  text-align:
    right !important;
}


.cm-table:not(.cm-table--history)
.cm-th-number {
  width:
    90px !important;

  min-width:
    90px !important;

  max-width:
    90px !important;

  text-align:
    right !important;
}


/* =========================================================
   ESTADO
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-status {
  width:
    135px !important;

  min-width:
    135px !important;

  max-width:
    135px !important;
}


/* =========================================================
   ALERTA
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-alert {
  width:
    145px !important;

  min-width:
    145px !important;

  max-width:
    145px !important;
}


/* =========================================================
   DEBAJO DESDE
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-date {
  width:
    125px !important;

  min-width:
    125px !important;

  max-width:
    125px !important;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-th-actions,
.cm-table:not(.cm-table--history)
.cm-cell-actions {
  width:
    72px !important;

  min-width:
    72px !important;

  max-width:
    72px !important;

  text-align:
    center !important;

  vertical-align:
    middle !important;
}


.cm-table:not(.cm-table--history)
.cm-cell-actions {
  padding:
    7px !important;

  overflow:
    visible !important;
}


/* =========================================================
   BOTÓN DE ACCIONES
   ========================================================= */

.cm-table:not(.cm-table--history)
.cm-cell-actions
.cm-row-action {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    30px !important;

  height:
    30px !important;

  min-width:
    30px !important;

  min-height:
    30px !important;

  margin:
    0
    auto !important;

  padding:
    0 !important;

  border:
    1px
    solid
    var(
      --cm-border-strong
    ) !important;

  border-radius:
    7px !important;

  background:
    var(
      --cm-surface
    ) !important;

  color:
    var(
      --cm-text-strong
    ) !important;
}


.cm-table:not(.cm-table--history)
.cm-cell-actions
.cm-row-action:hover {
  border-color:
    var(
      --cm-text-strong
    ) !important;

  background:
    var(
      --cm-text-strong
    ) !important;

  color:
    var(
      --cm-surface
    ) !important;
}


.cm-table:not(.cm-table--history)
.cm-cell-actions
.cm-row-action
svg {
  width:
    12px !important;

  height:
    12px !important;

  stroke:
    currentColor !important;
}


/* =========================================================
   DIVISIONES
   ========================================================= */

.cm-table:not(.cm-table--history)
thead
th {
  border-right:
    1px
    solid
    var(
      --cm-border-strong
    ) !important;
}


.cm-table:not(.cm-table--history)
tbody
td {
  border-right:
    1px
    solid
    var(
      --cm-border
    ) !important;
}


.cm-table:not(.cm-table--history)
thead
th:last-child,
.cm-table:not(.cm-table--history)
tbody
td:last-child {
  border-right:
    0 !important;
}


/* =========================================================
   SINCRONIZAR
   ========================================================= */

.cm-page-head__actions
button[data-action="sync"] {
  opacity:
    1 !important;

  visibility:
    visible !important;

  border-color:
    var(
      --cm-primary
    ) !important;

  background:
    var(
      --cm-primary
    ) !important;

  color:
    var(
      --cm-primary-text
    ) !important;
}


.cm-page-head__actions
button[data-action="sync"]
svg {
  color:
    currentColor !important;

  stroke:
    currentColor !important;
}


/* =========================================================
   DARK · SINCRONIZAR
   ========================================================= */

html[data-theme="dark"]
.cm-page-head__actions
button[data-action="sync"]:not(:disabled) {
  border-color:
    #f5f5f5 !important;

  background:
    #f5f5f5 !important;

  color:
    #050505 !important;
}


/* =========================================================
   LIGHT · SINCRONIZAR
   ========================================================= */

html:not([data-theme="dark"])
.cm-page-head__actions
button[data-action="sync"]:not(:disabled) {
  border-color:
    #111111 !important;

  background:
    #111111 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   SINCRONIZANDO
   ========================================================= */

.cm-page-head__actions
button[data-action="sync"]:disabled {
  border-color:
    var(
      --cm-border-strong
    ) !important;

  background:
    var(
      --cm-surface-3
    ) !important;

  color:
    var(
      --cm-text-strong
    ) !important;

  opacity:
    0.8 !important;
}


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

@media (
  max-width:
  820px
) {

  .cm-table:not(.cm-table--history) {
    width:
      100% !important;

    min-width:
      0 !important;

    table-layout:
      auto !important;
  }


  .cm-table:not(.cm-table--history)
  .cm-product-row
  > td:first-child {
    box-shadow:
      none !important;
  }


  .cm-table:not(.cm-table--history)
  .cm-cell-check,
  .cm-table:not(.cm-table--history)
  .cm-cell-sku,
  .cm-table:not(.cm-table--history)
  .cm-cell-product,
  .cm-table:not(.cm-table--history)
  .cm-cell-category,
  .cm-table:not(.cm-table--history)
  .cm-cell-number,
  .cm-table:not(.cm-table--history)
  .cm-cell-status,
  .cm-table:not(.cm-table--history)
  .cm-cell-alert,
  .cm-table:not(.cm-table--history)
  .cm-cell-date,
  .cm-table:not(.cm-table--history)
  .cm-cell-actions {
    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;
  }


  .cm-table:not(.cm-table--history)
  .cm-cell-actions {
    display:
      grid !important;

    grid-column:
      1 / -1 !important;

    border-right:
      0 !important;
  }


  .cm-table:not(.cm-table--history)
  .cm-cell-actions
  .cm-row-action {
    width:
      100% !important;

    height:
      40px !important;

    min-width:
      0 !important;

    min-height:
      40px !important;
  }

}