/* =========================================================
   WIRTZ HUB · ENTIDADES · PRECIOS DE PRODUCTOS
   PREMIUM · MINIMALISTA · RESPONSIVE · SIN GLOW

   PARTE 1 DE 3

   CLARO:
   - Blanco real
   - Negro
   - Grises neutros

   OSCURO:
   - Negro real
   - Blanco
   - Grises neutros

   UBICACIÓN:
   frontend/src/pages/entidades/precios-productos/
   precios-productos.css
   ========================================================= */


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

.product-prices-page,
.product-prices-page *,
.product-prices-toast,
.product-prices-toast * {
  box-sizing:
    border-box;
}


/* =========================================================
   VARIABLES · MODO CLARO
   ========================================================= */

.product-prices-page {
  --pp-bg:
    #f5f5f5;

  --pp-surface:
    #ffffff;

  --pp-surface-soft:
    #fafafa;

  --pp-surface-muted:
    #f3f3f3;

  --pp-surface-strong:
    #ebebeb;

  --pp-surface-hover:
    #f7f7f7;

  --pp-text:
    #181818;

  --pp-text-strong:
    #000000;

  --pp-text-soft:
    #3d3d3d;

  --pp-text-muted:
    #707070;

  --pp-text-faint:
    #9a9a9a;

  --pp-border:
    #dddddd;

  --pp-border-soft:
    #e9e9e9;

  --pp-border-strong:
    #c7c7c7;

  --pp-border-dark:
    #a8a8a8;

  --pp-black:
    #000000;

  --pp-white:
    #ffffff;

  --pp-action-bg:
    #000000;

  --pp-action-text:
    #ffffff;

  --pp-action-hover:
    #1b1b1b;

  --pp-success:
    #17643d;

  --pp-success-soft:
    #eef7f2;

  --pp-warning:
    #8a5c00;

  --pp-warning-soft:
    #fff8e8;

  --pp-danger:
    #a92820;

  --pp-danger-soft:
    #fff0ef;

  --pp-radius-xs:
    6px;

  --pp-radius-sm:
    8px;

  --pp-radius-md:
    10px;

  --pp-radius-lg:
    13px;

  --pp-radius-xl:
    16px;

  --pp-transition-fast:
    130ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --pp-transition:
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  display:
    grid;

  gap:
    14px;

  color:
    var(
      --pp-text
    );

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

  animation:
    productPricesPageIn
    220ms
    ease;
}


/* =========================================================
   VARIABLES · MODO OSCURO
   ========================================================= */

html[data-theme="dark"]
.product-prices-page,
body.dark
.product-prices-page,
.dark
.product-prices-page {
  --pp-bg:
    #000000;

  --pp-surface:
    #050505;

  --pp-surface-soft:
    #0a0a0a;

  --pp-surface-muted:
    #101010;

  --pp-surface-strong:
    #171717;

  --pp-surface-hover:
    #0d0d0d;

  --pp-text:
    #e8e8e8;

  --pp-text-strong:
    #ffffff;

  --pp-text-soft:
    #c7c7c7;

  --pp-text-muted:
    #929292;

  --pp-text-faint:
    #666666;

  --pp-border:
    #202020;

  --pp-border-soft:
    #181818;

  --pp-border-strong:
    #303030;

  --pp-border-dark:
    #444444;

  --pp-black:
    #000000;

  --pp-white:
    #ffffff;

  --pp-action-bg:
    #ffffff;

  --pp-action-text:
    #000000;

  --pp-action-hover:
    #e8e8e8;

  --pp-success:
    #72c99b;

  --pp-success-soft:
    #0b1711;

  --pp-warning:
    #deb861;

  --pp-warning-soft:
    #1b160a;

  --pp-danger:
    #ef827b;

  --pp-danger-soft:
    #1d0d0c;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes productPricesPageIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes productPricesFadeUp {
  from {
    opacity:
      0;

    transform:
      translateY(
        7px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


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


.product-prices-spin {
  animation:
    productPricesSpin
    0.75s
    linear
    infinite;
}


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

.product-prices-head {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    17px
    18px;

  background:
    var(
      --pp-surface
    );

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

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

  animation:
    productPricesFadeUp
    240ms
    ease;
}


/* =========================================================
   BRAND
   ========================================================= */

.product-prices-brand {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}


.product-prices-brand__icon {
  width:
    40px;

  height:
    40px;

  flex:
    0
    0
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    10px;
}


.product-prices-brand__icon
.icon {
  width:
    19px;

  height:
    19px;

  stroke-width:
    2.25;
}


.product-prices-brand__eyebrow {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.085em;

  text-transform:
    uppercase;
}


.product-prices-brand
h2 {
  margin:
    0;

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

  font-size:
    clamp(
      20px,
      2vw,
      26px
    );

  line-height:
    1.05;

  font-weight:
    900;

  letter-spacing:
    -0.04em;
}


.product-prices-brand
p {
  max-width:
    760px;

  margin:
    6px
    0
    0;

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

  font-size:
    12px;

  line-height:
    1.45;

  font-weight:
    700;
}


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

.product-prices-head__actions {
  flex:
    0
    0
    auto;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


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

.product-prices-btn {
  min-height:
    37px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    8px
    11px;

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

  background:
    var(
      --pp-surface
    );

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

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

  font:
    inherit;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    850;

  cursor:
    pointer;

  user-select:
    none;

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


.product-prices-btn
.icon {
  width:
    15px;

  height:
    15px;

  flex:
    0
    0
    auto;

  stroke-width:
    2.25;
}


.product-prices-btn:hover:not(:disabled) {
  background:
    var(
      --pp-surface-muted
    );

  border-color:
    var(
      --pp-border-dark
    );

  transform:
    translateY(
      -1px
    );
}


.product-prices-btn:active:not(:disabled) {
  transform:
    translateY(
      0
    )
    scale(
      0.985
    );
}


.product-prices-btn:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;

  transform:
    none;
}


.product-prices-btn--dark {
  color:
    var(
      --pp-action-text
    );

  background:
    var(
      --pp-action-bg
    );

  border-color:
    var(
      --pp-action-bg
    );
}


.product-prices-btn--dark:hover:not(:disabled) {
  color:
    var(
      --pp-action-text
    );

  background:
    var(
      --pp-action-hover
    );

  border-color:
    var(
      --pp-action-hover
    );
}


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

.product-prices-btn:focus-visible,
.product-prices-search
input:focus-visible,
.product-prices-toolbar__filters
select:focus-visible,
.product-prices-bulk-toolbar
select:focus-visible {
  outline:
    2px
    solid
    var(
      --pp-text-strong
    );

  outline-offset:
    2px;
}


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

.product-prices-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;
}


.product-prices-metric {
  min-width:
    0;

  min-height:
    88px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    13px;

  background:
    var(
      --pp-surface
    );

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

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

  animation:
    productPricesFadeUp
    260ms
    ease
    both;

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


.product-prices-metric:nth-child(2) {
  animation-delay:
    25ms;
}


.product-prices-metric:nth-child(3) {
  animation-delay:
    50ms;
}


.product-prices-metric:nth-child(4) {
  animation-delay:
    75ms;
}


.product-prices-metric:nth-child(5) {
  animation-delay:
    100ms;
}


.product-prices-metric:nth-child(6) {
  animation-delay:
    125ms;
}


.product-prices-metric:hover {
  background:
    var(
      --pp-surface-soft
    );

  border-color:
    var(
      --pp-border-dark
    );

  transform:
    translateY(
      -1px
    );
}


.product-prices-metric__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0
    0
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    8px;
}


.product-prices-metric__icon
.icon {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.3;
}


.product-prices-metric
> div:last-child {
  min-width:
    0;

  display:
    grid;

  gap:
    1px;
}


.product-prices-metric
span {
  color:
    var(
      --pp-text-soft
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.product-prices-metric
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    23px;

  line-height:
    1.05;

  font-weight:
    950;

  letter-spacing:
    -0.045em;
}


.product-prices-metric
small {
  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EDICIÓN MASIVA
   ========================================================= */

.product-prices-bulk-toolbar {
  display:
    none;

  width:
    100%;

  min-width:
    0;

  padding:
    15px;

  background:
    var(
      --pp-surface
    );

  border:
    1px
    solid
    var(
      --pp-border-dark
    );

  border-radius:
    var(
      --pp-radius-lg
    );
}


.product-prices-bulk-toolbar.is-visible {
  display:
    grid;

  gap:
    13px;

  animation:
    productPricesFadeUp
    180ms
    ease;
}


.product-prices-bulk-toolbar__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding-bottom:
    11px;

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


.product-prices-bulk-toolbar__top
> div:first-child {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.product-prices-bulk-toolbar__top
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}


.product-prices-bulk-toolbar__top
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    13px;

  line-height:
    1.3;

  font-weight:
    900;
}


.product-prices-bulk-counter {
  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    28px;

  padding:
    5px
    9px;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    999px;

  font-size:
    10px;

  font-weight:
    900;
}


.product-prices-bulk-toolbar__fields {
  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;
}


.product-prices-bulk-toolbar__fields
label {
  min-width:
    0;

  display:
    grid;

  gap:
    6px;
}


.product-prices-bulk-toolbar__fields
label
> span {
  color:
    var(
      --pp-text-soft
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    900;
}


.product-prices-bulk-toolbar__fields
select {
  width:
    100%;

  min-width:
    0;

  height:
    37px;

  padding:
    0
    32px
    0
    10px;

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

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

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

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

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  outline:
    none;

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


.product-prices-bulk-toolbar__fields
select:hover {
  border-color:
    var(
      --pp-border-dark
    );
}


.product-prices-bulk-toolbar__fields
select:focus {
  background:
    var(
      --pp-surface
    );

  border-color:
    var(
      --pp-text-strong
    );
}


.product-prices-bulk-toolbar__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  padding-top:
    11px;

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


/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.product-prices-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  background:
    var(
      --pp-surface
    );

  border:
    1px
    solid
    var(
      --pp-border-dark
    );

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

  animation:
    productPricesFadeUp
    300ms
    ease;
}


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

.product-prices-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    start;

  gap:
    14px;

  padding:
    14px
    15px;

  background:
    var(
      --pp-surface
    );

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


.product-prices-toolbar__title {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;

  padding-right:
    13px;

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


.product-prices-toolbar__title
> span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.product-prices-toolbar__title
> strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    13px;

  line-height:
    1.3;

  font-weight:
    950;
}


.product-prices-toolbar__title
> small {
  margin-top:
    2px;

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

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   FILTROS
   ========================================================= */

.product-prices-toolbar__filters {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      220px,
      1.8fr
    )
    repeat(
      4,
      minmax(
        120px,
        1fr
      )
    )
    minmax(
      145px,
      1fr
    )
    minmax(
      110px,
      0.7fr
    )
    auto
    auto;

  gap:
    7px;
}


.product-prices-toolbar__filters
select,
.product-prices-search {
  width:
    100%;

  min-width:
    0;
}


.product-prices-toolbar__filters
select {
  height:
    37px;

  padding:
    0
    30px
    0
    10px;

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

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

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

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

  font:
    inherit;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;

  outline:
    none;

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


.product-prices-toolbar__filters
select:hover {
  border-color:
    var(
      --pp-border-dark
    );
}


.product-prices-toolbar__filters
select:focus {
  background:
    var(
      --pp-surface
    );

  border-color:
    var(
      --pp-text-strong
    );
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.product-prices-search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;
}


.product-prices-search
.icon {
  position:
    absolute;

  left:
    11px;

  width:
    14px;

  height:
    14px;

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

  pointer-events:
    none;

  stroke-width:
    2.2;
}


.product-prices-search
input {
  width:
    100%;

  min-width:
    0;

  height:
    37px;

  padding:
    0
    11px
    0
    33px;

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

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

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

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

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  outline:
    none;

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


.product-prices-search
input::placeholder {
  color:
    var(
      --pp-text-muted
    );

  opacity:
    1;

  font-weight:
    650;
}


.product-prices-search
input:hover {
  border-color:
    var(
      --pp-border-dark
    );
}


.product-prices-search
input:focus {
  background:
    var(
      --pp-surface
    );

  border-color:
    var(
      --pp-text-strong
    );
}


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

.product-prices-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --pp-border-dark
    )
    transparent;
}


.product-prices-table-wrap::-webkit-scrollbar {
  height:
    7px;
}


.product-prices-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.product-prices-table-wrap::-webkit-scrollbar-thumb {
  background:
    var(
      --pp-border-dark
    );

  border-radius:
    999px;
}


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

.product-prices-table {
  width:
    100%;

  min-width:
    1180px;

  border-collapse:
    collapse;

  table-layout:
    fixed;

  color:
    var(
      --pp-text
    );

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


.product-prices-table
thead {
  background:
    var(
      --pp-surface-muted
    );
}


.product-prices-table
th {
  height:
    41px;

  padding:
    8px
    10px;

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

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

  border-bottom:
    1px
    solid
    var(
      --pp-border-dark
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    950;

  letter-spacing:
    0.05em;

  text-align:
    left;

  text-transform:
    uppercase;

  vertical-align:
    middle;
}


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


.product-prices-table
tbody
tr {
  background:
    var(
      --pp-surface
    );

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


.product-prices-table
tbody
tr:hover {
  background:
    var(
      --pp-surface-hover
    );
}


.product-prices-table
tbody
tr.is-selected {
  background:
    var(
      --pp-surface-strong
    );
}


.product-prices-table
td {
  height:
    66px;

  padding:
    9px
    10px;

  color:
    var(
      --pp-text
    );

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

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

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    700;

  vertical-align:
    middle;
}


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


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


/* =========================================================
   ANCHOS DE TABLA
   ========================================================= */

.product-prices-table
th:nth-child(1),
.product-prices-table
td:nth-child(1) {
  width:
    250px;
}


.product-prices-table
th:nth-child(2),
.product-prices-table
td:nth-child(2) {
  width:
    130px;
}


.product-prices-table
th:nth-child(3),
.product-prices-table
td:nth-child(3),
.product-prices-table
th:nth-child(4),
.product-prices-table
td:nth-child(4),
.product-prices-table
th:nth-child(5),
.product-prices-table
td:nth-child(5),
.product-prices-table
th:nth-child(6),
.product-prices-table
td:nth-child(6) {
  width:
    170px;
}


.product-prices-table
th:nth-child(7),
.product-prices-table
td:nth-child(7) {
  width:
    125px;
}


.product-prices-table
th:nth-child(8),
.product-prices-table
td:nth-child(8) {
  width:
    95px;
}


.product-prices-table
th:nth-child(9),
.product-prices-table
td:nth-child(9) {
  width:
    75px;

  text-align:
    center;
}


/* =========================================================
   CHECKBOX EDICIÓN MASIVA
   ========================================================= */

.product-prices-check-cell {
  width:
    46px
    !important;

  text-align:
    center
    !important;
}


.product-prices-check-cell
input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    #000000;

  cursor:
    pointer;
}


html[data-theme="dark"]
.product-prices-check-cell
input,
body.dark
.product-prices-check-cell
input,
.dark
.product-prices-check-cell
input {
  accent-color:
    #ffffff;
}


/* =========================================================
   PRODUCTO
   ========================================================= */

.product-prices-product {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.product-prices-product__image,
.product-prices-modal__product-image {
  overflow:
    hidden;

  flex:
    0
    0
    auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(
      --pp-surface-muted
    );

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


.product-prices-product__image {
  width:
    39px;

  height:
    39px;

  border-radius:
    8px;
}


.product-prices-product__image
img,
.product-prices-modal__product-image
img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


.product-prices-product__image
span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;
}


.product-prices-product__image
.icon {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


.product-prices-product__data {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.product-prices-product__data
strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-product__data
small {
  overflow:
    hidden;

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

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SKU
   ========================================================= */

.product-prices-sku {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.product-prices-sku
strong {
  overflow:
    hidden;

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

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-sku
small {
  overflow:
    hidden;

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

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

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}/* =========================================================
   CANALES
   ========================================================= */

.product-prices-channel {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.product-prices-channel__list {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.product-prices-channel__list
strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.25;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-channel__list
small {
  overflow:
    hidden;

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

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-channel__price {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  max-width:
    100%;

  min-height:
    24px;

  padding:
    4px
    7px;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    6px;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    900;

  white-space:
    nowrap;
}


.product-prices-channel.is-empty {
  opacity:
    0.72;
}


.product-prices-channel__empty {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    800;
}


.product-prices-channel.is-empty
small {
  color:
    var(
      --pp-text-faint
    );

  font-size:
    9px;

  font-weight:
    700;
}


/* =========================================================
   CONFIGURACIÓN
   ========================================================= */

.product-prices-config-state {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.product-prices-config-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    fit-content;

  max-width:
    100%;

  min-height:
    24px;

  padding:
    4px
    8px;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    999px;

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.product-prices-config-badge.is-complete {
  color:
    var(
      --pp-text-strong
    );

  background:
    var(
      --pp-surface-strong
    );

  border-color:
    var(
      --pp-border-dark
    );
}


.product-prices-config-badge.is-partial {
  color:
    var(
      --pp-text-strong
    );

  background:
    var(
      --pp-surface-muted
    );

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


.product-prices-config-badge.is-empty {
  color:
    var(
      --pp-text-muted
    );

  background:
    transparent;

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


.product-prices-config-state
small {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    750;
}


/* =========================================================
   ESTADO DE INVENTARIO
   ========================================================= */

.product-prices-state {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    58px;

  min-height:
    24px;

  padding:
    4px
    8px;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    999px;

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    950;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.product-prices-state--active {
  color:
    var(
      --pp-text-strong
    );

  background:
    var(
      --pp-surface-strong
    );

  border-color:
    var(
      --pp-border-dark
    );
}


.product-prices-state--inactive {
  color:
    var(
      --pp-text-muted
    );

  background:
    transparent;

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


/* =========================================================
   ACCIONES
   ========================================================= */

.product-prices-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;
}


.product-prices-icon-btn {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  background:
    var(
      --pp-surface
    );

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

  border-radius:
    7px;

  cursor:
    pointer;

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


.product-prices-icon-btn
.icon {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.3;
}


.product-prices-icon-btn:hover {
  background:
    var(
      --pp-surface-muted
    );

  border-color:
    var(
      --pp-border-dark
    );

  transform:
    translateY(
      -1px
    );
}


.product-prices-icon-btn:active {
  transform:
    scale(
      0.96
    );
}


/* =========================================================
   LOADING / EMPTY / ERROR
   ========================================================= */

.product-prices-table-message {
  padding:
    0
    !important;
}


.product-prices-loading,
.product-prices-empty {
  min-height:
    230px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    28px;

  text-align:
    center;
}


.product-prices-loading
.icon,
.product-prices-empty
.icon {
  width:
    22px;

  height:
    22px;

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

  stroke-width:
    2;
}


.product-prices-loading
strong,
.product-prices-empty
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    13px;

  line-height:
    1.25;

  font-weight:
    950;
}


.product-prices-loading
span,
.product-prices-empty
span {
  max-width:
    420px;

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

  font-size:
    10px;

  line-height:
    1.45;

  font-weight:
    700;
}


.product-prices-empty--error {
  background:
    var(
      --pp-surface-soft
    );
}


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

.product-prices-pagination {
  width:
    100%;

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px
    14px;

  background:
    var(
      --pp-surface
    );

  border-top:
    1px
    solid
    var(
      --pp-border-dark
    );
}


.product-prices-pagination__info {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


.product-prices-pagination__info
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    11px;

  font-weight:
    950;
}


.product-prices-pagination__info
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}


.product-prices-pagination__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


.product-prices-pagination__page {
  min-width:
    105px;

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

  font-size:
    10px;

  font-weight:
    800;

  text-align:
    center;
}


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

.product-prices-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;

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

  animation:
    productPricesBackdropIn
    150ms
    ease;
}


@keyframes productPricesBackdropIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


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

.product-prices-modal {
  width:
    min(
      980px,
      100%
    );

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

  overflow:
    hidden;

  display:
    grid;

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

  color:
    var(
      --pp-text
    );

  background:
    var(
      --pp-surface
    );

  border:
    1px
    solid
    var(
      --pp-border-dark
    );

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

  animation:
    productPricesModalIn
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


@keyframes productPricesModalIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        10px
      )
      scale(
        0.985
      );
  }

  to {
    opacity:
      1;

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


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

.product-prices-modal__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    15px
    16px;

  background:
    var(
      --pp-surface
    );

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


.product-prices-modal__brand {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.product-prices-modal__product-image {
  width:
    44px;

  height:
    44px;

  flex:
    0
    0
    44px;

  border-radius:
    9px;
}


.product-prices-modal__product-image
span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;
}


.product-prices-modal__product-image
.icon {
  width:
    18px;

  height:
    18px;

  stroke-width:
    2;
}


.product-prices-modal__brand
> div:last-child {
  min-width:
    0;
}


.product-prices-modal__brand
span {
  display:
    block;

  margin-bottom:
    2px;

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

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.product-prices-modal__brand
h3 {
  overflow:
    hidden;

  margin:
    0;

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

  font-size:
    17px;

  line-height:
    1.2;

  font-weight:
    950;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-modal__brand
p {
  overflow:
    hidden;

  margin:
    3px
    0
    0;

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-modal__close {
  width:
    32px;

  height:
    32px;

  flex:
    0
    0
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

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

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

  border-radius:
    8px;

  cursor:
    pointer;

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


.product-prices-modal__close
.icon {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.3;
}


.product-prices-modal__close:hover {
  background:
    var(
      --pp-surface-muted
    );

  border-color:
    var(
      --pp-border-dark
    );

  transform:
    rotate(
      2deg
    );
}


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

.product-prices-form {
  min-height:
    0;

  overflow-y:
    auto;

  display:
    grid;

  align-content:
    start;

  gap:
    0;

  background:
    var(
      --pp-surface
    );

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --pp-border-dark
    )
    transparent;
}


.product-prices-form::-webkit-scrollbar {
  width:
    7px;
}


.product-prices-form::-webkit-scrollbar-thumb {
  background:
    var(
      --pp-border-dark
    );

  border-radius:
    999px;
}


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

.product-prices-form-section {
  display:
    grid;

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

  gap:
    16px;

  padding:
    16px;

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


.product-prices-form-section:last-of-type {
  border-bottom:
    0;
}


.product-prices-form-section__title {
  min-width:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    3px;

  padding-right:
    14px;

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


.product-prices-form-section__title
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.product-prices-form-section__title
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    12px;

  line-height:
    1.35;

  font-weight:
    950;
}


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

.product-prices-product-summary {
  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


.product-prices-product-summary
article {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;

  padding:
    11px;

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

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

  border-radius:
    var(
      --pp-radius-sm
    );
}


.product-prices-product-summary
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.product-prices-product-summary
strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CHANNEL CONFIG GRID
   ========================================================= */

.product-prices-channel-config-grid {
  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;
}


.product-prices-channel-config-card {
  min-width:
    0;

  display:
    grid;

  gap:
    11px;

  padding:
    12px;

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

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

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

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


.product-prices-channel-config-card:hover {
  background:
    var(
      --pp-surface
    );

  border-color:
    var(
      --pp-border-dark
    );

  transform:
    translateY(
      -1px
    );
}


.product-prices-channel-config-card
header {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding-bottom:
    10px;

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


.product-prices-channel-config-card__icon {
  width:
    31px;

  height:
    31px;

  flex:
    0
    0
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(
      --pp-surface-muted
    );

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

  border-radius:
    7px;
}


.product-prices-channel-config-card__icon
.icon {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.3;
}


.product-prices-channel-config-card
header
> div:last-child {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.product-prices-channel-config-card
header
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    11px;

  line-height:
    1.25;

  font-weight:
    950;
}


.product-prices-channel-config-card
header
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    700;
}


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

.product-prices-field {
  min-width:
    0;

  display:
    grid;

  gap:
    6px;
}


.product-prices-field
> span {
  color:
    var(
      --pp-text-soft
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    900;
}


.product-prices-field
select {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0
    32px
    0
    10px;

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

  background:
    var(
      --pp-surface
    );

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

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

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    800;

  outline:
    none;

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


.product-prices-field
select:hover {
  border-color:
    var(
      --pp-border-dark
    );
}


.product-prices-field
select:focus {
  border-color:
    var(
      --pp-text-strong
    );
}


/* =========================================================
   PRICE PREVIEW
   ========================================================= */

.product-prices-channel-price-preview {
  display:
    grid;

  grid-template-columns:
    1fr
    auto;

  gap:
    3px
    8px;

  align-items:
    center;

  padding:
    9px
    10px;

  background:
    var(
      --pp-surface
    );

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

  border-radius:
    7px;
}


.product-prices-channel-price-preview
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.product-prices-channel-price-preview
strong {
  grid-column:
    2;

  grid-row:
    1 /
    span 2;

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

  font-size:
    12px;

  line-height:
    1.2;

  font-weight:
    950;

  text-align:
    right;
}


.product-prices-channel-price-preview
small {
  overflow:
    hidden;

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

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   LIST PREVIEW
   ========================================================= */

.product-prices-list-preview-grid {
  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


.product-prices-list-preview {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;

  padding:
    10px;

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

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

  border-radius:
    var(
      --pp-radius-sm
    );
}


.product-prices-list-preview.is-empty {
  opacity:
    0.68;
}


.product-prices-list-preview
span {
  color:
    var(
      --pp-text-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.product-prices-list-preview
strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    950;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.product-prices-list-preview
small {
  overflow:
    hidden;

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

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.product-prices-modal__footer {
  position:
    sticky;

  bottom:
    0;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    12px
    16px;

  background:
    var(
      --pp-surface
    );

  border-top:
    1px
    solid
    var(
      --pp-border-dark
    );
}


.product-prices-modal__footer
> div:last-child {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


.product-prices-modal__status {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

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


.product-prices-modal__status
.icon {
  width:
    14px;

  height:
    14px;

  flex:
    0
    0
    auto;

  stroke-width:
    2.2;
}


.product-prices-modal__status
span {
  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    700;
}/* =========================================================
   TOAST
   ========================================================= */

.product-prices-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    7000;

  min-width:
    260px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    11px
    13px;

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

  background:
    var(
      --pp-surface
    );

  border:
    1px
    solid
    var(
      --pp-border-dark
    );

  border-radius:
    10px;

  opacity:
    0;

  transform:
    translateY(
      8px
    );

  pointer-events:
    none;

  transition:
    opacity
    var(
      --pp-transition
    ),
    transform
    var(
      --pp-transition
    );
}


.product-prices-toast.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}


.product-prices-toast
.icon {
  width:
    17px;

  height:
    17px;

  flex:
    0
    0
    auto;

  stroke-width:
    2.2;
}


.product-prices-toast
span {
  color:
    inherit;

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    800;
}


.product-prices-toast--success {
  color:
    var(
      --pp-text-strong
    );
}


.product-prices-toast--error {
  color:
    var(
      --pp-text-strong
    );
}


/* =========================================================
   DARK MODE · ELEMENTOS GENERALES
   ========================================================= */

html[data-theme="dark"]
.product-prices-toast,
body.dark
.product-prices-toast,
.dark
.product-prices-toast {
  color:
    #ffffff;

  background:
    #050505;

  border-color:
    #333333;
}


html[data-theme="dark"]
.product-prices-page
select,
html[data-theme="dark"]
.product-prices-page
input,
body.dark
.product-prices-page
select,
body.dark
.product-prices-page
input,
.dark
.product-prices-page
select,
.dark
.product-prices-page
input {
  color-scheme:
    dark;
}


/* =========================================================
   DESKTOP MEDIO
   ========================================================= */

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


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


  .product-prices-toolbar__title {
    padding-right:
      0;

    padding-bottom:
      10px;

    border-right:
      0;

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


  .product-prices-toolbar__filters {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


  .product-prices-search {
    grid-column:
      span 2;
  }
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (
  max-width:
  1200px
) {
  .product-prices-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .product-prices-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .product-prices-bulk-toolbar__fields {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .product-prices-toolbar__filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .product-prices-search {
    grid-column:
      span 3;
  }


  .product-prices-form-section {
    grid-template-columns:
      155px
      minmax(
        0,
        1fr
      );
  }


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


  .product-prices-list-preview-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


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

@media (
  max-width:
  900px
) {
  .product-prices-page {
    gap:
      12px;
  }


  .product-prices-head {
    padding:
      14px;
  }


  .product-prices-brand {
    align-items:
      flex-start;
  }


  .product-prices-brand__icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }


  .product-prices-brand
  h2 {
    font-size:
      20px;
  }


  .product-prices-brand
  p {
    font-size:
      11px;
  }


  .product-prices-head__actions {
    display:
      grid;

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


  .product-prices-head__actions
  .product-prices-btn {
    width:
      100%;
  }


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


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


  .product-prices-search {
    grid-column:
      span 2;
  }


  .product-prices-toolbar__filters
  .product-prices-btn {
    width:
      100%;
  }


  .product-prices-bulk-toolbar__top {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .product-prices-bulk-counter {
    width:
      fit-content;
  }


  .product-prices-channel-config-grid {
    grid-template-columns:
      1fr;
  }


  .product-prices-form-section {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .product-prices-form-section__title {
    padding-right:
      0;

    padding-bottom:
      9px;

    border-right:
      0;

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


  .product-prices-modal {
    max-height:
      calc(
        100vh -
        20px
      );
  }


  .product-prices-modal-backdrop {
    padding:
      10px;
  }


  .product-prices-modal__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .product-prices-modal__footer
  > div:last-child {
    width:
      100%;
  }


  .product-prices-modal__footer
  > div:last-child
  .product-prices-btn {
    flex:
      1;
  }
}


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

@media (
  max-width:
  640px
) {
  .product-prices-page {
    gap:
      10px;
  }


  .product-prices-head {
    gap:
      13px;

    padding:
      12px;

    border-radius:
      10px;
  }


  .product-prices-brand {
    gap:
      10px;
  }


  .product-prices-brand__icon {
    width:
      36px;

    height:
      36px;

    flex:
      0
      0
      36px;

    border-radius:
      8px;
  }


  .product-prices-brand__icon
  .icon {
    width:
      17px;

    height:
      17px;
  }


  .product-prices-brand__eyebrow {
    font-size:
      9px;
  }


  .product-prices-brand
  h2 {
    font-size:
      18px;
  }


  .product-prices-brand
  p {
    font-size:
      10px;

    line-height:
      1.4;
  }


  .product-prices-head__actions {
    grid-template-columns:
      1fr;
  }


  .product-prices-btn {
    min-height:
      36px;

    font-size:
      10px;
  }


  .product-prices-metrics {
    grid-template-columns:
      1fr
      1fr;

    gap:
      7px;
  }


  .product-prices-metric {
    min-height:
      78px;

    gap:
      8px;

    padding:
      10px;
  }


  .product-prices-metric__icon {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;
  }


  .product-prices-metric
  strong {
    font-size:
      20px;
  }


  .product-prices-metric
  span {
    font-size:
      9px;
  }


  .product-prices-metric
  small {
    font-size:
      9px;
  }


  .product-prices-panel {
    border-radius:
      10px;
  }


  .product-prices-toolbar {
    gap:
      10px;

    padding:
      11px;
  }


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


  .product-prices-search {
    grid-column:
      auto;
  }


  .product-prices-toolbar__filters
  select,
  .product-prices-search
  input {
    height:
      36px;
  }


  .product-prices-bulk-toolbar {
    padding:
      11px;

    border-radius:
      10px;
  }


  .product-prices-bulk-toolbar__fields {
    grid-template-columns:
      1fr;
  }


  .product-prices-bulk-toolbar__actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .product-prices-bulk-toolbar__actions
  .product-prices-btn {
    width:
      100%;
  }


  .product-prices-pagination {
    align-items:
      stretch;

    flex-direction:
      column;

    padding:
      9px
      10px;
  }


  .product-prices-pagination__actions {
    width:
      100%;

    display:
      grid;

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


  .product-prices-pagination__actions
  .product-prices-btn {
    width:
      100%;
  }


  .product-prices-pagination__page {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;
  }


  .product-prices-modal-backdrop {
    align-items:
      stretch;

    padding:
      0;
  }


  .product-prices-modal {
    width:
      100%;

    max-height:
      100vh;

    border:
      0;

    border-radius:
      0;
  }


  .product-prices-modal__head {
    padding:
      12px;
  }


  .product-prices-modal__product-image {
    width:
      39px;

    height:
      39px;

    flex-basis:
      39px;
  }


  .product-prices-modal__brand
  h3 {
    font-size:
      15px;
  }


  .product-prices-modal__brand
  p {
    font-size:
      9px;
  }


  .product-prices-form-section {
    padding:
      12px;
  }


  .product-prices-product-summary {
    grid-template-columns:
      1fr
      1fr;

    gap:
      6px;
  }


  .product-prices-channel-config-card {
    padding:
      10px;
  }


  .product-prices-list-preview-grid {
    grid-template-columns:
      1fr
      1fr;

    gap:
      6px;
  }


  .product-prices-modal__footer {
    padding:
      10px
      12px;
  }


  .product-prices-modal__status {
    width:
      100%;
  }


  .product-prices-modal__footer
  > div:last-child {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .product-prices-toast {
    right:
      10px;

    bottom:
      10px;

    left:
      10px;

    min-width:
      0;

    max-width:
      none;
  }
}


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

@media (
  max-width:
  430px
) {
  .product-prices-metrics {
    grid-template-columns:
      1fr;
  }


  .product-prices-metric {
    min-height:
      68px;
  }


  .product-prices-product-summary {
    grid-template-columns:
      1fr;
  }


  .product-prices-list-preview-grid {
    grid-template-columns:
      1fr;
  }


  .product-prices-pagination__actions {
    grid-template-columns:
      1fr
      1fr;
  }


  .product-prices-pagination__page {
    grid-column:
      1 /
      -1;

    grid-row:
      1;

    min-height:
      28px;
  }
}


/* =========================================================
   TABLA · AJUSTE DE EDICIÓN MASIVA

   Cuando aparece la columna checkbox, los nth-child
   originales cambian de posición.

   Usamos ancho automático controlado para no romper
   la estructura.
   ========================================================= */

.product-prices-table
.product-prices-check-cell
~ td {
  min-width:
    0;
}


/* =========================================================
   TABLA · MOBILE / TABLET

   La tabla conserva scroll horizontal interno.
   Nunca fuerza scroll horizontal sobre toda la aplicación.
   ========================================================= */

@media (
  max-width:
  900px
) {
  .product-prices-table-wrap {
    max-width:
      100%;

    overscroll-behavior-x:
      contain;
  }


  .product-prices-table {
    min-width:
      1080px;
  }


  .product-prices-table
  th,
  .product-prices-table
  td {
    padding-left:
      8px;

    padding-right:
      8px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .product-prices-page,
  .product-prices-head,
  .product-prices-metric,
  .product-prices-panel,
  .product-prices-bulk-toolbar,
  .product-prices-modal,
  .product-prices-modal-backdrop {
    animation:
      none
      !important;
  }


  .product-prices-btn,
  .product-prices-icon-btn,
  .product-prices-metric,
  .product-prices-channel-config-card,
  .product-prices-modal__close,
  .product-prices-toast {
    transition:
      none
      !important;
  }
}


/* =========================================================
   DARK MODE · FORZADO FINAL

   Negro real.
   Nada azulado.
   Nada gris azulado.
   ========================================================= */

html[data-theme="dark"]
.product-prices-page,
body.dark
.product-prices-page,
.dark
.product-prices-page {
  color:
    #e8e8e8;
}


html[data-theme="dark"]
.product-prices-head,
html[data-theme="dark"]
.product-prices-metric,
html[data-theme="dark"]
.product-prices-panel,
html[data-theme="dark"]
.product-prices-toolbar,
html[data-theme="dark"]
.product-prices-bulk-toolbar,
html[data-theme="dark"]
.product-prices-modal,
html[data-theme="dark"]
.product-prices-modal__head,
html[data-theme="dark"]
.product-prices-modal__footer,
body.dark
.product-prices-head,
body.dark
.product-prices-metric,
body.dark
.product-prices-panel,
body.dark
.product-prices-toolbar,
body.dark
.product-prices-bulk-toolbar,
body.dark
.product-prices-modal,
body.dark
.product-prices-modal__head,
body.dark
.product-prices-modal__footer,
.dark
.product-prices-head,
.dark
.product-prices-metric,
.dark
.product-prices-panel,
.dark
.product-prices-toolbar,
.dark
.product-prices-bulk-toolbar,
.dark
.product-prices-modal,
.dark
.product-prices-modal__head,
.dark
.product-prices-modal__footer {
  background:
    #050505;
}


html[data-theme="dark"]
.product-prices-table,
html[data-theme="dark"]
.product-prices-table
tbody
tr,
body.dark
.product-prices-table,
body.dark
.product-prices-table
tbody
tr,
.dark
.product-prices-table,
.dark
.product-prices-table
tbody
tr {
  background:
    #050505;
}


html[data-theme="dark"]
.product-prices-table
thead,
body.dark
.product-prices-table
thead,
.dark
.product-prices-table
thead {
  background:
    #101010;
}


html[data-theme="dark"]
.product-prices-table
tbody
tr:hover,
body.dark
.product-prices-table
tbody
tr:hover,
.dark
.product-prices-table
tbody
tr:hover {
  background:
    #0d0d0d;
}


html[data-theme="dark"]
.product-prices-table
tbody
tr.is-selected,
body.dark
.product-prices-table
tbody
tr.is-selected,
.dark
.product-prices-table
tbody
tr.is-selected {
  background:
    #171717;
}


html[data-theme="dark"]
.product-prices-channel__price,
html[data-theme="dark"]
.product-prices-config-badge,
html[data-theme="dark"]
.product-prices-state,
html[data-theme="dark"]
.product-prices-product-summary
article,
html[data-theme="dark"]
.product-prices-channel-config-card,
html[data-theme="dark"]
.product-prices-list-preview,
html[data-theme="dark"]
.product-prices-channel-price-preview,
body.dark
.product-prices-channel__price,
body.dark
.product-prices-config-badge,
body.dark
.product-prices-state,
body.dark
.product-prices-product-summary
article,
body.dark
.product-prices-channel-config-card,
body.dark
.product-prices-list-preview,
body.dark
.product-prices-channel-price-preview,
.dark
.product-prices-channel__price,
.dark
.product-prices-config-badge,
.dark
.product-prices-state,
.dark
.product-prices-product-summary
article,
.dark
.product-prices-channel-config-card,
.dark
.product-prices-list-preview,
.dark
.product-prices-channel-price-preview {
  background:
    #0a0a0a;
}


html[data-theme="dark"]
.product-prices-search
input,
html[data-theme="dark"]
.product-prices-toolbar__filters
select,
html[data-theme="dark"]
.product-prices-bulk-toolbar__fields
select,
html[data-theme="dark"]
.product-prices-field
select,
body.dark
.product-prices-search
input,
body.dark
.product-prices-toolbar__filters
select,
body.dark
.product-prices-bulk-toolbar__fields
select,
body.dark
.product-prices-field
select,
.dark
.product-prices-search
input,
.dark
.product-prices-toolbar__filters
select,
.dark
.product-prices-bulk-toolbar__fields
select,
.dark
.product-prices-field
select {
  color:
    #ffffff;

  background:
    #0a0a0a;

  border-color:
    #303030;
}


html[data-theme="dark"]
.product-prices-search
input:focus,
html[data-theme="dark"]
.product-prices-toolbar__filters
select:focus,
html[data-theme="dark"]
.product-prices-bulk-toolbar__fields
select:focus,
html[data-theme="dark"]
.product-prices-field
select:focus,
body.dark
.product-prices-search
input:focus,
body.dark
.product-prices-toolbar__filters
select:focus,
body.dark
.product-prices-bulk-toolbar__fields
select:focus,
body.dark
.product-prices-field
select:focus,
.dark
.product-prices-search
input:focus,
.dark
.product-prices-toolbar__filters
select:focus,
.dark
.product-prices-bulk-toolbar__fields
select:focus,
.dark
.product-prices-field
select:focus {
  background:
    #000000;

  border-color:
    #ffffff;
}


/* =========================================================
   LIGHT MODE · FORZADO FINAL

   Blanco real.
   Negro real.
   Sin tonos azulados.
   ========================================================= */

html:not([data-theme="dark"])
.product-prices-head,
html:not([data-theme="dark"])
.product-prices-metric,
html:not([data-theme="dark"])
.product-prices-panel,
html:not([data-theme="dark"])
.product-prices-toolbar,
html:not([data-theme="dark"])
.product-prices-bulk-toolbar,
html:not([data-theme="dark"])
.product-prices-modal,
html:not([data-theme="dark"])
.product-prices-modal__head,
html:not([data-theme="dark"])
.product-prices-modal__footer {
  background:
    #ffffff;
}


html:not([data-theme="dark"])
.product-prices-table {
  background:
    #ffffff;
}


html:not([data-theme="dark"])
.product-prices-table
tbody
tr {
  background:
    #ffffff;
}


html:not([data-theme="dark"])
.product-prices-table
tbody
tr:hover {
  background:
    #f7f7f7;
}


html:not([data-theme="dark"])
.product-prices-table
thead {
  background:
    #f3f3f3;
}


/* =========================================================
   SEGURIDAD DE LAYOUT
   ========================================================= */

.product-prices-page,
.product-prices-head,
.product-prices-metrics,
.product-prices-panel,
.product-prices-toolbar,
.product-prices-toolbar__filters,
.product-prices-bulk-toolbar,
.product-prices-bulk-toolbar__fields,
.product-prices-table-wrap,
.product-prices-modal,
.product-prices-form,
.product-prices-form-section,
.product-prices-channel-config-grid,
.product-prices-product-summary,
.product-prices-list-preview-grid {
  max-width:
    100%;
}


.product-prices-page
img {
  max-width:
    100%;
}


/* =========================================================
   FIN
   ========================================================= *//* =========================================================
   PRECIOS DE PRODUCTOS
   AJUSTE FINAL · DIVISIONES + CONTRASTE + COLORES
   AGREGAR AL FINAL DEL CSS
   ========================================================= */


/* =========================================================
   VARIABLES DE CONTRASTE
   ========================================================= */

.product-prices-page {
  --pp-divider:
    #b8b8b8;

  --pp-divider-soft:
    #d3d3d3;

  --pp-divider-strong:
    #8f8f8f;

  --pp-card-bg:
    #ffffff;

  --pp-card-bg-soft:
    #f7f7f7;

  --pp-card-bg-hover:
    #f1f1f1;

  --pp-complete:
    #157347;

  --pp-complete-bg:
    #edf8f2;

  --pp-complete-border:
    #8bc9a9;

  --pp-partial:
    #8a5c00;

  --pp-partial-bg:
    #fff7e1;

  --pp-partial-border:
    #d8b866;

  --pp-empty:
    #555555;

  --pp-empty-bg:
    #f3f3f3;

  --pp-empty-border:
    #bdbdbd;

  --pp-danger-strong:
    #a1261f;

  --pp-danger-bg:
    #fff0ef;

  --pp-danger-border:
    #d69a96;
}


html[data-theme="dark"]
.product-prices-page,
body.dark
.product-prices-page,
.dark
.product-prices-page {
  --pp-divider:
    #3b3b3b;

  --pp-divider-soft:
    #292929;

  --pp-divider-strong:
    #5a5a5a;

  --pp-card-bg:
    #050505;

  --pp-card-bg-soft:
    #0c0c0c;

  --pp-card-bg-hover:
    #121212;

  --pp-complete:
    #7bd8a5;

  --pp-complete-bg:
    #0d1c14;

  --pp-complete-border:
    #245f3e;

  --pp-partial:
    #e3bd69;

  --pp-partial-bg:
    #1d1709;

  --pp-partial-border:
    #66501c;

  --pp-empty:
    #b8b8b8;

  --pp-empty-bg:
    #111111;

  --pp-empty-border:
    #3a3a3a;

  --pp-danger-strong:
    #ef8b84;

  --pp-danger-bg:
    #1d0d0c;

  --pp-danger-border:
    #65302d;
}


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

.product-prices-modal {
  border:
    1px
    solid
    var(
      --pp-divider-strong
    );

  background:
    var(
      --pp-card-bg
    );
}


.product-prices-modal__head {
  min-height:
    70px;

  padding:
    14px
    16px;

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

  background:
    var(
      --pp-card-bg
    );
}


/* =========================================================
   TÍTULO DEL MODAL
   ========================================================= */

.product-prices-modal__brand
span {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    900;
}


.product-prices-modal__brand
h3 {
  color:
    var(
      --pp-text-strong
    );

  font-weight:
    950;
}


.product-prices-modal__brand
p {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    750;
}


/* =========================================================
   SECCIONES DEL MODAL
   ========================================================= */

.product-prices-form-section {
  padding:
    17px
    16px;

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


.product-prices-form-section:last-of-type {
  border-bottom:
    0;
}


.product-prices-form-section__title {
  padding-right:
    16px;

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


.product-prices-form-section__title
span {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    950;

  letter-spacing:
    0.07em;
}


.product-prices-form-section__title
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    12px;

  font-weight:
    950;
}


/* =========================================================
   INFORMACIÓN DEL PRODUCTO
   ========================================================= */

.product-prices-product-summary {
  gap:
    0;

  overflow:
    hidden;

  border:
    1px
    solid
    var(
      --pp-divider
    );

  border-radius:
    9px;
}


.product-prices-product-summary
article {
  min-height:
    62px;

  padding:
    11px
    12px;

  background:
    var(
      --pp-card-bg-soft
    );

  border:
    0;

  border-right:
    1px
    solid
    var(
      --pp-divider
    );

  border-radius:
    0;
}


.product-prices-product-summary
article:last-child {
  border-right:
    0;
}


.product-prices-product-summary
span {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    950;
}


.product-prices-product-summary
strong {
  color:
    var(
      --pp-text-strong
    );

  font-weight:
    950;
}


/* =========================================================
   GRID DE CANALES
   ========================================================= */

.product-prices-channel-config-grid {
  gap:
    10px;
}


/* =========================================================
   TARJETAS DE CANALES
   ========================================================= */

.product-prices-channel-config-card {
  overflow:
    hidden;

  padding:
    0;

  gap:
    0;

  background:
    var(
      --pp-card-bg
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );

  border-radius:
    10px;

  transform:
    none;
}


.product-prices-channel-config-card:hover {
  background:
    var(
      --pp-card-bg
    );

  border-color:
    var(
      --pp-divider-strong
    );

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   HEADER DE CADA CANAL
   ========================================================= */

.product-prices-channel-config-card
header {
  min-height:
    58px;

  margin:
    0;

  padding:
    11px
    12px;

  background:
    var(
      --pp-card-bg-soft
    );

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


.product-prices-channel-config-card__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0
    0
    32px;

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

  background:
    var(
      --pp-card-bg
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );
}


.product-prices-channel-config-card
header
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    11px;

  font-weight:
    950;
}


.product-prices-channel-config-card
header
span {
  margin-top:
    2px;

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

  font-weight:
    750;
}


/* =========================================================
   CAMPO DE LISTA
   ========================================================= */

.product-prices-channel-config-card
.product-prices-field {
  padding:
    11px
    12px;

  border-bottom:
    1px
    solid
    var(
      --pp-divider-soft
    );
}


.product-prices-field
> span {
  color:
    var(
      --pp-text-strong
    );

  font-weight:
    900;
}


.product-prices-field
select {
  height:
    39px;

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

  background:
    var(
      --pp-card-bg
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );

  font-weight:
    800;
}


.product-prices-field
select:hover {
  border-color:
    var(
      --pp-divider-strong
    );
}


.product-prices-field
select:focus {
  border-color:
    var(
      --pp-text-strong
    );

  outline:
    1px
    solid
    var(
      --pp-text-strong
    );

  outline-offset:
    -1px;
}


/* =========================================================
   PRECIO ACTUAL
   ========================================================= */

.product-prices-channel-price-preview {
  margin:
    0;

  padding:
    11px
    12px;

  min-height:
    60px;

  background:
    var(
      --pp-card-bg-soft
    );

  border:
    0;

  border-radius:
    0;
}


.product-prices-channel-price-preview
span {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    950;
}


.product-prices-channel-price-preview
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    14px;

  font-weight:
    950;
}


.product-prices-channel-price-preview
small {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    750;
}


/* =========================================================
   RESUMEN DE LISTAS
   ========================================================= */

.product-prices-list-preview-grid {
  gap:
    0;

  overflow:
    hidden;

  border:
    1px
    solid
    var(
      --pp-divider
    );

  border-radius:
    9px;
}


.product-prices-list-preview {
  min-height:
    72px;

  padding:
    11px
    12px;

  background:
    var(
      --pp-card-bg-soft
    );

  border:
    0;

  border-right:
    1px
    solid
    var(
      --pp-divider
    );

  border-radius:
    0;
}


.product-prices-list-preview:last-child {
  border-right:
    0;
}


.product-prices-list-preview
span {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    950;
}


.product-prices-list-preview
strong {
  color:
    var(
      --pp-text-strong
    );

  font-size:
    11px;

  font-weight:
    950;
}


.product-prices-list-preview
small {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    750;
}


.product-prices-list-preview.is-empty {
  opacity:
    1;

  background:
    var(
      --pp-empty-bg
    );
}


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

.product-prices-modal__footer {
  min-height:
    58px;

  padding:
    10px
    16px;

  background:
    var(
      --pp-card-bg
    );

  border-top:
    1px
    solid
    var(
      --pp-divider-strong
    );
}


.product-prices-modal__status {
  color:
    var(
      --pp-text-soft
    );
}


.product-prices-modal__status
span {
  color:
    var(
      --pp-text-soft
    );

  font-weight:
    800;
}


/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

.product-prices-modal__close {
  color:
    var(
      --pp-text-strong
    );

  background:
    var(
      --pp-card-bg-soft
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );
}


.product-prices-modal__close:hover {
  background:
    var(
      --pp-card-bg-hover
    );

  border-color:
    var(
      --pp-divider-strong
    );
}


/* =========================================================
   TABLA · DIVISIONES MÁS MARCADAS
   ========================================================= */

.product-prices-table
th {
  color:
    var(
      --pp-text-strong
    );

  background:
    var(
      --pp-surface-muted
    );

  border-right:
    1px
    solid
    var(
      --pp-divider
    );

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

  font-weight:
    950;
}


.product-prices-table
td {
  border-right:
    1px
    solid
    var(
      --pp-divider-soft
    );

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


.product-prices-table
tbody
tr:hover
td {
  border-bottom-color:
    var(
      --pp-divider-strong
    );
}


/* =========================================================
   PRECIO EN TABLA
   ========================================================= */

.product-prices-channel__price {
  min-height:
    25px;

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

  background:
    var(
      --pp-card-bg-soft
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );

  font-weight:
    950;
}


/* =========================================================
   ESTADOS CON COLORES
   ========================================================= */

.product-prices-config-badge.is-complete {
  color:
    var(
      --pp-complete
    );

  background:
    var(
      --pp-complete-bg
    );

  border-color:
    var(
      --pp-complete-border
    );
}


.product-prices-config-badge.is-partial {
  color:
    var(
      --pp-partial
    );

  background:
    var(
      --pp-partial-bg
    );

  border-color:
    var(
      --pp-partial-border
    );
}


.product-prices-config-badge.is-empty {
  color:
    var(
      --pp-empty
    );

  background:
    var(
      --pp-empty-bg
    );

  border-color:
    var(
      --pp-empty-border
    );
}


.product-prices-state--active {
  color:
    var(
      --pp-complete
    );

  background:
    var(
      --pp-complete-bg
    );

  border-color:
    var(
      --pp-complete-border
    );
}


.product-prices-state--inactive {
  color:
    var(
      --pp-danger-strong
    );

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

  border-color:
    var(
      --pp-danger-border
    );
}


/* =========================================================
   MÉTRICAS · DIVISIONES
   ========================================================= */

.product-prices-metric {
  background:
    var(
      --pp-card-bg
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );
}


.product-prices-metric:hover {
  background:
    var(
      --pp-card-bg-soft
    );

  border-color:
    var(
      --pp-divider-strong
    );
}


.product-prices-metric__icon {
  background:
    var(
      --pp-card-bg-soft
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );
}


/* =========================================================
   PANEL Y TOOLBAR
   ========================================================= */

.product-prices-panel {
  border:
    1px
    solid
    var(
      --pp-divider-strong
    );
}


.product-prices-toolbar {
  border-bottom:
    1px
    solid
    var(
      --pp-divider-strong
    );
}


.product-prices-toolbar__title {
  border-right:
    1px
    solid
    var(
      --pp-divider
    );
}


/* =========================================================
   FILTROS
   ========================================================= */

.product-prices-search
input,
.product-prices-toolbar__filters
select {
  color:
    var(
      --pp-text-strong
    );

  background:
    var(
      --pp-card-bg-soft
    );

  border:
    1px
    solid
    var(
      --pp-divider
    );

  font-weight:
    800;
}


.product-prices-search
input:hover,
.product-prices-toolbar__filters
select:hover {
  border-color:
    var(
      --pp-divider-strong
    );
}


/* =========================================================
   EDICIÓN MASIVA
   ========================================================= */

.product-prices-bulk-toolbar {
  border:
    1px
    solid
    var(
      --pp-divider-strong
    );
}


.product-prices-bulk-toolbar__top {
  border-bottom:
    1px
    solid
    var(
      --pp-divider
    );
}


.product-prices-bulk-toolbar__actions {
  border-top:
    1px
    solid
    var(
      --pp-divider
    );
}


/* =========================================================
   DARK MODE · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.product-prices-modal,
body.dark
.product-prices-modal,
.dark
.product-prices-modal {
  color:
    #eeeeee;

  background:
    #050505;

  border-color:
    #555555;
}


html[data-theme="dark"]
.product-prices-modal__head,
html[data-theme="dark"]
.product-prices-modal__footer,
body.dark
.product-prices-modal__head,
body.dark
.product-prices-modal__footer,
.dark
.product-prices-modal__head,
.dark
.product-prices-modal__footer {
  background:
    #050505;

  border-color:
    #454545;
}


html[data-theme="dark"]
.product-prices-form-section,
body.dark
.product-prices-form-section,
.dark
.product-prices-form-section {
  border-bottom-color:
    #3b3b3b;
}


html[data-theme="dark"]
.product-prices-form-section__title,
body.dark
.product-prices-form-section__title,
.dark
.product-prices-form-section__title {
  border-right-color:
    #3b3b3b;
}


html[data-theme="dark"]
.product-prices-product-summary,
html[data-theme="dark"]
.product-prices-list-preview-grid,
body.dark
.product-prices-product-summary,
body.dark
.product-prices-list-preview-grid,
.dark
.product-prices-product-summary,
.dark
.product-prices-list-preview-grid {
  border-color:
    #3f3f3f;
}


html[data-theme="dark"]
.product-prices-product-summary
article,
html[data-theme="dark"]
.product-prices-list-preview,
body.dark
.product-prices-product-summary
article,
body.dark
.product-prices-list-preview,
.dark
.product-prices-product-summary
article,
.dark
.product-prices-list-preview {
  background:
    #0b0b0b;

  border-color:
    #353535;
}


html[data-theme="dark"]
.product-prices-channel-config-card,
body.dark
.product-prices-channel-config-card,
.dark
.product-prices-channel-config-card {
  background:
    #050505;

  border-color:
    #3f3f3f;
}


html[data-theme="dark"]
.product-prices-channel-config-card:hover,
body.dark
.product-prices-channel-config-card:hover,
.dark
.product-prices-channel-config-card:hover {
  background:
    #070707;

  border-color:
    #686868;
}


html[data-theme="dark"]
.product-prices-channel-config-card
header,
body.dark
.product-prices-channel-config-card
header,
.dark
.product-prices-channel-config-card
header {
  background:
    #0c0c0c;

  border-bottom-color:
    #3a3a3a;
}


html[data-theme="dark"]
.product-prices-channel-config-card__icon,
body.dark
.product-prices-channel-config-card__icon,
.dark
.product-prices-channel-config-card__icon {
  color:
    #ffffff;

  background:
    #050505;

  border-color:
    #404040;
}


html[data-theme="dark"]
.product-prices-channel-config-card
.product-prices-field,
body.dark
.product-prices-channel-config-card
.product-prices-field,
.dark
.product-prices-channel-config-card
.product-prices-field {
  border-bottom-color:
    #303030;
}


html[data-theme="dark"]
.product-prices-field
select,
body.dark
.product-prices-field
select,
.dark
.product-prices-field
select {
  color:
    #ffffff;

  background:
    #080808;

  border-color:
    #404040;
}


html[data-theme="dark"]
.product-prices-field
select:hover,
body.dark
.product-prices-field
select:hover,
.dark
.product-prices-field
select:hover {
  border-color:
    #686868;
}


html[data-theme="dark"]
.product-prices-field
select:focus,
body.dark
.product-prices-field
select:focus,
.dark
.product-prices-field
select:focus {
  color:
    #ffffff;

  background:
    #000000;

  border-color:
    #ffffff;

  outline-color:
    #ffffff;
}


html[data-theme="dark"]
.product-prices-channel-price-preview,
body.dark
.product-prices-channel-price-preview,
.dark
.product-prices-channel-price-preview {
  background:
    #0b0b0b;
}


html[data-theme="dark"]
.product-prices-table
th,
body.dark
.product-prices-table
th,
.dark
.product-prices-table
th {
  color:
    #ffffff;

  background:
    #101010;

  border-right-color:
    #3a3a3a;

  border-bottom-color:
    #555555;
}


html[data-theme="dark"]
.product-prices-table
td,
body.dark
.product-prices-table
td,
.dark
.product-prices-table
td {
  border-right-color:
    #292929;

  border-bottom-color:
    #383838;
}


html[data-theme="dark"]
.product-prices-channel__price,
body.dark
.product-prices-channel__price,
.dark
.product-prices-channel__price {
  color:
    #ffffff;

  background:
    #101010;

  border-color:
    #3b3b3b;
}


/* =========================================================
   DARK · TEXTO MÁS MARCADO
   ========================================================= */

html[data-theme="dark"]
.product-prices-modal
strong,
html[data-theme="dark"]
.product-prices-modal
h3,
body.dark
.product-prices-modal
strong,
body.dark
.product-prices-modal
h3,
.dark
.product-prices-modal
strong,
.dark
.product-prices-modal
h3 {
  color:
    #ffffff;
}


html[data-theme="dark"]
.product-prices-modal
small,
html[data-theme="dark"]
.product-prices-modal
p,
body.dark
.product-prices-modal
small,
body.dark
.product-prices-modal
p,
.dark
.product-prices-modal
small,
.dark
.product-prices-modal
p {
  color:
    #a8a8a8;
}


/* =========================================================
   LIGHT MODE · BLANCO REAL
   ========================================================= */

html:not([data-theme="dark"])
.product-prices-modal {
  background:
    #ffffff;

  border-color:
    #aaaaaa;
}


html:not([data-theme="dark"])
.product-prices-modal__head,
html:not([data-theme="dark"])
.product-prices-modal__footer {
  background:
    #ffffff;
}


html:not([data-theme="dark"])
.product-prices-channel-config-card {
  background:
    #ffffff;

  border-color:
    #bdbdbd;
}


html:not([data-theme="dark"])
.product-prices-channel-config-card
header {
  background:
    #f5f5f5;

  border-bottom-color:
    #c4c4c4;
}


html:not([data-theme="dark"])
.product-prices-channel-price-preview {
  background:
    #f7f7f7;
}


/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (
  max-width:
  900px
) {
  .product-prices-form-section__title {
    border-right:
      0;

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


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


  .product-prices-product-summary
  article:nth-child(2) {
    border-right:
      0;
  }


  .product-prices-product-summary
  article:nth-child(-n + 2) {
    border-bottom:
      1px
      solid
      var(
        --pp-divider
      );
  }


  .product-prices-list-preview-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .product-prices-list-preview:nth-child(2) {
    border-right:
      0;
  }


  .product-prices-list-preview:nth-child(-n + 2) {
    border-bottom:
      1px
      solid
      var(
        --pp-divider
      );
  }
}


/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (
  max-width:
  640px
) {
  .product-prices-product-summary {
    grid-template-columns:
      1fr
      1fr;
  }


  .product-prices-channel-config-grid {
    gap:
      8px;
  }


  .product-prices-channel-config-card {
    border-color:
      var(
        --pp-divider-strong
      );
  }


  .product-prices-modal__footer {
    border-top-color:
      var(
        --pp-divider-strong
      );
  }
}


/* =========================================================
   RESPONSIVE · MOBILE CHICO
   ========================================================= */

@media (
  max-width:
  430px
) {
  .product-prices-product-summary {
    grid-template-columns:
      1fr;
  }


  .product-prices-product-summary
  article {
    border-right:
      0;

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


  .product-prices-product-summary
  article:last-child {
    border-bottom:
      0;
  }


  .product-prices-list-preview-grid {
    grid-template-columns:
      1fr;
  }


  .product-prices-list-preview {
    border-right:
      0;

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


  .product-prices-list-preview:last-child {
    border-bottom:
      0;
  }
}