/* =========================================================
   WIRTZ HUB · MANUFACTURA · COMPARADOR DE PROVEEDORES
   ========================================================= */

.comparador-proveedores-page {
  --comparador-bg:
    #f4f5f7;

  --comparador-panel:
    #ffffff;

  --comparador-panel-alt:
    #f8f9fb;

  --comparador-panel-soft:
    #f1f3f5;

  --comparador-line:
    #dfe3e8;

  --comparador-line-strong:
    #c9ced6;

  --comparador-text:
    #111318;

  --comparador-text-soft:
    #6d7480;

  --comparador-text-muted:
    #9299a3;

  --comparador-accent:
    #111318;

  --comparador-accent-text:
    #ffffff;

  --comparador-success:
    #137a3f;

  --comparador-success-bg:
    #eaf7ef;

  --comparador-danger:
    #b42318;

  --comparador-danger-bg:
    #fff0ee;

  --comparador-warning:
    #9a6700;

  --comparador-warning-bg:
    #fff7d6;

  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    16px;

  box-sizing:
    border-box;

  color:
    var(
      --comparador-text
    );

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

[data-theme="dark"]
.comparador-proveedores-page {
  --comparador-bg:
    #000000;

  --comparador-panel:
    #090909;

  --comparador-panel-alt:
    #101010;

  --comparador-panel-soft:
    #161616;

  --comparador-line:
    #242424;

  --comparador-line-strong:
    #343434;

  --comparador-text:
    #f5f5f5;

  --comparador-text-soft:
    #a3a3a3;

  --comparador-text-muted:
    #737373;

  --comparador-accent:
    #f5f5f5;

  --comparador-accent-text:
    #090909;

  --comparador-success:
    #4ade80;

  --comparador-success-bg:
    #092115;

  --comparador-danger:
    #f87171;

  --comparador-danger-bg:
    #271010;

  --comparador-warning:
    #facc15;

  --comparador-warning-bg:
    #241d05;
}


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

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

.comparador-proveedores-page button,
.comparador-proveedores-page input,
.comparador-proveedores-page select {
  font:
    inherit;
}


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

.comparador-proveedores-header {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    16px 18px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    14px;

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-header__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;
}

.comparador-proveedores-header__icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    11px;

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-header__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-header__eyebrow {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

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

.comparador-proveedores-header__title {
  margin:
    2px 0 0;

  font-size:
    21px;

  line-height:
    1.2;

  font-weight:
    850;

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

.comparador-proveedores-header__description {
  max-width:
    720px;

  margin:
    3px 0 0;

  font-size:
    13px;

  line-height:
    1.45;

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

.comparador-proveedores-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


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

.comparador-proveedores-button {
  min-height:
    38px;

  padding:
    0 13px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  font-size:
    13px;

  font-weight:
    750;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    color 120ms ease;
}

.comparador-proveedores-button:disabled {
  opacity:
    0.45;

  cursor:
    default;
}

.comparador-proveedores-button--secondary {
  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-button--secondary:hover:not(:disabled) {
  border-color:
    var(
      --comparador-line-strong
    );

  background:
    var(
      --comparador-panel-soft
    );
}

.comparador-proveedores-button--primary {
  border-color:
    var(
      --comparador-accent
    );

  color:
    var(
      --comparador-accent-text
    );

  background:
    var(
      --comparador-accent
    );
}


/* =========================================================
   MODOS
   ========================================================= */

.comparador-proveedores-mode {
  width:
    100%;

  display:
    grid;

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

  gap:
    8px;

  padding:
    6px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    13px;

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-mode__button {
  min-width:
    0;

  min-height:
    42px;

  padding:
    0 14px;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  font-size:
    13px;

  font-weight:
    750;

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

  background:
    transparent;

  cursor:
    pointer;
}

.comparador-proveedores-mode__button:hover {
  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-mode__button.is-active {
  border-color:
    var(
      --comparador-line-strong
    );

  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel-soft
    );
}


/* =========================================================
   BLOQUES
   ========================================================= */

.comparador-proveedores-search-panel,
.comparador-proveedores-selection,
.comparador-proveedores-filter-section,
.comparador-proveedores-results {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    14px;

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-section-head {
  min-height:
    54px;

  padding:
    11px 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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

.comparador-proveedores-section-head > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-section-head span {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

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

.comparador-proveedores-section-head strong {
  font-size:
    14px;

  font-weight:
    850;

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


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

.comparador-proveedores-search {
  width:
    calc(
      100% - 28px
    );

  min-height:
    48px;

  margin:
    14px;

  padding:
    5px 5px 5px 13px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --comparador-line-strong
    );

  border-radius:
    11px;

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-search:focus-within {
  border-color:
    var(
      --comparador-text-soft
    );
}

.comparador-proveedores-search__icon {
  display:
    grid;

  place-items:
    center;

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

.comparador-proveedores-search__input {
  width:
    100%;

  min-width:
    0;

  height:
    36px;

  padding:
    0 5px;

  border:
    0;

  outline:
    0;

  font-size:
    14px;

  font-weight:
    600;

  color:
    var(
      --comparador-text
    );

  background:
    transparent;
}

.comparador-proveedores-search__input::placeholder {
  color:
    var(
      --comparador-text-muted
    );
}

.comparador-proveedores-search__clear {
  width:
    32px;

  height:
    32px;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  display:
    grid;

  place-items:
    center;

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

  background:
    transparent;

  cursor:
    pointer;
}

.comparador-proveedores-search__clear:hover {
  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel-soft
    );
}

.comparador-proveedores-search__button {
  min-width:
    98px;
}


/* =========================================================
   RESULTADOS DE BÚSQUEDA
   ========================================================= */

.comparador-proveedores-search-results {
  width:
    100%;

  padding:
    0 14px 14px;
}

.comparador-proveedores-search-result-list {
  width:
    100%;

  display:
    grid;

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

  gap:
    8px;
}

.comparador-proveedores-search-result {
  width:
    100%;

  min-width:
    0;

  min-height:
    68px;

  padding:
    10px 12px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    10px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  text-align:
    left;

  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel-alt
    );

  cursor:
    pointer;
}

.comparador-proveedores-search-result:hover {
  border-color:
    var(
      --comparador-line-strong
    );

  background:
    var(
      --comparador-panel-soft
    );
}

.comparador-proveedores-search-result.is-selected {
  border-color:
    var(
      --comparador-success
    );
}

.comparador-proveedores-search-result__icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    9px;

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

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-search-result__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-search-result__content strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    850;
}

.comparador-proveedores-search-result__content span,
.comparador-proveedores-search-result__content small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

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

.comparador-proveedores-search-result__meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  font-size:
    11px;

  font-weight:
    700;

  white-space:
    nowrap;

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

.comparador-proveedores-search-state {
  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border:
    1px dashed
    var(
      --comparador-line
    );

  border-radius:
    10px;

  font-size:
    13px;

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

  background:
    var(
      --comparador-panel-alt
    );
}


/* =========================================================
   SELECCIÓN
   ========================================================= */

.comparador-proveedores-link-button {
  min-height:
    32px;

  padding:
    0 9px;

  border:
    0;

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  font-size:
    12px;

  font-weight:
    750;

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

  background:
    transparent;

  cursor:
    pointer;
}

.comparador-proveedores-link-button:hover {
  color:
    var(
      --comparador-danger
    );

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

.comparador-proveedores-selection__items {
  display:
    grid;

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

  gap:
    8px;

  padding:
    12px 14px 14px;
}

.comparador-proveedores-selected-item {
  min-width:
    0;

  min-height:
    58px;

  padding:
    8px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    10px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-selected-item__icon {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    8px;

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

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-selected-item__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-selected-item__content strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    850;
}

.comparador-proveedores-selected-item__content small {
  font-size:
    10px;

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

.comparador-proveedores-selected-item__remove {
  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  display:
    grid;

  place-items:
    center;

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

  background:
    transparent;

  cursor:
    pointer;
}

.comparador-proveedores-selected-item__remove:hover {
  color:
    var(
      --comparador-danger
    );

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


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

.comparador-proveedores-metrics {
  width:
    100%;

  display:
    grid;

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

  gap:
    8px;
}

.comparador-proveedores-metric {
  min-width:
    0;

  min-height:
    76px;

  padding:
    12px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    12px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-metric__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    9px;

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

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-metric__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-metric__content small {
  font-size:
    10px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

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

.comparador-proveedores-metric__content strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    17px;

  line-height:
    1.15;

  font-weight:
    900;

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


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

.comparador-proveedores-filter-toggle {
  width:
    100%;

  min-height:
    48px;

  padding:
    0 14px;

  border:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  color:
    var(
      --comparador-text
    );

  background:
    transparent;

  cursor:
    pointer;
}

.comparador-proveedores-filter-toggle > span {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  font-size:
    13px;

  font-weight:
    800;
}

.comparador-proveedores-filter-section.is-open
.comparador-proveedores-filter-toggle {
  border-bottom:
    1px solid
    var(
      --comparador-line
    );
}

.comparador-proveedores-filters {
  display:
    grid;

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

  gap:
    10px;

  padding:
    14px;
}

.comparador-proveedores-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}

.comparador-proveedores-field > span {
  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

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

.comparador-proveedores-field input,
.comparador-proveedores-field select {
  width:
    100%;

  min-width:
    0;

  height:
    40px;

  padding:
    0 10px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    9px;

  outline:
    0;

  font-size:
    13px;

  font-weight:
    650;

  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-field input:focus,
.comparador-proveedores-field select:focus {
  border-color:
    var(
      --comparador-line-strong
    );
}

.comparador-proveedores-filters__actions {
  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


/* =========================================================
   SPINNER
   ========================================================= */

.comparador-proveedores-spinner {
  width:
    18px;

  height:
    18px;

  flex:
    0 0 18px;

  border:
    2px solid
    var(
      --comparador-line
    );

  border-top-color:
    var(
      --comparador-text
    );

  border-radius:
    50%;

  animation:
    comparador-proveedores-spin
    650ms
    linear
    infinite;
}

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


/* =========================================================
   PARTE 2 CONTINÚA DESDE ACÁ
   ========================================================= *//* =========================================================
   RESULTADOS
   ========================================================= */

.comparador-proveedores-results {
  overflow:
    hidden;
}

.comparador-proveedores-results__count {
  font-size:
    11px;

  font-weight:
    750;

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

.comparador-proveedores-results__body {
  width:
    100%;

  min-width:
    0;

  padding:
    14px;
}


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

.comparador-proveedores-empty {
  min-height:
    190px;

  padding:
    28px;

  border:
    1px dashed
    var(
      --comparador-line
    );

  border-radius:
    12px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  text-align:
    center;

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

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-empty__icon {
  width:
    42px;

  height:
    42px;

  margin-bottom:
    4px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    11px;

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

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-empty strong {
  font-size:
    14px;

  font-weight:
    850;

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

.comparador-proveedores-empty p {
  max-width:
    520px;

  margin:
    0;

  font-size:
    12px;

  line-height:
    1.5;
}

.comparador-proveedores-empty.is-error {
  border-color:
    var(
      --comparador-danger
    );

  color:
    var(
      --comparador-danger
    );

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


/* =========================================================
   CABECERA COMPARACIÓN
   ========================================================= */

.comparador-proveedores-comparison-header {
  width:
    100%;

  min-width:
    0;

  min-height:
    64px;

  margin-bottom:
    10px;

  padding:
    10px 12px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    11px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-comparison-header__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.comparador-proveedores-comparison-header__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    9px;

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

  background:
    var(
      --comparador-panel
    );
}

.comparador-proveedores-comparison-header__main > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-comparison-header__main strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    14px;

  font-weight:
    850;

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

.comparador-proveedores-comparison-header__main span {
  font-size:
    10px;

  font-weight:
    700;

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

.comparador-proveedores-comparison-header__meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.comparador-proveedores-comparison-header__meta span {
  min-height:
    25px;

  padding:
    0 8px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  font-size:
    10px;

  font-weight:
    750;

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

  background:
    var(
      --comparador-panel
    );
}


/* =========================================================
   TABLA · WRAP
   ========================================================= */

.comparador-proveedores-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    12px;

  background:
    var(
      --comparador-panel
    );
}


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

.comparador-proveedores-table {
  width:
    100%;

  min-width:
    1040px;

  table-layout:
    fixed;

  border-collapse:
    collapse;

  border-spacing:
    0;
}

.comparador-proveedores-table col.comparador-proveedores-col-ranking {
  width:
    78px;
}

.comparador-proveedores-table col.comparador-proveedores-col-provider {
  width:
    30%;
}

.comparador-proveedores-table col.comparador-proveedores-col-price {
  width:
    22%;
}

.comparador-proveedores-table col.comparador-proveedores-col-difference {
  width:
    19%;
}

.comparador-proveedores-table col.comparador-proveedores-col-weight {
  width:
    11%;
}

.comparador-proveedores-table col.comparador-proveedores-col-date {
  width:
    18%;
}


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

.comparador-proveedores-table thead {
  background:
    var(
      --comparador-panel-soft
    );
}

.comparador-proveedores-table th {
  height:
    42px;

  padding:
    0 12px;

  border-bottom:
    1px solid
    var(
      --comparador-line
    );

  text-align:
    left;

  vertical-align:
    middle;

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

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

  white-space:
    nowrap;
}


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

.comparador-proveedores-table td {
  min-width:
    0;

  padding:
    12px;

  border-bottom:
    1px solid
    var(
      --comparador-line
    );

  vertical-align:
    middle;

  color:
    var(
      --comparador-text
    );

  background:
    var(
      --comparador-panel
    );
}

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

.comparador-proveedores-table tbody tr:hover td {
  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-table tbody tr.is-best td {
  background:
    var(
      --comparador-success-bg
    );
}


/* =========================================================
   RANKING
   ========================================================= */

.comparador-proveedores-table-ranking {
  min-width:
    38px;

  height:
    29px;

  padding:
    0 8px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  font-size:
    11px;

  font-weight:
    850;

  white-space:
    nowrap;

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

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-table-ranking.is-best {
  border-color:
    var(
      --comparador-success
    );

  color:
    var(
      --comparador-success
    );

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


/* =========================================================
   PROVEEDOR
   ========================================================= */

.comparador-proveedores-table-provider {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.comparador-proveedores-table-provider strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  line-height:
    1.25;

  font-weight:
    850;

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

.comparador-proveedores-table-provider small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  line-height:
    1.3;

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


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

.comparador-proveedores-table-price {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    center;

  gap:
    2px 7px;
}

.comparador-proveedores-table-price > strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    15px;

  line-height:
    1.25;

  font-weight:
    900;

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

.comparador-proveedores-table-price__currency {
  width:
    fit-content;

  min-height:
    21px;

  padding:
    0 6px;

  border:
    1px solid
    var(
      --comparador-line
    );

  border-radius:
    6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;

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

  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-table-price small {
  grid-column:
    1 / -1;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

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


/* =========================================================
   DIFERENCIA
   ========================================================= */

.comparador-proveedores-table-difference {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    2px;
}

.comparador-proveedores-table-difference strong {
  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    900;

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

.comparador-proveedores-table-difference > span {
  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    800;

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

.comparador-proveedores-table-difference small {
  font-size:
    9px;

  line-height:
    1.3;

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

.comparador-proveedores-table-difference.is-best strong {
  color:
    var(
      --comparador-success
    );
}

.comparador-proveedores-table-difference.is-best > span {
  color:
    var(
      --comparador-success
    );
}


/* =========================================================
   VALOR SIMPLE
   ========================================================= */

.comparador-proveedores-table-value {
  font-size:
    12px;

  font-weight:
    750;

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


/* =========================================================
   FECHA
   ========================================================= */

.comparador-proveedores-table-date {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.comparador-proveedores-table-date strong {
  font-size:
    12px;

  line-height:
    1.3;

  font-weight:
    800;

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

.comparador-proveedores-table-date small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

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


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

.comparador-proveedores-pagination {
  min-height:
    0;

  padding:
    0 14px;
}

.comparador-proveedores-pagination:not(:empty) {
  min-height:
    58px;

  padding:
    10px 14px;

  border-top:
    1px solid
    var(
      --comparador-line
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}

.comparador-proveedores-pagination__info {
  font-size:
    11px;

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

.comparador-proveedores-pagination__info strong {
  color:
    var(
      --comparador-text
    );
}

.comparador-proveedores-pagination__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


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

.comparador-proveedores-table-wrap::-webkit-scrollbar {
  height:
    8px;
}

.comparador-proveedores-table-wrap::-webkit-scrollbar-track {
  background:
    var(
      --comparador-panel-alt
    );
}

.comparador-proveedores-table-wrap::-webkit-scrollbar-thumb {
  border:
    2px solid
    var(
      --comparador-panel-alt
    );

  border-radius:
    999px;

  background:
    var(
      --comparador-line-strong
    );
}


/* =========================================================
   SCROLL DE PÁGINA
   ========================================================= */

.comparador-proveedores-page {
  height:
    auto;

  overflow-x:
    hidden;

  overflow-y:
    visible;
}

.comparador-proveedores-results,
.comparador-proveedores-results__body {
  height:
    auto;

  max-height:
    none;

  overflow:
    visible;
}


/* =========================================================
   RESPONSIVE 1300
   ========================================================= */

@media (
  max-width:
    1300px
) {
  .comparador-proveedores-selection__items {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .comparador-proveedores-table {
    min-width:
      980px;
  }
}


/* =========================================================
   RESPONSIVE 1100
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .comparador-proveedores-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .comparador-proveedores-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .comparador-proveedores-search-result-list {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   RESPONSIVE 850
   ========================================================= */

@media (
  max-width:
    850px
) {
  .comparador-proveedores-page {
    padding:
      12px;
  }

  .comparador-proveedores-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .comparador-proveedores-header__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }

  .comparador-proveedores-mode {
    grid-template-columns:
      1fr;
  }

  .comparador-proveedores-comparison-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .comparador-proveedores-comparison-header__meta {
    justify-content:
      flex-start;
  }
}


/* =========================================================
   RESPONSIVE 680
   ========================================================= */

@media (
  max-width:
    680px
) {
  .comparador-proveedores-page {
    gap:
      10px;

    padding:
      8px;
  }

  .comparador-proveedores-header {
    padding:
      13px;
  }

  .comparador-proveedores-header__title {
    font-size:
      18px;
  }

  .comparador-proveedores-header__actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .comparador-proveedores-header__actions
  .comparador-proveedores-button {
    width:
      100%;
  }

  .comparador-proveedores-search {
    width:
      calc(
        100% - 20px
      );

    margin:
      10px;

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

  .comparador-proveedores-search__button {
    grid-column:
      1 / -1;

    width:
      100%;
  }

  .comparador-proveedores-selection__items {
    grid-template-columns:
      1fr;
  }

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

  .comparador-proveedores-filters {
    grid-template-columns:
      1fr;
  }

  .comparador-proveedores-pagination:not(:empty) {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .comparador-proveedores-pagination__actions {
    display:
      grid;

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

  .comparador-proveedores-pagination__actions
  .comparador-proveedores-button {
    width:
      100%;
  }
}


/* =========================================================
   RESPONSIVE 480
   ========================================================= */

@media (
  max-width:
    480px
) {
  .comparador-proveedores-header__description {
    display:
      none;
  }

  .comparador-proveedores-search-result {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }

  .comparador-proveedores-search-result__meta {
    grid-column:
      2;

    justify-content:
      flex-start;
  }
}


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

@media (
  prefers-reduced-motion:
    reduce
) {
  .comparador-proveedores-page *,
  .comparador-proveedores-page *::before,
  .comparador-proveedores-page *::after {
    scroll-behavior:
      auto !important;

    transition:
      none !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .comparador-proveedores-header__actions,
  .comparador-proveedores-mode,
  .comparador-proveedores-search-panel,
  .comparador-proveedores-filter-section,
  .comparador-proveedores-pagination {
    display:
      none !important;
  }

  .comparador-proveedores-page {
    padding:
      0;

    background:
      #ffffff;
  }

  .comparador-proveedores-table-wrap {
    overflow:
      visible;

    border:
      1px solid
      #cccccc;
  }

  .comparador-proveedores-table {
    min-width:
      0;
  }
}