/* =========================================================
   UBICACIÓN:
   frontend/src/pages/manufactura/ordenes-compra/
   ordenes-compra.css

   WIRTZ HUB
   MANUFACTURA
   ÓRDENES DE COMPRA

   REDISEÑO COMPLETO

   PARTE 1 DE 4

   ESTILO:
   - Premium
   - Minimalista
   - Ejecutivo
   - Compacto
   - Responsive
   - Divisiones visibles
   - Bordes firmes
   - Dark mode negro real
   - Animaciones rápidas
   - Sin glow
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.oc-page {
  --oc-bg: #f4f5f7;
  --oc-bg-soft: #f7f8fa;

  --oc-surface: #ffffff;
  --oc-surface-2: #f8f9fa;
  --oc-surface-3: #f1f3f5;
  --oc-surface-4: #e9ecef;

  --oc-border: #d9dde3;
  --oc-border-strong: #c4c9d1;
  --oc-border-extra: #aeb5bf;

  --oc-text: #25292f;
  --oc-text-strong: #090b0e;

  --oc-muted: #626a75;
  --oc-muted-2: #858d98;

  --oc-primary: #111318;
  --oc-primary-hover: #262a30;
  --oc-primary-text: #ffffff;

  --oc-success: #087443;
  --oc-success-bg: #eff9f4;
  --oc-success-border: #afdcc6;

  --oc-warning: #9b5b08;
  --oc-warning-bg: #fff8e9;
  --oc-warning-border: #e8cb93;

  --oc-danger: #bd2727;
  --oc-danger-bg: #fff3f3;
  --oc-danger-border: #edb4b4;

  --oc-info: #175aaf;
  --oc-info-bg: #f1f6fc;
  --oc-info-border: #b7cee9;

  --oc-primary-soft: #eef1f4;
  --oc-primary-soft-border: #c6ccd4;

  --oc-purple: #704ea0;
  --oc-purple-bg: #f8f4fb;
  --oc-purple-border: #d8c8e5;

  --oc-radius-xs: 4px;
  --oc-radius-sm: 6px;
  --oc-radius-md: 8px;
  --oc-radius-lg: 10px;
  --oc-radius-xl: 12px;

  --oc-fast:
    110ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  --oc-normal:
    150ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  --oc-slow:
    190ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  --oc-shadow-popover:
    0
    14px
    36px
    rgba(
      0,
      0,
      0,
      0.12
    );

  --oc-shadow-overlay:
    0
    24px
    80px
    rgba(
      0,
      0,
      0,
      0.18
    );

  width: 100%;
  min-width: 0;

  min-height:
    calc(
      100dvh -
      56px
    );

  overflow-x: hidden;

  background:
    var(
      --oc-bg
    );

  color:
    var(
      --oc-text
    );

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

  font-size: 13px;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.oc-page *,
.oc-page *::before,
.oc-page *::after {
  box-sizing: border-box;
}


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


.oc-page button {
  -webkit-tap-highlight-color: transparent;
}


.oc-page input,
.oc-page select,
.oc-page textarea {
  min-width: 0;
}


.oc-page button,
.oc-page input,
.oc-page select,
.oc-page textarea {
  outline: none;
}


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

.oc-page__inner {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 18px;
}


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

.oc-header {
  width: 100%;
  min-width: 0;
}


.oc-header__main {
  width: 100%;
  min-width: 0;
}


.oc-header__eyebrow {
  margin-bottom: 4px;

  color:
    var(
      --oc-muted
    );

  font-size: 9px;
  line-height: 1;

  font-weight: 850;

  letter-spacing: 0.085em;

  text-transform: uppercase;
}


.oc-header__title-row {
  min-width: 0;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;
}


.oc-header__copy {
  min-width: 0;
}


.oc-header__title {
  margin: 0;

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

  font-size:
    clamp(
      24px,
      2vw,
      30px
    );

  line-height: 1.06;

  font-weight: 850;

  letter-spacing: -0.04em;
}


.oc-header__description {
  max-width: 760px;

  margin:
    6px
    0
    0;

  color:
    var(
      --oc-muted
    );

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

  font-weight: 650;
}


.oc-header__actions {
  flex: 0 0 auto;

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

  flex-wrap: wrap;

  gap: 6px;
}


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

.oc-btn {
  appearance: none;

  min-height: 36px;

  padding:
    7px
    12px;

  border:
    1px
    solid
    transparent;

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

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

  gap: 7px;

  background: transparent;

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

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

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

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


.oc-btn:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );
}


.oc-btn:active:not(:disabled) {
  transform: none;

  transition-duration: 60ms;
}


.oc-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}


.oc-btn svg {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  stroke-width: 2.1;
}


.oc-btn.is-loading {
  pointer-events: none;

  opacity: 0.72;
}


.oc-btn.is-loading svg {
  animation:
    oc-spin
    700ms
    linear
    infinite;
}


/* =========================================================
   BOTÓN PRIMARY
   ========================================================= */

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

  background:
    var(
      --oc-primary
    );

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


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

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

  color: #ffffff;
}


/* =========================================================
   BOTÓN SECONDARY
   ========================================================= */

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

  background:
    var(
      --oc-surface
    );

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


.oc-btn--secondary:hover:not(:disabled) {
  border-color:
    var(
      --oc-border-extra
    );

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

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


/* =========================================================
   BOTÓN GHOST
   ========================================================= */

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

  background:
    transparent;

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


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

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

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


/* =========================================================
   BOTÓN DANGER
   ========================================================= */

.oc-btn--danger {
  border-color:
    var(
      --oc-danger
    );

  background:
    var(
      --oc-danger
    );

  color: #ffffff;
}


.oc-btn--danger:hover:not(:disabled) {
  border-color: #a61f1f;

  background: #a61f1f;

  color: #ffffff;
}


/* =========================================================
   DANGER GHOST
   ========================================================= */

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

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

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


.oc-btn--danger-ghost:hover:not(:disabled) {
  border-color:
    var(
      --oc-danger
    );

  background:
    var(
      --oc-danger
    );

  color: #ffffff;
}


/* =========================================================
   BOTÓN XS
   ========================================================= */

.oc-btn--xs {
  min-height: 28px;

  padding:
    4px
    8px;

  border-radius: 5px;

  font-size: 9px;
}


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

.oc-icon-btn {
  appearance: none;

  width: 32px;
  height: 32px;

  min-width: 32px;

  flex: 0 0 32px;

  padding: 0;

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

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

  display: inline-grid;

  place-items: center;

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-muted
    );

  cursor: pointer;

  box-shadow: none;

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


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

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

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

  transform:
    translateY(
      -1px
    );
}


.oc-icon-btn:active:not(:disabled) {
  transform: none;
}


.oc-icon-btn:disabled {
  opacity: 0.35;

  cursor: not-allowed;
}


.oc-icon-btn svg {
  width: 14px;
  height: 14px;

  stroke-width: 2.1;
}


.oc-icon-btn--row {
  width: 29px;
  height: 29px;

  min-width: 29px;

  flex-basis: 29px;
}


.oc-icon-btn--close {
  color:
    var(
      --oc-text
    );
}


.oc-icon-btn--danger {
  color:
    var(
      --oc-danger
    );
}


.oc-icon-btn--danger:hover:not(:disabled) {
  border-color:
    var(
      --oc-danger-border
    );

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

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


/* =========================================================
   FOCUS
   ========================================================= */

.oc-btn:focus-visible,
.oc-icon-btn:focus-visible,
.oc-search input:focus-visible,
.oc-select-wrap select:focus-visible,
.oc-advanced-filters input:focus-visible,
.oc-advanced-filters select:focus-visible {
  outline:
    2px
    solid
    var(
      --oc-text-strong
    );

  outline-offset: 2px;

  box-shadow: none;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.oc-metrics {
  width: 100%;
  min-width: 0;

  display: grid;

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

  gap: 7px;
}


/* =========================================================
   MÉTRICA CARD
   ========================================================= */

.oc-metric-card {
  position: relative;

  min-width: 0;

  min-height: 92px;

  padding:
    12px
    12px;

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

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

  display: flex;
  align-items: center;

  gap: 10px;

  overflow: hidden;

  background:
    var(
      --oc-surface
    );

  box-shadow: none;

  transition:
    background-color
      var(
        --oc-normal
      ),
    border-color
      var(
        --oc-normal
      ),
    transform
      var(
        --oc-normal
      );
}


.oc-metric-card:hover {
  border-color:
    var(
      --oc-border-strong
    );

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

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   MÉTRICA ICON
   ========================================================= */

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

  flex: 0 0 34px;

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

  border-radius: 7px;

  display: grid;

  place-items: center;

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

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


.oc-metric-card__icon svg {
  width: 16px;
  height: 16px;

  stroke-width: 2;
}


/* =========================================================
   MÉTRICA BODY
   ========================================================= */

.oc-metric-card__body {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-metric-card__label {
  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 9px;
  line-height: 1.2;

  font-weight: 750;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-metric-card__value {
  min-width: 0;

  overflow: hidden;

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

  font-size: 17px;
  line-height: 1.15;

  font-weight: 850;

  letter-spacing: -0.035em;

  font-variant-numeric:
    tabular-nums;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-metric-card__meta {
  overflow: hidden;

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

  font-size: 8px;
  line-height: 1.25;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   MÉTRICA PRIMARY
   ========================================================= */

.oc-metric-card--primary
.oc-metric-card__icon {
  border-color:
    var(
      --oc-info-border
    );

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

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


/* =========================================================
   MÉTRICA INFO
   ========================================================= */

.oc-metric-card--info
.oc-metric-card__icon {
  border-color:
    var(
      --oc-info-border
    );

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

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


/* =========================================================
   MÉTRICA WARNING
   ========================================================= */

.oc-metric-card--warning
.oc-metric-card__icon {
  border-color:
    var(
      --oc-warning-border
    );

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

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


/* =========================================================
   MÉTRICA SUCCESS
   ========================================================= */

.oc-metric-card--success
.oc-metric-card__icon {
  border-color:
    var(
      --oc-success-border
    );

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

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


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

.oc-workspace {
  width: 100%;
  min-width: 0;
}


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

.oc-panel {
  width: 100%;
  min-width: 0;

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

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

  overflow: hidden;

  background:
    var(
      --oc-surface
    );

  box-shadow: none;
}


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

.oc-panel__header {
  min-height: 57px;

  padding:
    10px
    12px;

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

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

  gap: 14px;

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


.oc-panel__header > div:first-child {
  min-width: 0;
}


.oc-panel__title {
  margin: 0;

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

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

  font-weight: 850;
}


.oc-panel__subtitle {
  margin:
    3px
    0
    0;

  color:
    var(
      --oc-muted
    );

  font-size: 9px;

  font-weight: 650;
}


.oc-panel__header-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 5px;
}


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

.oc-toolbar {
  width: 100%;
  min-width: 0;

  padding:
    9px
    10px;

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

  display: flex;
  align-items: flex-end;

  gap: 8px;

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


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

.oc-search {
  position: relative;

  min-width: 230px;

  flex:
    1
    1
    420px;

  display: block;
}


.oc-search > svg {
  position: absolute;

  top: 50%;
  left: 11px;

  width: 14px;
  height: 14px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --oc-muted
    );

  pointer-events: none;
}


.oc-search input {
  width: 100%;
  height: 37px;

  padding:
    0
    37px
    0
    34px;

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

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

  outline: none;

  background:
    var(
      --oc-surface
    );

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

  font-size: 10px;

  font-weight: 700;

  box-shadow: none;

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


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

  opacity: 1;
}


.oc-search input:hover {
  border-color:
    var(
      --oc-border-strong
    );
}


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

  box-shadow: none;
}


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

.oc-search__clear {
  position: absolute;

  top: 50%;
  right: 7px;

  width: 24px;
  height: 24px;

  padding: 0;

  border:
    1px
    solid
    transparent;

  border-radius: 4px;

  display: grid;

  place-items: center;

  transform:
    translateY(
      -50%
    );

  background: transparent;

  color:
    var(
      --oc-muted
    );

  cursor: pointer;

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


.oc-search__clear:hover {
  border-color:
    var(
      --oc-border
    );

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

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


.oc-search__clear svg {
  width: 12px;
  height: 12px;
}


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

.oc-toolbar__filters {
  min-width: 0;

  flex:
    0
    1
    auto;

  display: flex;
  align-items: flex-end;

  gap: 5px;
}


/* =========================================================
   SELECT WRAP
   ========================================================= */

.oc-select-wrap {
  min-width: 110px;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.oc-select-wrap > span {
  padding-left: 1px;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.oc-select-wrap select {
  width: 100%;
  min-width: 0;

  height: 36px;

  padding:
    0
    28px
    0
    9px;

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

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

  outline: none;

  background:
    var(
      --oc-surface
    );

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

  font-size: 9px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: none;

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


.oc-select-wrap select:hover {
  border-color:
    var(
      --oc-border-strong
    );
}


.oc-select-wrap select:focus {
  border-color:
    var(
      --oc-text-strong
    );

  box-shadow: none;
}


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

.oc-advanced-filters {
  width: 100%;

  padding: 10px;

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

  display: grid;

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

  gap: 7px;

  align-items: end;

  background:
    var(
      --oc-surface
    );

  animation:
    oc-filters-open
    120ms
    ease-out;
}


.oc-advanced-filters[hidden] {
  display: none !important;
}


@keyframes oc-filters-open {
  from {
    opacity: 0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


.oc-advanced-filters > label {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.oc-advanced-filters > label > span {
  padding-left: 1px;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.oc-advanced-filters input,
.oc-advanced-filters select {
  width: 100%;
  height: 36px;

  min-width: 0;

  padding:
    0
    9px;

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

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

  outline: none;

  background:
    var(
      --oc-surface
    );

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

  font-size: 9px;

  font-weight: 700;

  box-shadow: none;

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


.oc-advanced-filters input::placeholder {
  color:
    var(
      --oc-muted-2
    );

  opacity: 1;
}


.oc-advanced-filters input:hover,
.oc-advanced-filters select:hover {
  border-color:
    var(
      --oc-border-strong
    );
}


.oc-advanced-filters input:focus,
.oc-advanced-filters select:focus {
  border-color:
    var(
      --oc-text-strong
    );

  box-shadow: none;
}


.oc-advanced-filters__actions {
  grid-column:
    1 /
    -1;

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

  padding-top: 2px;
}


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

.oc-table-shell {
  width: 100%;
  min-width: 0;

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

  background:
    var(
      --oc-surface
    );

  scrollbar-width: thin;
}


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

.oc-table {
  width: 100%;

  min-width: 1080px;

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

  table-layout: auto;

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


.oc-table thead {
  background:
    var(
      --oc-surface-2
    );
}


.oc-table th {
  height: 38px;

  padding:
    0
    10px;

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

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

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

  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;
  line-height: 1.2;

  font-weight: 850;

  text-align: left;

  text-transform: uppercase;

  letter-spacing: 0.035em;

  white-space: nowrap;
}


.oc-table th:last-child {
  border-right: 0;
}


.oc-table td {
  padding:
    9px
    10px;

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

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

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-text
    );

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

  font-weight: 650;

  vertical-align: middle;

  transition:
    background-color
      var(
        --oc-fast
      );
}


.oc-table td:last-child {
  border-right: 0;
}


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


.oc-table tbody tr:not(.is-loading) {
  transition:
    background-color
      var(
        --oc-fast
      );
}


.oc-table tbody tr:not(.is-loading):hover td {
  background:
    var(
      --oc-surface-2
    );
}


.oc-table-row {
  cursor: pointer;
}


.oc-table th.is-numeric,
.oc-table td.is-numeric {
  text-align: right;
}


.oc-table td.is-numeric {
  font-variant-numeric:
    tabular-nums;
}


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

.oc-col-order {
  min-width: 145px;
}


.oc-col-provider {
  min-width: 265px;
}


.oc-col-actions {
  width: 58px;

  min-width: 58px;

  text-align: right !important;
}


/* =========================================================
   ORDER CELL
   ========================================================= */

.oc-order-cell {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.oc-order-cell__number {
  max-width: 170px;

  overflow: hidden;

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

  font-size: 10.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-order-cell__meta {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px 7px;
}


.oc-order-cell__meta span {
  position: relative;

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

  font-size: 7.5px;

  font-weight: 650;

  white-space: nowrap;
}


.oc-order-cell__meta span:not(:last-child)::after {
  content: "·";

  margin-left: 7px;

  color:
    var(
      --oc-border-extra
    );
}


/* =========================================================
   PROVIDER CELL
   ========================================================= */

.oc-provider-cell {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}


.oc-provider-avatar {
  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

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

  border-radius: 6px;

  display: grid;

  place-items: center;

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

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

  font-size: 11px;

  font-weight: 850;
}


.oc-provider-cell__text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-provider-cell__name {
  max-width: 260px;

  overflow: hidden;

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

  font-size: 10.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-provider-cell__legal {
  max-width: 260px;

  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-provider-cell__meta {
  max-width: 280px;

  display: flex;
  align-items: center;

  gap: 5px;

  overflow: hidden;
}


.oc-provider-cell__meta span {
  position: relative;

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

  font-size: 7.5px;

  font-weight: 650;

  white-space: nowrap;
}


.oc-provider-cell__meta span:not(:last-child)::after {
  content: "·";

  margin-left: 5px;

  color:
    var(
      --oc-border-extra
    );
}


/* =========================================================
   VALUE STACK
   ========================================================= */

.oc-value-stack {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-value-stack > strong,
.oc-value-stack > span {
  color:
    var(
      --oc-text-strong
    );

  font-size: 9.5px;

  font-weight: 800;
}


.oc-value-stack > small {
  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 650;
}


/* =========================================================
   MONEY
   ========================================================= */

.oc-money {
  color:
    var(
      --oc-text-strong
    );

  font-size: 10.5px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;

  white-space: nowrap;
}


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

.oc-document-status {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px;
}


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

.oc-badge {
  width: fit-content;

  max-width: 100%;

  min-height: 21px;

  padding:
    3px
    7px;

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

  border-radius: 5px;

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

  gap: 4px;

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

  color:
    var(
      --oc-muted
    );

  font-size: 8px;
  line-height: 1;

  font-weight: 850;

  white-space: nowrap;
}


.oc-badge svg {
  width: 11px;
  height: 11px;

  stroke-width: 2.2;
}


.oc-badge.is-success {
  border-color:
    var(
      --oc-success-border
    );

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

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


.oc-badge.is-warning {
  border-color:
    var(
      --oc-warning-border
    );

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

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


.oc-badge.is-danger {
  border-color:
    var(
      --oc-danger-border
    );

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

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


.oc-badge.is-info {
  border-color:
    var(
      --oc-info-border
    );

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

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


.oc-badge.is-primary {
  border-color:
    var(
      --oc-primary-soft-border
    );

  background:
    var(
      --oc-primary-soft
    );

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


.oc-badge.is-neutral {
  border-color:
    var(
      --oc-border
    );

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

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


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

.oc-table-empty-cell {
  padding: 0 !important;

  border-right: 0 !important;
}


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

.oc-empty {
  min-height: 225px;

  padding: 28px;

  display: flex;
  flex-direction: column;

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

  text-align: center;
}


.oc-empty--compact {
  min-height: 170px;

  padding: 22px;
}


.oc-empty__icon {
  width: 40px;
  height: 40px;

  margin-bottom: 9px;

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

  border-radius: 7px;

  display: grid;

  place-items: center;

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

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


.oc-empty__icon svg {
  width: 18px;
  height: 18px;

  stroke-width: 1.9;
}


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

  font-size: 12px;

  font-weight: 850;
}


.oc-empty > span {
  max-width: 440px;

  margin-top: 5px;

  color:
    var(
      --oc-muted
    );

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

  font-weight: 650;
}


.oc-empty__actions {
  margin-top: 12px;

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

  flex-wrap: wrap;

  gap: 6px;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.oc-pagination {
  min-height: 50px;

  padding:
    8px
    11px;

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

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

  gap: 12px;

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


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


.oc-pagination__info {
  color:
    var(
      --oc-muted
    );

  font-size: 9px;

  font-weight: 700;
}


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

  font-weight: 850;
}


.oc-pagination__actions {
  display: flex;
  align-items: center;

  gap: 6px;
}


.oc-pagination__current {
  min-width: 100px;

  color:
    var(
      --oc-muted
    );

  font-size: 9px;

  font-weight: 700;

  text-align: center;
}


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

  font-weight: 850;
}


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

.oc-skeleton {
  position: relative;

  overflow: hidden;

  border-radius: 4px;

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


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

  position: absolute;

  inset: 0;

  transform:
    translateX(
      -100%
    );

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

  animation:
    oc-skeleton-loading
    1.15s
    linear
    infinite;
}


@keyframes oc-skeleton-loading {
  to {
    transform:
      translateX(
        100%
      );
  }
}


.oc-skeleton--icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border-radius: 7px;
}


.oc-skeleton--label {
  width: 70px;
  height: 8px;
}


.oc-skeleton--value {
  width: 118px;
  height: 17px;

  margin-top: 6px;
}


.oc-skeleton--small {
  width: 92px;
  height: 7px;

  margin-top: 5px;
}


.oc-skeleton--avatar {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border-radius: 6px;
}


.oc-skeleton--line-lg {
  width:
    min(
      100%,
      180px
    );

  height: 9px;
}


.oc-skeleton--line-sm {
  width:
    min(
      72%,
      120px
    );

  height: 7px;

  margin-top: 5px;
}


.oc-skeleton--money {
  width: 94px;
  height: 11px;
}


.oc-skeleton--badge {
  width: 72px;
  height: 21px;

  border-radius: 5px;
}


.oc-skeleton--date {
  width: 76px;
  height: 9px;
}


.oc-skeleton--button {
  width: 29px;
  height: 29px;

  border-radius: 5px;
}


.oc-skeleton--order {
  width: 100px;
  height: 10px;
}


.oc-skeleton--small-box {
  width: 42px;
  height: 20px;

  border-radius: 5px;
}


.oc-skeleton--detail-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 7px;
}


/* =========================================================
   SPIN
   ========================================================= */

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


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

.oc-page *,
.oc-detail *,
.oc-drawer *,
.oc-modal * {
  scrollbar-width: thin;

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


.oc-page *::-webkit-scrollbar,
.oc-detail *::-webkit-scrollbar,
.oc-drawer *::-webkit-scrollbar,
.oc-modal *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


.oc-page *::-webkit-scrollbar-track,
.oc-detail *::-webkit-scrollbar-track,
.oc-drawer *::-webkit-scrollbar-track,
.oc-modal *::-webkit-scrollbar-track {
  background: transparent;
}


.oc-page *::-webkit-scrollbar-thumb,
.oc-detail *::-webkit-scrollbar-thumb,
.oc-drawer *::-webkit-scrollbar-thumb,
.oc-modal *::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

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

  background-clip: padding-box;
}


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

   SIGUE:
   - Detail overlay.
   - Panel lateral de orden.
   - Header de detalle.
   - Summary interno.
   - Tabs.
   - Cards.
   - KV.
   - Totales.
   - Documentación.
   - Items.
   - IVA.
   - Recepción.
   - Historial.
   ========================================================= *//* =========================================================
   PARTE 2 DE 4

   DETALLE DE ORDEN
   - Overlay.
   - Panel lateral.
   - Header.
   - Summary.
   - Tabs.
   - Cards.
   - KV.
   - Totales.
   - Documentación.
   - Items.
   - IVA.
   - Recepción.
   - Historial.
   ========================================================= */


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

.oc-detail-overlay {
  position: fixed;

  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 9000;

  overflow: hidden;
}


.oc-detail-overlay[hidden] {
  display: none !important;
}


.oc-detail-backdrop {
  position: absolute;

  inset: 0;

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

  backdrop-filter: none;
}


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

.oc-detail {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width:
    min(
      1180px,
      95vw
    );

  min-width: 0;

  border-left:
    1px
    solid
    var(
      --oc-border-strong
    );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(
      --oc-bg
    );

  color:
    var(
      --oc-text
    );

  box-shadow:
    -18px
    0
    56px
    rgba(
      0,
      0,
      0,
      0.18
    );

  animation:
    oc-detail-open
    170ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


@keyframes oc-detail-open {
  from {
    transform:
      translateX(
        28px
      );

    opacity: 0;
  }

  to {
    transform: none;

    opacity: 1;
  }
}


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

.oc-detail__header {
  min-height: 76px;

  flex: 0 0 auto;

  padding:
    12px
    14px;

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

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

  gap: 16px;

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


.oc-detail__header-main {
  min-width: 0;

  flex: 1;
}


.oc-detail__header-actions {
  flex: 0 0 auto;

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

  flex-wrap: wrap;

  gap: 5px;
}


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

.oc-detail-order {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}


.oc-detail-order__icon {
  width: 38px;
  height: 38px;

  flex:
    0
    0
    38px;

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

  border-radius: 7px;

  display: grid;

  place-items: center;

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

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


.oc-detail-order__icon svg {
  width: 17px;
  height: 17px;

  stroke-width: 2;
}


.oc-detail-order__text {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.oc-detail-order__eyebrow {
  margin-bottom: 2px;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 850;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


.oc-detail-order__text h2 {
  max-width: 620px;

  margin: 0;

  overflow: hidden;

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

  font-size: 18px;
  line-height: 1.15;

  font-weight: 850;

  letter-spacing: -0.025em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-detail-order__meta {
  min-width: 0;

  margin-top: 4px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px 8px;
}


.oc-detail-order__meta span {
  position: relative;

  max-width: 260px;

  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-detail-order__meta span:not(:last-child)::after {
  content: "·";

  margin-left: 8px;

  color:
    var(
      --oc-border-extra
    );
}


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

.oc-detail__summary {
  width: 100%;

  flex: 0 0 auto;

  padding: 9px 12px;

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

  display: grid;

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

  gap: 6px;

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


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

.oc-detail-stat {
  min-width: 0;

  min-height: 76px;

  padding:
    9px
    10px;

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

  border-radius: 6px;

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

  gap: 2px;

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


.oc-detail-stat > span {
  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.oc-detail-stat > strong {
  min-width: 0;

  overflow: hidden;

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

  font-size: 14px;

  line-height: 1.2;

  font-weight: 850;

  letter-spacing: -0.025em;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


.oc-detail-stat > small {
  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-detail-stat--primary {
  border-color:
    var(
      --oc-info-border
    );
}


.oc-detail-stat--total {
  border-color:
    var(
      --oc-border-extra
    );

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


.oc-detail-stat--total > strong {
  font-size: 15px;
}


.oc-detail-stat__badges {
  min-height: 24px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px;
}


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

.oc-detail-tabs {
  width: 100%;

  min-height: 47px;

  flex: 0 0 auto;

  padding:
    6px
    10px;

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

  display: flex;
  align-items: center;

  gap: 3px;

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

  background:
    var(
      --oc-surface
    );

  scrollbar-width: thin;
}


.oc-detail-tab {
  appearance: none;

  flex: 0 0 auto;

  min-height: 33px;

  padding:
    0
    9px;

  border:
    1px
    solid
    transparent;

  border-radius: 5px;

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

  gap: 6px;

  background: transparent;

  color:
    var(
      --oc-muted
    );

  font-size: 9px;

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

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


.oc-detail-tab:hover:not(:disabled) {
  background:
    var(
      --oc-surface-2
    );

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


.oc-detail-tab.is-active {
  border-color:
    var(
      --oc-border-strong
    );

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

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


.oc-detail-tab:disabled {
  opacity: 0.5;

  cursor: default;
}


.oc-detail-tab svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}


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

.oc-detail__content {
  min-width: 0;
  min-height: 0;

  flex: 1;

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

  padding: 10px;

  background:
    var(
      --oc-bg
    );

  scrollbar-width: thin;
}


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

.oc-detail__loading {
  flex: 1;

  min-height: 0;

  padding: 12px;

  overflow-y: auto;

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


.oc-detail__loading-grid {
  display: grid;

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

  gap: 7px;
}


/* =========================================================
   TAB LOADING
   ========================================================= */

.oc-tab-loading {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.oc-tab-loading__row {
  min-height: 56px;

  padding: 10px;

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

  border-radius: 6px;

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


/* =========================================================
   TAB GRID
   ========================================================= */

.oc-tab-grid {
  width: 100%;
  min-width: 0;

  display: grid;

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

  gap: 8px;
}


.oc-tab-grid--summary {
  align-items: start;
}


/* =========================================================
   CARD
   ========================================================= */

.oc-card {
  min-width: 0;

  overflow: hidden;

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

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

  background:
    var(
      --oc-surface
    );

  box-shadow: none;
}


.oc-card--wide {
  grid-column:
    span
    1;
}


.oc-card--full {
  grid-column:
    1 /
    -1;
}


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

.oc-card__header {
  min-height: 55px;

  padding:
    10px
    11px;

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

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

  gap: 12px;

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


.oc-card__header > div:first-child {
  min-width: 0;
}


.oc-card__header h3 {
  margin: 0;

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

  font-size: 11px;

  line-height: 1.2;

  font-weight: 850;
}


.oc-card__header p {
  margin:
    3px
    0
    0;

  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;

  line-height: 1.4;

  font-weight: 650;
}


.oc-card__header > svg {
  width: 17px;
  height: 17px;

  flex:
    0
    0
    17px;

  color:
    var(
      --oc-muted
    );

  stroke-width: 1.9;
}


.oc-card__actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 5px;
}


/* =========================================================
   CARD BODY
   ========================================================= */

.oc-card__body {
  min-width: 0;
}


/* =========================================================
   KV GRID
   ========================================================= */

.oc-kv-grid {
  padding: 8px;

  display: grid;

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

  gap: 5px;
}


/* =========================================================
   KV
   ========================================================= */

.oc-kv {
  min-width: 0;

  min-height: 52px;

  padding:
    8px
    9px;

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

  border-radius: 5px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 3px;

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


.oc-kv > span {
  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 800;
}


.oc-kv > strong {
  min-width: 0;

  overflow: hidden;

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

  font-size: 9px;

  line-height: 1.25;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   TOTALS
   ========================================================= */

.oc-totals {
  padding: 8px;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.oc-totals__row {
  min-height: 38px;

  padding:
    7px
    9px;

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

  border-radius: 5px;

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

  gap: 16px;

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


.oc-totals__row > span {
  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;

  font-weight: 750;
}


.oc-totals__row > strong {
  color:
    var(
      --oc-text-strong
    );

  font-size: 9.5px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;

  white-space: nowrap;
}


.oc-totals__row--grand {
  min-height: 46px;

  margin-top: 3px;

  border-color:
    var(
      --oc-border-extra
    );

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


.oc-totals__row--grand > span {
  color:
    var(
      --oc-text-strong
    );

  font-size: 9px;

  font-weight: 850;
}


.oc-totals__row--grand > strong {
  font-size: 13px;
}


/* =========================================================
   DOCUMENT GRID
   ========================================================= */

.oc-document-grid {
  padding: 8px;

  display: grid;

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

  gap: 6px;
}


/* =========================================================
   DOCUMENT ITEM
   ========================================================= */

.oc-document-item {
  min-width: 0;

  min-height: 72px;

  padding:
    9px;

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

  border-radius: 6px;

  display: flex;
  align-items: center;

  gap: 9px;

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


.oc-document-item__icon {
  width: 31px;
  height: 31px;

  flex:
    0
    0
    31px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

  background:
    var(
      --oc-surface
    );

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


.oc-document-item__icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}


.oc-document-item > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-document-item span {
  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 800;
}


.oc-document-item strong {
  max-width: 100%;

  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-document-item small {
  max-width: 100%;

  overflow: hidden;

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

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   OBSERVATION
   ========================================================= */

.oc-observation {
  padding: 12px;

  color:
    var(
      --oc-text
    );

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

  font-weight: 650;

  white-space: pre-wrap;
}


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

.oc-table--items {
  min-width: 1040px;
}


.oc-item-cell {
  min-width: 180px;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-item-cell > strong {
  max-width: 230px;

  overflow: hidden;

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

  font-size: 9.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-item-cell > small {
  max-width: 260px;

  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   ITEMS LOADING
   ========================================================= */

.oc-items-loading {
  padding: 8px;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.oc-items-loading__row {
  min-height: 48px;

  padding: 9px;

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

  border-radius: 5px;

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


/* =========================================================
   RECEPTION CELL
   ========================================================= */

.oc-reception-cell {
  min-width: 100px;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-reception-cell > span {
  color:
    var(
      --oc-text-strong
    );

  font-size: 8.5px;

  font-weight: 800;
}


.oc-reception-cell > small {
  color:
    var(
      --oc-warning
    );

  font-size: 7.5px;

  font-weight: 700;
}


.oc-reception-cell > small.is-complete {
  color:
    var(
      --oc-success
    );
}


/* =========================================================
   RECEPTION SUMMARY
   ========================================================= */

.oc-reception-summary {
  padding: 8px;

  display: grid;

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

  gap: 5px;
}


.oc-reception-summary__stat {
  min-width: 0;

  min-height: 60px;

  padding:
    8px
    9px;

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

  border-radius: 5px;

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

  gap: 3px;

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


.oc-reception-summary__stat > span {
  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 800;
}


.oc-reception-summary__stat > strong {
  color:
    var(
      --oc-text-strong
    );

  font-size: 13px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}


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

.oc-reception-progress {
  grid-column:
    1 /
    -1;

  min-height: 46px;

  padding:
    8px
    9px;

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

  border-radius: 5px;

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

  gap: 6px;

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


.oc-reception-progress small {
  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 700;
}


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

.oc-progress {
  width: 100%;
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(
      --oc-surface-4
    );
}


.oc-progress > span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

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

  transition:
    width
    220ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


/* =========================================================
   CARD INLINE ACTIONS
   ========================================================= */

.oc-card-inline-actions {
  padding:
    0
    8px
    8px;

  display: flex;
  align-items: center;

  gap: 5px;
}


/* =========================================================
   MINI LIST
   ========================================================= */

.oc-mini-list {
  display: flex;
  flex-direction: column;
}


.oc-mini-list__item {
  appearance: none;

  width: 100%;
  min-width: 0;

  min-height: 52px;

  padding:
    8px
    10px;

  border: 0;

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

  display: grid;

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

  align-items: center;

  gap: 8px;

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-text
    );

  text-align: left;

  cursor: pointer;

  transition:
    background-color
      var(
        --oc-fast
      );
}


.oc-mini-list__item:last-child {
  border-bottom: 0;
}


.oc-mini-list__item:hover {
  background:
    var(
      --oc-surface-2
    );
}


/* =========================================================
   MINI LIST ICON
   ========================================================= */

.oc-mini-list__icon {
  width: 28px;
  height: 28px;

  flex:
    0
    0
    28px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.oc-mini-list__icon svg {
  width: 13px;
  height: 13px;
}


.oc-mini-list__icon.is-warning {
  border-color:
    var(
      --oc-warning-border
    );

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

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


.oc-mini-list__icon.is-success {
  border-color:
    var(
      --oc-success-border
    );

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

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


/* =========================================================
   MINI LIST CONTENT
   ========================================================= */

.oc-mini-list__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-mini-list__content strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-mini-list__content small {
  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-mini-list__value {
  color:
    var(
      --oc-text-strong
    );

  font-size: 9px;

  font-weight: 850;

  text-align: right;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


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

.oc-history {
  display: flex;
  flex-direction: column;
}


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

.oc-history__item {
  min-width: 0;

  padding:
    10px
    11px;

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

  display: grid;

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

  gap: 9px;

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


.oc-history__item:last-child {
  border-bottom: 0;
}


.oc-history__icon {
  width: 30px;
  height: 30px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.oc-history__icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}


.oc-history__content {
  min-width: 0;
}


.oc-history__top {
  min-width: 0;

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

  gap: 12px;
}


.oc-history__top > strong {
  min-width: 0;

  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-history__top > span {
  flex: 0 0 auto;

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

  font-size: 7.5px;

  font-weight: 650;

  white-space: nowrap;
}


.oc-history__content > p {
  margin:
    4px
    0
    0;

  color:
    var(
      --oc-muted
    );

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

  font-weight: 650;
}


.oc-history__states {
  margin-top: 6px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 5px;
}


.oc-history__states > svg {
  width: 12px;
  height: 12px;

  color:
    var(
      --oc-muted-2
    );
}


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

@media (
  max-width: 1180px
) {
  .oc-detail__summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


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


@media (
  max-width: 900px
) {
  .oc-detail {
    width: 100%;
  }


  .oc-detail__header {
    align-items: flex-start;

    flex-direction: column;
  }


  .oc-detail__header-actions {
    width: 100%;

    justify-content: flex-start;
  }


  .oc-tab-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-card--full,
  .oc-card--wide {
    grid-column: auto;
  }
}


@media (
  max-width: 650px
) {
  .oc-detail__summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .oc-document-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-kv-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-reception-summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-detail__content {
    padding: 7px;
  }
}


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

   SIGUE PARTE 3:
   - Formularios.
   - Fields.
   - Selects.
   - Textarea.
   - Modal.
   - Búsqueda proveedor.
   - Búsqueda insumo.
   - Selected provider.
   - Item preview.
   - Confirmaciones.
   - Send preview.
   - Drawer.
   ========================================================= *//* =========================================================
   PARTE 3 DE 4

   FORMULARIOS Y OVERLAYS
   - Form.
   - Fields.
   - Inputs.
   - Selects.
   - Textarea.
   - Modal.
   - Buscadores.
   - Proveedor seleccionado.
   - Preview item.
   - Confirmaciones.
   - Envío.
   - Drawer.
   ========================================================= */


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

.oc-form {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


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

.oc-form-section {
  width: 100%;
  min-width: 0;

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

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

  overflow: visible;

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


.oc-form-section__header {
  min-height: 52px;

  padding:
    9px
    10px;

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

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

  gap: 12px;

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


.oc-form-section__header > div:first-child {
  min-width: 0;
}


.oc-form-section__header h3 {
  margin: 0;

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

  font-size: 10.5px;
  line-height: 1.2;

  font-weight: 850;
}


.oc-form-section__header p {
  margin:
    3px
    0
    0;

  color:
    var(
      --oc-muted
    );

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

  font-weight: 650;
}


.oc-form-section__header > svg {
  width: 16px;
  height: 16px;

  flex:
    0
    0
    16px;

  color:
    var(
      --oc-muted
    );

  stroke-width: 1.9;
}


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

.oc-form-grid {
  padding: 9px;

  display: grid;

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

  gap: 8px;
}


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

.oc-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


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


.oc-field--full {
  grid-column:
    1 /
    -1;
}


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

.oc-field__label {
  padding-left: 1px;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;
  line-height: 1.2;

  font-weight: 800;
}


.oc-field__label b {
  color:
    var(
      --oc-danger
    );

  font-weight: 850;
}


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

.oc-field__help {
  color:
    var(
      --oc-muted-2
    );

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

  font-weight: 650;
}


/* =========================================================
   INPUTS
   ========================================================= */

.oc-field input,
.oc-field select,
.oc-field textarea {
  width: 100%;
  min-width: 0;

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

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

  outline: none;

  background:
    var(
      --oc-surface
    );

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

  font-size: 9.5px;

  font-weight: 700;

  box-shadow: none;

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


.oc-field input,
.oc-field select {
  height: 37px;

  padding:
    0
    9px;
}


.oc-field textarea {
  min-height: 84px;

  padding:
    9px
    10px;

  resize: vertical;

  line-height: 1.5;
}


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

  opacity: 1;
}


.oc-field input:hover:not(:disabled),
.oc-field select:hover:not(:disabled),
.oc-field textarea:hover:not(:disabled) {
  border-color:
    var(
      --oc-border-strong
    );
}


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

  box-shadow: none;
}


.oc-field input:disabled,
.oc-field select:disabled,
.oc-field textarea:disabled,
.oc-field input[readonly] {
  background:
    var(
      --oc-surface-3
    );

  color:
    var(
      --oc-muted
    );

  cursor: not-allowed;
}


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

.oc-field input[type="number"] {
  font-variant-numeric:
    tabular-nums;
}


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

.oc-field input[type="date"] {
  color-scheme: light;
}


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

.oc-search--form {
  width: 100%;
  min-width: 0;

  flex: none;
}


.oc-search--form input {
  height: 38px;
}


/* =========================================================
   PROVIDER PICKER
   ========================================================= */

.oc-provider-picker {
  position: relative;

  width: 100%;
  min-width: 0;

  padding: 9px;

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

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

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


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

.oc-search-results {
  position: absolute;

  top:
    calc(
      100% -
      3px
    );

  left: 9px;
  right: 9px;

  z-index: 40;

  max-height: 320px;

  overflow-y: auto;

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

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

  background:
    var(
      --oc-surface
    );

  box-shadow:
    var(
      --oc-shadow-popover
    );

  animation:
    oc-results-open
    110ms
    ease-out;
}


.oc-search-results[hidden] {
  display: none !important;
}


@keyframes oc-results-open {
  from {
    opacity: 0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


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

.oc-search-result {
  appearance: none;

  width: 100%;
  min-width: 0;

  min-height: 57px;

  padding:
    8px
    9px;

  border: 0;

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

  display: grid;

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

  align-items: center;

  gap: 8px;

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-text
    );

  text-align: left;

  cursor: pointer;

  transition:
    background-color
      var(
        --oc-fast
      );
}


.oc-search-result:last-child {
  border-bottom: 0;
}


.oc-search-result:hover {
  background:
    var(
      --oc-surface-2
    );
}


.oc-search-result > svg {
  width: 13px;
  height: 13px;

  color:
    var(
      --oc-muted-2
    );
}


/* =========================================================
   SEARCH RESULT ICON
   ========================================================= */

.oc-search-result__icon {
  width: 30px;
  height: 30px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.oc-search-result__icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}


/* =========================================================
   SEARCH RESULT CONTENT
   ========================================================= */

.oc-search-result__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-search-result__content strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-search-result__content span {
  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-search-result__content small {
  overflow: hidden;

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

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

.oc-search-results__loading,
.oc-search-results__empty {
  min-height: 54px;

  padding:
    11px
    12px;

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

  gap: 6px;

  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;

  font-weight: 700;

  text-align: center;
}


.oc-search-results__loading svg {
  width: 14px;
  height: 14px;

  animation:
    oc-spin
    700ms
    linear
    infinite;
}


/* =========================================================
   SELECTED PROVIDER
   ========================================================= */

.oc-selected-provider {
  margin-top: 8px;

  overflow: hidden;

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

  border-radius: 6px;

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


/* =========================================================
   SELECTED PROVIDER TOP
   ========================================================= */

.oc-selected-provider__top {
  min-width: 0;

  padding:
    9px
    10px;

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

  display: flex;
  align-items: center;

  gap: 8px;

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


.oc-selected-provider__icon {
  width: 31px;
  height: 31px;

  flex:
    0
    0
    31px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.oc-selected-provider__icon svg {
  width: 14px;
  height: 14px;
}


.oc-selected-provider__top > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-selected-provider__top strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-selected-provider__top span {
  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   SELECTED PROVIDER GRID
   ========================================================= */

.oc-selected-provider__grid {
  padding: 7px;

  display: grid;

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

  gap: 5px;
}


.oc-selected-provider__grid > span {
  min-width: 0;

  min-height: 48px;

  padding:
    7px
    8px;

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

  border-radius: 5px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 2px;

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


.oc-selected-provider__grid small {
  color:
    var(
      --oc-muted
    );

  font-size: 7px;

  font-weight: 800;
}


.oc-selected-provider__grid strong {
  overflow: hidden;

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

  font-size: 8.5px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   ITEM PREVIEW
   ========================================================= */

.oc-item-preview {
  margin:
    0
    9px
    9px;

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

  border-radius: 6px;

  overflow: hidden;

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


.oc-item-preview__row {
  min-height: 34px;

  padding:
    6px
    9px;

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

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

  gap: 10px;
}


.oc-item-preview__row:last-child {
  border-bottom: 0;
}


.oc-item-preview__row > span {
  color:
    var(
      --oc-muted
    );

  font-size: 8px;

  font-weight: 750;
}


.oc-item-preview__row > strong {
  color:
    var(
      --oc-text-strong
    );

  font-size: 9px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}


.oc-item-preview__row--total {
  min-height: 41px;

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


.oc-item-preview__row--total > span {
  color:
    var(
      --oc-text-strong
    );

  font-size: 8.5px;

  font-weight: 850;
}


.oc-item-preview__row--total > strong {
  font-size: 12px;
}


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

.oc-confirm-message {
  min-width: 0;

  padding: 10px;

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

  border-radius: 6px;

  display: grid;

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

  gap: 9px;

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


.oc-confirm-message__icon {
  width: 34px;
  height: 34px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

  background:
    var(
      --oc-surface
    );

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


.oc-confirm-message__icon.is-danger {
  border-color:
    var(
      --oc-danger-border
    );

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


.oc-confirm-message__icon svg {
  width: 16px;
  height: 16px;
}


.oc-confirm-message strong {
  display: block;

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

  font-size: 9.5px;

  font-weight: 850;
}


.oc-confirm-message p {
  margin:
    4px
    0
    0;

  color:
    var(
      --oc-muted
    );

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

  font-weight: 650;
}


/* =========================================================
   RECEPTION MODAL SUMMARY
   ========================================================= */

.oc-reception-modal-summary {
  display: grid;

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

  gap: 5px;

  margin-bottom: 8px;
}


/* =========================================================
   SEND PREVIEW
   ========================================================= */

.oc-send-preview {
  min-width: 0;

  padding:
    9px
    10px;

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

  border-radius: 6px;

  display: flex;
  align-items: center;

  gap: 9px;

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


.oc-send-preview__icon {
  width: 31px;
  height: 31px;

  flex:
    0
    0
    31px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

  background:
    var(
      --oc-surface
    );

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


.oc-send-preview__icon svg {
  width: 14px;
  height: 14px;
}


.oc-send-preview > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-send-preview strong {
  color:
    var(
      --oc-text-strong
    );

  font-size: 9px;

  font-weight: 850;
}


.oc-send-preview span {
  color:
    var(
      --oc-muted
    );

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

  font-weight: 650;
}


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

.oc-modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 12000;

  display: grid;

  place-items: center;

  padding:
    22px;

  overflow: hidden;
}


.oc-modal-overlay[hidden] {
  display: none !important;
}


.oc-modal-backdrop {
  position: absolute;

  inset: 0;

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

  backdrop-filter: none;
}


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

.oc-modal {
  position: relative;

  z-index: 1;

  width:
    min(
      560px,
      100%
    );

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

  min-width: 0;

  border:
    1px
    solid
    var(
      --oc-border-extra
    );

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

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-text
    );

  box-shadow:
    var(
      --oc-shadow-overlay
    );

  animation:
    oc-modal-open
    150ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


@keyframes oc-modal-open {
  from {
    opacity: 0;

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

  to {
    opacity: 1;

    transform: none;
  }
}


.oc-modal--md {
  width:
    min(
      680px,
      100%
    );
}


.oc-modal--lg {
  width:
    min(
      880px,
      100%
    );
}


.oc-modal--xl {
  width:
    min(
      1080px,
      100%
    );
}


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

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

  flex: 0 0 auto;

  padding:
    11px
    12px;

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

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

  gap: 12px;

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


.oc-modal__header-main {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}


.oc-modal__icon {
  width: 34px;
  height: 34px;

  flex:
    0
    0
    34px;

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

  border-radius: 6px;

  display: grid;

  place-items: center;

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

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


.oc-modal__icon svg {
  width: 15px;
  height: 15px;

  stroke-width: 2;
}


.oc-modal__header-main > div:last-child {
  min-width: 0;
}


.oc-modal__header h2 {
  margin: 0;

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

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

  font-weight: 850;
}


.oc-modal__header p {
  max-width: 620px;

  margin:
    3px
    0
    0;

  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 8.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

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

  flex: 1;

  padding: 10px;

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

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


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

.oc-modal__footer {
  min-height: 58px;

  flex: 0 0 auto;

  padding:
    9px
    10px;

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

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

  gap: 6px;

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


.oc-modal__footer-spacer {
  flex: 1;
}


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

.oc-modal.is-saving {
  pointer-events: none;
}


.oc-modal.is-saving::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 20;

  background:
    rgba(
      255,
      255,
      255,
      0.38
    );
}


/* =========================================================
   DRAWER OVERLAY
   ========================================================= */

.oc-drawer-overlay {
  position: fixed;

  inset: 0;

  z-index: 11000;

  overflow: hidden;
}


.oc-drawer-overlay[hidden] {
  display: none !important;
}


.oc-drawer-backdrop {
  position: absolute;

  inset: 0;

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


/* =========================================================
   DRAWER
   ========================================================= */

.oc-drawer {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width:
    min(
      390px,
      92vw
    );

  border-left:
    1px
    solid
    var(
      --oc-border-strong
    );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(
      --oc-surface
    );

  box-shadow:
    -14px
    0
    44px
    rgba(
      0,
      0,
      0,
      0.17
    );

  animation:
    oc-drawer-open
    150ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


@keyframes oc-drawer-open {
  from {
    transform:
      translateX(
        22px
      );

    opacity: 0;
  }

  to {
    transform: none;

    opacity: 1;
  }
}


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

.oc-drawer__header {
  min-height: 65px;

  padding:
    10px
    11px;

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

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

  gap: 10px;
}


.oc-drawer__header > div {
  min-width: 0;
}


.oc-drawer__header span {
  display: block;

  margin-bottom: 2px;

  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.055em;
}


.oc-drawer__header h3 {
  margin: 0;

  overflow: hidden;

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

  font-size: 13px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   DRAWER CONTENT
   ========================================================= */

.oc-drawer__content {
  min-height: 0;

  flex: 1;

  overflow-y: auto;

  padding: 7px;

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


/* =========================================================
   ACTION ROW
   ========================================================= */

.oc-action-row {
  appearance: none;

  width: 100%;
  min-width: 0;

  min-height: 59px;

  padding:
    8px
    9px;

  margin-bottom: 5px;

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

  border-radius: 6px;

  display: grid;

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

  align-items: center;

  gap: 8px;

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-text
    );

  text-align: left;

  cursor: pointer;

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


.oc-action-row:last-child {
  margin-bottom: 0;
}


.oc-action-row:hover {
  border-color:
    var(
      --oc-border-strong
    );

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

  transform:
    translateX(
      -1px
    );
}


.oc-action-row > svg {
  width: 13px;
  height: 13px;

  color:
    var(
      --oc-muted-2
    );
}


/* =========================================================
   ACTION ROW ICON
   ========================================================= */

.oc-action-row__icon {
  width: 31px;
  height: 31px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.oc-action-row__icon svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   ACTION ROW CONTENT
   ========================================================= */

.oc-action-row__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.oc-action-row__content strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.oc-action-row__content small {
  overflow: hidden;

  color:
    var(
      --oc-muted
    );

  font-size: 7.5px;

  line-height: 1.35;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   ACTION ROW DANGER
   ========================================================= */

.oc-action-row--danger {
  border-color:
    var(
      --oc-danger-border
    );

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


.oc-action-row--danger
.oc-action-row__icon {
  border-color:
    var(
      --oc-danger-border
    );

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


.oc-action-row--danger
.oc-action-row__content strong {
  color:
    var(
      --oc-danger
    );
}


.oc-action-row--danger:hover {
  border-color:
    var(
      --oc-danger
    );

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


/* =========================================================
   RESPONSIVE FORMS / MODALS
   ========================================================= */

@media (
  max-width: 900px
) {
  .oc-modal-overlay {
    padding: 10px;
  }


  .oc-modal,
  .oc-modal--md,
  .oc-modal--lg,
  .oc-modal--xl {
    width: 100%;

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


  .oc-selected-provider__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .oc-reception-modal-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width: 650px
) {
  .oc-form-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-field--wide,
  .oc-field--full {
    grid-column: auto;
  }


  .oc-selected-provider__grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-reception-modal-summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-modal__header {
    padding:
      9px
      10px;
  }


  .oc-modal__body {
    padding: 7px;
  }


  .oc-modal__footer {
    flex-wrap: wrap;
  }


  .oc-modal__footer .oc-btn {
    flex:
      1
      1
      auto;
  }


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


/* =========================================================
   FIN PARTE 3 DE 4

   SIGUE PARTE 4:
   - Toasts.
   - Dark mode negro real.
   - Responsive general.
   - Ajustes mobile/tablet.
   - Overlays sobre Topbar/Footer.
   - Reducción de movimiento.
   - Fixes finales.
   ========================================================= *//* =========================================================
   PARTE 4 DE 4

   CIERRE VISUAL
   - Toasts.
   - Dark mode negro real.
   - Responsive general.
   - Mobile.
   - Overlays.
   - Z-index.
   - Reducción de movimiento.
   - Fixes finales.
   ========================================================= */


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

.oc-toast-container {
  position: fixed;

  top: 66px;
  right: 16px;

  z-index: 14000;

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

  display: flex;
  flex-direction: column;

  gap: 7px;

  pointer-events: none;
}


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

.oc-toast {
  width: 100%;
  min-width: 0;

  min-height: 52px;

  padding:
    8px
    9px;

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

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

  display: grid;

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

  align-items: center;

  gap: 8px;

  background:
    var(
      --oc-surface
    );

  color:
    var(
      --oc-text
    );

  box-shadow:
    var(
      --oc-shadow-popover
    );

  pointer-events: auto;

  animation:
    oc-toast-in
    150ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


.oc-toast.is-leaving {
  animation:
    oc-toast-out
    160ms
    ease-in
    forwards;
}


@keyframes oc-toast-in {
  from {
    opacity: 0;

    transform:
      translateX(
        14px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


@keyframes oc-toast-out {
  to {
    opacity: 0;

    transform:
      translateX(
        14px
      );
  }
}


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

.oc-toast__icon {
  width: 29px;
  height: 29px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.oc-toast__icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}


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

.oc-toast__message {
  min-width: 0;

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

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

  font-weight: 750;
}


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

.oc-toast__close {
  appearance: none;

  width: 27px;
  height: 27px;

  padding: 0;

  border:
    1px
    solid
    transparent;

  border-radius: 5px;

  display: grid;

  place-items: center;

  background: transparent;

  color:
    var(
      --oc-muted
    );

  cursor: pointer;

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


.oc-toast__close:hover {
  border-color:
    var(
      --oc-border
    );

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

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


.oc-toast__close svg {
  width: 12px;
  height: 12px;
}


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

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


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

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

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


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

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


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

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

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


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

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


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

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

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


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

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


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

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

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


/* =========================================================
   DARK MODE
   NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.oc-page,
body.dark
.oc-page,
body[data-theme="dark"]
.oc-page,
.dark
.oc-page {
  --oc-bg: #050505;
  --oc-bg-soft: #090909;

  --oc-surface: #0b0b0b;
  --oc-surface-2: #111111;
  --oc-surface-3: #171717;
  --oc-surface-4: #202020;

  --oc-border: #2b2b2b;
  --oc-border-strong: #3b3b3b;
  --oc-border-extra: #505050;

  --oc-text: #f1f1f1;
  --oc-text-strong: #ffffff;

  --oc-muted: #a7a7a7;
  --oc-muted-2: #7e7e7e;

  --oc-primary: #ffffff;
  --oc-primary-hover: #e8e8e8;
  --oc-primary-text: #090909;

  --oc-success: #61d39b;
  --oc-success-bg: #0b1a13;
  --oc-success-border: #245c40;

  --oc-warning: #e5b760;
  --oc-warning-bg: #1d1609;
  --oc-warning-border: #644819;

  --oc-danger: #f07b7b;
  --oc-danger-bg: #200e0e;
  --oc-danger-border: #682c2c;

  --oc-info: #85b8f5;
  --oc-info-bg: #0b1420;
  --oc-info-border: #294c75;

  --oc-primary-soft: #171717;
  --oc-primary-soft-border: #3a3a3a;

  --oc-purple: #b79add;
  --oc-purple-bg: #17111f;
  --oc-purple-border: #4d3e60;

  --oc-shadow-popover:
    0
    16px
    40px
    rgba(
      0,
      0,
      0,
      0.58
    );

  --oc-shadow-overlay:
    0
    24px
    90px
    rgba(
      0,
      0,
      0,
      0.7
    );

  background:
    #050505;

  color:
    #f1f1f1;
}


/* =========================================================
   DARK · SELECTS
   ========================================================= */

html[data-theme="dark"]
.oc-page select,
body.dark
.oc-page select,
body[data-theme="dark"]
.oc-page select,
.dark
.oc-page select {
  color-scheme: dark;
}


/* =========================================================
   DARK · DATE
   ========================================================= */

html[data-theme="dark"]
.oc-page input[type="date"],
body.dark
.oc-page input[type="date"],
body[data-theme="dark"]
.oc-page input[type="date"],
.dark
.oc-page input[type="date"] {
  color-scheme: dark;
}


/* =========================================================
   DARK · PRIMARY
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-btn--primary,
body.dark
.oc-page
.oc-btn--primary,
body[data-theme="dark"]
.oc-page
.oc-btn--primary,
.dark
.oc-page
.oc-btn--primary {
  border-color: #ffffff;

  background: #ffffff;

  color: #080808;
}


html[data-theme="dark"]
.oc-page
.oc-btn--primary:hover:not(:disabled),
body.dark
.oc-page
.oc-btn--primary:hover:not(:disabled),
body[data-theme="dark"]
.oc-page
.oc-btn--primary:hover:not(:disabled),
.dark
.oc-page
.oc-btn--primary:hover:not(:disabled) {
  border-color: #dcdcdc;

  background: #dcdcdc;

  color: #080808;
}


/* =========================================================
   DARK · BUTTON SECONDARY
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-btn--secondary,
body.dark
.oc-page
.oc-btn--secondary,
body[data-theme="dark"]
.oc-page
.oc-btn--secondary,
.dark
.oc-page
.oc-btn--secondary {
  border-color: #3b3b3b;

  background: #0d0d0d;

  color: #ffffff;
}


html[data-theme="dark"]
.oc-page
.oc-btn--secondary:hover:not(:disabled),
body.dark
.oc-page
.oc-btn--secondary:hover:not(:disabled),
body[data-theme="dark"]
.oc-page
.oc-btn--secondary:hover:not(:disabled),
.dark
.oc-page
.oc-btn--secondary:hover:not(:disabled) {
  border-color: #565656;

  background: #171717;

  color: #ffffff;
}


/* =========================================================
   DARK · ICON BUTTONS
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-icon-btn,
body.dark
.oc-page
.oc-icon-btn,
body[data-theme="dark"]
.oc-page
.oc-icon-btn,
.dark
.oc-page
.oc-icon-btn {
  border-color: #353535;

  background: #0d0d0d;

  color: #b9b9b9;
}


html[data-theme="dark"]
.oc-page
.oc-icon-btn:hover:not(:disabled),
body.dark
.oc-page
.oc-icon-btn:hover:not(:disabled),
body[data-theme="dark"]
.oc-page
.oc-icon-btn:hover:not(:disabled),
.dark
.oc-page
.oc-icon-btn:hover:not(:disabled) {
  border-color: #525252;

  background: #171717;

  color: #ffffff;
}


/* =========================================================
   DARK · INPUTS
   ========================================================= */

html[data-theme="dark"]
.oc-page input,
html[data-theme="dark"]
.oc-page select,
html[data-theme="dark"]
.oc-page textarea,
body.dark
.oc-page input,
body.dark
.oc-page select,
body.dark
.oc-page textarea,
body[data-theme="dark"]
.oc-page input,
body[data-theme="dark"]
.oc-page select,
body[data-theme="dark"]
.oc-page textarea,
.dark
.oc-page input,
.dark
.oc-page select,
.dark
.oc-page textarea {
  border-color: #343434;

  background: #0b0b0b;

  color: #ffffff;
}


html[data-theme="dark"]
.oc-page input:hover:not(:disabled),
html[data-theme="dark"]
.oc-page select:hover:not(:disabled),
html[data-theme="dark"]
.oc-page textarea:hover:not(:disabled),
body.dark
.oc-page input:hover:not(:disabled),
body.dark
.oc-page select:hover:not(:disabled),
body.dark
.oc-page textarea:hover:not(:disabled),
body[data-theme="dark"]
.oc-page input:hover:not(:disabled),
body[data-theme="dark"]
.oc-page select:hover:not(:disabled),
body[data-theme="dark"]
.oc-page textarea:hover:not(:disabled),
.dark
.oc-page input:hover:not(:disabled),
.dark
.oc-page select:hover:not(:disabled),
.dark
.oc-page textarea:hover:not(:disabled) {
  border-color: #4a4a4a;
}


html[data-theme="dark"]
.oc-page input:focus,
html[data-theme="dark"]
.oc-page select:focus,
html[data-theme="dark"]
.oc-page textarea:focus,
body.dark
.oc-page input:focus,
body.dark
.oc-page select:focus,
body.dark
.oc-page textarea:focus,
body[data-theme="dark"]
.oc-page input:focus,
body[data-theme="dark"]
.oc-page select:focus,
body[data-theme="dark"]
.oc-page textarea:focus,
.dark
.oc-page input:focus,
.dark
.oc-page select:focus,
.dark
.oc-page textarea:focus {
  border-color: #ffffff;

  box-shadow: none;
}


/* =========================================================
   DARK · PLACEHOLDERS
   ========================================================= */

html[data-theme="dark"]
.oc-page input::placeholder,
html[data-theme="dark"]
.oc-page textarea::placeholder,
body.dark
.oc-page input::placeholder,
body.dark
.oc-page textarea::placeholder,
body[data-theme="dark"]
.oc-page input::placeholder,
body[data-theme="dark"]
.oc-page textarea::placeholder,
.dark
.oc-page input::placeholder,
.dark
.oc-page textarea::placeholder {
  color: #777777;

  opacity: 1;
}


/* =========================================================
   DARK · TABLE
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-table thead,
body.dark
.oc-page
.oc-table thead,
body[data-theme="dark"]
.oc-page
.oc-table thead,
.dark
.oc-page
.oc-table thead {
  background: #101010;
}


html[data-theme="dark"]
.oc-page
.oc-table th,
body.dark
.oc-page
.oc-table th,
body[data-theme="dark"]
.oc-page
.oc-table th,
.dark
.oc-page
.oc-table th {
  border-color: #393939;

  background: #101010;

  color: #b0b0b0;
}


html[data-theme="dark"]
.oc-page
.oc-table td,
body.dark
.oc-page
.oc-table td,
body[data-theme="dark"]
.oc-page
.oc-table td,
.dark
.oc-page
.oc-table td {
  border-color: #292929;

  background: #0b0b0b;

  color: #eaeaea;
}


html[data-theme="dark"]
.oc-page
.oc-table tbody tr:not(.is-loading):hover td,
body.dark
.oc-page
.oc-table tbody tr:not(.is-loading):hover td,
body[data-theme="dark"]
.oc-page
.oc-table tbody tr:not(.is-loading):hover td,
.dark
.oc-page
.oc-table tbody tr:not(.is-loading):hover td {
  background: #131313;
}


/* =========================================================
   DARK · DETAIL
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-detail,
body.dark
.oc-page
.oc-detail,
body[data-theme="dark"]
.oc-page
.oc-detail,
.dark
.oc-page
.oc-detail {
  background: #050505;

  color: #f1f1f1;

  border-left-color: #3a3a3a;

  box-shadow:
    -18px
    0
    60px
    rgba(
      0,
      0,
      0,
      0.68
    );
}


/* =========================================================
   DARK · MODAL / DRAWER
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-modal,
html[data-theme="dark"]
.oc-page
.oc-drawer,
body.dark
.oc-page
.oc-modal,
body.dark
.oc-page
.oc-drawer,
body[data-theme="dark"]
.oc-page
.oc-modal,
body[data-theme="dark"]
.oc-page
.oc-drawer,
.dark
.oc-page
.oc-modal,
.dark
.oc-page
.oc-drawer {
  border-color: #414141;

  background: #090909;

  color: #f2f2f2;
}


/* =========================================================
   DARK · MODAL SAVING
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-modal.is-saving::after,
body.dark
.oc-page
.oc-modal.is-saving::after,
body[data-theme="dark"]
.oc-page
.oc-modal.is-saving::after,
.dark
.oc-page
.oc-modal.is-saving::after {
  background:
    rgba(
      0,
      0,
      0,
      0.45
    );
}


/* =========================================================
   DARK · SKELETON
   ========================================================= */

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


/* =========================================================
   DARK · BACKDROPS
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-detail-backdrop,
body.dark
.oc-page
.oc-detail-backdrop,
body[data-theme="dark"]
.oc-page
.oc-detail-backdrop,
.dark
.oc-page
.oc-detail-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.72
    );
}


html[data-theme="dark"]
.oc-page
.oc-modal-backdrop,
html[data-theme="dark"]
.oc-page
.oc-drawer-backdrop,
body.dark
.oc-page
.oc-modal-backdrop,
body.dark
.oc-page
.oc-drawer-backdrop,
body[data-theme="dark"]
.oc-page
.oc-modal-backdrop,
body[data-theme="dark"]
.oc-page
.oc-drawer-backdrop,
.dark
.oc-page
.oc-modal-backdrop,
.dark
.oc-page
.oc-drawer-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.78
    );
}


/* =========================================================
   OVERLAYS
   TAPAR TOPBAR / FOOTER / RIGHTBAR
   ========================================================= */

.oc-detail-overlay,
.oc-drawer-overlay,
.oc-modal-overlay {
  isolation: isolate;
}


.oc-modal-overlay {
  z-index: 30000;
}


.oc-drawer-overlay {
  z-index: 29000;
}


.oc-detail-overlay {
  top: 0;

  z-index: 28000;
}


/* =========================================================
   DETAIL FULL HEIGHT
   ========================================================= */

.oc-detail {
  top: 0;
  bottom: 0;

  height: 100dvh;

  max-height: 100dvh;
}


/* =========================================================
   MODAL FULL VIEWPORT
   ========================================================= */

.oc-modal-overlay {
  min-height: 100dvh;
}


/* =========================================================
   BLOQUEAR INTERFERENCIAS DEL SHELL
   ========================================================= */

body:has(.oc-detail-overlay:not([hidden]))
.app-sidebar,
body:has(.oc-detail-overlay:not([hidden]))
.app-topbar,
body:has(.oc-detail-overlay:not([hidden]))
.app-rightbar,
body:has(.oc-detail-overlay:not([hidden]))
.app-footer,

body:has(.oc-modal-overlay:not([hidden]))
.app-sidebar,
body:has(.oc-modal-overlay:not([hidden]))
.app-topbar,
body:has(.oc-modal-overlay:not([hidden]))
.app-rightbar,
body:has(.oc-modal-overlay:not([hidden]))
.app-footer,

body:has(.oc-drawer-overlay:not([hidden]))
.app-sidebar,
body:has(.oc-drawer-overlay:not([hidden]))
.app-topbar,
body:has(.oc-drawer-overlay:not([hidden]))
.app-rightbar,
body:has(.oc-drawer-overlay:not([hidden]))
.app-footer {
  pointer-events: none;
}


/* =========================================================
   NO HORIZONTAL SCROLL PAGE
   ========================================================= */

html,
body {
  max-width: 100%;
}


.oc-page,
.oc-page__inner,
.oc-workspace,
.oc-panel,
.oc-toolbar,
.oc-detail,
.oc-detail__content,
.oc-modal,
.oc-modal__body,
.oc-drawer,
.oc-drawer__content {
  min-width: 0;

  max-width: 100%;
}


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

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


  .oc-advanced-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          130px,
          1fr
        )
      );
  }
}


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

@media (
  max-width: 1200px
) {
  .oc-page__inner {
    padding: 14px;
  }


  .oc-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .oc-search {
    width: 100%;

    flex: none;
  }


  .oc-toolbar__filters {
    width: 100%;

    display: grid;

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


  .oc-select-wrap {
    width: 100%;
    min-width: 0;
  }


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


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

@media (
  max-width: 950px
) {
  .oc-header__title-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;
  }


  .oc-header__actions {
    width: 100%;

    justify-content: flex-start;
  }


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


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


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


  .oc-pagination {
    align-items: flex-start;

    flex-direction: column;
  }


  .oc-pagination__actions {
    width: 100%;

    justify-content: space-between;
  }
}


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

@media (
  max-width: 700px
) {
  .oc-page__inner {
    gap: 10px;

    padding: 10px;
  }


  .oc-header__title {
    font-size: 23px;
  }


  .oc-header__description {
    font-size: 10px;
  }


  .oc-header__actions {
    display: grid;

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


  .oc-header__actions
  .oc-btn {
    width: 100%;
  }


  .oc-header__actions
  .oc-btn--primary {
    grid-column:
      1 /
      -1;
  }


  .oc-metrics {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap: 5px;
  }


  .oc-metric-card {
    min-height: 72px;
  }


  .oc-panel__header {
    min-height: 52px;
  }


  .oc-toolbar__filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-advanced-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-advanced-filters__actions {
    justify-content: stretch;
  }


  .oc-advanced-filters__actions
  .oc-btn {
    width: 100%;
  }


  .oc-detail__summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-detail-stat {
    min-height: 62px;
  }


  .oc-detail__header-actions {
    display: grid;

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


  .oc-detail__header-actions
  .oc-btn {
    width: 100%;
  }


  .oc-detail__header-actions
  .oc-icon-btn {
    width: 100%;

    min-width: 0;
  }


  .oc-detail-tabs {
    padding:
      5px
      7px;
  }


  .oc-detail-tab {
    min-height: 31px;

    padding:
      0
      7px;

    font-size: 8px;
  }


  .oc-toast-container {
    top: 10px;
    right: 10px;

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


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

@media (
  max-width: 520px
) {
  .oc-page__inner {
    padding: 8px;
  }


  .oc-header__actions {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .oc-header__actions
  .oc-btn--primary {
    grid-column: auto;
  }


  .oc-panel {
    border-radius: 6px;
  }


  .oc-panel__header {
    padding:
      8px
      9px;
  }


  .oc-toolbar {
    padding:
      7px
      8px;
  }


  .oc-search {
    min-width: 0;
  }


  .oc-pagination {
    padding:
      8px;
  }


  .oc-detail__header {
    padding:
      9px;
  }


  .oc-detail-order__icon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;
  }


  .oc-detail-order__text h2 {
    font-size: 15px;
  }


  .oc-detail__summary {
    padding:
      7px;
  }


  .oc-detail__content {
    padding: 6px;
  }


  .oc-card__header {
    min-height: 50px;

    padding:
      8px
      9px;
  }


  .oc-document-grid {
    padding: 6px;
  }


  .oc-kv-grid {
    padding: 6px;
  }


  .oc-modal-overlay {
    padding: 0;
  }


  .oc-modal,
  .oc-modal--md,
  .oc-modal--lg,
  .oc-modal--xl {
    width: 100%;
    height: 100dvh;

    max-height: 100dvh;

    border: 0;

    border-radius: 0;
  }


  .oc-modal__header {
    min-height: 60px;
  }


  .oc-modal__footer {
    padding: 8px;
  }


  .oc-drawer {
    width: 100%;
  }
}


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

@media (
  max-width: 720px
) {
  .oc-table-shell {
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }


  .oc-table {
    min-width: 980px;
  }


  .oc-table--items {
    min-width: 980px;
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (
  hover: none
) {
  .oc-btn:hover:not(:disabled),
  .oc-icon-btn:hover:not(:disabled),
  .oc-metric-card:hover,
  .oc-action-row:hover {
    transform: none;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .oc-page *,
  .oc-page *::before,
  .oc-page *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   FIX · HIDDEN
   ========================================================= */

.oc-page [hidden] {
  display: none !important;
}


/* =========================================================
   FIX · SVG
   ========================================================= */

.oc-page svg {
  display: block;

  pointer-events: none;
}


/* =========================================================
   FIX · BUTTON TEXT
   ========================================================= */

.oc-page button {
  text-rendering:
    geometricPrecision;
}


/* =========================================================
   FIX · NUMBERS
   ========================================================= */

.oc-money,
.oc-detail-stat > strong,
.oc-totals__row > strong,
.oc-item-preview__row > strong,
.oc-mini-list__value,
.oc-reception-summary__stat > strong {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   FIX · DARK TEXT CONTRAST
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-header__title,
html[data-theme="dark"]
.oc-page
.oc-panel__title,
html[data-theme="dark"]
.oc-page
.oc-order-cell__number,
html[data-theme="dark"]
.oc-page
.oc-provider-cell__name,
html[data-theme="dark"]
.oc-page
.oc-money,
html[data-theme="dark"]
.oc-page
.oc-detail-order__text h2,
html[data-theme="dark"]
.oc-page
.oc-card__header h3,
html[data-theme="dark"]
.oc-page
.oc-kv > strong,
html[data-theme="dark"]
.oc-page
.oc-totals__row > strong,

body.dark
.oc-page
.oc-header__title,
body.dark
.oc-page
.oc-panel__title,
body.dark
.oc-page
.oc-order-cell__number,
body.dark
.oc-page
.oc-provider-cell__name,
body.dark
.oc-page
.oc-money,
body.dark
.oc-page
.oc-detail-order__text h2,
body.dark
.oc-page
.oc-card__header h3,
body.dark
.oc-page
.oc-kv > strong,
body.dark
.oc-page
.oc-totals__row > strong,

body[data-theme="dark"]
.oc-page
.oc-header__title,
body[data-theme="dark"]
.oc-page
.oc-panel__title,
body[data-theme="dark"]
.oc-page
.oc-order-cell__number,
body[data-theme="dark"]
.oc-page
.oc-provider-cell__name,
body[data-theme="dark"]
.oc-page
.oc-money,
body[data-theme="dark"]
.oc-page
.oc-detail-order__text h2,
body[data-theme="dark"]
.oc-page
.oc-card__header h3,
body[data-theme="dark"]
.oc-page
.oc-kv > strong,
body[data-theme="dark"]
.oc-page
.oc-totals__row > strong {
  color: #ffffff;
}


/* =========================================================
   FIX · LIGHT TEXT CONTRAST
   ========================================================= */

.oc-page
.oc-header__title,
.oc-page
.oc-panel__title,
.oc-page
.oc-order-cell__number,
.oc-page
.oc-provider-cell__name,
.oc-page
.oc-money,
.oc-page
.oc-detail-order__text h2,
.oc-page
.oc-card__header h3,
.oc-page
.oc-kv > strong,
.oc-page
.oc-totals__row > strong {
  color:
    var(
      --oc-text-strong
    );
}


/* =========================================================
   FIX · TOPBAR / FOOTER QUEDAN DETRÁS
   ========================================================= */

body:has(.oc-detail-overlay:not([hidden]))
.app-topbar,
body:has(.oc-modal-overlay:not([hidden]))
.app-topbar,
body:has(.oc-drawer-overlay:not([hidden]))
.app-topbar {
  z-index: 1 !important;
}


body:has(.oc-detail-overlay:not([hidden]))
.app-footer,
body:has(.oc-modal-overlay:not([hidden]))
.app-footer,
body:has(.oc-drawer-overlay:not([hidden]))
.app-footer {
  z-index: 1 !important;
}


/* =========================================================
   FIX · SIDEBAR / RIGHTBAR DETRÁS
   ========================================================= */

body:has(.oc-detail-overlay:not([hidden]))
.app-sidebar,
body:has(.oc-detail-overlay:not([hidden]))
.app-rightbar,
body:has(.oc-modal-overlay:not([hidden]))
.app-sidebar,
body:has(.oc-modal-overlay:not([hidden]))
.app-rightbar,
body:has(.oc-drawer-overlay:not([hidden]))
.app-sidebar,
body:has(.oc-drawer-overlay:not([hidden]))
.app-rightbar {
  z-index: 1 !important;
}


/* =========================================================
   FIX · OVERLAYS SI EL PARENT TIENE STACKING CONTEXT
   ========================================================= */

#pageOrdenesCompra
.oc-detail-overlay,
#pageOrdenesCompra
.oc-drawer-overlay,
#pageOrdenesCompra
.oc-modal-overlay {
  position: fixed !important;
}


/* =========================================================
   FIX · NO SE CORTA EL MODAL
   ========================================================= */

#pageOrdenesCompra {
  position: static;
}


#pageOrdenesCompra
.oc-modal-overlay,
#pageOrdenesCompra
.oc-drawer-overlay,
#pageOrdenesCompra
.oc-detail-overlay {
  transform: none !important;

  filter: none !important;

  contain: none !important;
}


/* =========================================================
   FIX · SEARCH RESULTS SOBRE FORM
   ========================================================= */

.oc-provider-picker,
.oc-form-section {
  position: relative;
}


.oc-provider-picker {
  z-index: 5;
}


.oc-search-results {
  z-index: 60;
}


/* =========================================================
   FIX · DETALLE SEARCH / TABLE
   ========================================================= */

.oc-detail
.oc-table-shell {
  position: relative;

  z-index: 1;
}


/* =========================================================
   FIX · FOOTER MODAL PEGADO ABAJO
   ========================================================= */

.oc-modal__footer {
  position: relative;

  z-index: 3;
}


/* =========================================================
   FIX · HEADER MODAL ARRIBA
   ========================================================= */

.oc-modal__header {
  position: relative;

  z-index: 3;
}


/* =========================================================
   FIX · PANEL FIRME
   ========================================================= */

.oc-panel,
.oc-card,
.oc-form-section,
.oc-provider-picker,
.oc-selected-provider,
.oc-item-preview,
.oc-send-preview,
.oc-confirm-message {
  box-shadow: none;
}


/* =========================================================
   FIX · NO GLOW
   ========================================================= */

.oc-page *,
.oc-page *:hover,
.oc-page *:focus,
.oc-page *:focus-visible {
  text-shadow: none;
}


/* =========================================================
   FIX · TRANSICIONES RÁPIDAS
   ========================================================= */

.oc-page button,
.oc-page input,
.oc-page select,
.oc-page textarea,
.oc-page .oc-card,
.oc-page .oc-metric-card,
.oc-page .oc-table td {
  transition-duration:
    120ms;
}


/* =========================================================
   FIN CSS
   ÓRDENES DE COMPRA
   ========================================================= *//* =========================================================
   AJUSTE TIPOGRÁFICO
   MÁS GRANDE · MÁS FIRME · MÁS CONTRASTE
   ========================================================= */

.oc-page {
  font-size: 14px;

  --oc-text: #181b20;
  --oc-text-strong: #050607;

  --oc-muted: #3f4650;
  --oc-muted-2: #626a75;
}


/* =========================================================
   TÍTULOS PRINCIPALES
   ========================================================= */

.oc-header__title {
  font-size:
    clamp(
      28px,
      2.4vw,
      36px
    );

  font-weight: 900;

  letter-spacing: -0.045em;

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


.oc-header__description {
  font-size: 13px;

  font-weight: 750;

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


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

.oc-panel__title {
  font-size: 15px;

  font-weight: 900;

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


.oc-panel__subtitle {
  font-size: 11px;

  font-weight: 750;

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


/* =========================================================
   MÉTRICAS
   ========================================================= */

.oc-metric-card__label {
  font-size: 10px;

  font-weight: 850;

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


.oc-metric-card__value {
  font-size: 21px;

  font-weight: 900;

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


.oc-metric-card__meta {
  font-size: 9px;

  font-weight: 750;

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


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

.oc-btn {
  min-height: 38px;

  font-size: 12px;

  font-weight: 900;
}


.oc-btn--xs {
  min-height: 30px;

  font-size: 10px;

  font-weight: 850;
}


/* =========================================================
   FILTROS
   ========================================================= */

.oc-select-wrap > span,
.oc-advanced-filters > label > span,
.oc-field__label {
  font-size: 9.5px;

  font-weight: 900;

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


.oc-search input,
.oc-select-wrap select,
.oc-advanced-filters input,
.oc-advanced-filters select,
.oc-field input,
.oc-field select,
.oc-field textarea {
  font-size: 11px;

  font-weight: 800;

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


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

.oc-table th {
  font-size: 9.5px;

  font-weight: 900;

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


.oc-table td {
  font-size: 11px;

  font-weight: 750;

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


.oc-order-cell__number {
  font-size: 12px;

  font-weight: 900;

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


.oc-order-cell__meta span {
  font-size: 8.5px;

  font-weight: 750;

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


.oc-provider-cell__name {
  font-size: 12px;

  font-weight: 900;

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


.oc-provider-cell__legal {
  font-size: 9.5px;

  font-weight: 750;

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


.oc-provider-cell__meta span {
  font-size: 8.5px;

  font-weight: 750;

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


.oc-value-stack > strong,
.oc-value-stack > span {
  font-size: 11px;

  font-weight: 850;

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


.oc-value-stack > small {
  font-size: 9px;

  font-weight: 750;

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


.oc-money {
  font-size: 12px;

  font-weight: 900;

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


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

.oc-badge {
  min-height: 23px;

  padding:
    4px
    8px;

  font-size: 9px;

  font-weight: 900;
}


/* =========================================================
   DETALLE
   ========================================================= */

.oc-detail-order__eyebrow {
  font-size: 9px;

  font-weight: 900;

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


.oc-detail-order__text h2 {
  font-size: 21px;

  font-weight: 900;

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


.oc-detail-order__meta span {
  font-size: 9.5px;

  font-weight: 750;

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


/* =========================================================
   RESUMEN DETALLE
   ========================================================= */

.oc-detail-stat > span {
  font-size: 9px;

  font-weight: 850;

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


.oc-detail-stat > strong {
  font-size: 16px;

  font-weight: 900;

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


.oc-detail-stat > small {
  font-size: 8.5px;

  font-weight: 750;

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


/* =========================================================
   TABS
   ========================================================= */

.oc-detail-tab {
  font-size: 10px;

  font-weight: 900;

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


.oc-detail-tab.is-active {
  color:
    var(
      --oc-text-strong
    );
}


/* =========================================================
   CARDS
   ========================================================= */

.oc-card__header h3,
.oc-form-section__header h3 {
  font-size: 12px;

  font-weight: 900;

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


.oc-card__header p,
.oc-form-section__header p {
  font-size: 9.5px;

  font-weight: 750;

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


/* =========================================================
   KV
   ========================================================= */

.oc-kv > span {
  font-size: 8.5px;

  font-weight: 850;

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


.oc-kv > strong {
  font-size: 10.5px;

  font-weight: 900;

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


/* =========================================================
   TOTALES
   ========================================================= */

.oc-totals__row > span {
  font-size: 10px;

  font-weight: 800;

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


.oc-totals__row > strong {
  font-size: 11.5px;

  font-weight: 900;

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


.oc-totals__row--grand > span {
  font-size: 11px;

  font-weight: 900;
}


.oc-totals__row--grand > strong {
  font-size: 15px;

  font-weight: 900;
}


/* =========================================================
   ITEMS
   ========================================================= */

.oc-item-cell > strong {
  font-size: 11px;

  font-weight: 900;

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


.oc-item-cell > small {
  font-size: 9px;

  font-weight: 750;

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


/* =========================================================
   HISTORIAL
   ========================================================= */

.oc-history__top > strong {
  font-size: 10.5px;

  font-weight: 900;

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


.oc-history__top > span {
  font-size: 8.5px;

  font-weight: 750;

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


.oc-history__content > p {
  font-size: 9.5px;

  font-weight: 750;

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


/* =========================================================
   MODALES
   ========================================================= */

.oc-modal__header h2 {
  font-size: 17px;

  font-weight: 900;

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


.oc-modal__header p {
  font-size: 10px;

  font-weight: 750;

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


/* =========================================================
   BUSQUEDAS
   ========================================================= */

.oc-search-result__content strong {
  font-size: 10.5px;

  font-weight: 900;

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


.oc-search-result__content span {
  font-size: 9px;

  font-weight: 750;

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


.oc-search-result__content small {
  font-size: 8.5px;

  font-weight: 750;

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


/* =========================================================
   DRAWER
   ========================================================= */

.oc-action-row__content strong {
  font-size: 10.5px;

  font-weight: 900;

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


.oc-action-row__content small {
  font-size: 8.5px;

  font-weight: 750;

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


/* =========================================================
   DARK MODE
   LETRAS FIRMES · NO GRIS LAVADO
   ========================================================= */

html[data-theme="dark"]
.oc-page,
body.dark
.oc-page,
body[data-theme="dark"]
.oc-page,
.dark
.oc-page {
  --oc-text: #e2e2e2;
  --oc-text-strong: #ffffff;

  --oc-muted: #c0c0c0;
  --oc-muted-2: #999999;
}


/* =========================================================
   DARK · TEXTO PRINCIPAL
   ========================================================= */

html[data-theme="dark"]
.oc-page
.oc-table td,
html[data-theme="dark"]
.oc-page
.oc-header__description,
html[data-theme="dark"]
.oc-page
.oc-panel__subtitle,
html[data-theme="dark"]
.oc-page
.oc-card__header p,
html[data-theme="dark"]
.oc-page
.oc-form-section__header p,
html[data-theme="dark"]
.oc-page
.oc-provider-cell__legal,
html[data-theme="dark"]
.oc-page
.oc-item-cell > small,

body.dark
.oc-page
.oc-table td,
body.dark
.oc-page
.oc-header__description,
body.dark
.oc-page
.oc-panel__subtitle,
body.dark
.oc-page
.oc-card__header p,
body.dark
.oc-page
.oc-form-section__header p,
body.dark
.oc-page
.oc-provider-cell__legal,
body.dark
.oc-page
.oc-item-cell > small,

body[data-theme="dark"]
.oc-page
.oc-table td,
body[data-theme="dark"]
.oc-page
.oc-header__description,
body[data-theme="dark"]
.oc-page
.oc-panel__subtitle,
body[data-theme="dark"]
.oc-page
.oc-card__header p,
body[data-theme="dark"]
.oc-page
.oc-form-section__header p,
body[data-theme="dark"]
.oc-page
.oc-provider-cell__legal,
body[data-theme="dark"]
.oc-page
.oc-item-cell > small {
  color: #e5e5e5;
}


/* =========================================================
   DARK · TEXTO FUERTE
   ========================================================= */

html[data-theme="dark"]
.oc-page strong,
html[data-theme="dark"]
.oc-page h1,
html[data-theme="dark"]
.oc-page h2,
html[data-theme="dark"]
.oc-page h3,

body.dark
.oc-page strong,
body.dark
.oc-page h1,
body.dark
.oc-page h2,
body.dark
.oc-page h3,

body[data-theme="dark"]
.oc-page strong,
body[data-theme="dark"]
.oc-page h1,
body[data-theme="dark"]
.oc-page h2,
body[data-theme="dark"]
.oc-page h3 {
  color: #ffffff;

  font-weight: 900;
}


/* =========================================================
   MOBILE
   NO ACHICAR TANTO
   ========================================================= */

@media (
  max-width: 700px
) {
  .oc-page {
    font-size: 13px;
  }


  .oc-header__title {
    font-size: 26px;
  }


  .oc-table td {
    font-size: 10.5px;
  }


  .oc-table th {
    font-size: 9px;
  }


  .oc-btn {
    font-size: 11px;
  }


  .oc-field input,
  .oc-field select,
  .oc-field textarea {
    font-size: 11px;
  }
}/* =========================================================
   FIX · MODAL SIEMPRE POR ENCIMA DEL TOPBAR
   ========================================================= */

body:has(#ocModal:not([hidden]))
#pageOrdenesCompra {
  position: relative !important;
  z-index: 2147483000 !important;
}


#pageOrdenesCompra
#ocModal.oc-modal-overlay:not([hidden]) {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  min-width: 100vw !important;
  min-height: 100dvh !important;

  z-index: 2147483640 !important;

  margin: 0 !important;
  padding: 20px !important;

  transform: none !important;

  overflow: hidden !important;
}


#pageOrdenesCompra
#ocModal
.oc-modal-backdrop {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  z-index: 2147483641 !important;

  background:
    rgba(
      0,
      0,
      0,
      0.48
    ) !important;
}


#pageOrdenesCompra
#ocModal
.oc-modal {
  position: relative !important;

  z-index: 2147483642 !important;
}


/* =========================================================
   TOPBAR / SIDEBAR / RIGHTBAR / FOOTER ATRÁS
   ========================================================= */

body:has(#ocModal:not([hidden]))
.app-topbar,

body:has(#ocModal:not([hidden]))
.topbar,

body:has(#ocModal:not([hidden]))
#topbar,

body:has(#ocModal:not([hidden]))
.app-sidebar,

body:has(#ocModal:not([hidden]))
.sidebar,

body:has(#ocModal:not([hidden]))
#sidebar,

body:has(#ocModal:not([hidden]))
.app-rightbar,

body:has(#ocModal:not([hidden]))
.rightbar,

body:has(#ocModal:not([hidden]))
#rightbar,

body:has(#ocModal:not([hidden]))
.app-footer,

body:has(#ocModal:not([hidden]))
.footer,

body:has(#ocModal:not([hidden]))
#footer {
  z-index: 1 !important;

  pointer-events: none !important;
}


/* =========================================================
   EVITAR QUE CONTENEDORES PADRE CORTEN EL MODAL
   ========================================================= */

body:has(#ocModal:not([hidden]))
main,

body:has(#ocModal:not([hidden]))
.app-main,

body:has(#ocModal:not([hidden]))
.main-content,

body:has(#ocModal:not([hidden]))
.content,

body:has(#ocModal:not([hidden]))
#app {
  overflow: visible !important;
}


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

@media (max-width: 520px) {
  #pageOrdenesCompra
  #ocModal.oc-modal-overlay:not([hidden]) {
    padding: 0 !important;
  }
}
/* =========================================================
   FIX DEFINITIVO · MODAL ARRIBA DE TODO EL HUB
   ========================================================= */

body:has(#ocModal:not([hidden]))
*:has(#pageOrdenesCompra) {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  isolation: auto !important;

  overflow: visible !important;
}


/* =========================================================
   ELEVAR TODA LA RAMA DE ORDENES DE COMPRA
   ========================================================= */

body:has(#ocModal:not([hidden]))
*:has(> #pageOrdenesCompra),

body:has(#ocModal:not([hidden]))
#pageOrdenesCompra {
  position: relative !important;

  z-index: 2147483000 !important;

  overflow: visible !important;
}


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

body:has(#ocModal:not([hidden]))
#ocModal {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  min-width: 100vw !important;
  min-height: 100dvh !important;

  margin: 0 !important;

  padding:
    20px !important;

  z-index: 2147483640 !important;

  overflow: hidden !important;

  transform: none !important;

  isolation: isolate !important;
}


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

body:has(#ocModal:not([hidden]))
#ocModal
.oc-modal-backdrop {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  z-index: 2147483641 !important;

  background:
    rgba(
      0,
      0,
      0,
      0.52
    ) !important;
}


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

body:has(#ocModal:not([hidden]))
#ocModal
.oc-modal {
  position: relative !important;

  z-index: 2147483642 !important;

  margin: auto !important;
}


/* =========================================================
   FORZAR TOPBAR DETRAS
   ========================================================= */

body:has(#ocModal:not([hidden]))
header:not(.oc-modal__header),

body:has(#ocModal:not([hidden]))
.app-topbar,

body:has(#ocModal:not([hidden]))
.topbar,

body:has(#ocModal:not([hidden]))
.top-bar,

body:has(#ocModal:not([hidden]))
#topbar,

body:has(#ocModal:not([hidden]))
[data-topbar],

body:has(#ocModal:not([hidden]))
.sidebar,

body:has(#ocModal:not([hidden]))
.app-sidebar,

body:has(#ocModal:not([hidden]))
.rightbar,

body:has(#ocModal:not([hidden]))
.app-rightbar,

body:has(#ocModal:not([hidden]))
footer:not(.oc-modal__footer),

body:has(#ocModal:not([hidden]))
.app-footer {
  z-index: 1 !important;
}


/* =========================================================
   EL MODAL CONSERVA SUS HEADERS ARRIBA
   ========================================================= */

body:has(#ocModal:not([hidden]))
.oc-modal__header {
  position: relative !important;

  z-index: 5 !important;
}


body:has(#ocModal:not([hidden]))
.oc-modal__body {
  position: relative !important;

  z-index: 2 !important;
}


body:has(#ocModal:not([hidden]))
.oc-modal__footer {
  position: relative !important;

  z-index: 5 !important;
}


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

@media (max-width: 520px) {
  body:has(#ocModal:not([hidden]))
  #ocModal {
    padding: 0 !important;
  }
}
/* =========================================================
   FIX · DETALLE DE ORDEN DEBAJO DEL TOPBAR
   ========================================================= */

#pageOrdenesCompra
.oc-detail-overlay {
  position: fixed !important;

  top: 52px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: auto !important;

  min-height: 0 !important;
  max-height:
    calc(
      100dvh -
      52px
    ) !important;

  z-index: 28000 !important;
}


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

#pageOrdenesCompra
.oc-detail-overlay
.oc-detail {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: auto !important;

  min-height: 0 !important;
  max-height: none !important;
}


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

#pageOrdenesCompra
.oc-detail-overlay
.oc-detail-backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
}


/* =========================================================
   TOPBAR SIEMPRE VISIBLE SOBRE EL DETALLE
   ========================================================= */

body:has(.oc-detail-overlay:not([hidden]))
.app-topbar,

body:has(.oc-detail-overlay:not([hidden]))
.topbar,

body:has(.oc-detail-overlay:not([hidden]))
#topbar {
  position: relative;

  z-index: 30000 !important;

  pointer-events: auto !important;
}


/* =========================================================
   NO AFECTAR MODALES
   LOS MODALES SIGUEN TAPANDO TODO
   ========================================================= */

#pageOrdenesCompra
.oc-modal-overlay {
  top: 0 !important;

  height: 100dvh !important;

  max-height: 100dvh !important;

  z-index: 31000 !important;
}


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

@media (max-width: 700px) {
  #pageOrdenesCompra
  .oc-detail-overlay {
    top: 52px !important;

    max-height:
      calc(
        100dvh -
        52px
      ) !important;
  }
}.oc-search--form {
  position: relative;
}

.oc-search--form > svg {
  position: absolute !important;

  top: 50% !important;
  left: 12px !important;

  width: 15px !important;
  height: 15px !important;

  transform: translateY(-50%) !important;

  z-index: 2 !important;

  color: var(--oc-muted) !important;

  pointer-events: none !important;
}

.oc-search--form input {
  padding-left: 38px !important;

  padding-right: 38px !important;
}

.oc-search--form .oc-search__clear {
  position: absolute !important;

  top: 50% !important;
  right: 7px !important;

  transform: translateY(-50%) !important;

  z-index: 3 !important;
}