/* =========================================================
   WIRTZ HUB · MANUFACTURA
   LOTES DE PREPARACIÓN

   UBICACIÓN:
   frontend/src/pages/manufactura/lotes-preparacion/
   lotes-preparacion.css

   PARTE 1 DE 4

   RESPONSABILIDAD:
   - Página.
   - Header.
   - Métricas.
   - Toolbar.
   - Botones.
   - Tabla principal.
   - Estados.
   - Prioridades.
   - Progreso.
   - Paginación.
   - Selección.
   - Skeleton.
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.lotes-preparacion-page {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 24px;

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

  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --page-bg,
      #f7f7f8
    );
}


html[data-theme="dark"] .lotes-preparacion-page,
body.dark .lotes-preparacion-page,
body[data-theme="dark"] .lotes-preparacion-page {
  color: #f5f5f5;
  background: #000;
}


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

.lotes-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 24px;
}


.lotes-page-header__copy {
  min-width: 0;
}


.lotes-page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color:
    var(
      --text-muted,
      #737373
    );
}


.lotes-page-header__title {
  margin: 0;

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

  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;

  color:
    var(
      --text-primary,
      #111
    );
}


.lotes-page-header__description {
  max-width: 760px;

  margin:
    10px
    0
    0;

  font-size: 14px;
  line-height: 1.6;

  color:
    var(
      --text-secondary,
      #666
    );
}


.lotes-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;

  flex: 0 0 auto;
}


html[data-theme="dark"] .lotes-page-header__title,
body.dark .lotes-page-header__title,
body[data-theme="dark"] .lotes-page-header__title {
  color: #f7f7f7;
}


html[data-theme="dark"] .lotes-page-header__description,
body.dark .lotes-page-header__description,
body[data-theme="dark"] .lotes-page-header__description {
  color: #a3a3a3;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.lotes-button {
  appearance: none;
  border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 40px;

  padding:
    0
    14px;

  border-radius: 10px;

  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}


.lotes-button:hover:not(:disabled) {
  transform: translateY(-1px);
}


.lotes-button:active:not(:disabled) {
  transform: translateY(0);
}


.lotes-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}


.lotes-button svg {
  flex: 0 0 auto;
}


.lotes-button--primary {
  color: #fff;
  background: #171717;
  border-color: #171717;
}


.lotes-button--primary:hover:not(:disabled) {
  background: #2a2a2a;
  border-color: #2a2a2a;
}


.lotes-button--secondary {
  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --surface-raised,
      #fff
    );

  border-color:
    var(
      --border-color,
      #dedede
    );
}


.lotes-button--secondary:hover:not(:disabled) {
  background:
    var(
      --surface-hover,
      #f3f3f3
    );

  border-color:
    #c9c9c9;
}


.lotes-button--ghost {
  color:
    var(
      --text-secondary,
      #5f5f5f
    );

  background: transparent;

  border-color: transparent;
}


.lotes-button--ghost:hover:not(:disabled) {
  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --surface-hover,
      #f0f0f0
    );
}


.lotes-button--danger {
  color: #fff;
  background: #b91c1c;
  border-color: #b91c1c;
}


.lotes-button--danger:hover:not(:disabled) {
  background: #991b1b;
  border-color: #991b1b;
}


.lotes-button--sm {
  min-height: 34px;

  padding:
    0
    11px;

  font-size: 12px;
}


.lotes-button__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 19px;
  height: 19px;

  padding:
    0
    5px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;

  color: #fff;
  background: #2563eb;
}


html[data-theme="dark"] .lotes-button--primary,
body.dark .lotes-button--primary,
body[data-theme="dark"] .lotes-button--primary {
  color: #050505;
  background: #f5f5f5;
  border-color: #f5f5f5;
}


html[data-theme="dark"] .lotes-button--primary:hover:not(:disabled),
body.dark .lotes-button--primary:hover:not(:disabled),
body[data-theme="dark"] .lotes-button--primary:hover:not(:disabled) {
  background: #dedede;
  border-color: #dedede;
}


html[data-theme="dark"] .lotes-button--secondary,
body.dark .lotes-button--secondary,
body[data-theme="dark"] .lotes-button--secondary {
  color: #eee;
  background: #090909;
  border-color: #262626;
}


html[data-theme="dark"] .lotes-button--secondary:hover:not(:disabled),
body.dark .lotes-button--secondary:hover:not(:disabled),
body[data-theme="dark"] .lotes-button--secondary:hover:not(:disabled) {
  background: #131313;
  border-color: #363636;
}


html[data-theme="dark"] .lotes-button--ghost,
body.dark .lotes-button--ghost,
body[data-theme="dark"] .lotes-button--ghost {
  color: #bdbdbd;
}


html[data-theme="dark"] .lotes-button--ghost:hover:not(:disabled),
body.dark .lotes-button--ghost:hover:not(:disabled),
body[data-theme="dark"] .lotes-button--ghost:hover:not(:disabled) {
  color: #fff;
  background: #141414;
}


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

.lotes-icon-button {
  appearance: none;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 1px solid
    var(
      --border-color,
      #dedede
    );

  border-radius: 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(
      --text-secondary,
      #656565
    );

  background:
    var(
      --surface-raised,
      #fff
    );

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}


.lotes-icon-button:hover:not(:disabled) {
  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --surface-hover,
      #f2f2f2
    );

  border-color: #c8c8c8;
}


.lotes-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}


.lotes-icon-button--danger {
  color: #b91c1c;
}


html[data-theme="dark"] .lotes-icon-button,
body.dark .lotes-icon-button,
body[data-theme="dark"] .lotes-icon-button {
  color: #a3a3a3;
  background: #090909;
  border-color: #262626;
}


html[data-theme="dark"] .lotes-icon-button:hover:not(:disabled),
body.dark .lotes-icon-button:hover:not(:disabled),
body[data-theme="dark"] .lotes-icon-button:hover:not(:disabled) {
  color: #f5f5f5;
  background: #151515;
  border-color: #363636;
}


/* =========================================================
   METRICS
   ========================================================= */

.lotes-metrics {
  display: grid;

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

  gap: 12px;

  margin-bottom: 18px;
}


.lotes-metric-card {
  min-width: 0;

  padding: 17px;

  border: 1px solid
    var(
      --border-color,
      #e0e0e0
    );

  border-radius: 14px;

  background:
    var(
      --surface-raised,
      #fff
    );
}


.lotes-metric-card.is-clickable {
  cursor: pointer;

  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    transform 0.16s ease;
}


.lotes-metric-card.is-clickable:hover {
  transform: translateY(-1px);

  background:
    var(
      --surface-hover,
      #fafafa
    );

  border-color: #bdbdbd;
}


.lotes-metric-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 18px;
}


.lotes-metric-card__label {
  min-width: 0;

  font-size: 12px;
  font-weight: 700;

  color:
    var(
      --text-secondary,
      #6c6c6c
    );
}


.lotes-metric-card__icon {
  width: 34px;
  height: 34px;

  border-radius: 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #525252;
  background: #f1f1f1;
}


.lotes-metric-card__icon--danger {
  color: #b91c1c;
  background: #fef2f2;
}


.lotes-metric-card__icon--warning {
  color: #a16207;
  background: #fefce8;
}


.lotes-metric-card__icon--success {
  color: #15803d;
  background: #f0fdf4;
}


.lotes-metric-card__icon--info {
  color: #1d4ed8;
  background: #eff6ff;
}


.lotes-metric-card__value {
  display: block;

  margin-bottom: 6px;

  font-size: 27px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: -0.035em;

  color:
    var(
      --text-primary,
      #171717
    );
}


.lotes-metric-card__hint {
  display: block;

  font-size: 11px;
  line-height: 1.4;

  color:
    var(
      --text-muted,
      #888
    );
}


html[data-theme="dark"] .lotes-metric-card,
body.dark .lotes-metric-card,
body[data-theme="dark"] .lotes-metric-card {
  background: #070707;
  border-color: #202020;
}


html[data-theme="dark"] .lotes-metric-card.is-clickable:hover,
body.dark .lotes-metric-card.is-clickable:hover,
body[data-theme="dark"] .lotes-metric-card.is-clickable:hover {
  background: #0d0d0d;
  border-color: #353535;
}


html[data-theme="dark"] .lotes-metric-card__value,
body.dark .lotes-metric-card__value,
body[data-theme="dark"] .lotes-metric-card__value {
  color: #f5f5f5;
}


html[data-theme="dark"] .lotes-metric-card__label,
body.dark .lotes-metric-card__label,
body[data-theme="dark"] .lotes-metric-card__label {
  color: #a3a3a3;
}


html[data-theme="dark"] .lotes-metric-card__hint,
body.dark .lotes-metric-card__hint,
body[data-theme="dark"] .lotes-metric-card__hint {
  color: #767676;
}


html[data-theme="dark"] .lotes-metric-card__icon,
body.dark .lotes-metric-card__icon,
body[data-theme="dark"] .lotes-metric-card__icon {
  color: #c8c8c8;
  background: #151515;
}


html[data-theme="dark"] .lotes-metric-card__icon--danger,
body.dark .lotes-metric-card__icon--danger,
body[data-theme="dark"] .lotes-metric-card__icon--danger {
  color: #f87171;
  background: #220909;
}


html[data-theme="dark"] .lotes-metric-card__icon--warning,
body.dark .lotes-metric-card__icon--warning,
body[data-theme="dark"] .lotes-metric-card__icon--warning {
  color: #facc15;
  background: #211b05;
}


html[data-theme="dark"] .lotes-metric-card__icon--success,
body.dark .lotes-metric-card__icon--success,
body[data-theme="dark"] .lotes-metric-card__icon--success {
  color: #4ade80;
  background: #062110;
}


html[data-theme="dark"] .lotes-metric-card__icon--info,
body.dark .lotes-metric-card__icon--info,
body[data-theme="dark"] .lotes-metric-card__icon--info {
  color: #60a5fa;
  background: #08182e;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.lotes-workspace {
  min-width: 0;

  border: 1px solid
    var(
      --border-color,
      #dfdfdf
    );

  border-radius: 16px;

  overflow: hidden;

  background:
    var(
      --surface-raised,
      #fff
    );
}


html[data-theme="dark"] .lotes-workspace,
body.dark .lotes-workspace,
body[data-theme="dark"] .lotes-workspace {
  background: #050505;
  border-color: #202020;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.lotes-toolbar {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px;

  border-bottom: 1px solid
    var(
      --border-soft,
      #ececec
    );
}


.lotes-toolbar__primary,
.lotes-toolbar__secondary {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 9px;
}


.lotes-toolbar__primary {
  flex: 1 1 auto;
}


.lotes-toolbar__secondary {
  flex: 0 0 auto;
}


html[data-theme="dark"] .lotes-toolbar,
body.dark .lotes-toolbar,
body[data-theme="dark"] .lotes-toolbar {
  border-bottom-color: #1e1e1e;
}


/* =========================================================
   SEARCH
   ========================================================= */

.lotes-search {
  position: relative;

  display: flex;
  align-items: center;
  gap: 9px;

  width: min(
    100%,
    480px
  );

  min-width: 220px;

  min-height: 40px;

  padding:
    0
    12px;

  border: 1px solid
    var(
      --border-color,
      #dedede
    );

  border-radius: 10px;

  color:
    var(
      --text-muted,
      #737373
    );

  background:
    var(
      --surface-base,
      #fafafa
    );
}


.lotes-search:focus-within {
  border-color: #2563eb;
}


.lotes-search input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  padding: 0;

  font: inherit;
  font-size: 13px;

  color:
    var(
      --text-primary,
      #171717
    );

  background: transparent;
}


.lotes-search input::placeholder {
  color:
    var(
      --text-muted,
      #989898
    );
}


.lotes-search__clear {
  appearance: none;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  cursor: pointer;

  color:
    var(
      --text-muted,
      #7c7c7c
    );

  background: transparent;
}


.lotes-search__clear:hover {
  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --surface-hover,
      #ececec
    );
}


html[data-theme="dark"] .lotes-search,
body.dark .lotes-search,
body[data-theme="dark"] .lotes-search {
  color: #888;
  background: #0b0b0b;
  border-color: #282828;
}


html[data-theme="dark"] .lotes-search input,
body.dark .lotes-search input,
body[data-theme="dark"] .lotes-search input {
  color: #ededed;
}


html[data-theme="dark"] .lotes-search__clear:hover,
body.dark .lotes-search__clear:hover,
body[data-theme="dark"] .lotes-search__clear:hover {
  color: #fff;
  background: #191919;
}


/* =========================================================
   TOOLBAR SELECT
   ========================================================= */

.lotes-toolbar-select {
  display: flex;
  align-items: center;
  gap: 7px;

  white-space: nowrap;
}


.lotes-toolbar-select > span {
  font-size: 11px;
  font-weight: 700;

  color:
    var(
      --text-muted,
      #7b7b7b
    );
}


.lotes-toolbar-select select {
  min-height: 38px;

  padding:
    0
    31px
    0
    11px;

  border: 1px solid
    var(
      --border-color,
      #dedede
    );

  border-radius: 9px;

  font: inherit;
  font-size: 12px;
  font-weight: 650;

  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --surface-raised,
      #fff
    );
}


html[data-theme="dark"] .lotes-toolbar-select select,
body.dark .lotes-toolbar-select select,
body[data-theme="dark"] .lotes-toolbar-select select {
  color: #e8e8e8;
  background: #090909;
  border-color: #272727;

  color-scheme: dark;
}


/* =========================================================
   SELECTION BAR
   ========================================================= */

.lotes-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-height: 50px;

  padding:
    8px
    14px;

  border-bottom: 1px solid #bfdbfe;

  background: #eff6ff;
}


.lotes-selection-bar[hidden] {
  display: none;
}


.lotes-selection-bar__info {
  display: flex;
  align-items: center;
  gap: 7px;

  font-size: 13px;

  color: #1d4ed8;
}


.lotes-selection-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}


html[data-theme="dark"] .lotes-selection-bar,
body.dark .lotes-selection-bar,
body[data-theme="dark"] .lotes-selection-bar {
  background: #07162a;
  border-bottom-color: #17385f;
}


html[data-theme="dark"] .lotes-selection-bar__info,
body.dark .lotes-selection-bar__info,
body[data-theme="dark"] .lotes-selection-bar__info {
  color: #60a5fa;
}


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

.lotes-table-container {
  min-width: 0;
}


.lotes-table-scroll {
  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-width: thin;
}


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

.lotes-table {
  width: 100%;
  min-width: 1280px;

  border-collapse: separate;
  border-spacing: 0;

  font-size: 12px;
}


.lotes-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  height: 46px;

  padding:
    0
    12px;

  border-bottom: 1px solid
    var(
      --border-color,
      #dfdfdf
    );

  text-align: left;
  vertical-align: middle;

  white-space: nowrap;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.035em;
  text-transform: uppercase;

  color:
    var(
      --text-muted,
      #717171
    );

  background:
    var(
      --surface-base,
      #fafafa
    );
}


.lotes-table tbody td {
  padding:
    12px;

  border-bottom: 1px solid
    var(
      --border-soft,
      #eeeeee
    );

  vertical-align: middle;

  color:
    var(
      --text-primary,
      #202020
    );

  background:
    var(
      --surface-raised,
      #fff
    );
}


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


.lotes-table tbody tr {
  transition:
    background-color 0.15s ease;
}


.lotes-table tbody tr:hover td {
  background:
    var(
      --surface-hover,
      #fafafa
    );
}


.lotes-table tbody tr.is-selected td {
  background: #f5f9ff;
}


html[data-theme="dark"] .lotes-table thead th,
body.dark .lotes-table thead th,
body[data-theme="dark"] .lotes-table thead th {
  color: #8f8f8f;
  background: #0a0a0a;
  border-bottom-color: #242424;
}


html[data-theme="dark"] .lotes-table tbody td,
body.dark .lotes-table tbody td,
body[data-theme="dark"] .lotes-table tbody td {
  color: #e5e5e5;
  background: #050505;
  border-bottom-color: #1d1d1d;
}


html[data-theme="dark"] .lotes-table tbody tr:hover td,
body.dark .lotes-table tbody tr:hover td,
body[data-theme="dark"] .lotes-table tbody tr:hover td {
  background: #0c0c0c;
}


html[data-theme="dark"] .lotes-table tbody tr.is-selected td,
body.dark .lotes-table tbody tr.is-selected td,
body[data-theme="dark"] .lotes-table tbody tr.is-selected td {
  background: #081526;
}


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

.lotes-table__checkbox-cell {
  width: 48px;

  text-align: center !important;
}


.lotes-checkbox {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  cursor: pointer;
}


.lotes-checkbox input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}


.lotes-checkbox span {
  width: 17px;
  height: 17px;

  border: 1.5px solid #b9b9b9;
  border-radius: 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    var(
      --surface-raised,
      #fff
    );

  transition:
    background-color 0.14s ease,
    border-color 0.14s ease;
}


.lotes-checkbox input:checked + span {
  border-color: #2563eb;
  background: #2563eb;
}


.lotes-checkbox input:checked + span::after {
  content: "";

  width: 7px;
  height: 4px;

  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform:
    translateY(-1px)
    rotate(-45deg);
}


html[data-theme="dark"] .lotes-checkbox span,
body.dark .lotes-checkbox span,
body[data-theme="dark"] .lotes-checkbox span {
  background: #090909;
  border-color: #4b4b4b;
}


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

.lotes-table__code-cell {
  min-width: 125px;
}


.lotes-code-button {
  appearance: none;

  padding: 0;

  border: 0;

  font: inherit;
  font-size: 12px;
  font-weight: 800;

  color: #2563eb;
  background: transparent;

  cursor: pointer;
}


.lotes-code-button:hover {
  text-decoration: underline;
}


.lotes-table__date-secondary {
  display: block;

  margin-top: 5px;

  font-size: 10px;

  color:
    var(
      --text-muted,
      #909090
    );
}


.lotes-table__product-cell {
  min-width: 230px;
}


.lotes-product-cell {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;
}


.lotes-product-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 12px;
  font-weight: 750;

  color:
    var(
      --text-primary,
      #171717
    );
}


.lotes-product-cell span {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10.5px;

  color:
    var(
      --text-muted,
      #818181
    );
}


.lotes-table__quantity-cell strong,
.lotes-table__date-cell strong {
  display: block;

  margin-bottom: 4px;

  font-size: 12px;
  font-weight: 750;
}


.lotes-table__quantity-cell span,
.lotes-table__date-cell span {
  font-size: 10px;

  color:
    var(
      --text-muted,
      #8a8a8a
    );
}


.lotes-table__stock-cell {
  min-width: 165px;
}


.lotes-stock-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}


.lotes-stock-cell__meta {
  font-size: 10px;

  color:
    var(
      --text-muted,
      #8b8b8b
    );
}


.lotes-table__actions-cell {
  width: 96px;

  text-align: right !important;
}


.lotes-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}


html[data-theme="dark"] .lotes-product-cell strong,
body.dark .lotes-product-cell strong,
body[data-theme="dark"] .lotes-product-cell strong {
  color: #f0f0f0;
}


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

.lotes-status-badge,
.lotes-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-height: 25px;

  padding:
    0
    8px;

  border: 1px solid transparent;
  border-radius: 999px;

  white-space: nowrap;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}


.lotes-status-badge--neutral,
.lotes-priority--neutral {
  color: #525252;
  background: #f5f5f5;
  border-color: #dedede;
}


.lotes-status-badge--info,
.lotes-priority--info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}


.lotes-status-badge--success,
.lotes-priority--success {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}


.lotes-status-badge--warning,
.lotes-priority--warning {
  color: #a16207;
  background: #fefce8;
  border-color: #fde68a;
}


.lotes-status-badge--danger,
.lotes-priority--danger {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}


html[data-theme="dark"] .lotes-status-badge--neutral,
html[data-theme="dark"] .lotes-priority--neutral,
body.dark .lotes-status-badge--neutral,
body.dark .lotes-priority--neutral,
body[data-theme="dark"] .lotes-status-badge--neutral,
body[data-theme="dark"] .lotes-priority--neutral {
  color: #cfcfcf;
  background: #131313;
  border-color: #303030;
}


html[data-theme="dark"] .lotes-status-badge--info,
html[data-theme="dark"] .lotes-priority--info,
body.dark .lotes-status-badge--info,
body.dark .lotes-priority--info,
body[data-theme="dark"] .lotes-status-badge--info,
body[data-theme="dark"] .lotes-priority--info {
  color: #60a5fa;
  background: #091a31;
  border-color: #183d69;
}


html[data-theme="dark"] .lotes-status-badge--success,
html[data-theme="dark"] .lotes-priority--success,
body.dark .lotes-status-badge--success,
body.dark .lotes-priority--success,
body[data-theme="dark"] .lotes-status-badge--success,
body[data-theme="dark"] .lotes-priority--success {
  color: #4ade80;
  background: #082011;
  border-color: #18562d;
}


html[data-theme="dark"] .lotes-status-badge--warning,
html[data-theme="dark"] .lotes-priority--warning,
body.dark .lotes-status-badge--warning,
body.dark .lotes-priority--warning,
body[data-theme="dark"] .lotes-status-badge--warning,
body[data-theme="dark"] .lotes-priority--warning {
  color: #facc15;
  background: #221c05;
  border-color: #594a0a;
}


html[data-theme="dark"] .lotes-status-badge--danger,
html[data-theme="dark"] .lotes-priority--danger,
body.dark .lotes-status-badge--danger,
body.dark .lotes-priority--danger,
body[data-theme="dark"] .lotes-status-badge--danger,
body[data-theme="dark"] .lotes-priority--danger {
  color: #f87171;
  background: #260909;
  border-color: #611818;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.lotes-table__progress-cell {
  min-width: 125px;
}


.lotes-progress-cell {
  width: 100%;
  min-width: 100px;
}


.lotes-progress-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  margin-bottom: 6px;
}


.lotes-progress-cell__top strong {
  font-size: 11px;
  font-weight: 800;
}


.lotes-progress-cell__warning {
  font-size: 9px;
  font-weight: 800;

  color: #b91c1c;
}


.lotes-progress {
  position: relative;

  width: 100%;
  height: 5px;

  overflow: hidden;

  border-radius: 999px;

  background: #e8e8e8;
}


.lotes-progress > span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background: #2563eb;

  transition:
    width 0.2s ease;
}


html[data-theme="dark"] .lotes-progress,
body.dark .lotes-progress,
body[data-theme="dark"] .lotes-progress {
  background: #222;
}


html[data-theme="dark"] .lotes-progress-cell__warning,
body.dark .lotes-progress-cell__warning,
body[data-theme="dark"] .lotes-progress-cell__warning {
  color: #f87171;
}


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

.lotes-table-loading {
  width: 100%;

  padding: 14px;
}


.lotes-table-loading__header,
.lotes-table-loading__row {
  display: grid;

  grid-template-columns:
    70px
    110px
    minmax(
      180px,
      1.5fr
    )
    100px
    140px
    150px
    100px
    120px;

  gap: 12px;

  align-items: center;

  min-height: 48px;

  border-bottom: 1px solid
    var(
      --border-soft,
      #eee
    );
}


html[data-theme="dark"] .lotes-table-loading__header,
html[data-theme="dark"] .lotes-table-loading__row,
body.dark .lotes-table-loading__header,
body.dark .lotes-table-loading__row,
body[data-theme="dark"] .lotes-table-loading__header,
body[data-theme="dark"] .lotes-table-loading__row {
  border-bottom-color: #1f1f1f;
}


/* =========================================================
   SKELETON
   ========================================================= */

.lotes-skeleton {
  position: relative;

  overflow: hidden;

  border-radius: 7px;

  background: #ececec;
}


.lotes-skeleton::after {
  content: "";

  position: absolute;
  inset: 0;

  transform:
    translateX(
      -100%
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.65
      ),
      transparent
    );

  animation:
    lotesSkeletonMove
    1.35s
    infinite;
}


.lotes-skeleton--label {
  width: 44%;
  height: 10px;
}


.lotes-skeleton--metric {
  width: 34%;
  height: 28px;

  margin:
    18px
    0
    8px;
}


.lotes-skeleton--text {
  width: 70%;
  height: 9px;
}


.lotes-skeleton--cell {
  width: 100%;
  height: 12px;
}


html[data-theme="dark"] .lotes-skeleton,
body.dark .lotes-skeleton,
body[data-theme="dark"] .lotes-skeleton {
  background: #171717;
}


html[data-theme="dark"] .lotes-skeleton::after,
body.dark .lotes-skeleton::after,
body[data-theme="dark"] .lotes-skeleton::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      transparent
    );
}


@keyframes lotesSkeletonMove {
  100% {
    transform:
      translateX(
        100%
      );
  }
}


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

.lotes-empty-state {
  min-height: 300px;

  padding: 32px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}


.lotes-empty-state__icon {
  width: 54px;
  height: 54px;

  margin-bottom: 14px;

  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(
      --text-secondary,
      #606060
    );

  background:
    var(
      --surface-hover,
      #f2f2f2
    );
}


.lotes-empty-state h3 {
  margin:
    0
    0
    7px;

  font-size: 16px;
  font-weight: 800;

  color:
    var(
      --text-primary,
      #171717
    );
}


.lotes-empty-state p {
  max-width: 460px;

  margin:
    0
    0
    18px;

  font-size: 13px;
  line-height: 1.55;

  color:
    var(
      --text-secondary,
      #747474
    );
}


.lotes-empty-state--compact {
  min-height: 150px;

  padding: 22px;
}


.lotes-empty-state--compact > svg {
  margin-bottom: 10px;

  color:
    var(
      --text-muted,
      #818181
    );
}


html[data-theme="dark"] .lotes-empty-state__icon,
body.dark .lotes-empty-state__icon,
body[data-theme="dark"] .lotes-empty-state__icon {
  color: #bdbdbd;
  background: #131313;
}


html[data-theme="dark"] .lotes-empty-state h3,
body.dark .lotes-empty-state h3,
body[data-theme="dark"] .lotes-empty-state h3 {
  color: #f4f4f4;
}


html[data-theme="dark"] .lotes-empty-state p,
body.dark .lotes-empty-state p,
body[data-theme="dark"] .lotes-empty-state p {
  color: #8d8d8d;
}


/* =========================================================
   INLINE ERROR
   ========================================================= */

.lotes-inline-error {
  width: 100%;

  min-height: 70px;

  padding: 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  text-align: center;

  font-size: 13px;
  font-weight: 650;

  color: #b91c1c;
}


html[data-theme="dark"] .lotes-inline-error,
body.dark .lotes-inline-error,
body[data-theme="dark"] .lotes-inline-error {
  color: #f87171;
}


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

.lotes-pagination {
  min-height: 58px;

  padding:
    10px
    14px;

  border-top: 1px solid
    var(
      --border-soft,
      #ececec
    );

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


.lotes-pagination:empty {
  display: none;
}


.lotes-pagination__summary {
  font-size: 12px;

  color:
    var(
      --text-secondary,
      #717171
    );
}


.lotes-pagination__summary strong {
  color:
    var(
      --text-primary,
      #222
    );
}


.lotes-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}


.lotes-pagination__page {
  min-width: 122px;

  text-align: center;

  font-size: 11px;

  color:
    var(
      --text-secondary,
      #6c6c6c
    );
}


html[data-theme="dark"] .lotes-pagination,
body.dark .lotes-pagination,
body[data-theme="dark"] .lotes-pagination {
  border-top-color: #1f1f1f;
}


html[data-theme="dark"] .lotes-pagination__summary,
html[data-theme="dark"] .lotes-pagination__page,
body.dark .lotes-pagination__summary,
body.dark .lotes-pagination__page,
body[data-theme="dark"] .lotes-pagination__summary,
body[data-theme="dark"] .lotes-pagination__page {
  color: #8d8d8d;
}


html[data-theme="dark"] .lotes-pagination__summary strong,
body.dark .lotes-pagination__summary strong,
body[data-theme="dark"] .lotes-pagination__summary strong {
  color: #e6e6e6;
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

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


@media (
  max-width: 1180px
) {
  .lotes-page-header {
    flex-direction: column;
  }


  .lotes-page-header__actions {
    width: 100%;

    justify-content: flex-start;
  }


  .lotes-toolbar {
    align-items: stretch;
    flex-direction: column;
  }


  .lotes-toolbar__secondary {
    justify-content: flex-start;
  }


  .lotes-search {
    width: 100%;
    max-width: none;
  }
}


@media (
  max-width: 760px
) {
  .lotes-preparacion-page {
    padding: 16px;
  }


  .lotes-page-header {
    gap: 18px;

    margin-bottom: 18px;
  }


  .lotes-page-header__actions {
    display: grid;

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


  .lotes-page-header__actions .lotes-button {
    width: 100%;
  }


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


  .lotes-toolbar__primary,
  .lotes-toolbar__secondary {
    width: 100%;

    flex-wrap: wrap;
  }


  .lotes-search {
    flex-basis: 100%;
  }


  .lotes-selection-bar,
  .lotes-pagination {
    align-items: flex-start;
    flex-direction: column;
  }


  .lotes-pagination__controls {
    width: 100%;

    justify-content: space-between;
  }
}


@media (
  max-width: 480px
) {
  .lotes-page-header__actions {
    grid-template-columns: 1fr;
  }


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


  .lotes-toolbar-select {
    width: 100%;

    justify-content: space-between;
  }


  .lotes-toolbar-select select {
    flex: 1;
  }
}


/* =========================================================
   FIN PARTE 1 DE 4

   SIGUE:
   - Modal base
   - Formularios
   - Inputs
   - Lookups
   - Popovers
   - Toasts
   ========================================================= *//* =========================================================
   PARTE 2 DE 4

   - Modal base
   - Formularios
   - Inputs
   - Lookups
   - Popovers
   - Toasts
   ========================================================= */


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

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


/* =========================================================
   OVERLAY ROOT
   ========================================================= */

.lotes-overlay-root {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;

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

  color:
    var(
      --text-primary,
      #171717
    );

  --lotes-modal-bg: #fff;
  --lotes-modal-border: #dedede;
  --lotes-modal-surface: #fafafa;
  --lotes-modal-surface-hover: #f3f3f3;
  --lotes-modal-text: #171717;
  --lotes-modal-text-secondary: #666;
  --lotes-modal-text-muted: #858585;
}


.lotes-overlay-root:empty {
  display: none;
}


html[data-theme="dark"] .lotes-overlay-root,
body.dark .lotes-overlay-root,
body[data-theme="dark"] .lotes-overlay-root {
  color: #f5f5f5;

  --lotes-modal-bg: #070707;
  --lotes-modal-border: #252525;
  --lotes-modal-surface: #0c0c0c;
  --lotes-modal-surface-hover: #151515;
  --lotes-modal-text: #f5f5f5;
  --lotes-modal-text-secondary: #aaa;
  --lotes-modal-text-muted: #7f7f7f;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.lotes-modal-backdrop {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 22px;

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

  pointer-events: auto;

  overflow-y: auto;
}


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

.lotes-modal {
  position: relative;
  z-index: 1;

  width: min(
    94vw,
    900px
  );

  max-height: min(
    92vh,
    960px
  );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 16px;

  color:
    var(
      --lotes-modal-text,
      #171717
    );

  background:
    var(
      --lotes-modal-bg,
      #fff
    );

  pointer-events: auto;
}


.lotes-modal--sm {
  width: min(
    94vw,
    520px
  );
}


.lotes-modal--md {
  width: min(
    94vw,
    720px
  );
}


.lotes-modal--lg {
  width: min(
    96vw,
    980px
  );
}


.lotes-modal--xl {
  width: min(
    97vw,
    1380px
  );
}


.lotes-modal.is-busy {
  pointer-events: none;
}


html[data-theme="dark"] .lotes-modal,
body.dark .lotes-modal,
body[data-theme="dark"] .lotes-modal {
  color: #f5f5f5;
  background: #070707;
  border-color: #252525;
}


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

.lotes-modal__header {
  min-height: 74px;

  padding:
    17px
    18px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  flex: 0 0 auto;

  border-bottom: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  background:
    var(
      --lotes-modal-bg,
      #fff
    );
}


.lotes-modal__header-copy {
  min-width: 0;

  flex: 1;
}


.lotes-modal__title {
  margin: 0;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -0.02em;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


.lotes-modal__subtitle {
  margin:
    5px
    0
    0;

  max-width: 900px;

  font-size: 12px;
  line-height: 1.5;

  color:
    var(
      --lotes-modal-text-secondary,
      #666
    );
}


.lotes-modal__close {
  flex: 0 0 auto;
}


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

.lotes-modal__body {
  min-width: 0;
  min-height: 0;

  flex: 1 1 auto;

  padding: 18px;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  background:
    var(
      --lotes-modal-bg,
      #fff
    );

  scrollbar-width: thin;
}


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

.lotes-modal__footer {
  min-height: 66px;

  padding:
    12px
    18px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;

  flex: 0 0 auto;

  border-top: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  background:
    var(
      --lotes-modal-bg,
      #fff
    );
}


.lotes-modal__footer-spacer {
  flex: 1 1 auto;
}


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

.lotes-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.lotes-form-grid {
  display: grid;
  gap: 14px;
}


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


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


/* =========================================================
   FORM SECTION
   ========================================================= */

.lotes-form-section {
  min-width: 0;

  padding-top: 18px;

  border-top: 1px solid
    var(
      --lotes-modal-border,
      #e4e4e4
    );
}


.lotes-form-section:first-child {
  padding-top: 0;
  border-top: 0;
}


.lotes-form-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 13px;
}


.lotes-form-section__title {
  margin-bottom: 3px;

  font-size: 13px;
  font-weight: 800;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


.lotes-form-section__description {
  font-size: 11px;
  line-height: 1.5;

  color:
    var(
      --lotes-modal-text-muted,
      #818181
    );
}


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

.lotes-field {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 7px;
}


.lotes-field__label {
  display: flex;
  align-items: center;
  gap: 4px;

  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;

  color:
    var(
      --lotes-modal-text-secondary,
      #5f5f5f
    );
}


.lotes-field__label strong {
  color: #b91c1c;
}


.lotes-field__hint {
  font-size: 10px;
  line-height: 1.45;

  color:
    var(
      --lotes-modal-text-muted,
      #8a8a8a
    );
}


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

.lotes-input {
  width: 100%;
  min-width: 0;
  min-height: 40px;

  padding:
    0
    11px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dcdcdc
    );

  border-radius: 9px;

  outline: 0;

  font: inherit;
  font-size: 12px;
  font-weight: 500;

  color:
    var(
      --lotes-modal-text,
      #171717
    );

  background:
    var(
      --lotes-modal-bg,
      #fff
    );

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}


.lotes-input:hover:not(:disabled) {
  border-color: #bfbfbf;
}


.lotes-input:focus {
  border-color: #2563eb;
}


.lotes-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;

  background:
    var(
      --lotes-modal-surface,
      #f6f6f6
    );
}


.lotes-input::placeholder {
  color:
    var(
      --lotes-modal-text-muted,
      #999
    );
}


select.lotes-input {
  cursor: pointer;
}


textarea.lotes-input {
  padding:
    10px
    11px;

  resize: vertical;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.lotes-textarea {
  min-height: 90px;
  line-height: 1.5;
}


.lotes-code-textarea {
  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 11px;
  line-height: 1.55;
}


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

.lotes-input--table {
  width: 120px;
  min-height: 34px;

  padding:
    0
    8px;

  font-size: 11px;
}


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

html[data-theme="dark"] .lotes-input,
body.dark .lotes-input,
body[data-theme="dark"] .lotes-input {
  color: #eee;
  background: #090909;
  border-color: #292929;

  color-scheme: dark;
}


html[data-theme="dark"] .lotes-input:hover:not(:disabled),
body.dark .lotes-input:hover:not(:disabled),
body[data-theme="dark"] .lotes-input:hover:not(:disabled) {
  border-color: #3b3b3b;
}


html[data-theme="dark"] .lotes-input:focus,
body.dark .lotes-input:focus,
body[data-theme="dark"] .lotes-input:focus {
  border-color: #3b82f6;
}


html[data-theme="dark"] .lotes-input:disabled,
body.dark .lotes-input:disabled,
body[data-theme="dark"] .lotes-input:disabled {
  background: #111;
}


/* =========================================================
   INPUT ICON
   ========================================================= */

.lotes-input-icon {
  position: relative;

  display: flex;
  align-items: center;
}


.lotes-input-icon > svg {
  position: absolute;
  left: 11px;
  z-index: 1;

  pointer-events: none;

  color:
    var(
      --lotes-modal-text-muted,
      #898989
    );
}


.lotes-input-icon .lotes-input {
  padding-left: 36px;
}


/* =========================================================
   INPUT SUFFIX
   ========================================================= */

.lotes-input-suffix {
  position: relative;

  display: flex;
  align-items: center;
}


.lotes-input-suffix .lotes-input {
  padding-right: 46px;
}


.lotes-input-suffix > span {
  position: absolute;
  right: 10px;

  pointer-events: none;

  font-size: 10px;
  font-weight: 700;

  color:
    var(
      --lotes-modal-text-muted,
      #888
    );
}


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

.lotes-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  width: fit-content;

  font-size: 12px;
  font-weight: 650;

  color:
    var(
      --lotes-modal-text-secondary,
      #606060
    );

  cursor: pointer;
}


.lotes-checkbox-row input {
  width: 16px;
  height: 16px;

  accent-color: #2563eb;
}


/* =========================================================
   LOOKUP
   ========================================================= */

.lotes-lookup {
  position: relative;

  min-width: 0;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.lotes-search-results {
  width: 100%;

  max-height: 300px;

  margin-top: 6px;

  overflow-y: auto;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 10px;

  background:
    var(
      --lotes-modal-bg,
      #fff
    );

  scrollbar-width: thin;
}


.lotes-search-results:empty {
  display: none;
}


.lotes-search-results__loading,
.lotes-search-results__empty {
  min-height: 70px;

  padding: 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  text-align: center;

  font-size: 11px;

  color:
    var(
      --lotes-modal-text-muted,
      #818181
    );
}


.lotes-search-results__loading svg {
  animation:
    lotesSpin
    0.9s
    linear
    infinite;
}


.lotes-search-results__empty--error {
  color: #b91c1c;
}


html[data-theme="dark"] .lotes-search-results,
body.dark .lotes-search-results,
body[data-theme="dark"] .lotes-search-results {
  background: #080808;
  border-color: #292929;
}


html[data-theme="dark"] .lotes-search-results__empty--error,
body.dark .lotes-search-results__empty--error,
body[data-theme="dark"] .lotes-search-results__empty--error {
  color: #f87171;
}


/* =========================================================
   PRODUCT OPTION
   ========================================================= */

.lotes-product-option,
.lotes-responsible-option {
  appearance: none;

  width: 100%;

  min-height: 58px;

  padding:
    10px
    12px;

  border: 0;
  border-bottom: 1px solid
    var(
      --lotes-modal-border,
      #ebebeb
    );

  display: flex;
  align-items: center;
  gap: 12px;

  text-align: left;

  color:
    var(
      --lotes-modal-text,
      #171717
    );

  background:
    var(
      --lotes-modal-bg,
      #fff
    );

  cursor: pointer;

  transition:
    background-color 0.14s ease;
}


.lotes-product-option:last-child,
.lotes-responsible-option:last-child {
  border-bottom: 0;
}


.lotes-product-option:hover,
.lotes-responsible-option:hover {
  background:
    var(
      --lotes-modal-surface-hover,
      #f5f5f5
    );
}


.lotes-product-option__main,
.lotes-responsible-option__copy {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.lotes-product-option__main strong,
.lotes-responsible-option__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 12px;
  font-weight: 750;
}


.lotes-product-option__main span,
.lotes-responsible-option__copy span {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10px;

  color:
    var(
      --lotes-modal-text-muted,
      #858585
    );
}


.lotes-product-option__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;

  flex: 0 1 310px;
}


.lotes-product-option__meta span {
  min-height: 22px;

  padding:
    0
    7px;

  display: inline-flex;
  align-items: center;

  border: 1px solid
    var(
      --lotes-modal-border,
      #e1e1e1
    );

  border-radius: 999px;

  white-space: nowrap;

  font-size: 9px;
  font-weight: 700;

  color:
    var(
      --lotes-modal-text-secondary,
      #666
    );

  background:
    var(
      --lotes-modal-surface,
      #f7f7f7
    );
}


.lotes-product-option__select {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  color:
    var(
      --lotes-modal-text-muted,
      #888
    );
}


.lotes-responsible-option__avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  border-radius: 9px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(
      --lotes-modal-text-secondary,
      #656565
    );

  background:
    var(
      --lotes-modal-surface,
      #f2f2f2
    );
}


html[data-theme="dark"] .lotes-product-option,
html[data-theme="dark"] .lotes-responsible-option,
body.dark .lotes-product-option,
body.dark .lotes-responsible-option,
body[data-theme="dark"] .lotes-product-option,
body[data-theme="dark"] .lotes-responsible-option {
  color: #eee;
  background: #080808;
  border-bottom-color: #202020;
}


html[data-theme="dark"] .lotes-product-option:hover,
html[data-theme="dark"] .lotes-responsible-option:hover,
body.dark .lotes-product-option:hover,
body.dark .lotes-responsible-option:hover,
body[data-theme="dark"] .lotes-product-option:hover,
body[data-theme="dark"] .lotes-responsible-option:hover {
  background: #121212;
}


html[data-theme="dark"] .lotes-product-option__meta span,
body.dark .lotes-product-option__meta span,
body[data-theme="dark"] .lotes-product-option__meta span {
  color: #aaa;
  background: #121212;
  border-color: #2d2d2d;
}


html[data-theme="dark"] .lotes-responsible-option__avatar,
body.dark .lotes-responsible-option__avatar,
body[data-theme="dark"] .lotes-responsible-option__avatar {
  color: #c2c2c2;
  background: #151515;
}


/* =========================================================
   SELECTED PRODUCT
   ========================================================= */

.lotes-selected-product {
  min-height: 66px;

  padding: 11px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 11px;

  display: flex;
  align-items: center;
  gap: 11px;

  background:
    var(
      --lotes-modal-surface,
      #fafafa
    );
}


.lotes-selected-product.is-loading {
  justify-content: center;

  font-size: 11px;

  color:
    var(
      --lotes-modal-text-muted,
      #818181
    );
}


.lotes-selected-product.is-loading svg {
  animation:
    lotesSpin
    0.9s
    linear
    infinite;
}


.lotes-selected-product__icon {
  width: 40px;
  height: 40px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color: #2563eb;
  background: #eff6ff;
}


.lotes-selected-product__copy {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;
}


.lotes-selected-product__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 13px;
  font-weight: 800;
}


.lotes-selected-product__copy span {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10px;

  color:
    var(
      --lotes-modal-text-muted,
      #858585
    );
}


html[data-theme="dark"] .lotes-selected-product,
body.dark .lotes-selected-product,
body[data-theme="dark"] .lotes-selected-product {
  background: #0d0d0d;
  border-color: #292929;
}


html[data-theme="dark"] .lotes-selected-product__icon,
body.dark .lotes-selected-product__icon,
body[data-theme="dark"] .lotes-selected-product__icon {
  color: #60a5fa;
  background: #0b1a2e;
}


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

.lotes-summary-product {
  padding: 11px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 11px;

  display: flex;
  align-items: center;
  gap: 10px;

  background:
    var(
      --lotes-modal-surface,
      #fafafa
    );
}


.lotes-summary-product__icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 9px;

  background: #eff6ff;
  color: #2563eb;
}


.lotes-summary-product > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.lotes-summary-product strong {
  font-size: 12px;
  font-weight: 800;
}


.lotes-summary-product span {
  font-size: 10px;

  color:
    var(
      --lotes-modal-text-muted,
      #818181
    );
}


html[data-theme="dark"] .lotes-summary-product,
body.dark .lotes-summary-product,
body[data-theme="dark"] .lotes-summary-product {
  background: #0d0d0d;
  border-color: #292929;
}


html[data-theme="dark"] .lotes-summary-product__icon,
body.dark .lotes-summary-product__icon,
body[data-theme="dark"] .lotes-summary-product__icon {
  background: #0b1a2e;
  color: #60a5fa;
}


/* =========================================================
   CREATE INFO
   ========================================================= */

.lotes-create-info {
  padding: 13px;

  border: 1px solid #bfdbfe;
  border-radius: 11px;

  display: flex;
  align-items: flex-start;
  gap: 11px;

  background: #eff6ff;
}


.lotes-create-info__icon {
  width: 35px;
  height: 35px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color: #1d4ed8;
  background: #dbeafe;
}


.lotes-create-info strong {
  display: block;

  margin-bottom: 3px;

  font-size: 11px;
  font-weight: 800;

  color: #1e3a8a;
}


.lotes-create-info p {
  margin: 0;

  font-size: 10px;
  line-height: 1.5;

  color: #31558f;
}


html[data-theme="dark"] .lotes-create-info,
body.dark .lotes-create-info,
body[data-theme="dark"] .lotes-create-info {
  background: #07162a;
  border-color: #183b66;
}


html[data-theme="dark"] .lotes-create-info__icon,
body.dark .lotes-create-info__icon,
body[data-theme="dark"] .lotes-create-info__icon {
  color: #60a5fa;
  background: #0c2746;
}


html[data-theme="dark"] .lotes-create-info strong,
body.dark .lotes-create-info strong,
body[data-theme="dark"] .lotes-create-info strong {
  color: #93c5fd;
}


html[data-theme="dark"] .lotes-create-info p,
body.dark .lotes-create-info p,
body[data-theme="dark"] .lotes-create-info p {
  color: #78a6da;
}


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

.lotes-confirm {
  padding:
    8px
    2px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}


.lotes-confirm__icon {
  width: 52px;
  height: 52px;

  margin-bottom: 13px;

  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(
      --lotes-modal-text-secondary,
      #666
    );

  background:
    var(
      --lotes-modal-surface,
      #f3f3f3
    );
}


.lotes-confirm__message {
  max-width: 430px;

  margin:
    0
    auto;

  font-size: 13px;
  line-height: 1.55;

  color:
    var(
      --lotes-modal-text-secondary,
      #606060
    );
}


.lotes-confirm__details {
  width: 100%;

  margin-top: 16px;

  text-align: left;
}


/* =========================================================
   CALLOUT
   ========================================================= */

.lotes-callout {
  padding: 12px;

  border: 1px solid transparent;
  border-radius: 10px;

  display: flex;
  align-items: flex-start;
  gap: 9px;

  font-size: 11px;
  line-height: 1.5;
}


.lotes-callout > svg {
  flex: 0 0 auto;

  margin-top: 1px;
}


.lotes-callout strong {
  display: block;

  margin-bottom: 2px;

  font-size: 11px;
  font-weight: 800;
}


.lotes-callout p {
  margin: 0;
}


.lotes-callout--info {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}


.lotes-callout--success {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}


.lotes-callout--warning {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}


.lotes-callout--danger {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}


html[data-theme="dark"] .lotes-callout--info,
body.dark .lotes-callout--info,
body[data-theme="dark"] .lotes-callout--info {
  color: #60a5fa;
  background: #07162a;
  border-color: #183b66;
}


html[data-theme="dark"] .lotes-callout--success,
body.dark .lotes-callout--success,
body[data-theme="dark"] .lotes-callout--success {
  color: #4ade80;
  background: #071e10;
  border-color: #18562d;
}


html[data-theme="dark"] .lotes-callout--warning,
body.dark .lotes-callout--warning,
body[data-theme="dark"] .lotes-callout--warning {
  color: #facc15;
  background: #211b05;
  border-color: #594a0a;
}


html[data-theme="dark"] .lotes-callout--danger,
body.dark .lotes-callout--danger,
body[data-theme="dark"] .lotes-callout--danger {
  color: #f87171;
  background: #250909;
  border-color: #641b1b;
}


/* =========================================================
   POPOVER
   ========================================================= */

.lotes-popover {
  z-index: 12000;

  width: 220px;

  padding: 5px;

  border: 1px solid
    var(
      --border-color,
      #dedede
    );

  border-radius: 11px;

  color:
    var(
      --text-primary,
      #171717
    );

  background:
    var(
      --surface-raised,
      #fff
    );
}


.lotes-popover--wide {
  width: 255px;
}


.lotes-popover__item {
  appearance: none;

  width: 100%;
  min-height: 38px;

  padding:
    0
    10px;

  border: 0;
  border-radius: 8px;

  display: flex;
  align-items: center;
  gap: 9px;

  text-align: left;

  font: inherit;
  font-size: 11px;
  font-weight: 650;

  color:
    var(
      --text-primary,
      #252525
    );

  background: transparent;

  cursor: pointer;
}


.lotes-popover__item:hover {
  background:
    var(
      --surface-hover,
      #f3f3f3
    );
}


.lotes-popover__item--danger {
  color: #b91c1c;
}


.lotes-popover__separator {
  height: 1px;

  margin:
    5px
    3px;

  background:
    var(
      --border-soft,
      #ececec
    );
}


.lotes-popover__empty {
  padding:
    12px
    10px;

  text-align: center;

  font-size: 10px;

  color:
    var(
      --text-muted,
      #898989
    );
}


html[data-theme="dark"] .lotes-popover,
body.dark .lotes-popover,
body[data-theme="dark"] .lotes-popover {
  color: #eee;
  background: #090909;
  border-color: #292929;
}


html[data-theme="dark"] .lotes-popover__item,
body.dark .lotes-popover__item,
body[data-theme="dark"] .lotes-popover__item {
  color: #ddd;
}


html[data-theme="dark"] .lotes-popover__item:hover,
body.dark .lotes-popover__item:hover,
body[data-theme="dark"] .lotes-popover__item:hover {
  background: #151515;
}


html[data-theme="dark"] .lotes-popover__item--danger,
body.dark .lotes-popover__item--danger,
body[data-theme="dark"] .lotes-popover__item--danger {
  color: #f87171;
}


html[data-theme="dark"] .lotes-popover__separator,
body.dark .lotes-popover__separator,
body[data-theme="dark"] .lotes-popover__separator {
  background: #252525;
}


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

.lotes-toast-root {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 15000;

  width: min(
    92vw,
    390px
  );

  display: flex;
  flex-direction: column;
  gap: 9px;

  pointer-events: none;

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


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

.lotes-toast {
  min-height: 54px;

  padding:
    10px
    10px
    10px
    12px;

  border: 1px solid #dedede;
  border-radius: 11px;

  display: grid;

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

  align-items: center;
  gap: 8px;

  pointer-events: auto;

  color: #202020;
  background: #fff;

  animation:
    lotesToastIn
    0.18s
    ease;
}


.lotes-toast.is-closing {
  animation:
    lotesToastOut
    0.18s
    ease
    forwards;
}


.lotes-toast__icon {
  width: 30px;
  height: 30px;

  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #525252;
  background: #f2f2f2;
}


.lotes-toast__content {
  min-width: 0;

  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}


.lotes-toast__close {
  appearance: none;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;
  border-radius: 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  color: #777;
  background: transparent;
}


.lotes-toast__close:hover {
  color: #222;
  background: #f1f1f1;
}


.lotes-toast--success {
  border-color: #bbf7d0;
}


.lotes-toast--success .lotes-toast__icon {
  color: #15803d;
  background: #f0fdf4;
}


.lotes-toast--warning {
  border-color: #fde68a;
}


.lotes-toast--warning .lotes-toast__icon {
  color: #a16207;
  background: #fefce8;
}


.lotes-toast--error {
  border-color: #fecaca;
}


.lotes-toast--error .lotes-toast__icon {
  color: #b91c1c;
  background: #fef2f2;
}


.lotes-toast--info {
  border-color: #bfdbfe;
}


.lotes-toast--info .lotes-toast__icon {
  color: #1d4ed8;
  background: #eff6ff;
}


html[data-theme="dark"] .lotes-toast,
body.dark .lotes-toast,
body[data-theme="dark"] .lotes-toast {
  color: #ededed;
  background: #090909;
  border-color: #2b2b2b;
}


html[data-theme="dark"] .lotes-toast__close,
body.dark .lotes-toast__close,
body[data-theme="dark"] .lotes-toast__close {
  color: #999;
}


html[data-theme="dark"] .lotes-toast__close:hover,
body.dark .lotes-toast__close:hover,
body[data-theme="dark"] .lotes-toast__close:hover {
  color: #fff;
  background: #171717;
}


html[data-theme="dark"] .lotes-toast--success,
body.dark .lotes-toast--success,
body[data-theme="dark"] .lotes-toast--success {
  border-color: #18562d;
}


html[data-theme="dark"] .lotes-toast--success .lotes-toast__icon,
body.dark .lotes-toast--success .lotes-toast__icon,
body[data-theme="dark"] .lotes-toast--success .lotes-toast__icon {
  color: #4ade80;
  background: #071e10;
}


html[data-theme="dark"] .lotes-toast--warning,
body.dark .lotes-toast--warning,
body[data-theme="dark"] .lotes-toast--warning {
  border-color: #594a0a;
}


html[data-theme="dark"] .lotes-toast--warning .lotes-toast__icon,
body.dark .lotes-toast--warning .lotes-toast__icon,
body[data-theme="dark"] .lotes-toast--warning .lotes-toast__icon {
  color: #facc15;
  background: #211b05;
}


html[data-theme="dark"] .lotes-toast--error,
body.dark .lotes-toast--error,
body[data-theme="dark"] .lotes-toast--error {
  border-color: #641b1b;
}


html[data-theme="dark"] .lotes-toast--error .lotes-toast__icon,
body.dark .lotes-toast--error .lotes-toast__icon,
body[data-theme="dark"] .lotes-toast--error .lotes-toast__icon {
  color: #f87171;
  background: #250909;
}


html[data-theme="dark"] .lotes-toast--info,
body.dark .lotes-toast--info,
body[data-theme="dark"] .lotes-toast--info {
  border-color: #183b66;
}


html[data-theme="dark"] .lotes-toast--info .lotes-toast__icon,
body.dark .lotes-toast--info .lotes-toast__icon,
body[data-theme="dark"] .lotes-toast--info .lotes-toast__icon {
  color: #60a5fa;
  background: #07162a;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

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


@keyframes lotesToastIn {
  from {
    opacity: 0;

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes lotesToastOut {
  from {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }

  to {
    opacity: 0;

    transform:
      translateY(
        8px
      );
  }
}


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

.lotes-button.is-loading svg,
.lotes-icon-button.is-loading svg {
  animation:
    lotesSpin
    0.9s
    linear
    infinite;
}


/* =========================================================
   RESPONSIVE · MODALS
   ========================================================= */

@media (
  max-width: 800px
) {
  .lotes-modal-backdrop {
    padding: 12px;
  }


  .lotes-modal {
    width: 100%;
    max-height: 94vh;

    border-radius: 13px;
  }


  .lotes-modal__header {
    min-height: 66px;

    padding:
      14px;
  }


  .lotes-modal__body {
    padding: 14px;
  }


  .lotes-modal__footer {
    padding:
      10px
      14px;
  }


  .lotes-form-grid--2,
  .lotes-form-grid--3 {
    grid-template-columns: 1fr;
  }


  .lotes-product-option {
    align-items: flex-start;
  }


  .lotes-product-option__meta {
    display: none;
  }
}


@media (
  max-width: 520px
) {
  .lotes-modal-backdrop {
    align-items: flex-end;

    padding: 0;
  }


  .lotes-modal {
    width: 100%;
    max-width: none;
    max-height: 96vh;

    border-right: 0;
    border-left: 0;
    border-bottom: 0;

    border-radius:
      15px
      15px
      0
      0;
  }


  .lotes-modal__footer {
    display: grid;

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


  .lotes-modal__footer-spacer {
    display: none;
  }


  .lotes-modal__footer .lotes-button {
    width: 100%;
  }


  .lotes-toast-root {
    right: 10px;
    bottom: 10px;
    left: 10px;

    width: auto;
  }
}


/* =========================================================
   FIN PARTE 2 DE 4

   SIGUE:
   - Detalle de lote
   - Hero
   - KPIs
   - Información
   - Tabla detalle
   - Faltantes
   - Reservas
   - Avances
   - Movimientos de stock
   ========================================================= *//* =========================================================
   PARTE 3 DE 4

   - Detalle de lote
   - Hero
   - KPIs
   - Información
   - Tabla detalle
   - Faltantes
   - Reservas
   - Avances
   - Movimientos de stock
   ========================================================= */


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

.lotes-detail {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* =========================================================
   DETAIL LOADING
   ========================================================= */

.lotes-detail-loading {
  min-height: 180px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 12px;
  font-weight: 650;

  color:
    var(
      --lotes-modal-text-muted,
      #7f7f7f
    );
}


.lotes-detail-loading svg {
  animation:
    lotesSpin
    0.9s
    linear
    infinite;
}


/* =========================================================
   DETAIL HERO
   ========================================================= */

.lotes-detail-hero {
  min-width: 0;

  padding: 16px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 13px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  background:
    var(
      --lotes-modal-surface,
      #fafafa
    );
}


.lotes-detail-hero__main {
  min-width: 0;

  flex: 1;

  display: flex;
  align-items: flex-start;
  gap: 18px;
}


.lotes-detail-hero__product {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;
}


.lotes-detail-hero__product > span {
  font-size: 10px;
  font-weight: 750;

  text-transform: uppercase;
  letter-spacing: 0.05em;

  color:
    var(
      --lotes-modal-text-muted,
      #848484
    );
}


.lotes-detail-hero__product > strong {
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;

  letter-spacing: -0.025em;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


.lotes-detail-hero__product > small {
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 11px;
  line-height: 1.4;

  color:
    var(
      --lotes-modal-text-secondary,
      #686868
    );
}


.lotes-detail-hero__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;

  flex: 0 0 auto;
}


.lotes-detail-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;

  flex: 0 1 650px;
}


html[data-theme="dark"] .lotes-detail-hero,
body.dark .lotes-detail-hero,
body[data-theme="dark"] .lotes-detail-hero {
  background: #0b0b0b;
  border-color: #272727;
}


/* =========================================================
   DETAIL KPIs
   ========================================================= */

.lotes-detail-kpis {
  display: grid;

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

  gap: 10px;
}


.lotes-detail-kpis--compact {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  margin-bottom: 14px;
}


.lotes-detail-kpi {
  min-width: 0;

  min-height: 88px;

  padding: 13px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 11px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;

  background:
    var(
      --lotes-modal-bg,
      #fff
    );
}


.lotes-detail-kpi > span {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;

  color:
    var(
      --lotes-modal-text-muted,
      #828282
    );
}


.lotes-detail-kpi > strong {
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;

  letter-spacing: -0.025em;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


.lotes-detail-kpi.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
}


.lotes-detail-kpi.is-success > strong {
  color: #15803d;
}


.lotes-detail-kpi.is-danger {
  border-color: #fecaca;
  background: #fef2f2;
}


.lotes-detail-kpi.is-danger > strong {
  color: #b91c1c;
}


html[data-theme="dark"] .lotes-detail-kpi,
body.dark .lotes-detail-kpi,
body[data-theme="dark"] .lotes-detail-kpi {
  background: #080808;
  border-color: #272727;
}


html[data-theme="dark"] .lotes-detail-kpi.is-success,
body.dark .lotes-detail-kpi.is-success,
body[data-theme="dark"] .lotes-detail-kpi.is-success {
  background: #071e10;
  border-color: #18562d;
}


html[data-theme="dark"] .lotes-detail-kpi.is-success > strong,
body.dark .lotes-detail-kpi.is-success > strong,
body[data-theme="dark"] .lotes-detail-kpi.is-success > strong {
  color: #4ade80;
}


html[data-theme="dark"] .lotes-detail-kpi.is-danger,
body.dark .lotes-detail-kpi.is-danger,
body[data-theme="dark"] .lotes-detail-kpi.is-danger {
  background: #250909;
  border-color: #641b1b;
}


html[data-theme="dark"] .lotes-detail-kpi.is-danger > strong,
body.dark .lotes-detail-kpi.is-danger > strong,
body[data-theme="dark"] .lotes-detail-kpi.is-danger > strong {
  color: #f87171;
}


/* =========================================================
   DETAIL INFO GRID
   ========================================================= */

.lotes-detail-info-grid {
  display: grid;

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

  gap: 10px;
}


.lotes-info-card {
  min-width: 0;

  padding: 12px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 10px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  background:
    var(
      --lotes-modal-bg,
      #fff
    );
}


.lotes-info-card__label {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 10px;
  font-weight: 700;

  color:
    var(
      --lotes-modal-text-muted,
      #808080
    );
}


.lotes-info-card > strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11px;
  font-weight: 750;

  color:
    var(
      --lotes-modal-text,
      #202020
    );
}


html[data-theme="dark"] .lotes-info-card,
body.dark .lotes-info-card,
body[data-theme="dark"] .lotes-info-card {
  background: #080808;
  border-color: #272727;
}


/* =========================================================
   DETAIL SECTION
   ========================================================= */

.lotes-detail-section {
  min-width: 0;

  padding: 15px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 12px;

  background:
    var(
      --lotes-modal-bg,
      #fff
    );
}


.lotes-detail-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;

  margin-bottom: 13px;
}


.lotes-detail-section__header h3 {
  margin: 0;

  font-size: 13px;
  font-weight: 800;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


.lotes-detail-section__header p {
  margin:
    3px
    0
    0;

  font-size: 10px;
  line-height: 1.45;

  color:
    var(
      --lotes-modal-text-muted,
      #858585
    );
}


html[data-theme="dark"] .lotes-detail-section,
body.dark .lotes-detail-section,
body[data-theme="dark"] .lotes-detail-section {
  background: #070707;
  border-color: #252525;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.lotes-detail-grid {
  display: grid;

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

  gap: 12px;
}


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

.lotes-table--detail {
  min-width: 1550px;
}


.lotes-table--detail thead th {
  height: 42px;

  font-size: 9px;
}


.lotes-table--detail tbody td {
  padding:
    10px;

  font-size: 10.5px;
}


.lotes-table--compact {
  min-width: 900px;
}


.lotes-table--compact thead th {
  height: 40px;

  font-size: 9px;
}


.lotes-table--compact tbody td {
  padding:
    9px
    10px;

  font-size: 10.5px;
}


/* =========================================================
   DETAIL INSUMO
   ========================================================= */

.lotes-detail-insumo {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.lotes-detail-insumo strong {
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 260px;

  white-space: nowrap;

  font-size: 11px;
  font-weight: 750;

  color:
    var(
      --lotes-modal-text,
      #1b1b1b
    );
}


.lotes-detail-insumo span {
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 260px;

  white-space: nowrap;

  font-size: 9.5px;

  color:
    var(
      --lotes-modal-text-muted,
      #858585
    );
}


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

.lotes-table-subtext {
  display: block;

  margin-top: 3px;

  font-size: 9px;

  color:
    var(
      --lotes-modal-text-muted,
      #8a8a8a
    );
}


/* =========================================================
   QUANTITY STATES
   ========================================================= */

.lotes-quantity-danger {
  font-weight: 800;
  color: #b91c1c;
}


.lotes-quantity-success {
  font-weight: 800;
  color: #15803d;
}


html[data-theme="dark"] .lotes-quantity-danger,
body.dark .lotes-quantity-danger,
body[data-theme="dark"] .lotes-quantity-danger {
  color: #f87171;
}


html[data-theme="dark"] .lotes-quantity-success,
body.dark .lotes-quantity-success,
body[data-theme="dark"] .lotes-quantity-success {
  color: #4ade80;
}


/* =========================================================
   SHORTAGES
   ========================================================= */

.lotes-shortages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.lotes-shortage-card {
  min-width: 0;

  padding: 11px;

  border: 1px solid #fecaca;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background: #fffafa;
}


.lotes-shortage-card > div:first-child {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.lotes-shortage-card > div:first-child strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11px;
  font-weight: 750;

  color: #991b1b;
}


.lotes-shortage-card > div:first-child span {
  font-size: 9px;

  color: #b45353;
}


.lotes-shortage-card__numbers {
  display: grid;

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

  gap: 8px;

  flex: 0 1 360px;
}


.lotes-shortage-card__numbers > div {
  display: flex;
  flex-direction: column;
  gap: 3px;

  padding-left: 9px;

  border-left: 1px solid #fecaca;
}


.lotes-shortage-card__numbers span {
  font-size: 8px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  color: #a35e5e;
}


.lotes-shortage-card__numbers strong {
  font-size: 11px;
  font-weight: 800;

  color: #7f1d1d;
}


.lotes-shortage-card__numbers .is-danger strong {
  color: #dc2626;
}


html[data-theme="dark"] .lotes-shortage-card,
body.dark .lotes-shortage-card,
body[data-theme="dark"] .lotes-shortage-card {
  background: #180707;
  border-color: #5d1919;
}


html[data-theme="dark"] .lotes-shortage-card > div:first-child strong,
body.dark .lotes-shortage-card > div:first-child strong,
body[data-theme="dark"] .lotes-shortage-card > div:first-child strong {
  color: #fca5a5;
}


html[data-theme="dark"] .lotes-shortage-card > div:first-child span,
body.dark .lotes-shortage-card > div:first-child span,
body[data-theme="dark"] .lotes-shortage-card > div:first-child span {
  color: #c57878;
}


html[data-theme="dark"] .lotes-shortage-card__numbers > div,
body.dark .lotes-shortage-card__numbers > div,
body[data-theme="dark"] .lotes-shortage-card__numbers > div {
  border-left-color: #512020;
}


html[data-theme="dark"] .lotes-shortage-card__numbers span,
body.dark .lotes-shortage-card__numbers span,
body[data-theme="dark"] .lotes-shortage-card__numbers span {
  color: #d28f8f;
}


html[data-theme="dark"] .lotes-shortage-card__numbers strong,
body.dark .lotes-shortage-card__numbers strong,
body[data-theme="dark"] .lotes-shortage-card__numbers strong {
  color: #fecaca;
}


/* =========================================================
   GENERIC LIST
   ========================================================= */

.lotes-list {
  display: flex;
  flex-direction: column;
}


.lotes-list-row {
  min-width: 0;

  min-height: 54px;

  padding:
    8px
    0;

  border-bottom: 1px solid
    var(
      --lotes-modal-border,
      #e8e8e8
    );

  display: grid;

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

  align-items: center;
  gap: 9px;
}


.lotes-list-row:last-child {
  border-bottom: 0;
}


.lotes-list-row__icon {
  width: 32px;
  height: 32px;

  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(
      --lotes-modal-text-secondary,
      #606060
    );

  background:
    var(
      --lotes-modal-surface,
      #f2f2f2
    );
}


.lotes-list-row__main {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.lotes-list-row__main strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10.5px;
  font-weight: 750;

  color:
    var(
      --lotes-modal-text,
      #202020
    );
}


.lotes-list-row__main span {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 9px;

  color:
    var(
      --lotes-modal-text-muted,
      #848484
    );
}


.lotes-list-row__value {
  flex: 0 0 auto;

  padding-left: 12px;

  white-space: nowrap;

  font-size: 11px;
  font-weight: 800;

  color:
    var(
      --lotes-modal-text,
      #202020
    );
}


html[data-theme="dark"] .lotes-list-row,
body.dark .lotes-list-row,
body[data-theme="dark"] .lotes-list-row {
  border-bottom-color: #212121;
}


html[data-theme="dark"] .lotes-list-row__icon,
body.dark .lotes-list-row__icon,
body[data-theme="dark"] .lotes-list-row__icon {
  color: #bababa;
  background: #141414;
}


/* =========================================================
   DETAIL INLINE VALUES
   ========================================================= */

.lotes-detail-inline-values {
  display: grid;

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

  gap: 8px;
}


.lotes-detail-inline-values > div {
  min-width: 0;

  min-height: 62px;

  padding: 10px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 9px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  background:
    var(
      --lotes-modal-surface,
      #fafafa
    );
}


.lotes-detail-inline-values span {
  font-size: 9px;
  font-weight: 700;

  color:
    var(
      --lotes-modal-text-muted,
      #838383
    );
}


.lotes-detail-inline-values strong {
  font-size: 15px;
  font-weight: 800;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


html[data-theme="dark"] .lotes-detail-inline-values > div,
body.dark .lotes-detail-inline-values > div,
body[data-theme="dark"] .lotes-detail-inline-values > div {
  background: #0c0c0c;
  border-color: #282828;
}


/* =========================================================
   DETAIL NOTE
   ========================================================= */

.lotes-detail-note {
  padding: 12px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 9px;

  font-size: 11px;
  line-height: 1.65;

  white-space: pre-wrap;
  word-break: break-word;

  color:
    var(
      --lotes-modal-text-secondary,
      #626262
    );

  background:
    var(
      --lotes-modal-surface,
      #fafafa
    );
}


html[data-theme="dark"] .lotes-detail-note,
body.dark .lotes-detail-note,
body[data-theme="dark"] .lotes-detail-note {
  background: #0c0c0c;
  border-color: #282828;
  color: #aaa;
}


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

.lotes-history-layout {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 13px;
}


.lotes-history-toolbar {
  display: grid;

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

  gap: 10px;

  align-items: end;
}


.lotes-history-toolbar__search {
  min-width: 200px;
}


.lotes-history-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}


.lotes-history-results {
  min-width: 0;
}


.lotes-table--history {
  min-width: 1350px;
}


.lotes-history-action {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  padding:
    0
    7px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 999px;

  font-size: 8.5px;
  font-weight: 800;

  white-space: nowrap;

  color:
    var(
      --lotes-modal-text-secondary,
      #5f5f5f
    );

  background:
    var(
      --lotes-modal-surface,
      #f6f6f6
    );
}


.lotes-history-description {
  min-width: 220px;
  max-width: 420px;

  white-space: normal;

  line-height: 1.45;
}


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

.lotes-modal__body::-webkit-scrollbar,
.lotes-table-scroll::-webkit-scrollbar,
.lotes-search-results::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


.lotes-modal__body::-webkit-scrollbar-track,
.lotes-table-scroll::-webkit-scrollbar-track,
.lotes-search-results::-webkit-scrollbar-track {
  background: transparent;
}


.lotes-modal__body::-webkit-scrollbar-thumb,
.lotes-table-scroll::-webkit-scrollbar-thumb,
.lotes-search-results::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: #cfcfcf;
}


html[data-theme="dark"] .lotes-modal__body::-webkit-scrollbar-thumb,
html[data-theme="dark"] .lotes-table-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .lotes-search-results::-webkit-scrollbar-thumb,
body.dark .lotes-modal__body::-webkit-scrollbar-thumb,
body.dark .lotes-table-scroll::-webkit-scrollbar-thumb,
body.dark .lotes-search-results::-webkit-scrollbar-thumb,
body[data-theme="dark"] .lotes-modal__body::-webkit-scrollbar-thumb,
body[data-theme="dark"] .lotes-table-scroll::-webkit-scrollbar-thumb,
body[data-theme="dark"] .lotes-search-results::-webkit-scrollbar-thumb {
  background: #333;
}


/* =========================================================
   RESPONSIVE · DETAIL
   ========================================================= */

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


  .lotes-detail-info-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .lotes-detail-hero {
    flex-direction: column;
  }


  .lotes-detail-hero__actions {
    width: 100%;
    max-width: none;

    justify-content: flex-start;
  }
}


@media (
  max-width: 900px
) {
  .lotes-detail-grid {
    grid-template-columns: 1fr;
  }


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


  .lotes-history-toolbar__search {
    min-width: 0;
  }


  .lotes-history-toolbar__actions {
    align-self: end;
  }


  .lotes-shortage-card {
    align-items: stretch;
    flex-direction: column;
  }


  .lotes-shortage-card__numbers {
    flex: 1 1 auto;
  }
}


@media (
  max-width: 700px
) {
  .lotes-detail-kpis,
  .lotes-detail-info-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .lotes-detail-hero__main {
    flex-direction: column;
    gap: 10px;
  }


  .lotes-detail-hero__actions {
    display: grid;

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


  .lotes-detail-hero__actions .lotes-button {
    width: 100%;
  }


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


  .lotes-history-toolbar__actions {
    width: 100%;

    display: grid;

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


  .lotes-history-toolbar__actions .lotes-button {
    width: 100%;
  }


  .lotes-shortage-card__numbers {
    grid-template-columns: 1fr;
  }


  .lotes-shortage-card__numbers > div {
    padding:
      6px
      0
      0;

    border-left: 0;
    border-top: 1px solid #fecaca;
  }


  html[data-theme="dark"] .lotes-shortage-card__numbers > div,
  body.dark .lotes-shortage-card__numbers > div,
  body[data-theme="dark"] .lotes-shortage-card__numbers > div {
    border-top-color: #512020;
  }
}


@media (
  max-width: 480px
) {
  .lotes-detail-kpis,
  .lotes-detail-info-grid,
  .lotes-detail-kpis--compact,
  .lotes-detail-inline-values {
    grid-template-columns: 1fr;
  }


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


/* =========================================================
   FIN PARTE 3 DE 4

   SIGUE:
   - Configuración
   - Navegación configuración
   - Switch
   - Tiempos
   - Estados finales
   - Ajustes responsive
   - Fixes de integración
   ========================================================= *//* =========================================================
   PARTE 4 DE 4

   - Configuración
   - Navegación configuración
   - Switch
   - Tiempos
   - Estados finales
   - Ajustes responsive
   - Fixes de integración
   ========================================================= */


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

.lotes-config-layout {
  min-width: 0;

  display: grid;

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

  gap: 16px;
}


/* =========================================================
   CONFIG NAV
   ========================================================= */

.lotes-config-nav {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;
}


.lotes-config-nav__item {
  appearance: none;

  width: 100%;
  min-height: 42px;

  padding:
    0
    12px;

  border: 1px solid transparent;
  border-radius: 9px;

  display: flex;
  align-items: center;
  gap: 9px;

  text-align: left;

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  color:
    var(
      --lotes-modal-text-secondary,
      #666
    );

  background: transparent;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}


.lotes-config-nav__item:hover {
  color:
    var(
      --lotes-modal-text,
      #171717
    );

  background:
    var(
      --lotes-modal-surface-hover,
      #f3f3f3
    );
}


.lotes-config-nav__item.is-active {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}


html[data-theme="dark"] .lotes-config-nav__item,
body.dark .lotes-config-nav__item,
body[data-theme="dark"] .lotes-config-nav__item {
  color: #9b9b9b;
}


html[data-theme="dark"] .lotes-config-nav__item:hover,
body.dark .lotes-config-nav__item:hover,
body[data-theme="dark"] .lotes-config-nav__item:hover {
  color: #f1f1f1;
  background: #141414;
}


html[data-theme="dark"] .lotes-config-nav__item.is-active,
body.dark .lotes-config-nav__item.is-active,
body[data-theme="dark"] .lotes-config-nav__item.is-active {
  color: #60a5fa;
  background: #07162a;
  border-color: #183b66;
}


/* =========================================================
   CONFIG CONTENT
   ========================================================= */

.lotes-config-content {
  min-width: 0;

  padding-left: 16px;

  border-left: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );
}


html[data-theme="dark"] .lotes-config-content,
body.dark .lotes-config-content,
body[data-theme="dark"] .lotes-config-content {
  border-left-color: #252525;
}


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

.lotes-config-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 16px;
}


.lotes-config-header h3 {
  margin: 0;

  font-size: 15px;
  font-weight: 800;

  color:
    var(
      --lotes-modal-text,
      #171717
    );
}


.lotes-config-header p {
  margin:
    4px
    0
    0;

  max-width: 720px;

  font-size: 10.5px;
  line-height: 1.5;

  color:
    var(
      --lotes-modal-text-muted,
      #858585
    );
}


/* =========================================================
   CONFIG SECTION
   ========================================================= */

.lotes-config-section {
  margin-bottom: 18px;
}


.lotes-config-section:last-child {
  margin-bottom: 0;
}


.lotes-config-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 8px;
}


.lotes-config-section__header h4 {
  margin: 0;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  color:
    var(
      --lotes-modal-text-muted,
      #777
    );
}


/* =========================================================
   CONFIG LIST
   ========================================================= */

.lotes-config-list {
  overflow: hidden;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 11px;

  background:
    var(
      --lotes-modal-bg,
      #fff
    );
}


.lotes-config-row {
  min-width: 0;

  min-height: 74px;

  padding:
    11px
    12px;

  border-bottom: 1px solid
    var(
      --lotes-modal-border,
      #e8e8e8
    );

  display: grid;

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

  align-items: center;
  gap: 14px;
}


.lotes-config-row:last-child {
  border-bottom: 0;
}


.lotes-config-row__main {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}


.lotes-config-row__main strong {
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 11px;
  font-weight: 750;

  color:
    var(
      --lotes-modal-text,
      #1c1c1c
    );
}


.lotes-config-row__main span {
  max-width: 700px;

  font-size: 9.5px;
  line-height: 1.45;

  color:
    var(
      --lotes-modal-text-secondary,
      #6b6b6b
    );
}


.lotes-config-row__main small {
  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 8.5px;

  color:
    var(
      --lotes-modal-text-muted,
      #929292
    );
}


.lotes-config-row__value {
  max-width: 260px;

  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;

  text-align: right;

  font-size: 10.5px;
  font-weight: 750;

  color:
    var(
      --lotes-modal-text,
      #222
    );
}


.lotes-config-row__actions {
  display: flex;
  justify-content: flex-end;
}


html[data-theme="dark"] .lotes-config-list,
body.dark .lotes-config-list,
body[data-theme="dark"] .lotes-config-list {
  background: #080808;
  border-color: #272727;
}


html[data-theme="dark"] .lotes-config-row,
body.dark .lotes-config-row,
body[data-theme="dark"] .lotes-config-row {
  border-bottom-color: #222;
}


/* =========================================================
   CONFIG KEY
   ========================================================= */

.lotes-config-key {
  width: fit-content;

  padding:
    5px
    8px;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 7px;

  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size: 9px;

  color:
    var(
      --lotes-modal-text-secondary,
      #626262
    );

  background:
    var(
      --lotes-modal-surface,
      #f6f6f6
    );
}


html[data-theme="dark"] .lotes-config-key,
body.dark .lotes-config-key,
body[data-theme="dark"] .lotes-config-key {
  color: #aaa;
  background: #111;
  border-color: #2b2b2b;
}


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

.lotes-switch {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  cursor: pointer;
}


.lotes-switch > input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}


.lotes-switch__track {
  position: relative;

  width: 42px;
  height: 23px;

  border: 1px solid #cfcfcf;
  border-radius: 999px;

  flex: 0 0 auto;

  background: #e6e6e6;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}


.lotes-switch__track > span {
  position: absolute;

  top: 2px;
  left: 2px;

  width: 17px;
  height: 17px;

  border-radius: 50%;

  background: #fff;

  transition:
    transform 0.16s ease;
}


.lotes-switch > input:checked + .lotes-switch__track {
  background: #2563eb;
  border-color: #2563eb;
}


.lotes-switch > input:checked + .lotes-switch__track > span {
  transform:
    translateX(
      19px
    );
}


.lotes-switch__label {
  font-size: 11px;
  font-weight: 700;

  color:
    var(
      --lotes-modal-text-secondary,
      #666
    );
}


html[data-theme="dark"] .lotes-switch__track,
body.dark .lotes-switch__track,
body[data-theme="dark"] .lotes-switch__track {
  background: #202020;
  border-color: #393939;
}


html[data-theme="dark"] .lotes-switch__track > span,
body.dark .lotes-switch__track > span,
body[data-theme="dark"] .lotes-switch__track > span {
  background: #d8d8d8;
}


/* =========================================================
   TIME CONFIG TABLE
   ========================================================= */

.lotes-config-content .lotes-table {
  min-width: 1050px;
}


.lotes-config-content .lotes-table thead th {
  font-size: 9px;
}


.lotes-config-content .lotes-table tbody td {
  font-size: 10px;
}


/* =========================================================
   RESERVATION / SHORTAGE MODAL TABLES
   ========================================================= */

#globalShortagesContent .lotes-table {
  min-width: 1100px;
}


#insumoReservationsContent .lotes-table {
  min-width: 950px;
}


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

#finalizeLoteForm .lotes-table-scroll,
#consumptionForm .lotes-table-scroll {
  max-height: 420px;

  overflow: auto;

  border: 1px solid
    var(
      --lotes-modal-border,
      #dedede
    );

  border-radius: 10px;
}


#finalizeLoteForm .lotes-table thead th,
#consumptionForm .lotes-table thead th {
  top: 0;
}


/* =========================================================
   MODAL DETAIL OVERRIDES
   ========================================================= */

.lotes-modal--detail .lotes-modal__body {
  padding: 16px;
}


.lotes-modal--detail .lotes-modal__header {
  min-height: 68px;
}


/* =========================================================
   GENERAL HIDDEN
   ========================================================= */

.lotes-preparacion-page [hidden],
.lotes-overlay-root [hidden] {
  display: none !important;
}


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

.lotes-button:focus-visible,
.lotes-icon-button:focus-visible,
.lotes-code-button:focus-visible,
.lotes-config-nav__item:focus-visible,
.lotes-popover__item:focus-visible,
.lotes-product-option:focus-visible,
.lotes-responsible-option:focus-visible,
.lotes-search__clear:focus-visible,
.lotes-metric-card.is-clickable:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}


.lotes-input:focus-visible {
  outline: 0;
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .lotes-button,
  .lotes-icon-button,
  .lotes-metric-card,
  .lotes-progress > span,
  .lotes-switch__track,
  .lotes-switch__track > span,
  .lotes-toast,
  .lotes-skeleton::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   FIX · APP CONTENT

   Evita que la tabla fuerce overflow horizontal
   sobre todo el layout principal.
   ========================================================= */

.app-content {
  min-width: 0;
}


.app-main {
  min-width: 0;
}


.lotes-preparacion-page * {
  box-sizing: border-box;
}


/* =========================================================
   FIX · SELECT OPTION DARK
   ========================================================= */

html[data-theme="dark"] .lotes-preparacion-page select,
html[data-theme="dark"] .lotes-overlay-root select,
body.dark .lotes-preparacion-page select,
body.dark .lotes-overlay-root select,
body[data-theme="dark"] .lotes-preparacion-page select,
body[data-theme="dark"] .lotes-overlay-root select {
  color-scheme: dark;
}


/* =========================================================
   FIX · MODAL OPACITY

   Mantiene la ventana completamente opaca.
   Evita heredar fondos transparentes del layout general.
   ========================================================= */

.lotes-overlay-root .lotes-modal,
.lotes-overlay-root .lotes-modal__header,
.lotes-overlay-root .lotes-modal__body,
.lotes-overlay-root .lotes-modal__footer {
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.lotes-overlay-root .lotes-modal {
  background: #fff;
}


.lotes-overlay-root .lotes-modal__header,
.lotes-overlay-root .lotes-modal__body,
.lotes-overlay-root .lotes-modal__footer {
  background: #fff;
}


html[data-theme="dark"] .lotes-overlay-root .lotes-modal,
html[data-theme="dark"] .lotes-overlay-root .lotes-modal__header,
html[data-theme="dark"] .lotes-overlay-root .lotes-modal__body,
html[data-theme="dark"] .lotes-overlay-root .lotes-modal__footer,
body.dark .lotes-overlay-root .lotes-modal,
body.dark .lotes-overlay-root .lotes-modal__header,
body.dark .lotes-overlay-root .lotes-modal__body,
body.dark .lotes-overlay-root .lotes-modal__footer,
body[data-theme="dark"] .lotes-overlay-root .lotes-modal,
body[data-theme="dark"] .lotes-overlay-root .lotes-modal__header,
body[data-theme="dark"] .lotes-overlay-root .lotes-modal__body,
body[data-theme="dark"] .lotes-overlay-root .lotes-modal__footer {
  background: #070707;
}


/* =========================================================
   FIX · BACKDROP
   ========================================================= */

.lotes-modal-backdrop {
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* =========================================================
   FIX · OVERLAY ABOVE SIDEBAR / TOPBAR / RIGHTBAR
   ========================================================= */

.lotes-overlay-root {
  isolation: isolate;
}


.lotes-modal-backdrop {
  z-index: 1;
}


.lotes-modal {
  z-index: 2;
}


/* =========================================================
   FIX · MODAL VERTICAL ALIGNMENT

   Si el modal es más alto que la pantalla:
   comienza arriba y permite scroll del backdrop.
   ========================================================= */

@media (
  max-height: 760px
) {
  .lotes-modal-backdrop {
    align-items: flex-start;
  }


  .lotes-modal {
    margin:
      12px
      auto;
  }
}


/* =========================================================
   FIX · TABLE HEADERS
   ========================================================= */

.lotes-modal .lotes-table thead th {
  z-index: 3;
}


/* =========================================================
   FIX · INPUT NUMBER
   ========================================================= */

.lotes-input[type="number"] {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   FIX · LARGE NUMBERS
   ========================================================= */

.lotes-detail-kpi > strong,
.lotes-metric-card__value,
.lotes-table__quantity-cell strong,
.lotes-list-row__value {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   FIX · LONG TEXT
   ========================================================= */

.lotes-callout,
.lotes-confirm__message,
.lotes-config-row__main span,
.lotes-detail-note {
  overflow-wrap: anywhere;
}


/* =========================================================
   RESPONSIVE · CONFIG
   ========================================================= */

@media (
  max-width: 1000px
) {
  .lotes-config-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }


  .lotes-config-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      120px
      38px;
  }
}


@media (
  max-width: 760px
) {
  .lotes-config-layout {
    grid-template-columns: 1fr;
  }


  .lotes-config-nav {
    display: grid;

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


  .lotes-config-content {
    padding-left: 0;
    padding-top: 14px;

    border-left: 0;

    border-top: 1px solid
      var(
        --lotes-modal-border,
        #dedede
      );
  }


  html[data-theme="dark"] .lotes-config-content,
  body.dark .lotes-config-content,
  body[data-theme="dark"] .lotes-config-content {
    border-top-color: #252525;
  }


  .lotes-config-header {
    flex-direction: column;
  }


  .lotes-config-header .lotes-button {
    width: 100%;
  }


  .lotes-config-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      38px;

    gap: 10px;
  }


  .lotes-config-row__value {
    grid-column:
      1 /
      -1;

    grid-row: 2;

    max-width: none;

    text-align: left;
  }


  .lotes-config-row__actions {
    grid-column: 2;
    grid-row: 1;
  }
}


/* =========================================================
   RESPONSIVE · TABLE / ACTIONS
   ========================================================= */

@media (
  max-width: 620px
) {
  .lotes-toolbar__primary > .lotes-button {
    flex:
      1
      1
      calc(
        50% -
        6px
      );
  }


  .lotes-toolbar__secondary {
    display: grid;

    grid-template-columns: 1fr;
  }


  .lotes-page-header__title {
    font-size: 28px;
  }


  .lotes-page-header__description {
    font-size: 12px;
  }


  .lotes-metric-card {
    padding: 14px;
  }


  .lotes-metric-card__value {
    font-size: 23px;
  }
}


/* =========================================================
   RESPONSIVE · ULTRA SMALL
   ========================================================= */

@media (
  max-width: 390px
) {
  .lotes-preparacion-page {
    padding: 12px;
  }


  .lotes-page-header__actions {
    grid-template-columns: 1fr;
  }


  .lotes-toolbar {
    padding: 10px;
  }


  .lotes-toolbar__primary > .lotes-button {
    flex-basis: 100%;
  }


  .lotes-modal__header,
  .lotes-modal__body,
  .lotes-modal__footer {
    padding-left: 12px;
    padding-right: 12px;
  }
}


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

@media print {
  .lotes-page-header__actions,
  .lotes-toolbar,
  .lotes-selection-bar,
  .lotes-pagination,
  .lotes-table__actions-cell,
  .lotes-row-actions,
  .lotes-toast-root,
  .lotes-overlay-root,
  .lotes-popover {
    display: none !important;
  }


  .lotes-preparacion-page {
    padding: 0;

    color: #000;
    background: #fff;
  }


  .lotes-workspace,
  .lotes-metric-card {
    border-color: #bbb;

    background: #fff;
  }


  .lotes-table-scroll {
    overflow: visible;
  }


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


  .lotes-table thead th,
  .lotes-table tbody td {
    color: #000;
    background: #fff;
  }
}


/* =========================================================
   FINAL DARK HARDENING

   Negro real en la página y modal.
   ========================================================= */

html[data-theme="dark"] .lotes-preparacion-page,
body.dark .lotes-preparacion-page,
body[data-theme="dark"] .lotes-preparacion-page {
  background: #000;
}


html[data-theme="dark"] .lotes-workspace,
body.dark .lotes-workspace,
body[data-theme="dark"] .lotes-workspace {
  background: #050505;
}


html[data-theme="dark"] .lotes-overlay-root,
body.dark .lotes-overlay-root,
body[data-theme="dark"] .lotes-overlay-root {
  --lotes-modal-bg: #070707;
  --lotes-modal-surface: #0c0c0c;
  --lotes-modal-surface-hover: #151515;
}


/* =========================================================
   FIN
   WIRTZ HUB · MANUFACTURA
   LOTES DE PREPARACIÓN
   ========================================================= */
   /* AGREGAR AL FINAL DE:
   frontend/src/pages/manufactura/lotes-preparacion/lotes-preparacion.css
*/

.lotes-popover__item[data-popover-action="delete"] {
  color: #b91c1c;
}


.lotes-popover__item[data-popover-action="delete"]:hover {
  color: #991b1b;
  background: #fef2f2;
}


.lotes-button[data-detail-action="delete"] {
  color: #fff;
  background: #b91c1c;
  border-color: #b91c1c;
}


.lotes-button[data-detail-action="delete"]:hover:not(:disabled) {
  color: #fff;
  background: #991b1b;
  border-color: #991b1b;
}


html[data-theme="dark"] .lotes-popover__item[data-popover-action="delete"],
body.dark .lotes-popover__item[data-popover-action="delete"],
body[data-theme="dark"] .lotes-popover__item[data-popover-action="delete"] {
  color: #f87171;
}


html[data-theme="dark"] .lotes-popover__item[data-popover-action="delete"]:hover,
body.dark .lotes-popover__item[data-popover-action="delete"]:hover,
body[data-theme="dark"] .lotes-popover__item[data-popover-action="delete"]:hover {
  color: #fca5a5;
  background: #250909;
}


html[data-theme="dark"] .lotes-button[data-detail-action="delete"],
body.dark .lotes-button[data-detail-action="delete"],
body[data-theme="dark"] .lotes-button[data-detail-action="delete"] {
  color: #fff;
  background: #991b1b;
  border-color: #b91c1c;
}


html[data-theme="dark"] .lotes-button[data-detail-action="delete"]:hover:not(:disabled),
body.dark .lotes-button[data-detail-action="delete"]:hover:not(:disabled),
body[data-theme="dark"] .lotes-button[data-detail-action="delete"]:hover:not(:disabled) {
  color: #fff;
  background: #b91c1c;
  border-color: #dc2626;
}/* =========================================================
   LOTES DE PREPARACIÓN · AJUSTE FINAL
   PEGAR AL FINAL DEL CSS

   - MISMO TAMAÑO GENERAL DEL RESTO DE MANUFACTURA
   - LETRAS MÁS MARCADAS
   - DIVISIONES MÁS VISIBLES
   - MÁS RÁPIDA
   - RESPONSIVE FULL
   - SIN BARRAS HORIZONTALES
   - TABLAS EN CARDS EN TABLET / MOBILE
   ========================================================= */


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

.lotes-preparacion-page,
.lotes-overlay-root,
.lotes-popover,
.lotes-toast-root {
  --lotes-ui-text:
    #0a0b0d;

  --lotes-ui-text-soft:
    #34383d;

  --lotes-ui-text-muted:
    #626970;

  --lotes-ui-border:
    #c9ced4;

  --lotes-ui-border-soft:
    #d9dde1;

  --lotes-ui-border-strong:
    #9fa6ae;
}


html[data-theme="dark"] .lotes-preparacion-page,
html[data-theme="dark"] .lotes-overlay-root,
html[data-theme="dark"] .lotes-popover,
html[data-theme="dark"] .lotes-toast-root,
body.dark .lotes-preparacion-page,
body.dark .lotes-overlay-root,
body.dark .lotes-popover,
body.dark .lotes-toast-root,
body[data-theme="dark"] .lotes-preparacion-page,
body[data-theme="dark"] .lotes-overlay-root,
body[data-theme="dark"] .lotes-popover,
body[data-theme="dark"] .lotes-toast-root {
  --lotes-ui-text:
    #f7f7f7;

  --lotes-ui-text-soft:
    #d4d7db;

  --lotes-ui-text-muted:
    #a6abb1;

  --lotes-ui-border:
    #3c4248;

  --lotes-ui-border-soft:
    #2d3135;

  --lotes-ui-border-strong:
    #5b626a;
}


/* =========================================================
   02. SIN SCROLL HORIZONTAL GENERAL
   ========================================================= */

html,
body {
  max-width:
    100vw;

  overflow-x:
    hidden !important;
}


body:has(.lotes-preparacion-page),
body:has(.lotes-preparacion-page) .app-shell,
body:has(.lotes-preparacion-page) .app-main,
body:has(.lotes-preparacion-page) .app-content,
.app-content:has(.lotes-preparacion-page),
.lotes-preparacion-page {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;
}


.lotes-preparacion-page *,
.lotes-preparacion-page *::before,
.lotes-preparacion-page *::after,
.lotes-overlay-root *,
.lotes-overlay-root *::before,
.lotes-overlay-root *::after {
  box-sizing:
    border-box;

  min-width:
    0;
}


/* =========================================================
   03. TAMAÑO GENERAL
   ========================================================= */

.lotes-preparacion-page {
  padding:
    18px !important;
}


.lotes-page-header {
  gap:
    18px !important;

  margin-bottom:
    16px !important;

  padding-bottom:
    14px !important;

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


.lotes-page-header__eyebrow {
  margin-bottom:
    5px !important;

  font-size:
    10px !important;
}


.lotes-page-header__title {
  font-size:
    clamp(
      24px,
      2.4vw,
      32px
    ) !important;
}


.lotes-page-header__description {
  margin-top:
    7px !important;

  font-size:
    12px !important;

  line-height:
    1.5 !important;
}


.lotes-page-header__actions {
  gap:
    6px !important;
}


/* =========================================================
   04. MÁS RÁPIDA
   ========================================================= */

.lotes-preparacion-page *,
.lotes-preparacion-page *::before,
.lotes-preparacion-page *::after,
.lotes-overlay-root *,
.lotes-overlay-root *::before,
.lotes-overlay-root *::after,
.lotes-popover *,
.lotes-toast * {
  transition-duration:
    70ms !important;
}


.lotes-button:hover:not(:disabled),
.lotes-button:active:not(:disabled),
.lotes-metric-card.is-clickable:hover {
  transform:
    none !important;
}


.lotes-modal-backdrop {
  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


.lotes-toast {
  animation-duration:
    90ms !important;
}


.lotes-toast.is-closing {
  animation-duration:
    90ms !important;
}


.lotes-skeleton::after {
  animation-duration:
    900ms !important;
}


.lotes-button.is-loading svg,
.lotes-icon-button.is-loading svg,
.lotes-detail-loading svg,
.lotes-search-results__loading svg,
.lotes-selected-product.is-loading svg {
  animation-duration:
    650ms !important;
}


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

.lotes-preparacion-page,
.lotes-modal,
.lotes-popover,
.lotes-toast {
  font-weight:
    600;
}


.lotes-page-header__title,
.lotes-modal__title,
.lotes-detail-hero__product > strong {
  font-weight:
    900 !important;
}


.lotes-page-header__eyebrow,
.lotes-metric-card__label,
.lotes-table thead th,
.lotes-field__label,
.lotes-form-section__title,
.lotes-detail-section__header h3,
.lotes-info-card__label,
.lotes-detail-kpi > span,
.lotes-detail-card small,
.lotes-detail-line small,
.lotes-history-action {
  font-weight:
    850 !important;
}


.lotes-button,
.lotes-toolbar-select > span,
.lotes-toolbar-select select,
.lotes-code-button,
.lotes-product-cell strong,
.lotes-status-badge,
.lotes-priority,
.lotes-progress-cell__top strong,
.lotes-detail-insumo strong,
.lotes-list-row__main strong,
.lotes-list-row__value,
.lotes-detail-inline-values strong,
.lotes-product-option__main strong,
.lotes-responsible-option__copy strong,
.lotes-selected-product__copy strong,
.lotes-summary-product strong,
.lotes-popover__item {
  font-weight:
    800 !important;
}


.lotes-page-header__description,
.lotes-search input,
.lotes-table tbody td,
.lotes-pagination,
.lotes-field__hint,
.lotes-input,
.lotes-modal__subtitle,
.lotes-detail-section__header p,
.lotes-product-cell span,
.lotes-list-row__main span,
.lotes-detail-note {
  font-weight:
    650 !important;
}


.lotes-metric-card__value,
.lotes-detail-kpi > strong {
  font-weight:
    850 !important;
}


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

.lotes-button {
  min-height:
    36px !important;

  padding:
    0
    11px !important;

  gap:
    6px !important;

  border-radius:
    8px !important;

  font-size:
    11px !important;
}


.lotes-button--sm {
  min-height:
    30px !important;

  padding:
    0
    8px !important;

  font-size:
    10px !important;
}


.lotes-icon-button {
  width:
    31px !important;

  height:
    31px !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    8px !important;
}


.lotes-button--secondary {
  border-color:
    var(--lotes-ui-border-strong) !important;
}


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

.lotes-metrics {
  gap:
    0 !important;

  margin-bottom:
    14px !important;

  border:
    1px
    solid
    var(--lotes-ui-border-strong);

  border-radius:
    11px;

  overflow:
    hidden;
}


.lotes-metric-card {
  min-height:
    100px !important;

  padding:
    12px !important;

  border:
    0 !important;

  border-right:
    1px
    solid
    var(--lotes-ui-border-strong) !important;

  border-radius:
    0 !important;
}


.lotes-metric-card:last-child {
  border-right:
    0 !important;
}


.lotes-metric-card__top {
  margin-bottom:
    12px !important;
}


.lotes-metric-card__label {
  font-size:
    10px !important;
}


.lotes-metric-card__icon {
  width:
    30px !important;

  height:
    30px !important;

  border:
    1px
    solid
    var(--lotes-ui-border) !important;

  border-radius:
    7px !important;
}


.lotes-metric-card__value {
  margin-bottom:
    4px !important;

  font-size:
    21px !important;
}


.lotes-metric-card__hint {
  font-size:
    9.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   08. WORKSPACE
   ========================================================= */

.lotes-workspace {
  max-width:
    100%;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    11px !important;

  overflow:
    hidden !important;
}


/* =========================================================
   09. TOOLBAR
   ========================================================= */

.lotes-toolbar {
  gap:
    9px !important;

  padding:
    9px !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border-strong) !important;
}


.lotes-toolbar,
.lotes-toolbar__primary,
.lotes-toolbar__secondary {
  width:
    100%;

  min-width:
    0 !important;

  max-width:
    100%;
}


.lotes-search {
  min-width:
    0 !important;

  min-height:
    36px !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    8px !important;
}


.lotes-search input {
  font-size:
    11px !important;
}


.lotes-toolbar-select > span {
  font-size:
    9px !important;
}


.lotes-toolbar-select select {
  min-height:
    34px !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    8px !important;

  font-size:
    10px !important;
}


/* =========================================================
   10. SELECCIÓN
   ========================================================= */

.lotes-selection-bar {
  min-height:
    44px !important;

  padding:
    7px
    10px !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border-strong) !important;
}


.lotes-selection-bar__info {
  font-size:
    11px !important;
}


/* =========================================================
   11. TABLA PRINCIPAL · SIN SCROLL HORIZONTAL
   ========================================================= */

.lotes-table-container,
.lotes-table-scroll {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;
}


.lotes-table-scroll {
  overflow-x:
    hidden !important;

  overflow-y:
    visible !important;
}


.lotes-table {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  table-layout:
    fixed !important;
}


/* =========================================================
   12. TABLA PRINCIPAL · ANCHOS
   ========================================================= */

.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(1),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(1) {
  width:
    3% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(2),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(2) {
  width:
    8% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(3),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(3) {
  width:
    19% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(4),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(4) {
  width:
    8% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(5),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(5) {
  width:
    12% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(6),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(6) {
  width:
    16% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(7),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(7) {
  width:
    8% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(8),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(8) {
  width:
    11% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(9),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(9) {
  width:
    9% !important;
}


.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
th:nth-child(10),
.lotes-table:not(.lotes-table--detail):not(.lotes-table--compact):not(.lotes-table--history)
td:nth-child(10) {
  width:
    6% !important;
}


/* =========================================================
   13. TABLA · DIVISIONES
   ========================================================= */

.lotes-table thead th {
  height:
    38px !important;

  padding:
    0
    7px !important;

  border-right:
    1px
    solid
    var(--lotes-ui-border) !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border-strong) !important;

  font-size:
    8px !important;
}


.lotes-table thead th:last-child {
  border-right:
    0 !important;
}


.lotes-table tbody td {
  padding:
    7px !important;

  border-right:
    1px
    solid
    var(--lotes-ui-border) !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border) !important;

  font-size:
    9px !important;
}


.lotes-table tbody td:last-child {
  border-right:
    0 !important;
}


.lotes-table tbody tr:last-child td {
  border-bottom:
    0 !important;
}


/* =========================================================
   14. CELDAS
   ========================================================= */

.lotes-table__checkbox-cell,
.lotes-table__code-cell,
.lotes-table__product-cell,
.lotes-table__quantity-cell,
.lotes-table__date-cell,
.lotes-table__stock-cell,
.lotes-table__priority-cell,
.lotes-table__progress-cell,
.lotes-table__status-cell,
.lotes-table__actions-cell {
  min-width:
    0 !important;

  max-width:
    100% !important;
}


.lotes-code-button {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px !important;
}


.lotes-table__date-secondary {
  margin-top:
    3px !important;

  font-size:
    7.5px !important;
}


.lotes-product-cell strong {
  font-size:
    9px !important;
}


.lotes-product-cell span {
  font-size:
    7.5px !important;
}


.lotes-table__quantity-cell strong,
.lotes-table__date-cell strong {
  margin-bottom:
    2px !important;

  font-size:
    9px !important;
}


.lotes-table__quantity-cell span,
.lotes-table__date-cell span,
.lotes-stock-cell__meta {
  font-size:
    7.5px !important;
}


.lotes-product-cell strong,
.lotes-product-cell span,
.lotes-stock-cell__meta {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   15. BADGES
   ========================================================= */

.lotes-status-badge,
.lotes-priority {
  min-height:
    22px !important;

  max-width:
    100%;

  padding:
    0
    6px !important;

  overflow:
    hidden;

  font-size:
    8px !important;

  text-overflow:
    ellipsis;
}


/* =========================================================
   16. PROGRESO
   ========================================================= */

.lotes-progress-cell {
  min-width:
    0 !important;
}


.lotes-progress-cell__top {
  margin-bottom:
    4px !important;
}


.lotes-progress-cell__top strong {
  font-size:
    9px !important;
}


.lotes-progress-cell__warning {
  font-size:
    7px !important;
}


.lotes-progress {
  min-width:
    0;

  height:
    4px !important;
}


/* =========================================================
   17. ACCIONES
   ========================================================= */

.lotes-row-actions {
  width:
    100%;

  display:
    grid !important;

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

  gap:
    3px !important;
}


.lotes-row-actions
.lotes-icon-button {
  width:
    100% !important;

  min-width:
    0 !important;

  height:
    29px !important;
}


/* =========================================================
   18. PAGINACIÓN
   ========================================================= */

.lotes-pagination {
  min-height:
    48px !important;

  padding:
    7px
    10px !important;

  border-top:
    1px
    solid
    var(--lotes-ui-border-strong) !important;
}


.lotes-pagination__summary,
.lotes-pagination__page {
  font-size:
    9px !important;
}


/* =========================================================
   19. MODAL
   ========================================================= */

.lotes-overlay-root,
.lotes-modal-backdrop {
  max-width:
    100vw;

  overflow-x:
    hidden !important;
}


.lotes-modal {
  max-width:
    calc(
      100vw -
      24px
    ) !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    12px !important;

  overflow-x:
    hidden !important;
}


.lotes-modal__header {
  min-height:
    62px !important;

  padding:
    12px
    14px !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border-strong) !important;
}


.lotes-modal__title {
  font-size:
    15px !important;
}


.lotes-modal__subtitle {
  margin-top:
    3px !important;

  font-size:
    9.5px !important;
}


.lotes-modal__body {
  max-width:
    100%;

  padding:
    14px !important;

  overflow-x:
    hidden !important;
}


.lotes-modal__footer {
  min-height:
    52px !important;

  padding:
    8px
    14px !important;

  border-top:
    1px
    solid
    var(--lotes-ui-border-strong) !important;
}


/* =========================================================
   20. FORMULARIOS
   ========================================================= */

.lotes-form {
  gap:
    12px !important;
}


.lotes-form-grid {
  gap:
    9px !important;
}


.lotes-form-section {
  padding-top:
    12px !important;

  border-top:
    1px
    solid
    var(--lotes-ui-border-strong) !important;
}


.lotes-form-section__header {
  margin-bottom:
    9px !important;

  padding-bottom:
    8px;

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


.lotes-form-section__title {
  font-size:
    10px !important;
}


.lotes-form-section__description {
  font-size:
    8.5px !important;
}


.lotes-field {
  gap:
    4px !important;
}


.lotes-field__label {
  font-size:
    9px !important;
}


.lotes-field__hint {
  font-size:
    8px !important;
}


.lotes-input {
  min-height:
    35px !important;

  padding:
    0
    9px !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    8px !important;

  font-size:
    10px !important;

  font-weight:
    650 !important;
}


textarea.lotes-input {
  padding:
    8px
    9px !important;
}


.lotes-textarea {
  min-height:
    72px !important;
}


/* =========================================================
   21. LOOKUPS
   ========================================================= */

.lotes-search-results {
  max-width:
    100%;

  overflow-x:
    hidden !important;

  border-color:
    var(--lotes-ui-border-strong) !important;
}


.lotes-product-option,
.lotes-responsible-option {
  min-height:
    50px !important;

  padding:
    8px
    10px !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border) !important;
}


.lotes-product-option__main strong,
.lotes-responsible-option__copy strong {
  font-size:
    10px !important;
}


.lotes-product-option__main span,
.lotes-responsible-option__copy span {
  font-size:
    8.5px !important;
}


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

.lotes-selected-product,
.lotes-summary-product {
  border-color:
    var(--lotes-ui-border-strong) !important;
}


/* =========================================================
   23. DETALLE HERO
   ========================================================= */

.lotes-detail {
  max-width:
    100%;

  gap:
    12px !important;

  overflow-x:
    hidden;
}


.lotes-detail-hero {
  padding:
    12px !important;

  gap:
    12px !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    10px !important;
}


.lotes-detail-hero__main {
  gap:
    12px !important;
}


.lotes-detail-hero__product > span {
  font-size:
    8px !important;
}


.lotes-detail-hero__product > strong {
  font-size:
    15px !important;
}


.lotes-detail-hero__product > small {
  font-size:
    9px !important;
}


/* =========================================================
   24. KPIs DETALLE
   ========================================================= */

.lotes-detail-kpis {
  gap:
    0 !important;

  border:
    1px
    solid
    var(--lotes-ui-border-strong);

  border-radius:
    10px;

  overflow:
    hidden;
}


.lotes-detail-kpi {
  min-height:
    72px !important;

  padding:
    9px !important;

  border:
    0 !important;

  border-right:
    1px
    solid
    var(--lotes-ui-border-strong) !important;

  border-radius:
    0 !important;
}


.lotes-detail-kpi:last-child {
  border-right:
    0 !important;
}


.lotes-detail-kpi > span {
  font-size:
    8px !important;
}


.lotes-detail-kpi > strong {
  font-size:
    14px !important;
}


/* =========================================================
   25. INFO DETALLE
   ========================================================= */

.lotes-detail-info-grid {
  gap:
    0 !important;

  border:
    1px
    solid
    var(--lotes-ui-border-strong);

  border-radius:
    10px;

  overflow:
    hidden;
}


.lotes-info-card {
  padding:
    9px !important;

  border:
    0 !important;

  border-right:
    1px
    solid
    var(--lotes-ui-border-strong) !important;

  border-radius:
    0 !important;
}


.lotes-info-card:last-child {
  border-right:
    0 !important;
}


.lotes-info-card__label {
  font-size:
    8px !important;
}


.lotes-info-card > strong {
  font-size:
    9px !important;
}


/* =========================================================
   26. SECCIONES DETALLE
   ========================================================= */

.lotes-detail-section {
  padding:
    11px !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  border-radius:
    10px !important;
}


.lotes-detail-section__header {
  margin-bottom:
    9px !important;

  padding-bottom:
    8px;

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


.lotes-detail-section__header h3 {
  font-size:
    10px !important;
}


.lotes-detail-section__header p {
  font-size:
    8px !important;
}


/* =========================================================
   27. FALTANTES
   ========================================================= */

.lotes-shortage-card {
  border-width:
    1px !important;
}


.lotes-shortage-card__numbers > div {
  border-left-width:
    1px !important;
}


/* =========================================================
   28. LISTAS
   ========================================================= */

.lotes-list-row {
  min-height:
    48px !important;

  border-bottom:
    1px
    solid
    var(--lotes-ui-border) !important;
}


.lotes-list-row__main strong {
  font-size:
    9px !important;
}


.lotes-list-row__main span {
  font-size:
    8px !important;
}


.lotes-list-row__value {
  font-size:
    9px !important;
}


/* =========================================================
   29. VALORES INLINE
   ========================================================= */

.lotes-detail-inline-values {
  gap:
    0 !important;

  border:
    1px
    solid
    var(--lotes-ui-border-strong);

  border-radius:
    9px;

  overflow:
    hidden;
}


.lotes-detail-inline-values > div {
  min-height:
    55px !important;

  padding:
    8px !important;

  border:
    0 !important;

  border-right:
    1px
    solid
    var(--lotes-ui-border-strong) !important;

  border-radius:
    0 !important;
}


.lotes-detail-inline-values > div:last-child {
  border-right:
    0 !important;
}


/* =========================================================
   30. HISTORIAL
   ========================================================= */

.lotes-history-layout,
.lotes-history-toolbar,
.lotes-history-results {
  width:
    100%;

  min-width:
    0 !important;

  max-width:
    100%;

  overflow-x:
    hidden;
}


.lotes-history-toolbar {
  grid-template-columns:
    130px
    130px
    minmax(
      0,
      1fr
    )
    auto !important;
}


.lotes-history-toolbar__search {
  min-width:
    0 !important;
}


/* =========================================================
   31. POPOVER
   ========================================================= */

.lotes-popover {
  max-width:
    calc(
      100vw -
      16px
    ) !important;

  border-color:
    var(--lotes-ui-border-strong) !important;

  overflow-x:
    hidden;
}


.lotes-popover__separator {
  background:
    var(--lotes-ui-border-strong) !important;
}


/* =========================================================
   32. RESPONSIVE 1500
   ========================================================= */

@media (max-width: 1500px) {
  .lotes-metric-card {
    border-right:
      1px
      solid
      var(--lotes-ui-border-strong) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-metric-card:nth-child(3n) {
    border-right:
      0 !important;
  }


  .lotes-metric-card:nth-last-child(-n + 3) {
    border-bottom:
      0 !important;
  }
}


/* =========================================================
   33. RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 980px) {
  .lotes-preparacion-page {
    padding:
      12px !important;
  }


  .lotes-page-header {
    gap:
      12px !important;
  }


  .lotes-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .lotes-toolbar__primary,
  .lotes-toolbar__secondary {
    width:
      100%;

    min-width:
      0;

    flex-wrap:
      wrap;
  }


  .lotes-search {
    width:
      100% !important;

    max-width:
      none !important;

    flex:
      1
      1
      100%;
  }


  /* =======================================================
     MÉTRICAS
     ======================================================= */

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


  .lotes-metric-card,
  .lotes-metric-card:nth-child(3n),
  .lotes-metric-card:nth-last-child(-n + 3) {
    border-right:
      1px
      solid
      var(--lotes-ui-border-strong) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-metric-card:nth-child(2n) {
    border-right:
      0 !important;
  }


  .lotes-metric-card:nth-last-child(-n + 2) {
    border-bottom:
      0 !important;
  }


  /* =======================================================
     TABLA PRINCIPAL → CARDS
     ======================================================= */

  .lotes-table-container
  .lotes-table-scroll {
    overflow-x:
      hidden !important;
  }


  .lotes-table-container
  .lotes-table {
    display:
      block !important;

    width:
      100% !important;

    min-width:
      0 !important;
  }


  .lotes-table-container
  .lotes-table
  thead {
    display:
      none !important;
  }


  .lotes-table-container
  .lotes-table
  tbody {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      7px;

    padding:
      7px;
  }


  .lotes-table-container
  .lotes-table
  tbody
  tr {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    display:
      grid;

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

    border:
      1px
      solid
      var(--lotes-ui-border-strong);

    border-radius:
      9px;

    overflow:
      hidden;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td {
    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    min-height:
      50px;

    height:
      auto;

    padding:
      7px !important;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      3px;

    border-right:
      1px
      solid
      var(--lotes-ui-border) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border) !important;

    overflow:
      hidden;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(2n) {
    border-right:
      0 !important;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td::before {
    display:
      block;

    margin-bottom:
      2px;

    color:
      var(--lotes-ui-text-muted);

    font-size:
      7px;

    font-weight:
      850;

    letter-spacing:
      0.06em;

    text-transform:
      uppercase;
  }


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


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(2)::before {
    content:
      "Lote";
  }


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


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(4)::before {
    content:
      "Cantidad";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(5)::before {
    content:
      "Fecha requerida";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(6)::before {
    content:
      "Insumos";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(7)::before {
    content:
      "Prioridad";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(8)::before {
    content:
      "Progreso";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(9)::before {
    content:
      "Estado";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(10)::before {
    content:
      "Acciones";
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(1) {
    align-items:
      center;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(9),
  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(10) {
    grid-column:
      1
      /
      -1;

    border-right:
      0 !important;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(10) {
    border-bottom:
      0 !important;
  }


  .lotes-product-cell strong,
  .lotes-product-cell span,
  .lotes-stock-cell__meta {
    white-space:
      normal !important;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     TABLAS INTERNAS
     ======================================================= */

  .lotes-detail-section
  .lotes-table-scroll,
  .lotes-history-results
  .lotes-table-scroll {
    overflow-x:
      hidden !important;
  }


  .lotes-detail-section
  .lotes-table,
  .lotes-history-results
  .lotes-table {
    display:
      block !important;

    width:
      100% !important;

    min-width:
      0 !important;
  }


  .lotes-detail-section
  .lotes-table
  thead,
  .lotes-history-results
  .lotes-table
  thead {
    display:
      none !important;
  }


  .lotes-detail-section
  .lotes-table
  tbody,
  .lotes-history-results
  .lotes-table
  tbody {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      7px;

    padding:
      4px
      0;
  }


  .lotes-detail-section
  .lotes-table
  tbody
  tr,
  .lotes-history-results
  .lotes-table
  tbody
  tr {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    display:
      grid;

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

    border:
      1px
      solid
      var(--lotes-ui-border-strong);

    border-radius:
      9px;

    overflow:
      hidden;
  }


  .lotes-detail-section
  .lotes-table
  tbody
  td,
  .lotes-history-results
  .lotes-table
  tbody
  td {
    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    min-height:
      46px;

    height:
      auto;

    padding:
      7px !important;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    border-right:
      1px
      solid
      var(--lotes-ui-border) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border) !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere;
  }


  .lotes-detail-section
  .lotes-table
  tbody
  td:nth-child(2n),
  .lotes-history-results
  .lotes-table
  tbody
  td:nth-child(2n) {
    border-right:
      0 !important;
  }


  /* =======================================================
     DETALLE
     ======================================================= */

  .lotes-detail-kpis {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .lotes-detail-kpi {
    border-right:
      1px
      solid
      var(--lotes-ui-border-strong) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-detail-kpi:nth-child(3n) {
    border-right:
      0 !important;
  }


  .lotes-detail-kpi:nth-last-child(-n + 3) {
    border-bottom:
      0 !important;
  }


  .lotes-detail-info-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .lotes-info-card {
    border-right:
      1px
      solid
      var(--lotes-ui-border-strong) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-info-card:nth-child(3n) {
    border-right:
      0 !important;
  }


  .lotes-detail-grid {
    grid-template-columns:
      1fr !important;
  }


  .lotes-history-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .lotes-history-toolbar__search {
    min-width:
      0 !important;
  }
}


/* =========================================================
   34. MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .lotes-preparacion-page {
    padding:
      8px !important;
  }


  .lotes-page-header {
    gap:
      9px !important;

    margin-bottom:
      12px !important;
  }


  .lotes-page-header__title {
    font-size:
      22px !important;
  }


  .lotes-page-header__description {
    font-size:
      10.5px !important;
  }


  .lotes-page-header__actions {
    width:
      100%;

    display:
      grid !important;

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

    gap:
      5px !important;
  }


  .lotes-page-header__actions
  .lotes-button {
    width:
      100%;
  }


  /* =======================================================
     MÉTRICAS
     ======================================================= */

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


  .lotes-metric-card {
    min-height:
      80px !important;

    padding:
      9px !important;
  }


  .lotes-metric-card__top {
    margin-bottom:
      7px !important;
  }


  .lotes-metric-card__icon {
    width:
      27px !important;

    height:
      27px !important;
  }


  .lotes-metric-card__value {
    font-size:
      18px !important;
  }


  /* =======================================================
     TOOLBAR
     ======================================================= */

  .lotes-toolbar__primary {
    display:
      grid !important;

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

    gap:
      5px !important;
  }


  .lotes-search {
    grid-column:
      1
      /
      -1;

    width:
      100% !important;
  }


  .lotes-toolbar__primary
  .lotes-button {
    width:
      100%;
  }


  .lotes-toolbar__secondary {
    display:
      grid !important;

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

    gap:
      5px !important;
  }


  .lotes-toolbar-select {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      3px;
  }


  .lotes-toolbar-select select {
    width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     SELECCIÓN
     ======================================================= */

  .lotes-selection-bar {
    width:
      100%;

    align-items:
      stretch !important;

    flex-direction:
      column !important;

    gap:
      5px !important;
  }


  .lotes-selection-bar__actions {
    width:
      100%;
  }


  .lotes-selection-bar__actions
  .lotes-button {
    width:
      100%;
  }


  /* =======================================================
     PAGINACIÓN
     ======================================================= */

  .lotes-pagination {
    width:
      100%;

    align-items:
      stretch !important;

    flex-direction:
      column !important;

    gap:
      6px !important;

    overflow-x:
      hidden;
  }


  .lotes-pagination__summary {
    width:
      100%;

    text-align:
      center;
  }


  .lotes-pagination__controls {
    width:
      100%;

    display:
      grid;

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

    gap:
      4px;
  }


  .lotes-pagination__controls
  .lotes-icon-button {
    width:
      31px !important;
  }


  .lotes-pagination__page {
    min-width:
      0 !important;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;
  }


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

  .lotes-table-container
  .lotes-table
  tbody
  tr {
    grid-template-columns:
      1fr !important;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td,
  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(2n),
  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(9),
  .lotes-table-container
  .lotes-table
  tbody
  td:nth-child(10) {
    grid-column:
      auto !important;

    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border) !important;
  }


  .lotes-table-container
  .lotes-table
  tbody
  td:last-child {
    border-bottom:
      0 !important;
  }


  .lotes-row-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  /* =======================================================
     TABLAS INTERNAS
     ======================================================= */

  .lotes-detail-section
  .lotes-table
  tbody
  tr,
  .lotes-history-results
  .lotes-table
  tbody
  tr {
    grid-template-columns:
      1fr !important;
  }


  .lotes-detail-section
  .lotes-table
  tbody
  td,
  .lotes-detail-section
  .lotes-table
  tbody
  td:nth-child(2n),
  .lotes-history-results
  .lotes-table
  tbody
  td,
  .lotes-history-results
  .lotes-table
  tbody
  td:nth-child(2n) {
    border-right:
      0 !important;
  }


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

  .lotes-modal-backdrop {
    width:
      100vw;

    max-width:
      100vw;

    padding:
      7px !important;

    overflow-x:
      hidden !important;
  }


  .lotes-modal,
  .lotes-modal--sm,
  .lotes-modal--md,
  .lotes-modal--lg,
  .lotes-modal--xl {
    width:
      calc(
        100vw -
        14px
      ) !important;

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

    overflow-x:
      hidden !important;
  }


  .lotes-modal__header {
    padding:
      10px !important;
  }


  .lotes-modal__body {
    padding:
      10px !important;
  }


  .lotes-modal__footer {
    padding:
      8px
      10px !important;
  }


  .lotes-form-grid--2,
  .lotes-form-grid--3 {
    grid-template-columns:
      1fr !important;
  }


  /* =======================================================
     DETALLE
     ======================================================= */

  .lotes-detail-hero {
    flex-direction:
      column !important;
  }


  .lotes-detail-hero__main {
    width:
      100%;
  }


  .lotes-detail-hero__actions {
    width:
      100% !important;

    max-width:
      100% !important;

    display:
      grid;

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

    gap:
      5px;
  }


  .lotes-detail-hero__actions
  .lotes-button {
    width:
      100%;
  }


  .lotes-detail-kpis,
  .lotes-detail-info-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .lotes-detail-kpi,
  .lotes-detail-kpi:nth-child(3n) {
    border-right:
      1px
      solid
      var(--lotes-ui-border-strong) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-detail-kpi:nth-child(2n) {
    border-right:
      0 !important;
  }


  .lotes-info-card,
  .lotes-info-card:nth-child(3n) {
    border-right:
      1px
      solid
      var(--lotes-ui-border-strong) !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-info-card:nth-child(2n) {
    border-right:
      0 !important;
  }


  .lotes-detail-inline-values {
    grid-template-columns:
      1fr !important;
  }


  .lotes-detail-inline-values
  > div {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-detail-inline-values
  > div:last-child {
    border-bottom:
      0 !important;
  }


  .lotes-shortage-card {
    width:
      100%;

    max-width:
      100%;

    flex-direction:
      column;

    align-items:
      stretch;

    overflow-x:
      hidden;
  }


  .lotes-shortage-card__numbers {
    width:
      100%;

    min-width:
      0;

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

    flex:
      none;
  }


  .lotes-history-toolbar {
    grid-template-columns:
      1fr !important;
  }


  .lotes-history-toolbar__actions {
    width:
      100%;

    display:
      grid;

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


  .lotes-history-toolbar__actions
  .lotes-button {
    width:
      100%;
  }
}


/* =========================================================
   35. MOBILE CHICO
   ========================================================= */

@media (max-width: 480px) {
  .lotes-preparacion-page {
    padding:
      6px !important;
  }


  .lotes-page-header__actions {
    grid-template-columns:
      1fr !important;
  }


  .lotes-metrics {
    grid-template-columns:
      1fr !important;
  }


  .lotes-metric-card,
  .lotes-metric-card:nth-child(2n),
  .lotes-metric-card:nth-child(3n),
  .lotes-metric-card:nth-last-child(-n + 2),
  .lotes-metric-card:nth-last-child(-n + 3) {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-metric-card:last-child {
    border-bottom:
      0 !important;
  }


  .lotes-toolbar__primary,
  .lotes-toolbar__secondary {
    grid-template-columns:
      1fr !important;
  }


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


  .lotes-pagination__controls {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .lotes-pagination__page {
    grid-column:
      1
      /
      -1;

    grid-row:
      1;

    min-height:
      28px;
  }


  .lotes-pagination__controls
  .lotes-icon-button {
    width:
      100% !important;
  }


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


  .lotes-detail-kpis,
  .lotes-detail-info-grid {
    grid-template-columns:
      1fr !important;
  }


  .lotes-detail-kpi,
  .lotes-detail-kpi:nth-child(2n),
  .lotes-detail-kpi:nth-child(3n) {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-detail-kpi:last-child {
    border-bottom:
      0 !important;
  }


  .lotes-info-card,
  .lotes-info-card:nth-child(2n),
  .lotes-info-card:nth-child(3n) {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--lotes-ui-border-strong) !important;
  }


  .lotes-info-card:last-child {
    border-bottom:
      0 !important;
  }


  .lotes-shortage-card__numbers {
    grid-template-columns:
      1fr !important;
  }


  .lotes-shortage-card__numbers
  > div {
    padding:
      7px
      0;

    border-left:
      0 !important;

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


  .lotes-shortage-card__numbers
  > div:last-child {
    border-bottom:
      0;
  }


  .lotes-modal__footer {
    grid-template-columns:
      1fr !important;
  }


  .lotes-modal__footer
  .lotes-button {
    width:
      100%;
  }
}


/* =========================================================
   36. DIVISIONES LIGHT
   ========================================================= */

:root:not([data-theme="dark"])
.lotes-workspace,
:root:not([data-theme="dark"])
.lotes-metrics,
:root:not([data-theme="dark"])
.lotes-modal,
:root:not([data-theme="dark"])
.lotes-detail-hero,
:root:not([data-theme="dark"])
.lotes-detail-section,
:root:not([data-theme="dark"])
.lotes-detail-kpis,
:root:not([data-theme="dark"])
.lotes-detail-info-grid {
  border-color:
    #9fa6ae !important;
}


/* =========================================================
   37. DIVISIONES DARK
   ========================================================= */

html[data-theme="dark"]
.lotes-workspace,
html[data-theme="dark"]
.lotes-metrics,
html[data-theme="dark"]
.lotes-modal,
html[data-theme="dark"]
.lotes-detail-hero,
html[data-theme="dark"]
.lotes-detail-section,
html[data-theme="dark"]
.lotes-detail-kpis,
html[data-theme="dark"]
.lotes-detail-info-grid,
body.dark
.lotes-workspace,
body.dark
.lotes-metrics,
body.dark
.lotes-modal,
body.dark
.lotes-detail-hero,
body.dark
.lotes-detail-section,
body.dark
.lotes-detail-kpis,
body.dark
.lotes-detail-info-grid {
  border-color:
    #5b626a !important;
}


/* =========================================================
   38. PROTECCIÓN FINAL
   ========================================================= */

.lotes-preparacion-page img,
.lotes-preparacion-page svg,
.lotes-overlay-root img,
.lotes-overlay-root svg {
  max-width:
    100%;
}


.lotes-preparacion-page input,
.lotes-preparacion-page select,
.lotes-preparacion-page textarea,
.lotes-preparacion-page button,
.lotes-overlay-root input,
.lotes-overlay-root select,
.lotes-overlay-root textarea,
.lotes-overlay-root button {
  min-width:
    0;

  max-width:
    100%;
}


.lotes-preparacion-page,
.lotes-page-header,
.lotes-metrics,
.lotes-workspace,
.lotes-toolbar,
.lotes-toolbar__primary,
.lotes-toolbar__secondary,
.lotes-selection-bar,
.lotes-table-container,
.lotes-table-scroll,
.lotes-pagination,
.lotes-overlay-root,
.lotes-modal-backdrop,
.lotes-modal,
.lotes-modal__header,
.lotes-modal__body,
.lotes-modal__footer,
.lotes-form,
.lotes-form-section,
.lotes-detail,
.lotes-detail-hero,
.lotes-detail-kpis,
.lotes-detail-info-grid,
.lotes-detail-section,
.lotes-detail-grid,
.lotes-history-layout,
.lotes-history-toolbar,
.lotes-history-results {
  max-width:
    100%;

  overflow-x:
    hidden !important;
}/* =========================================================
   LOTES DE PREPARACIÓN
   OVERRIDE REAL · TIPOGRAFÍA GRANDE Y LEGIBLE

   IMPORTANTE:
   ESTE BLOQUE DEBE IR AL FINAL ABSOLUTO DEL CSS.
   PISA LOS !important ANTERIORES.
   ========================================================= */


/* =========================================================
   01 · HEADER
   ========================================================= */

.lotes-page-header__eyebrow {
  font-size:
    13px !important;

  font-weight:
    850 !important;

  letter-spacing:
    0.065em !important;
}


.lotes-page-header__title {
  font-size:
    clamp(
      32px,
      3vw,
      42px
    ) !important;

  font-weight:
    900 !important;

  line-height:
    1.08 !important;
}


.lotes-page-header__description {
  margin-top:
    9px !important;

  max-width:
    900px !important;

  font-size:
    15px !important;

  font-weight:
    650 !important;

  line-height:
    1.55 !important;
}


/* =========================================================
   02 · BOTONES
   ========================================================= */

.lotes-button {
  min-height:
    42px !important;

  padding:
    0
    14px !important;

  gap:
    7px !important;

  font-size:
    14px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;
}


.lotes-button--sm {
  min-height:
    36px !important;

  padding:
    0
    10px !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;
}


.lotes-button__counter {
  min-width:
    21px !important;

  height:
    21px !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;
}


.lotes-icon-button {
  width:
    38px !important;

  height:
    38px !important;
}


/* =========================================================
   03 · MÉTRICAS
   ========================================================= */

.lotes-metrics {
  margin-bottom:
    16px !important;
}


.lotes-metric-card {
  min-height:
    112px !important;

  padding:
    17px !important;
}


.lotes-metric-card__top {
  margin-bottom:
    14px !important;
}


.lotes-metric-card__label {
  font-size:
    13.5px !important;

  font-weight:
    850 !important;

  line-height:
    1.25 !important;
}


.lotes-metric-card__value {
  margin-bottom:
    7px !important;

  font-size:
    31px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;
}


.lotes-metric-card__hint {
  font-size:
    12.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.4 !important;
}


.lotes-metric-card__icon {
  width:
    38px !important;

  height:
    38px !important;
}


/* =========================================================
   04 · TOOLBAR
   ========================================================= */

.lotes-toolbar {
  padding:
    14px !important;

  gap:
    12px !important;
}


.lotes-search {
  min-height:
    44px !important;

  padding:
    0
    13px !important;
}


.lotes-search input {
  font-size:
    14px !important;

  font-weight:
    650 !important;
}


.lotes-search input::placeholder {
  font-size:
    14px !important;

  font-weight:
    600 !important;
}


.lotes-toolbar-select {
  gap:
    8px !important;
}


.lotes-toolbar-select > span {
  font-size:
    12.5px !important;

  font-weight:
    800 !important;
}


.lotes-toolbar-select select {
  min-height:
    42px !important;

  padding:
    0
    34px
    0
    12px !important;

  font-size:
    13.5px !important;

  font-weight:
    750 !important;
}


/* =========================================================
   05 · TABLA PRINCIPAL
   ========================================================= */

.lotes-table {
  font-size:
    13px !important;
}


.lotes-table thead th {
  height:
    48px !important;

  padding:
    0
    12px !important;

  font-size:
    11.5px !important;

  font-weight:
    850 !important;

  letter-spacing:
    0.025em !important;
}


.lotes-table tbody td {
  padding:
    13px
    12px !important;

  font-size:
    13px !important;

  font-weight:
    650 !important;

  line-height:
    1.35 !important;
}


/* =========================================================
   06 · LOTE
   ========================================================= */

.lotes-code-button {
  font-size:
    13.5px !important;

  font-weight:
    850 !important;
}


.lotes-table__date-secondary {
  margin-top:
    5px !important;

  font-size:
    11px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   07 · PRODUCTO
   ========================================================= */

.lotes-product-cell {
  gap:
    5px !important;
}


.lotes-product-cell strong {
  font-size:
    13.5px !important;

  font-weight:
    850 !important;

  line-height:
    1.3 !important;
}


.lotes-product-cell span {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.3 !important;
}


/* =========================================================
   08 · CANTIDAD / FECHAS
   ========================================================= */

.lotes-table__quantity-cell strong,
.lotes-table__date-cell strong {
  margin-bottom:
    5px !important;

  font-size:
    13.5px !important;

  font-weight:
    850 !important;
}


.lotes-table__quantity-cell span,
.lotes-table__date-cell span {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   09 · INSUMOS
   ========================================================= */

.lotes-stock-cell {
  gap:
    7px !important;
}


.lotes-stock-cell__meta {
  font-size:
    11px !important;

  font-weight:
    650 !important;

  line-height:
    1.35 !important;
}


/* =========================================================
   10 · ESTADOS / PRIORIDAD
   ========================================================= */

.lotes-status-badge,
.lotes-priority {
  min-height:
    29px !important;

  padding:
    0
    9px !important;

  gap:
    5px !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   11 · PROGRESO
   ========================================================= */

.lotes-progress-cell__top {
  margin-bottom:
    7px !important;
}


.lotes-progress-cell__top strong {
  font-size:
    12.5px !important;

  font-weight:
    850 !important;
}


.lotes-progress-cell__warning {
  font-size:
    10.5px !important;

  font-weight:
    850 !important;
}


.lotes-progress {
  height:
    6px !important;
}


/* =========================================================
   12 · PAGINACIÓN
   ========================================================= */

.lotes-pagination {
  min-height:
    60px !important;

  padding:
    10px
    14px !important;
}


.lotes-pagination__summary {
  font-size:
    12.5px !important;

  font-weight:
    650 !important;
}


.lotes-pagination__summary strong {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


.lotes-pagination__page {
  min-width:
    130px !important;

  font-size:
    12.5px !important;

  font-weight:
    650 !important;
}


.lotes-pagination__page strong {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   13 · SELECTION BAR
   ========================================================= */

.lotes-selection-bar__info {
  font-size:
    13.5px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   14 · MODAL
   ========================================================= */

.lotes-modal__header {
  min-height:
    78px !important;

  padding:
    18px !important;
}


.lotes-modal__title {
  font-size:
    21px !important;

  font-weight:
    900 !important;
}


.lotes-modal__subtitle {
  margin-top:
    6px !important;

  font-size:
    13.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.5 !important;
}


.lotes-modal__body {
  padding:
    18px !important;

  font-size:
    13px !important;
}


.lotes-modal__footer {
  min-height:
    68px !important;

  padding:
    12px
    18px !important;
}


/* =========================================================
   15 · FORMULARIOS
   ========================================================= */

.lotes-form-section__title {
  font-size:
    14.5px !important;

  font-weight:
    850 !important;
}


.lotes-form-section__description {
  font-size:
    12.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.45 !important;
}


.lotes-field__label {
  font-size:
    12.5px !important;

  font-weight:
    800 !important;
}


.lotes-field__hint {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.45 !important;
}


.lotes-input {
  min-height:
    43px !important;

  padding:
    0
    12px !important;

  font-size:
    13.5px !important;

  font-weight:
    650 !important;
}


textarea.lotes-input {
  padding:
    11px
    12px !important;
}


.lotes-textarea {
  font-size:
    13.5px !important;
}


.lotes-code-textarea {
  font-size:
    12.5px !important;
}


.lotes-input--table {
  min-height:
    37px !important;

  font-size:
    12.5px !important;
}


/* =========================================================
   16 · BUSCADORES MODAL
   ========================================================= */

.lotes-search-results__loading,
.lotes-search-results__empty {
  font-size:
    12.5px !important;

  font-weight:
    650 !important;
}


.lotes-product-option,
.lotes-responsible-option {
  min-height:
    64px !important;

  padding:
    11px
    12px !important;
}


.lotes-product-option__main strong,
.lotes-responsible-option__copy strong {
  font-size:
    13.5px !important;

  font-weight:
    850 !important;
}


.lotes-product-option__main span,
.lotes-responsible-option__copy span {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;
}


.lotes-product-option__meta span {
  min-height:
    24px !important;

  font-size:
    10.5px !important;

  font-weight:
    750 !important;
}


/* =========================================================
   17 · PRODUCTO SELECCIONADO
   ========================================================= */

.lotes-selected-product__copy strong {
  font-size:
    14px !important;

  font-weight:
    850 !important;
}


.lotes-selected-product__copy span {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;
}


.lotes-summary-product strong {
  font-size:
    13.5px !important;

  font-weight:
    850 !important;
}


.lotes-summary-product span {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   18 · INFORMACIÓN / CALLOUT
   ========================================================= */

.lotes-create-info strong {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


.lotes-create-info p {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;
}


.lotes-callout,
.lotes-callout strong {
  font-size:
    12px !important;
}


.lotes-confirm__message {
  font-size:
    13.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   19 · POPOVER
   ========================================================= */

.lotes-popover {
  width:
    240px !important;
}


.lotes-popover__item {
  min-height:
    42px !important;

  padding:
    0
    11px !important;

  font-size:
    12.5px !important;

  font-weight:
    750 !important;
}


.lotes-popover__empty {
  font-size:
    11.5px !important;
}


/* =========================================================
   20 · DETALLE HERO
   ========================================================= */

.lotes-detail-hero__product > span {
  font-size:
    11.5px !important;

  font-weight:
    800 !important;
}


.lotes-detail-hero__product > strong {
  font-size:
    21px !important;

  font-weight:
    900 !important;
}


.lotes-detail-hero__product > small {
  font-size:
    12.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   21 · KPIS DETALLE
   ========================================================= */

.lotes-detail-kpi > span {
  font-size:
    11.5px !important;

  font-weight:
    800 !important;
}


.lotes-detail-kpi > strong {
  font-size:
    21px !important;

  font-weight:
    900 !important;
}


/* =========================================================
   22 · INFO CARDS
   ========================================================= */

.lotes-info-card__label {
  font-size:
    11.5px !important;

  font-weight:
    800 !important;
}


.lotes-info-card > strong {
  font-size:
    12.5px !important;

  font-weight:
    800 !important;
}


/* =========================================================
   23 · SECCIONES DETALLE
   ========================================================= */

.lotes-detail-section__header h3 {
  font-size:
    14.5px !important;

  font-weight:
    850 !important;
}


.lotes-detail-section__header p {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   24 · TABLAS DE DETALLE
   ========================================================= */

.lotes-table--detail thead th,
.lotes-table--compact thead th,
.lotes-config-content .lotes-table thead th {
  font-size:
    11px !important;
}


.lotes-table--detail tbody td,
.lotes-table--compact tbody td,
.lotes-config-content .lotes-table tbody td {
  font-size:
    12.5px !important;
}


/* =========================================================
   25 · INSUMOS DETALLE
   ========================================================= */

.lotes-detail-insumo strong {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


.lotes-detail-insumo span {
  font-size:
    11px !important;

  font-weight:
    650 !important;
}


.lotes-table-subtext {
  font-size:
    10.5px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   26 · FALTANTES
   ========================================================= */

.lotes-shortage-card > div:first-child strong {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


.lotes-shortage-card > div:first-child span {
  font-size:
    11px !important;

  font-weight:
    650 !important;
}


.lotes-shortage-card__numbers span {
  font-size:
    10px !important;

  font-weight:
    800 !important;
}


.lotes-shortage-card__numbers strong {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   27 · LISTAS INTERNAS
   ========================================================= */

.lotes-list-row__main strong {
  font-size:
    12.5px !important;

  font-weight:
    850 !important;
}


.lotes-list-row__main span {
  font-size:
    11px !important;

  font-weight:
    650 !important;
}


.lotes-list-row__value {
  font-size:
    13px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   28 · HISTORIAL
   ========================================================= */

.lotes-history-action {
  font-size:
    10.5px !important;

  font-weight:
    850 !important;
}


.lotes-history-description {
  font-size:
    12.5px !important;
}


/* =========================================================
   29 · TOAST
   ========================================================= */

.lotes-toast__content {
  font-size:
    12.5px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   30 · LIGHT · LETRAS OSCURAS
   ========================================================= */

html:not([data-theme="dark"])
.lotes-preparacion-page {
  --text-primary:
    #080808;

  --text-secondary:
    #202020;

  --text-muted:
    #353535;
}


html:not([data-theme="dark"])
.lotes-overlay-root {
  --lotes-modal-text:
    #080808;

  --lotes-modal-text-secondary:
    #202020;

  --lotes-modal-text-muted:
    #383838;
}


/* =========================================================
   31 · MOBILE
   ========================================================= */

@media (
  max-width:
  760px
) {
  .lotes-page-header__eyebrow {
    font-size:
      12px !important;
  }


  .lotes-page-header__title {
    font-size:
      30px !important;
  }


  .lotes-page-header__description {
    font-size:
      14px !important;
  }


  .lotes-button {
    min-height:
      42px !important;

    font-size:
      13.5px !important;
  }


  .lotes-metric-card {
    min-height:
      106px !important;
  }


  .lotes-metric-card__label {
    font-size:
      13px !important;
  }


  .lotes-metric-card__value {
    font-size:
      29px !important;
  }


  .lotes-metric-card__hint {
    font-size:
      12px !important;
  }


  .lotes-modal__title {
    font-size:
      19px !important;
  }


  .lotes-modal__subtitle {
    font-size:
      13px !important;
  }


  .lotes-field__label {
    font-size:
      12.5px !important;
  }


  .lotes-input {
    min-height:
      44px !important;

    font-size:
      14px !important;
  }
}


/* =========================================================
   32 · MOBILE PEQUEÑO
   ========================================================= */

@media (
  max-width:
  480px
) {
  .lotes-page-header__title {
    font-size:
      27px !important;
  }


  .lotes-page-header__description {
    font-size:
      13.5px !important;
  }


  .lotes-button {
    font-size:
      13px !important;
  }


  .lotes-metric-card__value {
    font-size:
      27px !important;
  }


  .lotes-toolbar-select > span {
    font-size:
      12px !important;
  }


  .lotes-toolbar-select select {
    font-size:
      13px !important;
  }
}


/* =========================================================
   FIN · OVERRIDE REAL
   ========================================================= *//* =========================================================
   DETALLE DE LOTE · HERO EN UNA SOLA LÍNEA
   ========================================================= */

.lotes-detail-hero {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    16px !important;

  flex-wrap:
    nowrap !important;
}


.lotes-detail-hero__main {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  gap:
    14px !important;

  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  flex-wrap:
    nowrap !important;
}


.lotes-detail-hero__product {
  flex:
    0 1 auto !important;

  min-width:
    180px !important;

  max-width:
    360px !important;
}


.lotes-detail-hero__badges {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  flex:
    0 0 auto !important;

  flex-wrap:
    nowrap !important;

  white-space:
    nowrap !important;
}


.lotes-detail-hero__actions {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  gap:
    8px !important;

  flex:
    0 0 auto !important;

  width:
    auto !important;

  max-width:
    none !important;

  flex-wrap:
    nowrap !important;

  white-space:
    nowrap !important;
}


.lotes-detail-hero__actions
.lotes-button {
  flex:
    0 0 auto !important;

  white-space:
    nowrap !important;
}


/* =========================================================
   EVITAR QUE EL RESPONSIVE ANTERIOR LO MANDE ABAJO
   ========================================================= */

@media (
  max-width:
  1300px
) {
  .lotes-detail-hero {
    flex-direction:
      row !important;
  }


  .lotes-detail-hero__actions {
    width:
      auto !important;

    max-width:
      none !important;

    justify-content:
      flex-end !important;

    flex-wrap:
      nowrap !important;
  }
}


/* =========================================================
   NOTEBOOK / PANTALLA MÁS ANGOSTA
   COMPRIME SIN BAJAR A OTRA LÍNEA
   ========================================================= */

@media (
  max-width:
  1100px
) {
  .lotes-detail-hero {
    gap:
      10px !important;

    padding:
      12px !important;
  }


  .lotes-detail-hero__main {
    gap:
      9px !important;
  }


  .lotes-detail-hero__product {
    min-width:
      150px !important;

    max-width:
      260px !important;
  }


  .lotes-detail-hero__actions {
    gap:
      5px !important;
  }


  .lotes-detail-hero__actions
  .lotes-button {
    min-height:
      38px !important;

    padding:
      0
      10px !important;

    font-size:
      12px !important;
  }


  .lotes-status-badge,
  .lotes-priority {
    padding:
      0
      7px !important;

    font-size:
      10px !important;
  }
}


/* =========================================================
   DESKTOP PEQUEÑO
   ========================================================= */

@media (
  max-width:
  900px
) {
  .lotes-detail-hero {
    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scrollbar-width:
      thin !important;
  }


  .lotes-detail-hero__main,
  .lotes-detail-hero__actions {
    flex-shrink:
      0 !important;
  }
}