/*
 * BestBuy-inspired theme override
 * Tema activo: bestbuy — ver public/assets/css/themes/theme-bestbuy.css
 * Para cambiar el tema, carga el archivo correspondiente antes que este.
 */

/* ── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variables semánticas (tema por defecto: bestbuy) ─────────────── */
:root {
  /* Marca */
  --color-primary:           #003B64;
  --color-primary-hover:     #002847;
  --color-secondary:         #0457A0;
  --color-secondary-hover:   #034A8A;
  --color-accent:            #FFE000;
  --color-accent-hover:      #FFC200;

  /* Fondos */
  --color-bg:                #F0F2F5;
  --color-surface:           #FFFFFF;
  --color-surface-muted:     #F8F9FB;
  --color-bg-header:         #003B64;
  --color-bg-footer:         #141824;

  /* Textos */
  --color-text:              #1D1D1D;
  --color-text-muted:        #6D7278;
  --color-link:              #0457A0;
  --color-link-hover:        #003B64;

  /* Precios */
  --color-price:             #1D1D1D;
  --color-price-sale:        #0457A0;
  --color-price-original:    #6D7278;

  /* Botones */
  --color-btn-primary-bg:    #FFE000;
  --color-btn-primary-text:  #003B64;
  --color-btn-secondary-bg:  #0457A0;
  --color-btn-secondary-text:#FFFFFF;

  /* UI */
  --color-border:            #C5CBD5;
  --color-danger:            #BB0628;
  --color-badge-bg:          #FFE000;
  --color-badge-text:        #003B64;

  /* Tipografía */
  --font-main:               'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Forma */
  --radius-sm:               4px;
  --radius-base:             8px;
  --radius-lg:               12px;

  /* Sombras */
  --shadow-card:             0 2px 8px rgba(0,0,0,.08);
  --shadow-header:           0 2px 6px rgba(0,0,0,.15);

  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-main) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-secondary); }
a:hover { color: var(--color-primary); text-decoration: none; }

/* ── Transición de página ─────────────────────────────────────────── */
/* Exit: rápido (120ms) — completa antes del render de la nueva página (200ms) */
#main-content {
  transition: opacity .12s ease, transform .12s ease;
  will-change: opacity, transform;
}

/* Enter: suave (320ms) con ligero slide-up */
body.loaded #main-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}

/* Estado de salida */
body:not(.loaded) #main-content {
  opacity: 0;
  transform: translateY(8px);
}

/* ── HEADER (hm-*) ────────────────────────────────────────────────── */
.hm-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 1px 0 rgba(255,224,0,.15);
  transition: box-shadow .3s;
}

.hm-header--scrolled {
  box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 1px 0 rgba(255,224,0,.2);
}

/* ── Top bar ──────────────────────────────────────────────────────── */
.hm-top {
  background: #001e35;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 6px 0;
  max-height: 48px;
  overflow: hidden;
  opacity: 1;
  transition: max-height .32s cubic-bezier(.4,0,.2,1),
              opacity     .22s ease,
              padding     .32s cubic-bezier(.4,0,.2,1);
}

.hm-header--scrolled .hm-top {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.hm-top .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* Anuncio (envío gratis, etc.) */
.hm-top__announce {
  margin-right: auto;
  color: #e2edf5;
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hm-top__announce i {
  font-size: 13px;
  color: var(--color-accent);
}

/* Nav links */
.hm-top__nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.hm-top__nav-item + .hm-top__nav-item { margin-left: 0; }
.hm-top__nav-item + .hm-top__nav-item::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.18);
  margin: 0 10px;
  vertical-align: middle;
}
.hm-top__nav-link {
  color: #a8c4d8;
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  transition: color .15s;
}
.hm-top__nav-link:hover { color: var(--color-accent); text-decoration: none; }

.hm-top__nav-link--cta {
  color         : var(--color-accent);
  border        : 1px solid rgba(255,224,0,.4);
  border-radius : 3px;
  padding       : 2px 9px;
  font-weight   : 600;
  transition    : background .15s, color .15s, border-color .15s;
}
.hm-top__nav-link--cta:hover {
  background  : rgba(255,224,0,.12);
  border-color: var(--color-accent);
  color       : var(--color-accent);
}

/* TC badge */
.hm-top__tc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,224,0,.12);
  border: 1px solid rgba(255,224,0,.3);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
  padding: 2px 7px;
  margin-left: 10px;
  letter-spacing: .3px;
}

/* Redes sociales */
.hm-top__social {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 14px;
  margin-left: 10px;
  border-left: 1px solid rgba(255,255,255,.15);
}
.hm-top__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #8aabbd;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hm-top__social-link:hover {
  background: rgba(255,255,255,.1);
  color: var(--color-accent);
  text-decoration: none;
}

/* ── Middle ───────────────────────────────────────────────────────── */
.hm-mid {
  background: var(--color-primary);
  padding: 12px 0;
  transition: padding .32s cubic-bezier(.4,0,.2,1);
}

.hm-header--scrolled .hm-mid {
  padding: 6px 0;
}
.hm-mid .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

/* Hamburguer (mobile) */
.hm-mid__toggler {
  background: none;
  border: none;
  color: var(--color-surface);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  display: none;
}
@media (max-width: 991px) { .hm-mid__toggler { display: block; } }

/* Logo */
.hm-mid__logo {
  flex-shrink: 0;
  text-decoration: none;
}
.hm-mid__logo img {
  max-height: 80px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: max-height .32s cubic-bezier(.4,0,.2,1);
}

.hm-header--scrolled .hm-mid__logo img {
  max-height: 44px;
}

/* ── Search ───────────────────────────────────────────────────────── */
.hm-mid__actions {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-shrink: 0;
}

.hm-search {
  display         : flex;
  align-items     : center;
  background      : #fff;
  border-radius   : 8px;
  border          : 2.5px solid transparent;
  overflow        : visible;
  width           : 100%;
  max-width       : 560px;
  margin          : 0 auto;
  position        : relative;
  box-shadow      : 0 2px 10px rgba(0,0,0,.18);
  transition      : border-color .2s, box-shadow .2s;
}
.hm-search:focus-within {
  border-color: var(--color-accent);
  box-shadow  : 0 0 0 3px rgba(255,224,0,.28);
}

/* Ícono lupa dentro del input */
.hm-search__icon {
  position      : absolute;
  left          : 14px;
  top           : 50%;
  transform     : translateY(-50%);
  color         : #9ca3af;
  font-size     : 16px;
  pointer-events: none;
  z-index       : 1;
}

.hm-search__input {
  flex         : 1;
  border       : none;
  outline      : none;
  padding      : 0 14px 0 42px;
  font-size    : 15px;
  color        : #1a1a1a;
  min-width    : 0;
  height       : 44px;
  border-radius: 6px 0 0 6px;
  background   : transparent;
}
.hm-search__input::placeholder { color: #b0b8c1; font-size: 14px; }

.hm-search__clear {
  background  : none;
  border      : none;
  padding     : 0 10px;
  color       : #9ca3af;
  font-size   : 14px;
  cursor      : pointer;
  flex-shrink : 0;
  display     : flex;
  align-items : center;
  height      : 44px;
  transition  : color .15s;
}
.hm-search__clear:hover { color: #374151; }

.hm-search__select-wrap {
  display    : flex;
  align-items: center;
  border-left: 1.5px solid #e0e4ea;
  background : #f4f5f7;
  flex-shrink: 0;
  position   : relative;
  transition : background .15s;
}
.hm-search__select-wrap:hover { background: #eceef1; }
.hm-search__select-wrap::after {
  content        : '';
  position       : absolute;
  right          : 10px;
  top            : 50%;
  transform      : translateY(-50%);
  width          : 0;
  height         : 0;
  border-left    : 4px solid transparent;
  border-right   : 4px solid transparent;
  border-top     : 5px solid var(--color-primary);
  pointer-events : none;
}
.hm-search__select {
  -webkit-appearance: none;
  appearance : none;
  border     : none;
  padding    : 0 28px 0 12px;
  font-size  : 13px;
  font-weight: 600;
  color      : #444;
  background : transparent;
  outline    : none;
  height     : 44px;
  cursor     : pointer;
  max-width  : 120px;
}

.hm-search__btn {
  background     : var(--color-accent);
  border         : none;
  padding        : 0;
  width          : 54px;
  font-size      : 20px;
  color          : var(--color-primary);
  cursor         : pointer;
  height         : 44px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  border-radius  : 0 6px 6px 0;
  transition     : background .15s, transform .1s;
  font-weight    : 700;
}
.hm-search__btn:hover  { background: var(--color-accent-hover); }
.hm-search__btn:active { background: #e0a800; transform: scale(.97); }

/* ── Resultados dropdown ── */
@keyframes hmDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hm-search__results {
  position     : absolute;
  top          : calc(100% + 8px);
  left         : 0;
  right        : 0;
  background   : #fff;
  border       : 1px solid #dde3ec;
  border-top   : 3px solid var(--color-primary);
  border-radius: 0 0 8px 8px;
  box-shadow   : 0 14px 40px rgba(0,0,0,.16);
  z-index      : 2000;
  list-style   : none;
  padding      : 0;
  margin       : 0;
  max-height   : 440px;
  overflow-y   : auto;
  animation    : hmDropIn .15s ease-out both;
}

/* Encabezado "Sugerencias" */
.hm-search__results-hd {
  padding       : 10px 16px 8px;
  font-size     : 11px;
  font-weight   : 700;
  color         : #9ca3af;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom : 1px solid var(--color-bg);
}

.hm-search__result-item { border-bottom: 1px solid #f3f4f6; }
.hm-search__result-item:last-child { border-bottom: none; }
.hm-search__result-item--active,
.hm-search__result-item--active .hm-search__result-link { background: #f0f4ff; }
.hm-search__result-item--active .hm-search__result-title { color: var(--color-secondary); }

.hm-search__result-link {
  display        : flex;
  align-items    : center;
  gap            : 14px;
  padding        : 12px 16px;
  text-decoration: none;
  color          : #1a1a1a;
  transition     : background .12s;
}
.hm-search__result-link:hover {
  background    : #f0f4fb;
  text-decoration: none;
}
.hm-search__result-link:hover .hm-search__result-title { color: var(--color-secondary); }

/* Imagen del resultado */
.hm-search__result-img {
  width        : 54px;
  height       : 54px;
  object-fit   : contain;
  border       : 1px solid #e9ecef;
  border-radius: 6px;
  background   : #fafafa;
  flex-shrink  : 0;
  padding      : 4px;
}

.hm-search__result-body { flex: 1; min-width: 0; }
.hm-search__result-title {
  font-size    : 14px;
  font-weight  : 600;
  color        : #1a1a1a;
  line-height  : 1.35;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  transition   : color .12s;
}
.hm-search__result-meta {
  font-size : 12px;
  color     : #6b7280;
  margin-top: 3px;
}
.hm-search__hl {
  background  : #fff5b0;
  color       : #1a1a1a;
  font-weight : 700;
  border-radius: 2px;
  padding     : 0 1px;
}

.hm-search__result-price {
  display    : flex;
  align-items: center;
  gap        : 6px;
  margin-top : 4px;
}
.hm-search__result-price--final {
  font-size  : 13px;
  font-weight: 700;
  color      : var(--color-secondary);
}
.hm-search__result-price--old {
  font-size      : 11px;
  color          : #9ca3af;
  text-decoration: line-through;
}

/* Rating en resultados del autocomplete */
.hm-search__result-rating {
  display    : flex;
  align-items: center;
  gap        : 2px;
  margin-top : 2px;
}
.hm-star { font-size: 10px; }
.hm-star--full  { color: #f5a623; }
.hm-star--half  { color: #f5a623; }
.hm-star--empty { color: #f5a623; opacity: 0.25; }
.hm-search__result-rating-count {
  font-size : 10px;
  color     : #9ca3af;
  margin-left: 2px;
}

/* Skeleton de carga del autocomplete */
.hm-skel__img {
  width        : 54px;
  height       : 54px;
  flex-shrink  : 0;
  border-radius: 6px;
  background   : #dde1e7;
  background-image: linear-gradient(90deg,#dde1e7 25%,#eef0f3 50%,#dde1e7 75%);
  background-size : 200% 100%;
  animation    : wbShimmer 1.4s infinite;
}
.hm-skel__body {
  flex    : 1;
  display : flex;
  flex-direction: column;
  gap     : 6px;
  padding : 4px 0;
}
.hm-skel__line {
  border-radius: 4px;
  background   : #dde1e7;
  background-image: linear-gradient(90deg,#dde1e7 25%,#eef0f3 50%,#dde1e7 75%);
  background-size : 200% 100%;
  animation    : wbShimmer 1.4s infinite;
}
.hm-skel__line--title { height: 13px; width: 80%; }
.hm-skel__line--meta  { height: 11px; width: 50%; }
.hm-skel__line--price { height: 11px; width: 30%; }

/* Footer "Ver todos los resultados" */
.hm-search__more {
  padding   : 12px 16px;
  border-top: 2px solid var(--color-bg);
  background: #f8f9fb;
}
.hm-search__more a {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  color          : var(--color-primary);
  font-size      : 13px;
  font-weight    : 700;
  text-decoration: none;
  padding        : 8px 0;
  border-radius  : 6px;
  transition     : background .15s;
}
.hm-search__more a:hover {
  background    : #e8f0ff;
  text-decoration: none;
}

/* Mensaje vacío / sin resultados */
.hm-search__msg {
  padding   : 22px 16px;
  color     : #9ca3af;
  font-size : 14px;
  text-align: center;
  display   : flex;
  flex-direction: column;
  align-items: center;
  gap       : 6px;
}
.hm-search__msg i { font-size: 1.6rem; color: #d1d5db; }

/* ── Contact (Llámanos) ───────────────────────────────────────────── */
.hm-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}
@media (max-width: 991px) { .hm-contact { display: none !important; } }
.hm-contact__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hm-contact__icon i { font-size: 15px; color: var(--color-accent); }
.hm-contact__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.55);
  margin: 0 0 2px;
  display: block;
}
.hm-contact__phone {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-surface);
  text-decoration: none;
  display: block;
  letter-spacing: .3px;
}
.hm-contact__phone:hover { color: var(--color-accent); text-decoration: none; }

/* ── Icon buttons (wishlist / user sin sesión) ────────────────────── */
.hm-icon-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 22px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.hm-icon-btn:hover {
  background: rgba(255,255,255,.1);
  color: var(--color-accent);
  text-decoration: none;
}

/* ── User dropdown ────────────────────────────────────────────────── */
.hm-user-wrap { position: relative; flex-shrink: 0; }
.hm-user-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.35);
  cursor: pointer;
  transition: border-color .15s;
}
.hm-user-thumb:hover { border-color: var(--color-accent); }
.hm-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  z-index: 2000;
  padding: 4px 0;
}
.hm-user-dropdown.show { display: block; }
.hm-user-dropdown a,
.hm-user-dropdown span {
  display: block;
  padding: 10px 18px;
  color: var(--color-text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--color-bg);
}
.hm-user-dropdown a:last-child,
.hm-user-dropdown span:last-child { border-bottom: none; }
.hm-user-dropdown a:hover,
.hm-user-dropdown span:hover {
  background: #f4f7fb;
  color: var(--color-secondary);
  text-decoration: none;
}

/* ── BOTTOM NAV ─────────────────────────────────────────────────── */
.hm-nav {
  background: var(--color-secondary);
  border-top: 3px solid var(--color-accent);
  position: relative;
  overflow: visible;
  height: 46px;
}
@media (max-width: 991px) { .hm-nav { display: none !important; } }
.hm-nav .container {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* ── MEGA MENU (mm-*) ─────────────────────────────────────────────── */

/* Raíz — flex item en .hm-nav .container */
.mm-root {
  position: static;         /* panel se posiciona relativo a .hm-nav */
  display: flex;
  align-items: stretch;
}

/* Trigger button */
.mm-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 46px;
  background: rgba(0,0,0,.25);
  border: none;
  border-right: 1px solid rgba(255,255,255,.12);
  color: var(--color-surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: .2px;
  transition: background .15s, color .15s;
}
.mm-trigger:hover,
.mm-root--open .mm-trigger {
  background: rgba(0,0,0,.4);
  color: var(--color-accent);
}

.mm-trigger__bars  { font-size: 16px; }
.mm-trigger__text  { font-size: 13px; }
.mm-trigger__arrow { font-size: 10px; opacity: .65; margin-left: 2px; }

/* Panel — ocupa todo el ancho de .hm-nav */
.mm-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: row;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 10px 32px rgba(0,0,0,.18);
  z-index: 1800;
  max-height: 420px;
  overflow: hidden;
}
.mm-panel--visible { display: flex; }

/* Sidebar L1 */
.mm-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #f4f6f9;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.mm-sidebar__item { border-bottom: 1px solid rgba(0,0,0,.04); }
.mm-sidebar__item:last-child { border-bottom: none; }
.mm-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: var(--color-text) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .1s, color .1s;
}
.mm-sidebar__link:hover,
.mm-sidebar__item--active .mm-sidebar__link {
  background: var(--color-surface);
  color: var(--color-secondary) !important;
  text-decoration: none !important;
}
.mm-sidebar__item--active .mm-sidebar__link {
  font-weight: 700;
  border-left: 3px solid var(--color-accent);
  padding-left: 11px;
}
.mm-sidebar__chevron {
  font-size: 10px;
  opacity: .45;
  flex-shrink: 0;
}
.mm-sidebar__item--active .mm-sidebar__chevron { opacity: 1; color: var(--color-secondary); }

/* Columnas L2 y L3 */
.mm-col {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  border-right: 1px solid var(--color-border);
}
.mm-col--l3 {
  border-right: none;
  background: #fafbfc;
}

/* Lista genérica L2 / L3 */
.mm-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.mm-list__item { border-bottom: 1px solid rgba(0,0,0,.04); }
.mm-list__item:last-child { border-bottom: none; }
.mm-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  color: var(--color-text) !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: background .1s, color .1s;
}
.mm-list__link:hover,
.mm-list__item--active .mm-list__link {
  background: #f0f4fb;
  color: var(--color-secondary) !important;
  text-decoration: none !important;
}
.mm-list__item--active .mm-list__link { font-weight: 600; }
.mm-list__chevron { font-size: 10px; opacity: .4; flex-shrink: 0; }
.mm-list__item--active .mm-list__chevron { opacity: 1; color: var(--color-secondary); }

/* L3 — sin chevron, más compacto */
.mm-list--l3 .mm-list__link { padding: 8px 16px; }
.mm-list__link--l3 { font-size: 13px; color: #444 !important; }
.mm-list__link--l3:hover { color: var(--color-secondary) !important; background: #edf2fb; }

/* Título de sección L3 */
.mm-col__title {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 4px;
}

/* Hint (estado vacío) */
.mm-hint {
  padding: 24px 20px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  margin: 0;
}
.mm-hint--sm { padding: 16px 20px; font-size: 12px; }

/* Skeleton loader */
.mm-skeleton { padding: 10px 14px; }
.mm-skeleton__row {
  height: 14px;
  background: linear-gradient(90deg, #e8eaed 25%, #f4f5f7 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: mmSkeletonShimmer 1.4s infinite;
  border-radius: 4px;
  margin-bottom: 10px;
}
.mm-skeleton__row:nth-child(even)  { width: 75%; }
.mm-skeleton__row:nth-child(odd)   { width: 90%; }
@keyframes mmSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile menu overlay (Porto) */
.mobile-menu-toggler { color: var(--color-surface) !important; }
.mmenu-active .mobile-menu-container {
  background-color: var(--color-primary) !important;
}

/* ── PAGE BODY / MAIN ────────────────────────────────────────────── */
.main { background-color: var(--color-bg) !important; }

/* ── BREADCRUMB ──────────────────────────────────────────────────────── */
.bc-nav {
  padding: 0;
  background: transparent;
}
.bc-nav--bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
}
.bc-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bc-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
}
.bc-item + .bc-item::before {
  content: '›';
  margin: 0 7px;
  color: var(--color-border);
  font-size: 16px;
  line-height: 1;
}
.bc-link {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color .15s;
}
.bc-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.bc-item--active {
  color: var(--color-text);
  font-weight: 500;
}
/* hero variant — white text on dark background */
.bc-nav--hero .bc-item                       { color: rgba(255,255,255,.75); }
.bc-nav--hero .bc-item + .bc-item::before    { color: rgba(255,255,255,.35); }
.bc-nav--hero .bc-link                       { color: rgba(255,255,255,.9) !important; }
.bc-nav--hero .bc-link:hover                 { color: var(--color-accent) !important; }
.bc-nav--hero .bc-item--active               { color: var(--color-accent); font-weight: 600; }

/* ── PRODUCT CARDS ───────────────────────────────────────────────── */
.product-default {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
  transition: box-shadow .2s, transform .2s !important;
  overflow: hidden;
}

.product-default:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.14) !important;
  transform: translateY(-2px) !important;
}

.product-default figure {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid #eef0f3 !important;
  padding: 12px !important;
}

.product-default .product-details {
  padding: 12px 14px 14px !important;
}

/* Brand name */
.product-default .category-list,
.product-default .product-cat {
  color: var(--color-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}

/* Product title */
.product-default .product-title a,
.product-default h2.product-title a,
.product-default h3 a {
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.product-default .product-title a:hover,
.product-default h2.product-title a:hover {
  color: var(--color-secondary) !important;
}

/* Price */
.product-default .product-price,
.product-default .price-box .product-price {
  color: var(--color-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.product-default .old-price {
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  text-decoration: line-through !important;
}

/* Add to cart button */
.product-default .btn-add-cart,
.product-default .btn-icon.btn-add-cart {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
}

.product-default .btn-add-cart:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Wishlist icon */
.product-default .btn-icon-wish,
.product-default .added-wishlist {
  color: var(--color-secondary) !important;
  background: none !important;
  border: none !important;
}

.product-default .added-wishlist { color: var(--color-danger) !important; }

/* ── SECTION / WIDGET TITLES ─────────────────────────────────────── */
.section-title,
.section-sub-title,
h2.section-title,
h3.section-title {
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-accent) !important;
  padding-bottom: 8px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  line-height: 1.2 !important;
}


/* Info boxes (shipping, support, etc.) */
.info-box {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  border-top: 3px solid var(--color-accent) !important;
}

.info-box i { color: var(--color-secondary) !important; }

.info-box-title { color: var(--color-primary) !important; font-weight: 700 !important; }

/* ── BUTTONS (global) ────────────────────────────────────────────── */
.btn-primary,
.btn-dark {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
.btn-dark:hover {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

.btn-outline-primary-2,
.btn-outline {
  border: 2px solid var(--color-secondary) !important;
  color: var(--color-secondary) !important;
  background: transparent !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.btn-outline-primary-2:hover,
.btn-outline:hover {
  background-color: var(--color-secondary) !important;
  color: var(--color-surface) !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
.sidebar .widget {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  padding: 16px !important;
}

.sidebar .widget-title {
  color: var(--color-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.1px !important;
  border-bottom: 2px solid var(--color-accent) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

/* Filter checkboxes */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

/* Price range */
.price-slider .noUi-connect { background-color: var(--color-secondary) !important; }
.price-slider .noUi-handle { border-color: var(--color-secondary) !important; }

/* ── PAGINATION ──────────────────────────────────────────────────── */
.styled-pagination li.active a,
.styled-pagination li:hover a {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-surface) !important;
}

/* ── SINGLE PRODUCT PAGE ─────────────────────────────────────────── */

/* Título del producto */
.product-single-details .product-title,
h1.product-title {
  color: var(--color-primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}

/* Precio (ProductLikeSyscom dentro del detalle) */
.product-single-details .price-box,
.product-single-details .product-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.product-single-details .product-price .foo {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
}

.product-single-details .product-price span {
  background: var(--color-secondary) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Bloque de info (modelo, marca, stock) */
.product-single-details .product-desc {
  background: #f8f9fb !important;
  border: 1px solid #e0e3e9 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}

.product-single-details .product-desc span {
  font-size: 13px !important;
  color: var(--color-text) !important;
}

.product-single-details .product-desc span span {
  color: var(--color-secondary) !important;
  font-weight: 600 !important;
}

/* Características principales */
.product-single-details h5 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 14px 0 8px !important;
}

.product-single-details ul {
  padding-left: 0 !important;
  list-style: none !important;
}

.product-single-details ul li {
  font-size: 13px !important;
  color: var(--color-text) !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid var(--color-bg) !important;
}

.product-single-details ul li .fa-check-circle {
  color: var(--color-secondary) !important;
  margin-right: 6px !important;
}

/* Cantidad + botón carrito */
.product-single-details .product-action {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 !important;
  flex-wrap: wrap !important;
}

/* Botón "Agregar al carrito" — clase real es add-cart btn-dark */
.product-single-details .add-cart,
.product-single-details .btn-cart,
.product-single-details button.btn-dark {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

.product-single-details .add-cart:hover,
.product-single-details .btn-cart:hover,
.product-single-details button.btn-dark:hover {
  background-color: var(--color-accent-hover) !important;
  color: var(--color-primary) !important;
}

/* Wishlist */
.product-single-details .add-wishlist {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  transition: color .15s !important;
}

.product-single-details .add-wishlist:hover,
.product-single-details .added-wishlist {
  color: var(--color-danger) !important;
}

/* Social share icons */
.product-single-details .social-icons { margin-top: 14px !important; }

.product-single-details .social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  margin-right: 6px !important;
  color: #fff !important;
  transition: opacity .15s !important;
}

.product-single-details .social-icon:hover { opacity: .85 !important; }

.product-single-details .social-facebook { background: #1877f2 !important; }
.product-single-details .social-twitter  { background: #1da1f2 !important; }

/* Divider */
.product-single-details .divider {
  border-color: #e0e3e9 !important;
  margin: 12px 0 !important;
}

/* Tabs */
.product-single-tabs .nav-tabs .nav-link.active,
.product-desc-content .tab-pane .nav-link.active {
  border-top-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* ── CART / CHECKOUT ─────────────────────────────────────────────── */
.cart-table th {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
}

.order-summary .summary-title {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
  padding: 12px 16px !important;
  border-radius: 4px 4px 0 0 !important;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer-middle {
  background-color: var(--color-primary) !important;
  color: #c8d8e4 !important;
  border-top: 4px solid var(--color-accent) !important;
}

.footer-middle .widget-title,
.footer-middle h4 {
  color: var(--color-surface) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  padding-bottom: 8px !important;
}

.footer-middle a,
.footer-middle p,
.footer-middle li {
  color: #c8d8e4 !important;
  font-size: 13px !important;
}

.footer-middle a:hover { color: var(--color-accent) !important; }

.footer-ribbon {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.footer-bottom {
  background-color: #002a4a !important;
  color: #8fa8bb !important;
  font-size: 12px !important;
}

.footer-bottom a { color: #8fa8bb !important; }
.footer-bottom a:hover { color: var(--color-accent) !important; }

/* ══════════════════════════════════════
   MINI-CARRITO  mc-*
   ══════════════════════════════════════ */

/* ── Trigger ── */
.mc-wrap { position: relative; flex-shrink: 0; }

.mc-toggle {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    transition: color .2s;
}
.mc-toggle:hover { color: var(--color-accent); text-decoration: none; }

.mc-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Overlay ── */
.mc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
}
body.cart-opened .mc-overlay { display: block; }

/* ── Drawer ── */
.mc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,.18);
}
body.cart-opened .mc-drawer { transform: translateX(0); }

/* ── Header del drawer ── */
.mc-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-primary);
    color: #fff;
    flex-shrink: 0;
}
.mc-drawer__title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mc-drawer__title i { color: var(--color-accent); }

.mc-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color .2s;
}
.mc-close:hover { color: var(--color-accent); }

/* ── Lista de productos ── */
.mc-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.mc-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 32px 20px;
    margin: 0;
}

.mc-item {
    display: grid;
    grid-template-columns: 54px 1fr 24px;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-bg);
    transition: background .15s;
}
.mc-item:hover { background: #fafbfc; }

.mc-item__img-link { display: block; }
.mc-item__img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #eee;
    padding: 2px;
}

.mc-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-item__name {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.mc-item__name:hover { color: var(--color-secondary) !important; text-decoration: none !important; }
.mc-item__meta { font-size: 11px; color: #888; }
.mc-item__qty { font-weight: 700; color: #555; }

.mc-item__remove {
    background: none;
    border: none;
    color: #bbb;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .2s;
    align-self: start;
    margin-top: 2px;
}
.mc-item__remove:hover { color: var(--color-danger); }

/* ── Footer: total + botones ── */
.mc-footer {
    flex-shrink: 0;
    border-top: 2px solid var(--color-bg);
    padding: 16px 20px;
    background: #fff;
}

.mc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.mc-total__label { font-size: 14px; font-weight: 700; color: #333; }
.mc-total__price { font-size: 18px; font-weight: 700; color: var(--color-primary); }

.mc-actions { display: flex; gap: 8px; }
.mc-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    border: 2px solid transparent;
    text-align: center;
}
.mc-btn--outline {
    background: #fff !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary);
}
.mc-btn--outline:hover { background: var(--color-primary) !important; color: #fff !important; text-decoration: none; }
.mc-btn--primary {
    background: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-accent);
}
.mc-btn--primary:hover { background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover); color: var(--color-primary) !important; text-decoration: none; }

/* ── TOP BRANDS ──────────────────────────────────────────────────── */
.brand-item {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  transition: border-color .2s !important;
}

.brand-item:hover { border-color: var(--color-secondary) !important; }

/* ── PROFILE / ACCOUNT SIDEBAR ───────────────────────────────────── */
.account-sidebar .nav-link.active,
.account-sidebar .nav-item.active > a {
  background-color: var(--color-secondary) !important;
  color: var(--color-surface) !important;
  border-radius: 4px !important;
}

/* ── TOASTR NOTIFICATIONS ────────────────────────────────────────── */
#toast-container .toast-success { background-color: var(--color-primary) !important; }
#toast-container .toast-warning { background-color: #FF8800 !important; }
#toast-container .toast-error   { background-color: var(--color-danger) !important; }

/* ── LOADING OVERLAY ─────────────────────────────────────────────── */
.loading-overlay { background-color: var(--color-primary) !important; }
.bounce-loader .bounce1,
.bounce-loader .bounce2,
.bounce-loader .bounce3 {
  background-color: var(--color-accent) !important;
}

/* ── MEGA MENU ───────────────────────────────────────────────────── */

/* Nav list */
.bb-nav { position: relative; }

.bb-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-nav__item { position: static; }

.bb-nav__link {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  color: var(--color-surface) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background .15s, border-color .15s;
}

.bb-nav__link:hover,
.bb-nav__item--open .bb-nav__link,
.bb-nav__link--active {
  background-color: rgba(255,255,255,.12);
  border-bottom-color: var(--color-accent);
  color: var(--color-accent) !important;
}
.bb-nav__link--active {
  border-bottom-width: 3px;
}

/* Mega menu panel */
.bb-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 700px;
  background: var(--color-surface);
  border-top: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  display: flex;
  z-index: 9999;
  animation: bbMenuFadeIn .12s ease;
}

@keyframes bbMenuFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Left panel – level 2 */
.bb-megamenu__left {
  width: 230px;
  min-width: 230px;
  background: #f4f6f8;
  border-right: 1px solid var(--color-border);
  padding: 12px 0 16px;
  overflow-y: auto;
  max-height: 420px;
}

/* Right panel – level 3 */
.bb-megamenu__right {
  flex: 1;
  padding: 12px 20px 20px;
  overflow-y: auto;
  max-height: 420px;
}

/* Section heading */
.bb-megamenu__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  padding: 0 16px 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--color-border);
}

/* Level 2 links */
.bb-megamenu__lv2-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-megamenu__lv2-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text) !important;
  text-decoration: none;
  transition: background .1s, color .1s;
  border-left: 3px solid transparent;
}

.bb-megamenu__lv2-link:hover,
.bb-megamenu__lv2-link--active {
  background-color: var(--color-surface) !important;
  color: var(--color-secondary) !important;
  border-left-color: var(--color-accent);
}

.bb-megamenu__arrow {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1;
}

.bb-megamenu__lv2-link--active .bb-megamenu__arrow,
.bb-megamenu__lv2-link:hover   .bb-megamenu__arrow {
  color: var(--color-secondary);
}

/* Level 3 grid */
.bb-megamenu__lv3-grid {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px 12px;
}

.bb-megamenu__lv3-link {
  display: block;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--color-text) !important;
  text-decoration: none;
  border-radius: 3px;
  transition: color .1s, background .1s;
}

.bb-megamenu__lv3-link:hover {
  color: var(--color-secondary) !important;
  background: #eef3fa;
}

.bb-megamenu__empty {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

.bb-megamenu__loading {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 12px 0 0;
  font-style: italic;
}

.bb-megamenu__see-all {
  display: inline-block;
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary) !important;
  text-decoration: none;
}

.bb-megamenu__see-all:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* ── SECCIÓN PRODUCTOS DESTACADOS ───────────────────────────────── */

.ttp-section {
  background: var(--color-bg);
  padding: 28px 0 8px;
}

.ttp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-accent);
}

.ttp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 2px;
}

.ttp-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.ttp-see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 14px;
  border: 1.5px solid var(--color-secondary);
  border-radius: 4px;
  transition: background .15s, color .15s;
}

.ttp-see-all:hover {
  background: var(--color-secondary);
  color: #fff;
}

/* ── Offer Countdown Timer (ocd-*) ──────────────────────────────── */
@keyframes ocdTick {
  from { opacity: .4; transform: translateY(-4px) scale(.9); }
  to   { opacity: 1;  transform: translateY(0)    scale(1);  }
}

.ocd-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ocd-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

.ocd-units {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ocd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 5px 9px;
  min-width: 40px;
}

.ocd-unit--tick {
  animation: ocdTick .22s ease-out both;
}

.ocd-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ocd-lbl {
  font-size: 9px;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.ocd-sep {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  line-height: 1;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .ocd-label { display: none; }
  .ocd-unit  { min-width: 34px; padding: 4px 7px; }
  .ocd-num   { font-size: 15px; }
}

.ttp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .ttp-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  .ttp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 576px) {
  .ttp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ttp-title { font-size: 18px; }
  .ttp-see-all { font-size: 12px; padding: 5px 10px; }
}

/* ── OfferProducts (op-*) ────────────────────────────────────────── */
.op-section {
  background: var(--color-primary);
  border-radius: 8px;
  padding: 28px 24px 24px;
  margin: 24px 0;
}

.op-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-accent);
}

.op-header__left { flex: 1; }

.op-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  background: rgba(255, 224, 0, .12);
  border: 1px solid rgba(255, 224, 0, .35);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 6px;
}

.op-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
}

.op-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}

.op-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.op-campaign {
  margin-bottom: 24px;
}

.op-campaign:last-child {
  margin-bottom: 0;
}

.op-campaign__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 224, 0, .2);
  border-radius: 6px;
  margin-bottom: 14px;
}

.op-campaign__count {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

.op-login-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 224, 0, .3);
  border-radius: 6px;
  padding: 12px 18px;
  margin-bottom: 16px;
}

.op-login-banner__icon {
  font-size: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.op-login-banner__msg {
  flex: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  margin: 0;
}

.op-login-banner__btn {
  flex-shrink: 0;
  padding: 7px 18px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.op-login-banner__btn:hover {
  background: #e6c900;
  color: var(--color-primary);
  text-decoration: none;
}

@media (max-width: 576px) {
  .op-login-banner { flex-direction: column; text-align: center; }
}

.op-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .op-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  .op-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 576px) {
  .op-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .op-title { font-size: 18px; }
  .op-header { flex-direction: column; align-items: flex-start; }
}

/* ── RESPONSIVE TWEAKS — HEADER ──────────────────────────────────── */

/* Tablet / móvil ≤ 991px: menú lateral */
@media (max-width: 991px) {
  .mobile-menu-container,
  .mobile-nav-toggler { background-color: var(--color-primary) !important; }
  .mobile-menu li a { color: var(--color-surface) !important; border-bottom-color: rgba(255,255,255,.1) !important; }
  .mobile-menu li a:hover { color: var(--color-accent) !important; }
}

/* Móvil ≤ 767px: buscador a segunda fila */
@media (max-width: 767px) {

  .hm-mid .container {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  /* Fila 1: hamburgesa | logo | íconos */
  .hm-mid__toggler  { grid-column: 1; grid-row: 1; }
  .hm-mid__logo     { grid-column: 2; grid-row: 1; }
  .hm-mid__actions  { grid-column: 3; grid-row: 1; }

  /* Logo: tamaño compacto */
  .hm-mid__logo img { max-height: 40px !important; }

  /* Fila 2: buscador ancho completo */
  .hm-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin: 0;
  }
}

/* Móvil pequeño ≤ 480px: ajustes en el buscador */
@media (max-width: 480px) {
  .hm-search__input  { font-size: 14px; padding: 0 10px 0 38px; height: 42px; }
  .hm-search__select { font-size: 12px; padding: 0 24px 0 6px; max-width: 88px; height: 42px; }
  .hm-search__btn    { width: 44px; font-size: 18px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════
   INFO BOXES  (service-promise strip)
═══════════════════════════════════════════════════════════════ */
.ib-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 24px 0;
  background: var(--color-primary);
  border-radius: 10px;
  overflow: hidden;
}

.ib-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  padding: 20px 24px;
  transition: background .2s;
}

.ib-card:last-child { border-right: none; }

.ib-card:hover {
  background: rgba(255,255,255,.06);
  box-shadow: none;
}

.ib-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ib-text { min-width: 0; }

.ib-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px;
}

.ib-desc {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Skeleton */
.ib-card--skeleton { pointer-events: none; }

.ib-sk-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.08) 75%);
  background-size: 200% 100%;
  animation: ibShimmer 1.4s infinite;
}

.ib-sk-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.ib-sk-line {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.08) 75%);
  background-size: 200% 100%;
  animation: ibShimmer 1.4s infinite .15s;
}

.ib-sk-line--title { height: 13px; width: 60%; }
.ib-sk-line--desc  { height: 11px; width: 80%; }

@keyframes ibShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
  .ib-strip {
    grid-template-columns: 1fr;
    border-radius: 8px;
  }
  .ib-card {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .ib-card:last-child { border-bottom: none; }
}

@media (max-width: 576px) {
  .ib-strip { margin: 16px 0; }
  .ib-card { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTAINER MENU  (sidebar + hero slider)
═══════════════════════════════════════════════════════════════ */
.cm-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: start;
}

.cm-sidebar {
  background: #fff;
  border: 1px solid #e0e3e9;
  border-radius: 8px;
  overflow: hidden;
}

.cm-sidebar__head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
}

.cm-sidebar__icon { font-size: 15px; color: var(--color-accent); }

.cm-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.cm-sidebar__item { border-bottom: 1px solid var(--color-bg); }
.cm-sidebar__item:last-child { border-bottom: none; }

.cm-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.cm-sidebar__link::after {
  content: '›';
  margin-left: auto;
  font-size: 16px;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}

.cm-sidebar__link:hover {
  background: #f4f7fb;
  color: var(--color-primary);
  border-left-color: var(--color-accent);
  text-decoration: none;
}

.cm-sidebar__link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.cm-sidebar__num {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  background: #e8edf4;
  min-width: 22px;
  text-align: center;
  padding: 2px 5px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.cm-sidebar__link:hover .cm-sidebar__num {
  background: var(--color-accent);
  color: var(--color-primary);
}

.cm-sidebar__cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 13px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}

.cm-sidebar__link:hover .cm-sidebar__cat-icon {
  transform: scale(1.12);
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

.cm-sidebar__footer {
  display: flex;
  gap: 6px;
  margin: 10px 12px 12px;
}

.cm-sidebar__footer-link {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.cm-sidebar__footer-link:first-child {
  background: var(--color-accent);
  color: var(--color-primary);
}

.cm-sidebar__footer-link:first-child:hover {
  background: #e6c900;
  color: var(--color-primary);
  text-decoration: none;
}

.cm-sidebar__footer-link:last-child {
  background: transparent;
  color: var(--color-secondary);
  border: 1.5px solid var(--color-secondary);
}

.cm-sidebar__footer-link:last-child:hover {
  background: var(--color-secondary);
  color: #fff;
  text-decoration: none;
}

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

/* ── Hero Slider (hs-*) ─────────────────────────────────────────── */
.hs-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #e8eaed;
  aspect-ratio: 835 / 415;
}

.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.hs-slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hs-slide img,
.hs-slide .lazy-load-image-background,
.hs-slide__img-link {
  width: 100%;
  height: 100%;
  display: block;
}

.hs-slide img { object-fit: cover; }

/* Gradiente izquierdo para legibilidad del texto */
.hs-slide::after {
  content : '';
  position: absolute;
  inset   : 0;
  z-index : 1;
  background: linear-gradient(
    to right,
    rgba(0,27,55,.62) 0%,
    rgba(0,27,55,.35) 45%,
    transparent      70%
  );
  pointer-events: none;
}

/* Capa de texto */
.hs-layer {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  color: #fff;
  max-width: 42%;
  opacity: 0;
}

.hs-slide--active .hs-layer {
  animation: hsLayerIn .7s ease .35s forwards;
}

@keyframes hsLayerIn {
  from { opacity: 0; transform: translateY(-50%) translateX(-18px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.hs-h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.hs-h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.8px;
  margin: 0 0 18px;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.hs-sub {
  font-size: 15px;
  margin: 0 0 18px;
  opacity: .88;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  line-height: 1.4;
}

.hs-prod-img {
  max-height: 90%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
}

.hs-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: background .15s, box-shadow .15s, transform .15s;
}

.hs-btn:hover {
  background: var(--color-accent-hover);
  color: var(--color-primary);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Flechas */
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  border: none;
  color: var(--color-primary);
  font-size: 30px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, opacity .15s;
  opacity: .7;
}

.hs-arrow:hover {
  background: var(--color-accent);
  opacity: 1;
}

.hs-arrow--prev { left: 12px; }
.hs-arrow--next { right: 12px; }

/* Dots */
.hs-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 7px;
}

.hs-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, width .3s;
}

.hs-dot--on {
  width: 24px;
  background: var(--color-accent);
}

@media (max-width: 768px) {
  .hs-h2 { font-size: 20px; }
  .hs-layer { max-width: 55%; left: 20px; }
  .hs-slide::after {
    background: linear-gradient(
      to right,
      rgba(0,27,55,.75) 0%,
      rgba(0,27,55,.50) 50%,
      rgba(0,27,55,.10) 80%,
      transparent       100%
    );
  }
}

@media (max-width: 576px) {
  .hs-arrow {
    width: 28px;
    height: 28px;
    font-size: 22px;
    opacity: .85;
  }
  .hs-arrow--prev { left: 6px; }
  .hs-arrow--next { right: 6px; }
  .hs-layer { max-width: 70%; }
  .hs-h4 { font-size: 12px; }
  .hs-h2 { font-size: 16px; margin-bottom: 10px; }
  .hs-btn { padding: 7px 14px; font-size: 12px; }
  .hs-slide::after {
    background: linear-gradient(
      to right,
      rgba(0,27,55,.82) 0%,
      rgba(0,27,55,.62) 55%,
      rgba(0,27,55,.20) 85%,
      transparent       100%
    );
  }
}

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

.cm-cat-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 12px 0 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cm-cat-scroll::-webkit-scrollbar { display: none; }

.cm-cat-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.cm-cat-chip__icon {
  font-size: 11px;
  opacity: .75;
}

.cm-cat-chip:hover,
.cm-cat-chip:active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

.cm-cat-chip:hover .cm-cat-chip__icon,
.cm-cat-chip:active .cm-cat-chip__icon {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SOLUTION PRODUCTS  (package-solution cards)
═══════════════════════════════════════════════════════════════ */
.sp-section {
  padding: 32px 0 8px;
}

.sp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-accent);
}

.sp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 2px;
}

.sp-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.sp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.sp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid #e0e3e9;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.sp-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(0,59,100,.12);
  transform: translateY(-3px);
  text-decoration: none;
}

.sp-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f7fb;
}

.sp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s;
}

.sp-card:hover .sp-card__img { transform: scale(1.05); }

.sp-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-card:hover .sp-card__title { color: var(--color-secondary); }

.sp-card__count {
  font-size: 11px;
  color: var(--color-text-muted);
}

.sp-card__count strong {
  color: var(--color-secondary);
  font-weight: 700;
}

/* Skeleton */
.sp-card--skeleton { pointer-events: none; }

.sp-sk-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(90deg, var(--color-bg) 25%, #e4e7ec 50%, var(--color-bg) 75%);
  background-size: 200% 100%;
  animation: spShimmer 1.4s infinite;
}

.sp-sk-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }

.sp-sk-line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--color-bg) 25%, #e4e7ec 50%, var(--color-bg) 75%);
  background-size: 200% 100%;
  animation: spShimmer 1.4s infinite .2s;
}

.sp-sk-line--title { height: 13px; width: 80%; }
.sp-sk-line--count { height: 11px; width: 45%; }

@keyframes spShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 1200px) {
  .sp-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .sp-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sp-title { font-size: 18px; }
}

@media (max-width: 576px) {
  .sp-section { padding: 24px 0 8px; }
  .sp-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sp-grid::-webkit-scrollbar { display: none; }
  .sp-card,
  .sp-card--skeleton { flex: 0 0 140px; scroll-snap-align: start; }
}

/* ═══════════════════════════════════════════════════════════════
   sb-* — SOLUTION BUNDLE (Home > Soluciones para ti)
═══════════════════════════════════════════════════════════════ */
.sb-section {
  padding: 40px 0 32px;
}
.sb-section__header {
  margin-bottom: 24px;
}
.sb-section__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.sb-section__sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}
.sb-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Bundle row ── */
.sb-bundle {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sb-bundle__main {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 240px;
}

/* ── Left panel ── */
.sb-panel {
  position: relative;
  overflow: hidden;
}
.sb-panel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.sb-panel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,.78) 100%
  );
}
.sb-panel__content {
  position: relative;
  z-index: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  box-sizing: border-box;
}
.sb-panel__title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.35;
}
.sb-panel__count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.8);
  margin-bottom: 14px;
}
.sb-panel__count i { font-size: 11px; }
.sb-panel__btn {
  display: inline-block;
  background: #fff;
  color: var(--color-primary);
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  transition: background .2s, transform .15s;
}
.sb-panel__btn:hover {
  background: var(--color-secondary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* ── Products scroll ── */
.sb-products {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 0;
  padding: 16px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--color-border);
  align-items: stretch;
}
.sb-products::-webkit-scrollbar { height: 4px; }
.sb-products::-webkit-scrollbar-track { background: transparent; }
.sb-products::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.sb-products__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 24px;
}
.sb-products__empty i { font-size: 28px; }

/* ── Product card ── */
.sb-prod-card {
  flex: 0 0 180px;
  scroll-snap-align: start;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s, transform .15s;
  margin: 0 6px;
  display: flex;
  flex-direction: column;
}
.sb-prod-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.sb-prod-card--optional { opacity: .88; }
.sb-prod-card--optional .sb-prod-card__img-wrap { background: #f5f5f5; }
.sb-prod-card__badges {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  min-height: 24px;
  flex-wrap: wrap;
}
.sb-prod-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.6;
}
.sb-prod-badge--recomendado {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.sb-prod-badge--opcional {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}
.sb-prod-badge--hot {
  background: #e53935;
  color: #fff;
  border: 1px solid transparent;
}
.sb-prod-card__img-wrap {
  display: block;
  height: 120px;
  padding: 10px 12px;
  background: #f9f9f9;
  flex-shrink: 0;
}
.sb-prod-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sb-prod-card__body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sb-prod-card__brand {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.sb-prod-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
}
.sb-prod-card__name:hover { color: var(--color-secondary); }
.sb-prod-card__price-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.sb-prod-card__old {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.sb-prod-card__price {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

/* ── CTA bar ── */
.sb-cta {
  border-top: 1px solid var(--color-border);
  padding: 12px 16px;
  background: var(--color-surface);
}
.sb-cta__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-text);
  color: var(--color-bg);
  border: none;
  border-radius: 28px;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.sb-cta__btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}
.sb-cta__btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Skeletons ── */
.sb-panel--sk {
  background: linear-gradient(90deg, var(--color-border) 25%, #e8e8e8 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: sp-shimmer 1.4s infinite linear;
}
.sb-prod-card--sk { pointer-events: none; }
.sb-sk-img {
  height: 140px;
  margin: 12px;
  border-radius: 6px;
  background: var(--color-border);
  animation: sp-shimmer 1.4s infinite linear;
}
.sb-sk-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sb-sk-line {
  border-radius: 4px;
  background: var(--color-border);
  animation: sp-shimmer 1.4s infinite linear;
}
.sb-sk-line--xs { height: 10px; width: 40%; }
.sb-sk-line--md { height: 12px; width: 60%; }
.sb-sk-line--lg { height: 12px; width: 90%; }
.sb-cta--sk {
  height: 44px;
  border-radius: 28px;
  background: var(--color-border);
  animation: sp-shimmer 1.4s infinite linear;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sb-bundle__main { grid-template-columns: 220px 1fr; }
  .sb-panel__title { font-size: 16px; }
  .sb-prod-card { flex: 0 0 160px; }
  .sb-prod-card__img-wrap { height: 120px; }
}
@media (max-width: 600px) {
  .sb-bundle__main { grid-template-columns: 1fr; min-height: unset; }
  .sb-panel { min-height: 180px; }
  .sb-panel__content { padding: 20px 16px; }
  .sb-products { border-left: none; border-top: 1px solid var(--color-border); }
  .sb-prod-card { flex: 0 0 150px; }
}

/* ═══════════════════════════════════════════════════════════════
   UBICATION MAPS
═══════════════════════════════════════════════════════════════ */
.um-section { padding: 48px 0 32px; }

.um-header {
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-accent);
}
.um-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 2px;
}
.um-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Layout 2 columnas ── */
.um-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: stretch;
  min-height: 420px;
}
.um-grid--no-map {
  grid-template-columns: 1fr;
}

/* Columna mapa (izquierda) */
.um-map {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 420px;
}
.um-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: none;
}

/* Columna info (derecha) */
.um-info {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-card);
}
.um-info__header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-accent);
}
.um-info__name {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.3;
}

/* Filas de datos */
.um-info__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.um-info__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}
.um-info__icon {
  width: 18px;
  text-align: center;
  color: var(--color-primary);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 14px;
}
.um-info__row a {
  color: var(--color-link);
  text-decoration: none;
}
.um-info__row a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Botón WhatsApp */
.um-info__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  width: fit-content;
  transition: background .2s, transform .15s;
}
.um-info__whatsapp:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-1px);
}
.um-info__whatsapp .fa-whatsapp { font-size: 18px; }

/* Redes sociales */
.um-info__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.um-info__social-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 2px;
}
.um-info__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 16px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.um-info__social-link:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Dark mode */
[data-theme="dark"] .um-info {
  background: var(--dk-surface, #1e2130);
  border-color: var(--dk-border, #2d3148);
}

/* Responsive */
@media (max-width: 991px) {
  .um-grid {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .um-map { min-height: 300px; }
  .um-map iframe { min-height: 300px; }
  .um-info { padding: 22px 20px 18px; }
}
@media (max-width: 575px) {
  .um-info__whatsapp { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY PAGE — hero, toolbox, cards, sidebar, pagination
═══════════════════════════════════════════════════════════════ */

/* ── Hero banner ─────────────────────────────────────────────── */
.cat-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: 28px 0 20px;
  margin-bottom: 0;
}

.cat-hero__name {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -.3px;
  text-transform: capitalize;
}

/* cat-breadcrumb* aliases → bc-nav--hero (kept for backward compat) */
.cat-breadcrumb                                 { margin: 0; }
.cat-breadcrumb__list                           { display: flex; align-items: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.cat-breadcrumb__item                           { display: flex; align-items: center; font-size: 13px; color: rgba(255,255,255,.75); }
.cat-breadcrumb__item + .cat-breadcrumb__item::before { content: '›'; margin: 0 7px; color: rgba(255,255,255,.35); font-size: 16px; line-height: 1; }
.cat-breadcrumb__link                           { color: rgba(255,255,255,.9) !important; text-decoration: none; transition: color .15s; }
.cat-breadcrumb__link:hover                     { color: var(--color-accent) !important; }
.cat-breadcrumb__item--active                   { color: var(--color-accent); font-weight: 600; }

/* ── Page body ───────────────────────────────────────────────── */
.cat-page-body {
  padding-top: 20px;
  padding-bottom: 32px;
}

.cat-page-row {
  align-items: flex-start;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.cat-sidebar .sticky-sidebar {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Widget container */
.bb-widget {
  background: #fff;
  border: 1px solid #e0e3e9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}

.bb-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: left;
}

.bb-widget__arrow {
  font-size: 12px;
  transition: transform .2s;
}

.bb-widget__body {
  padding: 8px 0;
}

.bb-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-widget__item {
  border-bottom: 1px solid var(--color-bg);
}
.bb-widget__item:last-child { border-bottom: none; }

/* Custom checkbox */
.bb-widget__check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  margin: 0;
  font-size: 13px;
  color: var(--color-text);
  transition: background .12s;
}

.bb-widget__check-label:hover {
  background: #f4f7fb;
}

.bb-widget__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bb-widget__checkmark {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  background: #fff;
  transition: border-color .15s, background .15s;
  position: relative;
}

.bb-widget__checkbox:checked ~ .bb-widget__checkmark {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.bb-widget__checkbox:checked ~ .bb-widget__checkmark::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.bb-widget__check-text {
  flex: 1;
  line-height: 1.3;
}

/* ── Toolbox bar ─────────────────────────────────────────────── */
.bb-toolbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid #e0e3e9;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bb-toolbox__left,
.bb-toolbox__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bb-toolbox__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.bb-toolbox__select {
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236D7278'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  transition: border-color .15s;
}

.bb-toolbox__select:focus {
  border-color: var(--color-secondary);
  outline: none;
}

.bb-toolbox__select--sm { min-width: 60px; }

.bb-toolbox__layout {
  display: flex;
  gap: 4px;
}

.bb-toolbox__layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  background: #fff;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
  font-size: 16px;
}

.bb-toolbox__layout-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  text-decoration: none;
}

.bb-toolbox__layout-btn--active {
  border-color: var(--color-secondary) !important;
  background: var(--color-secondary) !important;
  color: #fff !important;
}

/* ── Product grid (grid-product wrapper rows) ─────────────────── */
.product-group.row {
  gap: 0;
  margin-left: -8px;
  margin-right: -8px;
}

.product-group.row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}

/* "Sin productos" message */
.product-group h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  padding: 24px 16px;
}

/* ── BB Card (grid view) ─────────────────────────────────────── */
.bb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1.5px solid #d8dce4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.bb-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(0,59,100,.14);
  transform: translateY(-3px);
}

.bb-card__img-link {
  display: block;
  text-decoration: none;
}

.bb-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8f9fb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}

.bb-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .25s;
}

.bb-card:hover .bb-card__img {
  transform: scale(1.06);
}

/* Wishlist button */
.bb-card__wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e0e3e9;
  background: #fff;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  z-index: 2;
}

.bb-card__wish:hover,
.bb-card__wish--active {
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
  background: #fff5f7 !important;
}

/* Card body */
.bb-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 14px 14px;
  gap: 5px;
}

.bb-card__brand {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-secondary) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
}

.bb-card__model {
  font-size: 11px !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
}

/* !important necesario para vencer los h3/h2 default de Bootstrap */
h3.bb-card__title,
.bb-card__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4 !important;
}

.bb-card__title a,
.bb-card__title a:link,
.bb-card__title a:visited {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.bb-card__title a:hover { color: var(--color-secondary) !important; }

/* (bb-card__model already defined above) */

.bb-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  align-self: flex-start;
}

.bb-card__stock--ok  { background: #e8f5e9; color: #2e7d32; }
.bb-card__stock--out { background: #fdecea; color: #c62828; }

/* Price row — sobrescribe estilos inline de ProductLikeSyscom */
.bb-card__price-row {
  margin-top: auto;
  padding-top: 6px;
}

.bb-card__price-row .price-box {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bb-card__price-row .product-price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bb-card__price-row .product-price .foo {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
}

/* Badge "MXN I.V.A. Incluido" */
.bb-card__price-row .product-price span {
  background: var(--color-secondary) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* RedirectToLogin link */
.bb-card__price-row .text-center { margin: 0 !important; }

/* Add to cart button */
.bb-card__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 0;
  margin-top: 10px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}

.bb-card__add-btn:hover {
  background: var(--color-accent-hover);
}

.bb-card__add-btn i {
  font-size: 15px;
}

/* ── BB List item (list view) ────────────────────────────────── */
.product-intro.list-style .bb-list-item,
.bb-list-item {
  display: flex;
  gap: 0;
  background: #fff;
  border: 1.5px solid #e0e3e9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}

.bb-list-item:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(0,59,100,.10);
}

.bb-list-item__img-link {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
}

.bb-list-item__img-wrap {
  width: 180px;
  height: 180px;
  background: #f8f9fb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}

.bb-list-item__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .25s;
}

.bb-list-item:hover .bb-list-item__img { transform: scale(1.04); }

.bb-list-item__body {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

h2.bb-list-item__title,
.bb-list-item__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bb-list-item__title a,
.bb-list-item__title a:link,
.bb-list-item__title a:visited {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  font-size: inherit !important;
}

.bb-list-item__title a:hover { color: var(--color-secondary) !important; }

.bb-list-item__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 16px 16px;
  border-left: 1px solid var(--color-bg);
  min-width: 180px;
}

.bb-list-item__wish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.bb-list-item__wish:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* ── Pagination ──────────────────────────────────────────────── */
.styled-pagination {
  padding: 16px 0 8px;
}

.styled-pagination .pagination {
  justify-content: center;
  gap: 4px;
}

.styled-pagination .page-item .page-link {
  border: 1.5px solid var(--color-border);
  border-radius: 6px !important;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  min-width: 36px;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}

.styled-pagination .page-item .page-link:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: #fff;
}

.styled-pagination .page-item.active .page-link {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* ── Responsive: category page ───────────────────────────────── */
@media (max-width: 991px) {
  .cat-hero__name { font-size: 22px; }
  .bb-list-item__img-wrap { width: 140px; height: 140px; }
  .bb-list-item__actions { min-width: 150px; }
}

@media (max-width: 768px) {
  .cat-hero { padding: 20px 0 14px; }
  .cat-hero__name { font-size: 18px; }

  .bb-toolbox { flex-direction: column; align-items: flex-start; }
  .bb-toolbox__right { width: 100%; justify-content: space-between; }

  .bb-list-item { flex-direction: column; }
  .bb-list-item__img-wrap { width: 100%; height: 200px; }
  .bb-list-item__actions {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid var(--color-bg);
    min-width: 0;
    padding: 12px 14px;
  }
  .bb-card__add-btn,
  .bb-list-item__wish { flex: 1; }
}

@media (max-width: 576px) {
  .cat-hero__name { font-size: 16px; }
  .bb-card__img-wrap { aspect-ratio: 4/3; }
  .bb-list-item__img-wrap { height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL  (pd-*)
═══════════════════════════════════════════════════════════════ */

/* ── Página contenedora ── */
.pd-page    { padding-bottom: 48px; }
.pd-container { padding-top: 20px; }

/* ── Layout dos columnas ── */
.pd-layout {
   display: grid;
   grid-template-columns: 5fr 7fr;
   gap: 32px;
   align-items: flex-start;
   margin-bottom: 32px;
}
.pd-gallery  { min-width: 0; }
.pd-info-col { min-width: 0; padding-top: 8px; }

@media (max-width: 767px) {
   .pd-layout { grid-template-columns: 1fr; }
}

/* ── Galería (HorizontalThumbnail overrides) ── */
.pd-gallery .product-slider-container {
   border        : 1px solid #e5e9ef;
   border-radius : 12px;
   overflow      : hidden;
   background    : #fff;
}
.pd-gallery .prod-thumbnail {
   display        : flex;
   gap            : 8px;
   margin-top     : 12px;
   flex-wrap      : wrap;
}
.pd-gallery .prod-thumbnail .owl-dot {
   flex         : 0 0 auto;
   width        : 68px !important;
   padding      : 0 !important;
   cursor       : pointer;
}
.pd-gallery .prod-thumbnail .owl-dot img {
   border        : 2px solid #e5e9ef;
   border-radius : 8px;
   width         : 100%;
   height        : 68px;
   object-fit    : contain;
   background    : #fff;
   transition    : border-color .2s;
}
.pd-gallery .prod-thumbnail .owl-dot.active img,
.pd-gallery .prod-thumbnail .owl-dot:hover img {
   border-color: var(--color-primary);
}
.pd-gallery .prod-full-screen {
   right         : 12px;
   bottom        : 12px;
   background    : rgba(0,59,100,.75);
   color         : var(--color-accent);
   width         : 34px;
   height        : 34px;
   border-radius : 50%;
   display       : flex;
   align-items   : center;
   justify-content: center;
   font-size     : 14px;
   cursor        : pointer;
   transition    : background .15s;
}
.pd-gallery .prod-full-screen:hover { background: var(--color-primary); }

/* ── Panel de detalles ── */
.pd-details { padding: 4px 0 0; }

/* ── Chip de marca ── */
.pd-brand-chip {
   display        : inline-flex;
   align-items    : center;
   gap            : 5px;
   background     : #eef2f7;
   color          : var(--color-secondary);
   font-size      : .78rem;
   font-weight    : 700;
   padding        : 3px 10px;
   border-radius  : 20px;
   margin-bottom  : 8px;
   text-transform : uppercase;
   letter-spacing : .04em;
}

/* ── Título ── */
h1.pd-title,
.pd-title {
   font-size   : 1.65rem;
   font-weight : 700;
   color       : var(--color-text);
   margin      : 0 0 10px;
   line-height : 1.35;
}

/* ── Divisor amarillo corto ── */
.pd-divider {
   height        : 3px;
   width         : 48px;
   background    : var(--color-accent);
   border-radius : 2px;
   margin-bottom : 16px;
}

/* ── Separador horizontal fino ── */
.pd-sep {
   border     : none;
   border-top : 1px solid #e5e9ef;
   margin     : 4px 0 16px;
}

/* ── Iconos de certificación ── */
.pd-icons {
   display    : flex;
   flex-wrap  : wrap;
   align-items: center;
   gap        : 8px;
   margin     : 10px 0 14px;
}
.pd-icons img {
   width      : 48px;
   height     : 48px;
   object-fit : contain;
   border-radius: 6px;
}

/* ── Características principales ── */
.pd-features {
   background    : #f8f9fb;
   border        : 1px solid #e5e9ef;
   border-radius : 10px;
   padding       : 16px 18px;
   margin        : 16px 0;
}
.pd-features__title {
   font-size   : 1.1rem;
   font-weight : 700;
   color       : var(--color-primary);
   margin      : 0 0 12px;
   display     : flex;
   align-items : center;
   gap         : 8px;
}
.pd-features__title i { color: var(--color-accent); font-size: 1rem; }
.pd-features__list {
   list-style : none;
   margin     : 0;
   padding    : 0;
   display    : flex;
   flex-direction: column;
   gap        : 8px;
}
.pd-features__item {
   display    : flex;
   align-items: flex-start;
   gap        : 8px;
   font-size  : 1rem;
   color      : #333;
   line-height: 1.55;
}
.pd-features__check {
   color      : var(--color-primary);
   font-size  : .95rem;
   margin-top : 2px;
   flex-shrink: 0;
}

/* ── Qty selector ── */
.pd-qty {
   display     : inline-flex;
   align-items : center;
   border      : 1.5px solid #dde1e7;
   border-radius: 8px;
   overflow    : hidden;
   background  : #fff;
}
.pd-qty__btn {
   width      : 38px;
   height     : 44px;
   background : none;
   border     : none;
   font-size  : 1.2rem;
   font-weight: 700;
   color      : var(--color-primary);
   cursor     : pointer;
   transition : background .15s;
   line-height: 1;
}
.pd-qty__btn:hover { background: var(--color-bg); }
.pd-qty__input {
   width      : 54px;
   height     : 44px;
   border     : none;
   border-left : 1.5px solid #dde1e7;
   border-right: 1.5px solid #dde1e7;
   text-align : center;
   font-size  : 1rem;
   font-weight: 600;
   color      : var(--color-text);
   background : #fff;
   outline    : none;
   -moz-appearance: textfield;
}
.pd-qty__input::-webkit-outer-spin-button,
.pd-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Acción principal (qty + botón carrito) ── */
.pd-action {
   display    : flex;
   align-items: center;
   gap        : 12px;
   margin     : 16px 0;
   flex-wrap  : wrap;
}

/* ── Botón agregar al carrito ── */
.pd-cart-btn {
   display         : inline-flex;
   align-items     : center;
   gap             : 8px;
   padding         : 0 28px;
   height          : 44px;
   background      : var(--color-accent);
   color           : var(--color-primary);
   font-size       : .95rem;
   font-weight     : 700;
   border          : none;
   border-radius   : 8px;
   cursor          : pointer;
   transition      : background .15s, transform .1s;
   white-space     : nowrap;
}
.pd-cart-btn:hover  { background: var(--color-accent-hover); }
.pd-cart-btn:active { transform: scale(.98); }
.pd-cart-btn i      { font-size: 1rem; }

/* ── Botón lista de deseos ── */
.pd-wish-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 6px;
   background     : none;
   border         : 1.5px solid #dde1e7;
   border-radius  : 8px;
   padding        : 8px 16px;
   font-size      : .875rem;
   color          : var(--color-text-muted);
   cursor         : pointer;
   transition     : border-color .15s, color .15s;
   margin-bottom  : 16px;
}
.pd-wish-btn:hover          { border-color: var(--color-danger); color: var(--color-danger); }
.pd-wish-btn--active        { border-color: var(--color-danger); color: var(--color-danger); }
.pd-wish-btn--active i      { color: var(--color-danger); }

/* ── Redes sociales ── */
.pd-social {
   display    : flex;
   align-items: center;
   gap        : 8px;
   margin-top : 8px;
}
.pd-social__label {
   font-size  : .8rem;
   color      : var(--color-text-muted);
   font-weight: 600;
}
.pd-social__link {
   display         : inline-flex;
   align-items     : center;
   justify-content : center;
   width           : 34px;
   height          : 34px;
   border-radius   : 50%;
   color           : #fff;
   font-size       : .85rem;
   text-decoration : none;
   transition      : opacity .15s, transform .1s;
}
.pd-social__link:hover              { opacity: .85; transform: scale(1.08); text-decoration: none; color: #fff; }
.pd-social__link--facebook          { background: #1877F2; }
.pd-social__link--twitter           { background: #1DA1F2; }
.pd-social__link--whatsapp          { background: #25D366; }

/* ── Tabs ── */
.pd-tabs-wrap { margin-top: 32px; }

/* --- Historial de precio (ph-*) --- */
.ph-section {
   background: #fff;
   border: 1px solid #e8e8e8;
   border-radius: 12px;
   padding: 28px 32px;
   margin-top: 24px;
}
.ph-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 20px;
}
.ph-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--color-text);
   margin: 0;
   display: flex;
   align-items: center;
   gap: 8px;
}
.ph-title svg { color: var(--color-primary); }

/* Selector de período */
.ph-period {
   display: flex;
   gap: 4px;
   background: #f4f5f7;
   border-radius: 8px;
   padding: 3px;
}
.ph-period__btn {
   border: none;
   background: transparent;
   font-size: 12px;
   font-weight: 600;
   color: #888;
   padding: 5px 12px;
   border-radius: 6px;
   cursor: pointer;
   transition: background .15s, color .15s;
}
.ph-period__btn:hover { background: #e8eaed; color: #555; }
.ph-period__btn--active {
   background: #fff;
   color: var(--color-primary);
   box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Badges min / actual / max */
.ph-badges {
   display: flex;
   gap: 12px;
   margin-bottom: 20px;
   flex-wrap: wrap;
}
.ph-badge {
   flex: 1 1 120px;
   border-radius: 10px;
   padding: 12px 16px;
   background: #f8f9fa;
   border: 1px solid #eee;
}
.ph-badge--current {
   background: #e8f0fb;
   border-color: #c5d8f5;
}
.ph-badge__label {
   display: block;
   font-size: 11px;
   color: #999;
   margin-bottom: 4px;
   font-weight: 500;
}
.ph-badge__val {
   display: block;
   font-size: 18px;
   font-weight: 800;
   color: var(--color-primary);
   font-variant-numeric: tabular-nums;
}
.ph-badge--current .ph-badge__val { color: #1a5fb4; }
.ph-badge__stable {
   display: inline-block;
   margin-top: 4px;
   font-size: 10px;
   font-weight: 600;
   background: #d3f9d8;
   color: #2b8a3e;
   border-radius: 4px;
   padding: 1px 6px;
}

/* Gráfica SVG */
.ph-chart-wrap {
   width: 100%;
   overflow: hidden;
}
.ph-svg {
   width: 100%;
   height: auto;
   display: block;
   cursor: crosshair;
}

/* Skeleton */
.ph-skeleton { padding: 4px 0; }
.ph-skeleton__badges {
   display: flex;
   gap: 12px;
   margin-bottom: 20px;
}
.ph-skeleton__badge {
   flex: 1;
   height: 62px;
   border-radius: 10px;
   background: #eee;
   animation: wbShimmer 1.5s infinite;
}
.ph-skeleton__chart {
   height: 180px;
   border-radius: 8px;
   background: #eee;
   animation: wbShimmer 1.5s infinite;
}

/* Empty state */
.ph-empty {
   text-align: center;
   padding: 32px 16px;
   color: #bbb;
}
.ph-empty p { margin: 12px 0 0; font-size: 14px; }

/* Dark mode */
[data-theme="dark"] .ph-section {
   background: #1a1a1a;
   border-color: #2d2d2d;
}
[data-theme="dark"] .ph-badge { background: #242424; border-color: #333; }
[data-theme="dark"] .ph-badge--current { background: #1a2a3a; border-color: #2a4a6a; }
[data-theme="dark"] .ph-badge__label { color: #666; }
[data-theme="dark"] .ph-badge__val { color: #5b9bd5; }
[data-theme="dark"] .ph-period { background: #242424; }
[data-theme="dark"] .ph-period__btn { color: #666; }
[data-theme="dark"] .ph-period__btn:hover { background: #2d2d2d; }
[data-theme="dark"] .ph-period__btn--active { background: #2d2d2d; color: #5b9bd5; }
[data-theme="dark"] .ph-skeleton__badge,
[data-theme="dark"] .ph-skeleton__chart { background: #242424; }

@media (max-width: 768px) {
   .ph-section { padding: 20px 16px; }
   .ph-badges { gap: 8px; }
   .ph-badge { flex: 1 1 calc(50% - 8px); padding: 10px 12px; }
   .ph-badge__val { font-size: 15px; }
   .ph-header { flex-direction: column; align-items: flex-start; }
}

/* --- Productos relacionados / accesorios (rel-*) --- */
.rel-section { padding: 40px 0 8px; }
.rel-title {
   font-size: 20px;
   font-weight: 700;
   color: var(--color-primary);
   margin: 0 0 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--color-accent);
}
.pd-tabs      { border: 1px solid #e5e9ef; border-radius: 12px; overflow: hidden; background: #fff; }

.pd-tabs__list {
   display       : flex;
   list-style    : none;
   margin        : 0;
   padding       : 0;
   border-bottom : 2px solid #e5e9ef;
   background    : #f8f9fb;
   overflow-x    : auto;
}
.pd-tab {
   padding       : 14px 22px;
   font-size     : .9rem;
   font-weight   : 600;
   color         : var(--color-text-muted);
   cursor        : pointer;
   white-space   : nowrap;
   border-bottom : 3px solid transparent;
   margin-bottom : -2px;
   transition    : color .15s, border-color .15s;
   user-select   : none;
}
.pd-tab:hover    { color: var(--color-primary); }
.pd-tab--active  { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.pd-tab span     { pointer-events: none; }

.pd-tab-panel            { display: none; }
.pd-tab-panel--active    { display: block; }

.pd-tab-content {
   padding: 24px;
}
.pd-tab-content--desc {
   font-size  : 1.05rem;
   color      : #333;
   line-height: 1.8;
}
.pd-tab-content--desc img {
   max-width    : 100%;
   border-radius: 8px;
   margin       : 8px 0;
}
.pd-tab-empty {
   color     : var(--color-text-muted);
   font-size : .9rem;
   margin    : 0;
}

/* ── Descargas ── */
.pd-downloads {
   display       : flex;
   flex-direction: column;
   gap           : 10px;
}
.pd-download-item {
   display        : flex;
   align-items    : center;
   gap            : 12px;
   padding        : 12px 16px;
   border         : 1.5px solid #e5e9ef;
   border-radius  : 8px;
   text-decoration: none;
   color          : var(--color-text);
   transition     : border-color .15s, background .15s;
}
.pd-download-item:hover {
   border-color   : var(--color-primary);
   background     : var(--color-bg);
   text-decoration: none;
   color          : var(--color-primary);
}
.pd-download-item__icon { font-size: 1.4rem; color: var(--color-danger); flex-shrink: 0; }
.pd-download-item__name { flex: 1; font-size: .9rem; font-weight: 600; }
.pd-download-item__dl   { color: #aaa; font-size: .85rem; }
.pd-download-item:hover .pd-download-item__dl { color: var(--color-primary); }

/* ── Página de error / acceso restringido (per-*) ── */
.per-page {
   min-height      : calc(100vh - 220px);
   display         : flex;
   align-items     : center;
   justify-content : center;
   padding         : 40px 16px;
   background      : var(--color-bg);
}
.per-card {
   background      : #fff;
   border-radius   : 16px;
   border          : 1px solid #E5E9EF;
   box-shadow      : 0 4px 24px rgba(0,59,100,.08);
   padding         : 48px 40px;
   max-width       : 480px;
   width           : 100%;
   text-align      : center;
   display         : flex;
   flex-direction  : column;
   align-items     : center;
   gap             : 14px;
}
.per-icon-wrap {
   width           : 80px;
   height          : 80px;
   background      : var(--color-primary);
   border-radius   : 50%;
   display         : flex;
   align-items     : center;
   justify-content : center;
   margin-bottom   : 4px;
}
.per-icon        { color: var(--color-accent); font-size: 2rem; }
.per-code        { font-size: 3.5rem; font-weight: 900; color: #E5E9EF; line-height: 1; margin: -8px 0; }
.per-title       { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin: 0; }
.per-desc        { font-size: .95rem; color: var(--color-text-muted); margin: 0; line-height: 1.6; }
.per-btn-primary {
   display         : inline-flex;
   align-items     : center;
   gap             : 8px;
   padding         : 13px 32px;
   background      : var(--color-accent);
   color           : var(--color-primary);
   font-size       : .95rem;
   font-weight     : 700;
   border          : none;
   border-radius   : 8px;
   cursor          : pointer;
   text-decoration : none;
   transition      : background .15s, transform .1s;
   margin-top      : 6px;
   width           : 100%;
   justify-content : center;
}
.per-btn-primary:hover  { background: var(--color-accent-hover); color: var(--color-primary); text-decoration: none; }
.per-btn-primary:active { transform: scale(.98); }
.per-btn-secondary {
   display         : inline-flex;
   align-items     : center;
   gap             : 8px;
   padding         : 11px 32px;
   background      : none;
   color           : var(--color-text-muted);
   font-size       : .9rem;
   font-weight     : 600;
   border          : 1.5px solid #dde1e7;
   border-radius   : 8px;
   cursor          : pointer;
   text-decoration : none;
   transition      : border-color .15s, color .15s;
   width           : 100%;
   justify-content : center;
}
.per-btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

@media (max-width: 480px) {
   .per-card    { padding: 36px 24px; }
   .per-title   { font-size: 1.2rem; }
   .per-code    { font-size: 2.8rem; }
}

/* ── Breadcrumb producto — fondo claro (bc-nav--bar en .pd-page) ── */
.pd-page .bc-nav--bar {
   background   : var(--color-bg);
   border-bottom: 1px solid #e5e9ef;
   padding      : 10px 0;
}

/* ── Productos relacionados ── */
.pd-related {
   padding   : 40px 0 48px;
   background: var(--color-bg);
   margin-top: 32px;
}
.pd-related__header {
   display      : flex;
   align-items  : center;
   gap          : 14px;
   margin-bottom: 24px;
}
.pd-related__icon-wrap {
   width           : 44px;
   height          : 44px;
   background      : var(--color-primary);
   border-radius   : 10px;
   display         : flex;
   align-items     : center;
   justify-content : center;
   flex-shrink     : 0;
}
.pd-related__icon-wrap i { color: var(--color-accent); font-size: 18px; }
.pd-related__title {
   font-size  : 1.3rem;
   font-weight: 700;
   color      : var(--color-primary);
   margin     : 0 0 2px;
}
.pd-related__sub { font-size: .85rem; color: var(--color-text-muted); margin: 0; }

.pd-related__grid {
   display              : grid;
   grid-template-columns: repeat(4, 1fr);
   gap                  : 16px;
}
.pd-related__grid .bb-card { height: auto; }

/* ── Responsive ── */
@media (max-width: 992px) {
   .pd-related__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
   h1.pd-title, .pd-title { font-size: 1.35rem; }
   .pd-action              { gap: 8px; }
   .pd-cart-btn            { width: 100%; justify-content: center; }
   .pd-qty                 { width: 130px; }
   .pd-tab                 { padding: 12px 14px; font-size: .82rem; }
   .pd-tab-content         { padding: 16px; }
   .pd-related__grid       { grid-template-columns: repeat(2, 1fr); }
   .pd-related__title      { font-size: 1.1rem; }
}
@media (max-width: 480px) {
   .pd-related__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL — nuevos elementos (psd-*)
═══════════════════════════════════════════════════════════════ */

/* ── Bloque de precio ── */
.psd-price {
   display    : flex;
   align-items: baseline;
   flex-wrap  : wrap;
   gap        : 10px;
   margin     : 8px 0 16px;
}

.psd-price__old {
   font-size      : 1rem;
   color          : #9ca3af;
   text-decoration: line-through;
}

.psd-price__current {
   font-size  : 2rem;
   font-weight: 800;
   color      : var(--color-primary);
   line-height: 1;
}

.psd-price__badge {
   display        : inline-flex;
   align-items    : center;
   background     : var(--color-secondary);
   color          : #fff;
   font-size      : 0.72rem;
   font-weight    : 700;
   padding        : 3px 9px;
   border-radius  : 4px;
   letter-spacing : 0.04em;
   align-self     : center;
}

.psd-price__discount {
   display       : inline-flex;
   align-items   : center;
   background    : var(--color-danger);
   color         : #fff;
   font-size     : 0.75rem;
   font-weight   : 700;
   padding       : 3px 8px;
   border-radius : 4px;
   align-self    : center;
}

/* Tarjeta de información del producto */
.psd-info-card {
  background: #f8f9fb;
  border: 1px solid #e0e3e9;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
}

.psd-info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.psd-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.psd-info-label {
  flex-shrink: 0;
  width: 110px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.psd-info-val {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 13px;
}

/* Badge de stock */
.psd-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.psd-stock--ok  { background: #e8f5e9; color: #2e7d32; }
.psd-stock--out { background: #fdecea; color: #c62828; }

/* Prompt de login (una sola vez, antes del botón) */
.psd-login-prompt {
  margin: 16px 0;
  text-align: center;
}

.psd-login-prompt a,
.psd-login-prompt button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 32px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .15s !important;
  letter-spacing: .3px !important;
}

.psd-login-prompt a:hover,
.psd-login-prompt button:hover {
  background: var(--color-secondary) !important;
  color: #fff !important;
}

/* Botón de carrito mejorado */
.product-single-details .product-action {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 !important;
  flex-wrap: wrap !important;
}

.product-single-details .add-cart {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-transform: none !important;
}

.product-single-details .add-cart:hover {
  background: var(--color-accent-hover) !important;
}

.product-single-details .add-cart i {
  font-size: 18px !important;
}

@media (max-width: 576px) {
  .psd-info-label { width: 90px; }
  .psd-login-prompt a,
  .psd-login-prompt button { width: 100% !important; }
  .product-single-details .add-cart { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND PAGE  (CategoriesByBrand)
═══════════════════════════════════════════════════════════════ */

/* Hero */
.brand-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: 28px 0 18px;
}

.brand-hero__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.brand-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  margin: 0 0 4px;
}

.brand-hero__name {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 !important;
  text-transform: capitalize;
}

.brand-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}

.brand-hero__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-primary);
  text-decoration: none;
}

/* Page body */
.brand-page-body {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* Section header */
.brand-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-accent);
}

.brand-section-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 0 3px !important;
}

.brand-section-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.brand-section-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-secondary);
  background: #e8f0fa;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Grid de categorías */
.brand-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

/* Tarjeta de categoría */
.brand-cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid #d8dce4;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.brand-cat-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(0,59,100,.12);
  transform: translateY(-3px);
  text-decoration: none;
}

.brand-cat-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s;
}

.brand-cat-card:hover .brand-cat-card__img { transform: scale(1.05); }

.brand-cat-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 8px;
}

.brand-cat-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
}

.brand-cat-card:hover .brand-cat-card__name { color: var(--color-secondary); }

.brand-cat-card__arrow {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}

.brand-cat-card:hover .brand-cat-card__arrow {
  color: var(--color-secondary);
  transform: translateX(3px);
}

.brand-cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 40px 0;
}

/* CTA inferior */
.brand-cta-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.brand-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}

.brand-cta-btn:hover {
  background: var(--color-accent-hover);
  color: var(--color-primary);
  text-decoration: none;
  transform: translateY(-2px);
}

.brand-cta-btn i { font-size: 16px; }

/* Responsive */
@media (max-width: 1200px) {
  .brand-cat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 991px) {
  .brand-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-hero__name { font-size: 22px !important; }
}

@media (max-width: 768px) {
  .brand-hero__content { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .brand-section-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .brand-cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .brand-cta-btn { width: 100%; justify-content: center; padding: 13px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE / ACCOUNT PAGES  (acc-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.acc-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: 28px 0 24px;
  border-bottom: 3px solid var(--color-accent);
}
.acc-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.acc-hero__left {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Avatar (foto o iniciales) */
.acc-hero__avatar-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255,224,0,.55);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-hero__initials {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.acc-hero__eyebrow {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: .9;
}
h1.acc-hero__title {
  margin: 0 0 4px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.2 !important;
}
.acc-hero__email {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* ── Page body ────────────────────────────────────────────────── */
.acc-page-body {
  background: var(--color-bg);
  padding: 28px 0 56px;
  min-height: 60vh;
}

/* ── Layout (sidebar + main) ──────────────────────────────────── */
.acc-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
.acc-layout__main { min-width: 0; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.acc-sidebar {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
  position: sticky;
  top: 170px;     /* debajo del header sticky */
}

/* Mini user card en sidebar */
.acc-sidebar__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  background: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
}
.acc-sidebar__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,224,0,.4);
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.acc-sidebar__photo    { width: 100%; height: 100%; object-fit: cover; }
.acc-sidebar__initials { font-size: 16px; font-weight: 700; color: var(--color-accent); }
.acc-sidebar__meta     { min-width: 0; }
.acc-sidebar__name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-sidebar__email {
  margin: 2px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav heading */
.acc-sidebar__nav-heading {
  margin: 0;
  padding: 10px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Nav list */
.acc-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}
.acc-nav__item { margin: 0; }
.acc-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #2d3748 !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.acc-nav__link:hover {
  background: #f0f4fb;
  color: var(--color-secondary) !important;
  border-left-color: var(--color-secondary);
  text-decoration: none !important;
}
.acc-nav__item.active .acc-nav__link {
  background: #eef4fb;
  color: var(--color-primary) !important;
  border-left-color: var(--color-accent);
  font-weight: 700;
}
.acc-nav__link-icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-secondary);
  flex-shrink: 0;
}
.acc-nav__item.active .acc-nav__link-icon { color: var(--color-primary); }
.acc-nav__link-arrow {
  margin-left: auto;
  font-size: 9px;
  color: #c0c8d0;
  transition: transform .12s;
  flex-shrink: 0;
}
.acc-nav__link:hover .acc-nav__link-arrow,
.acc-nav__item.active .acc-nav__link-arrow {
  transform: translateX(3px);
  color: var(--color-secondary);
}

/* ── Dashboard ────────────────────────────────────────────────── */
.acc-dash { padding: 0; }

.acc-dash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-accent);
}
h2.acc-dash__title, .acc-dash__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
}
.acc-dash__store {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Bienvenida */
.acc-dash__welcome {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #e8f4fd;
  border: 1px solid #bee3f8;
  border-left: 4px solid var(--color-secondary);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: #1a3a56;
  margin-bottom: 24px;
  line-height: 1.5;
}
.acc-dash__welcome strong { display: block; font-size: 15px; margin-bottom: 2px; }
.acc-dash__welcome p { margin: 0; color: #3d6b87; font-size: 13px; }
.acc-dash__welcome-icon {
  color: var(--color-secondary);
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Section title */
.acc-dash__section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* Quick access */
.acc-dash__quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.acc-dash__quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px 10px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--card-color, var(--color-secondary));
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  text-decoration: none !important;
  transition: box-shadow .2s, transform .15s;
}
.acc-dash__quick-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-3px);
  text-decoration: none !important;
}
.acc-dash__quick-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(4, 87, 160, .1);  /* fallback */
  background: color-mix(in srgb, var(--card-color, var(--color-secondary)) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-dash__quick-icon {
  font-size: 18px;
  color: var(--card-color, var(--color-secondary));
}
.acc-dash__quick-label {
  font-size: 12px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.3;
}

/* ── Info cards (compartidas con sub-páginas) ─────────────────── */
.acc-info-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  margin-bottom: 20px;
  overflow: hidden;
}
.acc-info-card__header {
  display: flex;
  align-items: center;
  padding: 13px 18px;
  background: #f8f9fb;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  gap: 8px;
}
.acc-info-card__header-icon { color: var(--color-secondary); flex-shrink: 0; }
.acc-info-card__edit {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--color-secondary);
  border-radius: 4px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.acc-info-card__edit:hover {
  background: var(--color-secondary);
  color: #fff !important;
  text-decoration: none !important;
}
.acc-info-card__body      { padding: 20px; }
.acc-info-card__body--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 0;
}
.acc-info-card__rows      { display: flex; flex-direction: column; gap: 12px; }
.acc-info-card__row       { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; }
.acc-info-card__label     { font-weight: 600; color: #5a6371; min-width: 80px; flex-shrink: 0; }
.acc-info-card__val       { color: #1a2533; }
.acc-info-card__empty     { color: #8a94a0; font-size: 13px; font-style: italic; margin: 0; }

/* Address sub-section */
.acc-addr__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.acc-addr__icon { color: var(--color-secondary); }
.acc-addr__heading .acc-info-card__edit { margin-left: auto; }
.acc-addr__text { font-size: 13.5px; color: #4a5568; line-height: 1.6; margin: 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
  .acc-layout { grid-template-columns: 1fr; }
  .acc-sidebar { position: static; }
  .acc-dash__quick { grid-template-columns: repeat(4, 1fr); }
  .acc-hero__avatar-wrap { width: 52px; height: 52px; }
  h1.acc-hero__title { font-size: 20px !important; }
}
@media (max-width: 768px) {
  .acc-info-card__body--two-col { grid-template-columns: 1fr; gap: 16px; }
  .acc-dash__quick { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (max-width: 576px) {
  .acc-dash__quick { grid-template-columns: repeat(2, 1fr); }
  .acc-hero__inner { flex-direction: column; align-items: flex-start; }
}


/* ══════════════════════════════════════
   BASE DE CONOCIMIENTO  /base_conocimiento
   ══════════════════════════════════════ */

/* ── Hero principal ── */
.kb-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 52px 0 36px;
    color: #fff;
}
.kb-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 10px;
}
.kb-hero__title {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.kb-hero__sub {
    font-size: 15px;
    color: rgba(255,255,255,0.78);
    margin: 0 0 26px;
}

/* ── Hero de subpáginas (NavBreadcrumb) ── */
.kb-sub-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 40px 0 28px;
    color: #fff;
}
.kb-sub-hero__title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.2;
}

/* ── Buscador dentro del hero ── */
.kb-hero-search {
    position: relative;
    max-width: 580px;
    margin-bottom: 28px;
}
.kb-hero-search__input {
    width: 100%;
    padding: 14px 48px 14px 18px;
    font-size: 15px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    outline: none;
    backdrop-filter: blur(4px);
    transition: background .2s;
    box-sizing: border-box;
}
.kb-hero-search__input::placeholder { color: rgba(255,255,255,0.6); }
.kb-hero-search__input:focus { background: rgba(255,255,255,0.22); }
.kb-hero-search__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.65);
    pointer-events: none;
    font-size: 15px;
}

/* Resultados del buscador */
.kb-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 200;
    overflow: hidden;
}
.kb-search-results__item { border-bottom: 1px solid var(--color-bg); }
.kb-search-results__item:last-child { border-bottom: none; }
.kb-search-results__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: #333;
    transition: background .15s;
}
.kb-search-results__link:hover { background: #f5f7fb; color: var(--color-primary); text-decoration: none; }
.kb-search-results__img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.kb-search-results__title { font-size: 13px; font-weight: 600; color: #222; margin-bottom: 3px; }
.kb-search-results__meta { font-size: 11px; color: #888; }

/* ── Cuerpo de la página ── */
.kb-body { padding: 40px 15px 56px; }

.kb-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e8eaed;
}
.kb-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}
.kb-section-count { font-size: 13px; color: #888; }

/* ── Grid de categorías ── */
.kb-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991px) { .kb-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .kb-cat-grid { grid-template-columns: 1fr; } }

.kb-cat-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
    color: inherit;
}
.kb-cat-card:hover {
    box-shadow: 0 8px 24px rgba(0,59,100,0.13);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}
.kb-cat-card__img-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 20px 18px;
    background: #f8f9fb;
}
.kb-cat-card__img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}
.kb-cat-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid var(--color-bg);
}
.kb-cat-card__info { display: flex; flex-direction: column; gap: 3px; }
.kb-cat-card__name { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.kb-cat-card__count { font-size: 12px; color: #777; }
.kb-cat-card__arrow { color: var(--color-secondary); font-size: 12px; }

/* ── Grid de posts (ListItems) ── */
.kb-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 575px) { .kb-posts-grid { grid-template-columns: 1fr; } }

.kb-post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.kb-post-card:hover {
    box-shadow: 0 8px 24px rgba(0,59,100,0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.kb-post-card__img-wrap {
    position: relative;
    overflow: hidden;
    height: 160px;
    background: var(--color-bg);
}
.kb-post-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.kb-post-card:hover .kb-post-card__img { transform: scale(1.04); }

.kb-post-card__date {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 5px;
    padding: 4px 8px;
    text-align: center;
    line-height: 1.2;
}
.kb-post-card__day   { display: block; font-size: 16px; font-weight: 700; }
.kb-post-card__month { display: block; font-size: 10px; text-transform: uppercase; color: var(--color-accent); letter-spacing: 1px; }

.kb-post-card__body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.kb-post-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px;
    line-height: 1.4;
}
.kb-post-card__desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 12px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-post-card__cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary);
}
.kb-post-card__cta i { font-size: 10px; margin-left: 4px; }

/* ── Botón cargar más ── */
.kb-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.kb-load-more-btn:hover { background: var(--color-secondary); }

/* ── Sidebar ── */
.kb-sidebar { padding-top: 8px; }
.kb-sidebar .widget-categories { margin-bottom: 0; }
.kb-sidebar .widget-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8eaed;
    margin-bottom: 12px;
}
.kb-sidebar .list { list-style: none; padding: 0; margin: 0; }
.kb-sidebar .list li { border-bottom: 1px solid var(--color-bg); }
.kb-sidebar .list li a {
    display: block;
    padding: 9px 4px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    transition: color .15s, padding-left .15s;
}
.kb-sidebar .list li a:hover { color: var(--color-secondary); padding-left: 8px; }

@media (max-width: 480px) {
    .kb-hero__title    { font-size: 26px; }
    .kb-sub-hero__title { font-size: 20px; }
    .kb-cat-grid       { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════
   PREGUNTAS FRECUENTES  /preguntas_frecuentes
   ══════════════════════════════════════ */

/* ── Hero ── */
.faq-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 52px 0 36px;
    color: #fff;
}
.faq-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 10px;
}
.faq-hero__title {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.faq-hero__sub {
    font-size: 15px;
    color: rgba(255,255,255,0.78);
    margin: 0 0 26px;
    max-width: 560px;
}

/* ── Body ── */
.faq-body { padding: 48px 15px 64px; }

/* ── Tabs de categoría ── */
.faq-cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}
.faq-cat-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 2px solid #e8eaed;
    border-radius: 50px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
    line-height: 1;
}
.faq-cat-tab:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.faq-cat-tab.activa {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.faq-cat-tab__icon {
    font-size: 15px;
    pointer-events: none;
}

/* ── Acordeón de preguntas ── */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s, border-color .2s;
}
.faq-item:hover {
    box-shadow: 0 4px 16px rgba(0,59,100,0.09);
}
.faq-item.activa {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(0,59,100,0.12);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    pointer-events: none;
}
.faq-item__question p {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.45;
    pointer-events: none;
}
.faq-item__icon {
    font-size: 13px;
    color: var(--color-secondary);
    flex-shrink: 0;
    transition: transform .3s ease;
    pointer-events: none;
}
.faq-item.activa .faq-item__icon {
    transform: rotate(45deg);
    color: var(--color-danger);
}

.faq-item__answer {
    display: block;
    font-size: 14px;
    color: #555;
    line-height: 1.75;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .3s ease, padding .3s ease;
    padding: 0 24px;
    pointer-events: none;
}
.faq-item.activa .faq-item__answer {
    opacity: 1;
    padding-bottom: 22px;
    padding-top: 4px;
    border-top: 1px solid var(--color-bg);
}

/* ── Responsive ── */
@media (max-width: 575px) {
    .faq-hero__title   { font-size: 26px; }
    .faq-cat-tab       { padding: 9px 16px; font-size: 13px; }
    .faq-item__question { padding: 16px 18px; gap: 14px; }
    .faq-item__question p { font-size: 14px; }
    .faq-item__answer  { padding: 0 18px; }
    .faq-item.activa .faq-item__answer { padding-bottom: 16px; }
}


/* ══════════════════════════════════════
   DISTRIBUIDOR  /distribuidor
   ══════════════════════════════════════ */

/* ── Hero ── */
.dist-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 52px 0 36px;
    color: #fff;
}
.dist-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 767px) {
    .dist-hero__inner { grid-template-columns: 1fr; gap: 24px; }
}
.dist-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 10px;
}
.dist-hero__title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.25;
}
.dist-hero__brand { color: var(--color-accent); }
.dist-hero__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.78);
    line-height: 1.65;
    margin: 0;
}

/* Bloque de beneficios */
.dist-hero__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.dist-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 14px;
}
.dist-benefit__icon {
    font-size: 18px;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.dist-benefit__text {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
    font-weight: 500;
}

/* ── Body ── */
.dist-body { padding: 40px 15px 64px; }

/* ── Card del formulario ── */
.dist-form-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Secciones del formulario ── */
.dist-section {
    padding: 28px 32px;
    border-bottom: 1px solid var(--color-bg);
}
.dist-section:last-of-type { border-bottom: none; }

.dist-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-bg);
}
.dist-section__icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dist-section__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* ── Campos ── */
.dist-field { margin-bottom: 18px; }
.dist-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.dist-field__required { color: var(--color-danger); margin-left: 2px; }
.dist-field__error {
    font-size: 11px;
    color: var(--color-danger);
    margin: 4px 0 0;
}

/* Inputs del formulario */
.dist-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid #dde1e7;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.dist-input:focus {
    border-color: var(--color-secondary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(4,87,160,0.1);
}
select.dist-input { height: 40px; cursor: pointer; }

/* react-select wrapper */
.dist-select .Select-control,
.dist-select > div:first-child {
    border: 1.5px solid #dde1e7 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    min-height: 40px !important;
}
.dist-select > div:first-child:focus-within {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 3px rgba(4,87,160,0.1) !important;
}

/* Radio — ¿Vendes por internet? */
.dist-radio-group {
    display: flex;
    gap: 24px;
    margin-top: 6px;
}
.dist-radio-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.dist-radio-opt input[type="radio"] { cursor: pointer; accent-color: var(--color-secondary); }

/* Checkboxes — áreas de interés */
.dist-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
}
.dist-check-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.dist-check-item input[type="checkbox"] { cursor: pointer; accent-color: var(--color-secondary); }

/* Input de referencia + botón limpiar */
.dist-ref-wrap { display: flex; gap: 8px; align-items: center; }
.dist-ref-wrap .dist-input { flex: 1; }
.dist-clear-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    background: var(--color-danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.dist-clear-btn:hover { background: #960520; }

/* ── Footer del formulario ── */
.dist-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 32px;
    background: #f8f9fb;
    border-top: 1px solid #e8eaed;
}
.dist-form-footer__note {
    font-size: 12px;
    color: #777;
    margin: 0;
}
.dist-form-footer__note i { margin-right: 5px; color: var(--color-secondary); }

.dist-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    letter-spacing: .3px;
    white-space: nowrap;
}
.dist-submit-btn:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    transform: translateY(-1px);
}
.dist-submit-btn i { font-size: 13px; }

/* ── Responsive ── */
@media (max-width: 575px) {
    .dist-hero__title   { font-size: 22px; }
    .dist-hero__benefits { grid-template-columns: 1fr; }
    .dist-section       { padding: 20px 18px; }
    .dist-form-footer   { flex-direction: column; align-items: flex-start; padding: 18px; }
    .dist-submit-btn    { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════
   BÚSQUEDA  /busqueda  srch-*
   ══════════════════════════════════════ */

/* ── Hero ── */
.srch-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 36px 0 28px;
    color: #fff;
}
.srch-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}
.srch-hero__title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.srch-hero__icon { color: var(--color-accent); font-size: 22px; }

/* ── Cuerpo ── */
.srch-body { padding: 28px 15px 64px; }

/* ── Grid de productos ── */
.srch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.srch-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1199px) {
    .srch-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .srch-grid,
    .srch-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .srch-grid,
    .srch-grid--4 { grid-template-columns: 1fr; }
}

/* ── Vista lista ── */
.srch-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

/* ── Sin resultados ── */
.srch-no-results {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 20px;
    color: #999;
    text-align: center;
}
.srch-no-results__icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: #ccc;
}
.srch-no-results p { font-size: 15px; margin: 0; }

/* ── Paginación ── */
.srch-pagination { padding: 16px 0 8px; }
.srch-pagination__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.srch-pagination .pagination { justify-content: center; gap: 4px; }
.srch-pagination .page-item .page-link {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 6px !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    min-width: 36px;
    text-align: center;
    transition: border-color .15s, background .15s, color .15s;
    background: #fff !important;
}
.srch-pagination .page-item .page-link:hover {
    border-color: var(--color-secondary) !important;
    background: var(--color-secondary) !important;
    color: #fff !important;
}
.srch-pagination .page-item.active .page-link {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: #fff !important;
}


/* ══════════════════════════════════════
   CARRITO DE COMPRAS  /carrito_compras
   ══════════════════════════════════════ */

/* ── Hero ── */
.sc-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 44px 0 30px;
    color: #fff;
}
.sc-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}
.sc-hero__title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.2;
}

/* ── Body ── */
.sc-body { padding: 36px 15px 64px; }

.sc-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

/* ══ Tabla de productos ══ */
.sc-table-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Cabecera de la tabla */
.sc-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-bg);
    background: #f8f9fb;
}
.sc-table-header__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}
.sc-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.sc-clear-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* Filas de productos */
.sc-items { display: flex; flex-direction: column; }

.sc-item {
    display: grid;
    grid-template-columns: 80px 1fr 110px 120px 110px;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-bg);
    transition: background .15s;
}
.sc-item:last-child { border-bottom: none; }
.sc-item:hover { background: #fafbfc; }

.sc-item__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    overflow: hidden;
    background: #f8f9fb;
    flex-shrink: 0;
}
.sc-item__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.sc-item__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-item__name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-item__name:hover { color: var(--color-secondary); text-decoration: none; }
.sc-item__remove {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: fit-content;
    transition: color .15s;
}
.sc-item__remove:hover { color: var(--color-danger); }

.sc-item__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
    margin-bottom: 4px;
}
.sc-item__price-wrap,
.sc-item__qty-wrap,
.sc-item__subtotal-wrap { display: flex; flex-direction: column; }
.sc-item__price   { font-size: 14px; font-weight: 600; color: #333; }
.sc-item__subtotal { font-size: 15px; font-weight: 700; color: var(--color-primary); }

/* Footer de la tabla */
.sc-table-footer {
    padding: 14px 20px;
    background: #f8f9fb;
    border-top: 1px solid var(--color-bg);
}
.sc-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color .2s;
}
.sc-continue-btn:hover { color: var(--color-primary); text-decoration: none; }

/* ══ Panel de resumen ══ */
.sc-summary {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.sc-summary__header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-bg);
    background: #f8f9fb;
}
.sc-summary__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}
.sc-summary__rows {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sc-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sc-summary__label { font-size: 13px; color: #666; }
.sc-summary__value { font-size: 13px; font-weight: 600; color: #333; }

.sc-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-top: 2px solid #e8eaed;
    background: #f8f9fb;
}
.sc-summary__total-label { font-size: 15px; font-weight: 700; color: var(--color-primary); }
.sc-summary__total-value { font-size: 20px; font-weight: 700; color: var(--color-primary); }

.sc-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 20px 8px;
    padding: 13px 20px;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.sc-checkout-btn:hover {
    background: #f0d200;
    color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.sc-keep-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 20px 18px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-decoration: none;
    transition: color .2s;
}
.sc-keep-shopping:hover { color: var(--color-secondary); text-decoration: none; }

/* ══ Carrito vacío ══ */
.sc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
}
.sc-empty__icon-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.sc-empty__icon { font-size: 36px; color: var(--color-primary); }
.sc-empty__title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
}
.sc-empty__sub {
    font-size: 14px;
    color: #777;
    max-width: 400px;
    line-height: 1.6;
    margin: 0 0 28px;
}
.sc-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.sc-empty__cta:hover { background: var(--color-secondary); color: #fff; text-decoration: none; }

/* ── Stepper de cantidad ── */
.qty-stepper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 1.5px solid #dde1e7;
    border-radius: 8px;
    overflow: hidden;
    width: 38px;
}
.qty-stepper__btn {
    width: 100%;
    height: 26px;
    background: #f4f7fb;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s;
}
.qty-stepper__btn:hover { background: var(--color-primary); color: var(--color-accent); }
.qty-stepper__val {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    padding: 4px 0;
    border-top: 1px solid #dde1e7;
    border-bottom: 1px solid #dde1e7;
    user-select: none;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sc-grid { grid-template-columns: 1fr; }
    .sc-item { grid-template-columns: 70px 1fr; gap: 12px; }
    .sc-item__price-wrap,
    .sc-item__qty-wrap,
    .sc-item__subtotal-wrap {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .sc-item__label { margin-bottom: 0; min-width: 64px; }
}
@media (max-width: 575px) {
    .sc-hero__title { font-size: 22px; }
    .sc-item { grid-template-columns: 60px 1fr; padding: 12px 14px; }
    .sc-table-header, .sc-table-footer { padding: 12px 14px; }
}


/* ══════════════════════════════════════
   CHECKOUT  /checkout
   ══════════════════════════════════════ */

/* ── Hero ── */
.co-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 44px 0 30px;
    color: #fff;
}
.co-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}
.co-hero__title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
}

/* ── Body ── */
.co-body { padding: 28px 15px 64px; }
.co-grid { align-items: flex-start; }

/* ── Steps ── */
.co-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}
.co-step {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #aaa;
}
.co-step--done { color: var(--color-secondary); }
.co-step--done:hover { color: var(--color-primary); text-decoration: none; }
.co-step--active { color: var(--color-primary); }
.co-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    background: #fff;
}
.co-step--active .co-step__num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.co-step--done .co-step__num {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}
.co-step__label { font-size: 13px; font-weight: 600; }
.co-step__connector {
    width: 60px;
    height: 2px;
    background: #e0e0e0;
    margin: 0 8px;
    flex-shrink: 0;
}

/* ── Secciones del formulario izquierdo ── */
.co-section {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.co-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f8f9fb;
    border-bottom: 1px solid var(--color-bg);
}
.co-section__icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.co-section__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}
.co-section__body { padding: 16px 20px; }

/* Sección de pago dentro del summary */
.co-section--payment {
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--color-bg);
    margin-bottom: 0;
}
.co-section--payment .co-section__header { background: #fff; }

/* ── Panel de resumen (columna derecha) ── */
.co-summary {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.co-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fb;
    border-bottom: 1px solid var(--color-bg);
}
.co-summary__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}
.co-summary__count { font-size: 12px; color: #888; }

/* Items del pedido */
.co-summary__items {
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 260px;
    overflow-y: auto;
}
.co-summary__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.co-summary__item-img-wrap {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    overflow: hidden;
    background: #f8f9fb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-summary__item-img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.co-summary__item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-summary__item-name {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.co-summary__item-name:hover { color: var(--color-secondary); text-decoration: none; }
.co-summary__item-calc { font-size: 11px; color: #888; }

/* Totales */
.co-summary__totals {
    padding: 12px 20px;
    border-top: 1px solid var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.co-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
}
.co-summary__row--discount { color: var(--color-danger); }
.co-summary__discount { font-weight: 600; }
.co-summary__free { font-weight: 700; color: var(--color-secondary); }
.co-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #f8f9fb;
    border-top: 2px solid #e8eaed;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
}
.co-summary__total-value { font-size: 20px; font-weight: 700; color: var(--color-primary); }

/* Nota de seguridad */
.co-payment-note {
    font-size: 12px;
    color: #666;
    margin-bottom: 14px;
}
.co-payment-note i { color: var(--color-secondary); margin-right: 5px; }

/* Footer del summary */
.co-summary__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-bg);
    background: #f8f9fb;
}

/* Botón pagar */
.co-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-accent);
    color: var(--color-primary);
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    letter-spacing: .3px;
}
.co-pay-btn:hover {
    background: #f0d200;
    transform: translateY(-1px);
}

/* ── Métodos de pago ── */
.co-gateway-list { display: flex; flex-direction: column; gap: 8px; }
.co-gateway-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e8eaed;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #fff;
}
.co-gateway-option:hover { border-color: var(--color-secondary); background: #f5f8ff; }
.co-gateway-option--active { border-color: var(--color-primary); background: #f0f4f8; }
.co-gateway-option__radio { display: none; }
.co-gateway-option__icon {
    font-size: 18px;
    color: var(--color-secondary);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.co-gateway-option--active .co-gateway-option__icon { color: var(--color-primary); }
.co-gateway-option__text { display: flex; flex-direction: column; gap: 2px; }
.co-gateway-option__label { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.co-gateway-option__sub   { font-size: 11px; color: #888; }

/* ── Carrito vacío ── */
.co-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
}
.co-empty__icon-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.co-empty__icon { font-size: 36px; color: var(--color-primary); }
.co-empty__title { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 10px; }
.co-empty__sub { font-size: 14px; color: #777; max-width: 420px; line-height: 1.6; margin: 0 0 28px; }
.co-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.co-empty__cta:hover { background: var(--color-secondary); color: #fff; text-decoration: none; }

/* ── Toggle collapsible (cupón, transferencia, facturación, envío) ── */
.co-toggle-wrap { display: flex; flex-direction: column; gap: 10px; }
.co-toggle-prompt { font-size: 13px; color: #444; margin: 0; }
.co-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--color-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s;
}
.co-toggle-btn:hover { color: var(--color-primary); }
.co-toggle-btn--sm { font-size: 12px; }
.co-toggle-body { margin-top: 8px; }
.co-toggle-hint { font-size: 13px; color: #666; margin: 0 0 12px; }
.co-toggle-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.co-toggle-actions--top { margin-top: 0; margin-bottom: 14px; }

/* ── Botones del checkout ── */
.co-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .2s, border-color .2s, color .2s;
}
.co-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.co-btn--primary:hover { background: var(--color-secondary); border-color: var(--color-secondary); }
.co-btn--outline {
    background: #fff;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.co-btn--outline:hover { background: var(--color-primary); color: #fff; }
.co-btn--danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.co-btn--danger:hover { background: #960520; border-color: #960520; }
.co-btn--sm { padding: 5px 12px; font-size: 12px; }
.co-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cupón ── */
.co-coupon-form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.co-coupon-input {
    flex: 1;
    min-width: 160px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dde1e7;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s;
}
.co-coupon-input:focus { border-color: var(--color-secondary); }
.co-coupon-applied {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #edfaf3;
    border: 1px solid #6fcf97;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1a7f4b;
}
.co-coupon-applied .fa { font-size: 15px; }

/* ── Transferencia bancaria ── */
.co-bank-note {
    font-size: 13px;
    color: #555;
    background: #f4f7fb;
    border-left: 3px solid var(--color-secondary);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin: 0 0 14px;
    line-height: 1.55;
}
.co-bank-note a { color: var(--color-secondary); font-weight: 600; }
.co-bank-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f9fafb;
    border: 1px solid #dde1e7;
    border-radius: 8px;
    padding: 14px 16px;
}
.co-bank-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #333;
}
.co-bank-label {
    font-weight: 700;
    color: #555;
    min-width: 90px;
    flex-shrink: 0;
}
.co-bank-mono { font-family: monospace; font-size: 13px; letter-spacing: .5px; }

/* ── Método de entrega ── */
.co-shipping-options { display: flex; flex-direction: column; gap: 8px; }
.co-shipping-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1.5px solid #dde1e7;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    font-size: 13px;
    color: #333;
}
.co-shipping-option:hover { border-color: var(--color-secondary); background: #f5f8ff; }
.co-shipping-option--active { border-color: var(--color-primary); background: #f0f4f8; font-weight: 600; }
.co-shipping-option__radio { display: none; }
.co-shipping-option__icon { font-size: 15px; color: var(--color-secondary); flex-shrink: 0; }
.co-shipping-option--active .co-shipping-option__icon { color: var(--color-primary); }
.co-shipping-option__label { flex: 1; }
.co-shipping-option__price { font-weight: 700; color: var(--color-primary); }

/* ── Dirección seleccionada (encabezado del bloque) ── */
.co-addr-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
    flex-wrap: wrap;
}
.co-addr-selected__icon { color: var(--color-secondary); flex-shrink: 0; }
.co-addr-selected__text { flex: 1; }

/* ── Grid de tarjetas de dirección ── */
.co-addr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 4px 0;
}
.co-addr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    text-align: center;
    transition: border-color .2s, background .2s;
}
.co-addr-card:hover { border-color: var(--color-secondary); background: #f5f8ff; }
.co-addr-card--selected { border-color: var(--color-danger); border-style: solid; background: #fff5f6; }
.co-addr-card__icon { font-size: 22px; color: var(--color-text-muted); }
.co-addr-card--selected .co-addr-card__icon { color: var(--color-danger); }
.co-addr-card__name { font-size: 12px; color: #444; margin: 0; line-height: 1.4; flex: 1; }
.co-addr-card__badge {
    display: inline-block;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}

/* ── Responsive ── */
@media (max-width: 575px) {
    .co-hero__title   { font-size: 22px; }
    .co-step__label   { display: none; }
    .co-step__connector { width: 30px; }
    .co-section__body { padding: 14px; }
    .co-addr-grid { grid-template-columns: 1fr 1fr; }
    .co-coupon-form { flex-direction: column; }
    .co-bank-label { min-width: 80px; }
}


/* ══════════════════════════════════════
   LISTA DE DESEOS  /lista_deseos
   ══════════════════════════════════════ */

/* ── Hero ── */
.wl-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 44px 0 30px;
    color: #fff;
}
.wl-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}
.wl-hero__title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.wl-hero__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.78);
    margin: 0 0 22px;
}

/* ── Body ── */
.wl-body { padding: 36px 15px 64px; }

/* ── Cabecera de sección ── */
.wl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e8eaed;
}
.wl-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wl-section-title__icon { color: var(--color-danger); font-size: 16px; }
.wl-section-count { font-size: 13px; color: #888; }

/* ── Grid de cards ── */
.wl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .wl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .wl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .wl-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.wl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.wl-card:hover {
    box-shadow: 0 8px 24px rgba(0,59,100,0.12);
    transform: translateY(-3px);
}

/* Botón eliminar */
.wl-card__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #aaa;
    cursor: pointer;
    z-index: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.wl-card__remove:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

/* Imagen */
.wl-card__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: #f8f9fb;
    padding: 12px;
    overflow: hidden;
}
.wl-card__img {
    max-width: 100%;
    max-height: 156px;
    object-fit: contain;
    transition: transform .3s;
}
.wl-card:hover .wl-card__img { transform: scale(1.05); }

/* Cuerpo */
.wl-card__body {
    padding: 14px 16px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wl-card__name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wl-card__name:hover { color: var(--color-secondary); text-decoration: none; }

.wl-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.wl-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}
.wl-card__stock {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
}
.wl-card__stock--in  { background: #e6f9f0; color: #1a7a4a; }
.wl-card__stock--out { background: #fdecea; color: var(--color-danger); }

/* Footer */
.wl-card__footer {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--color-bg);
}
.wl-card__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 12px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.wl-card__add-btn:hover:not(:disabled) { background: var(--color-secondary); }
.wl-card__add-btn--disabled,
.wl-card__add-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    color: #888;
}

/* ── Estado vacío ── */
.wl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
}
.wl-empty__icon-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff0f2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.wl-empty__icon  { font-size: 38px; color: var(--color-danger); }
.wl-empty__title { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 10px; }
.wl-empty__sub   { font-size: 14px; color: #777; max-width: 400px; line-height: 1.6; margin: 0 0 28px; }
.wl-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.wl-empty__cta:hover { background: var(--color-secondary); color: #fff; text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 575px) {
    .wl-hero__title { font-size: 24px; }
    .wl-section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── wl-share__* — Barra de compartir wishlist ───────────────────── */
.wl-share {
   background: #f8f9fc;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 20px 24px;
   margin-bottom: 28px;
}
.wl-share__head {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 14px;
}
.wl-share__icon { color: var(--color-primary); font-size: 16px; }
.wl-share__label { font-size: 15px; font-weight: 700; color: #1a1a2e; }

/* Inactive */
.wl-share__desc { font-size: 13px; color: #666; margin: 0 0 14px; line-height: 1.6; }
.wl-share__gen-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 9px 20px;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s;
}
.wl-share__gen-btn:hover { background: var(--color-secondary); }

/* Active */
.wl-share__url-wrap {
   display: flex;
   gap: 8px;
   margin-bottom: 10px;
}
.wl-share__url-input {
   flex: 1;
   padding: 8px 12px;
   border: 1px solid #d0d7e0;
   border-radius: 8px;
   font-size: 12px;
   color: #555;
   background: #fff;
   outline: none;
   min-width: 0;
}
.wl-share__copy-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
   transition: background .2s, transform .15s;
   flex-shrink: 0;
}
.wl-share__copy-btn:hover { background: var(--color-secondary); }
.wl-share__copy-btn--done { background: #1a7a4a; }
.wl-share__copy-btn--done:hover { background: #148040; }
.wl-share__hint {
   font-size: 12px;
   color: #777;
   margin: 0 0 12px;
   display: flex;
   align-items: center;
   gap: 5px;
}
.wl-share__revoke-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   background: transparent;
   color: #c0392b;
   border: 1px solid #c0392b;
   border-radius: 7px;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s, color .2s;
}
.wl-share__revoke-btn:hover { background: #c0392b; color: #fff; }

@media (max-width: 575px) {
   .wl-share__url-wrap { flex-direction: column; }
   .wl-share__copy-btn { justify-content: center; }
}

/* ── wlsh-* — Vista pública wishlist compartida ─────────────────── */
.wlsh-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 80px 0;
   gap: 16px;
   color: #888;
}
.wlsh-loading__spinner {
   width: 36px; height: 36px;
   border: 3px solid #e0e0e0;
   border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: wlsh-spin .7s linear infinite;
}
@keyframes wlsh-spin { to { transform: rotate(360deg); } }

.wlsh-error {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 80px 24px;
}
.wlsh-error__icon  { font-size: 48px; color: var(--color-danger); margin-bottom: 18px; }
.wlsh-error__title { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 10px; }
.wlsh-error__sub   { font-size: 14px; color: #777; max-width: 400px; line-height: 1.6; margin: 0 0 28px; }

.wlsh-readonly-banner {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #fff8e1;
   border: 1px solid #ffe082;
   border-radius: 8px;
   padding: 10px 16px;
   font-size: 13px;
   color: #795548;
   margin-bottom: 22px;
}
.wlsh-readonly-banner i { color: #f59e0b; flex-shrink: 0; }

/* Card readonly: sin botón eliminar, CTA = "Ver producto" */
.wl-card--readonly .wl-card__remove { display: none; }
.wl-card--readonly .wl-card__add-btn {
   display: inline-flex;
   text-decoration: none;
   justify-content: center;
}
.wl-card--readonly .wl-card__add-btn:hover { background: var(--color-secondary); text-decoration: none; color: #fff; }


/* ══════════════════════════════════════
   POLÍTICAS  /politicas_empresa | _envio | _garantia
   ══════════════════════════════════════ */

/* ── Hero ── */
.pol-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 44px 0 30px;
    color: #fff;
}
.pol-hero__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 10px;
}
.pol-hero__title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}
.pol-hero__icon {
    font-size: 24px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ── Body ── */
.pol-body { padding: 36px 15px 64px; }

.pol-grid {
   display              : grid;
   grid-template-columns: 260px 1fr;
   gap                  : 28px;
   align-items          : start;
}

.pol-main { min-width: 0; }
.pol-sidebar-col { margin-bottom: 0; }

/* ── Sidebar de navegación ── */
.pol-sidebar {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.pol-sidebar__heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #aaa;
    margin: 0;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--color-bg);
    background: #f8f9fb;
}
.pol-sidebar__nav {
    display: flex;
    flex-direction: column;
}
.pol-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid var(--color-bg);
    transition: background .15s, color .15s;
}
.pol-sidebar__link:last-child { border-bottom: none; }
.pol-sidebar__link:hover {
    background: #f5f7fb;
    color: var(--color-primary);
    text-decoration: none;
}
.pol-sidebar__link--active {
    background: #EEF3F8;
    color: var(--color-primary);
    font-weight: 700;
    border-left: 3px solid var(--color-primary);
    padding-left: 15px;
}
.pol-sidebar__link-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    color: var(--color-secondary);
    flex-shrink: 0;
}
.pol-sidebar__link--active .pol-sidebar__link-icon { color: var(--color-primary); }
.pol-sidebar__link-arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--color-primary);
}

/* ── Tarjeta de contenido ── */
.pol-content-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    padding: 36px 40px;
    min-height: 300px;
}

/* ── Tipografía del contenido parseado ── */
.pol-content { font-size: 14px; color: #444; line-height: 1.8; }

.pol-content h1,
.pol-content h2,
.pol-content h3,
.pol-content h4 {
    color: var(--color-primary);
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.3;
}
.pol-content h1 { font-size: 24px; }
.pol-content h2 { font-size: 20px; border-bottom: 2px solid var(--color-bg); padding-bottom: 8px; }
.pol-content h3 { font-size: 16px; }
.pol-content h4 { font-size: 14px; }

.pol-content p { margin-bottom: 14px; }

.pol-content ul,
.pol-content ol {
    padding-left: 24px;
    margin-bottom: 16px;
}
.pol-content li { margin-bottom: 6px; }

.pol-content strong,
.pol-content b { color: #222; }

.pol-content a {
    color: var(--color-secondary);
    text-decoration: underline;
}
.pol-content a:hover { color: var(--color-primary); }

.pol-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
    font-size: 13px;
}
.pol-content table th,
.pol-content table td {
    border: 1px solid #e8eaed;
    padding: 10px 14px;
    text-align: left;
}
.pol-content table th {
    background: #f8f9fb;
    font-weight: 700;
    color: var(--color-primary);
}
.pol-content table tr:hover td { background: #fafbfc; }

.pol-content blockquote {
    border-left: 4px solid var(--color-secondary);
    background: #f5f8ff;
    padding: 14px 20px;
    margin: 18px 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #555;
}

.pol-content hr {
    border: none;
    border-top: 2px solid var(--color-bg);
    margin: 24px 0;
}

/* ── Loading state ── */
.pol-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    font-size: 14px;
    color: #888;
}
.pol-loading i { color: var(--color-secondary); }

/* ── Responsive ── */
@media (max-width: 991px) {
    .pol-grid         { grid-template-columns: 1fr; }
    .pol-content-card { padding: 24px 20px; }
}
@media (max-width: 575px) {
    .pol-hero__title  { font-size: 22px; }
    .pol-content-card { padding: 18px; }
}

/* ============================================================
   PRIVACY POLICY  (/politica-privacidad)  —  pp-*
   ============================================================ */

/* Hero */
.pp-hero {
   background    : linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
   padding       : 56px 0 48px;
   color         : #fff;
}
.pp-hero__eyebrow {
   font-size     : 0.75rem;
   font-weight   : 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color         : var(--color-accent);
   margin        : 0 0 10px;
}
.pp-hero__title {
   font-size     : 2rem;
   font-weight   : 800;
   color         : #fff;
   margin        : 0 0 20px;
   display       : flex;
   align-items   : center;
   gap           : 12px;
   flex-wrap     : wrap;
}
.pp-hero__icon {
   font-size     : 1.6rem;
   color         : var(--color-accent);
}

/* Body layout */
.pp-body {
   padding-top   : 40px;
   padding-bottom: 60px;
}

/* ── Sidebar ── */
.pp-sidebar-col { margin-bottom: 32px; }

.pp-sidebar {
   position      : sticky;
   top           : 90px;
   background    : #fff;
   border        : 1px solid #e2e6ea;
   border-radius : 10px;
   padding       : 20px 16px;
   box-shadow    : 0 2px 8px rgba(0,0,0,.06);
}

.pp-toc-header {
   display       : flex;
   align-items   : center;
   gap           : 8px;
   padding-bottom: 10px;
   border-bottom : 2px solid var(--color-primary);
   margin-bottom : 6px;
}
.pp-toc-header__icon { color: var(--color-primary); font-size: 1.25rem; }
.pp-toc-header__label {
   font-size     : 1.1rem;
   font-weight   : 700;
   color         : var(--color-primary);
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.pp-toc-date {
   font-size     : 0.95rem;
   color         : #6c757d;
   margin        : 0 0 14px;
}
.pp-toc-date i { margin-right: 4px; }

.pp-toc-nav {
   display       : flex;
   flex-direction: column;
   gap           : 2px;
}
.pp-toc-nav__link {
   display       : flex;
   align-items   : center;
   gap           : 8px;
   padding       : 9px 10px;
   border-radius : 6px;
   font-size     : 1.05rem;
   color         : #444;
   text-decoration: none;
   transition    : background .18s, color .18s;
   cursor        : pointer;
   line-height   : 1.4;
}
.pp-toc-nav__link:hover {
   background    : #f0f4ff;
   color         : var(--color-primary);
   text-decoration: none;
}
.pp-toc-nav__num {
   flex-shrink   : 0;
   font-size     : 0.85rem;
   font-weight   : 700;
   color         : var(--color-secondary);
   background    : #e8f0ff;
   border-radius : 4px;
   padding       : 2px 7px;
   font-family   : monospace;
}

/* ── Important highlights block ── */
.pp-highlights {
   background    : #fff;
   border        : 1px solid #e2e6ea;
   border-radius : 10px;
   padding       : 24px;
   margin-bottom : 24px;
   box-shadow    : 0 2px 8px rgba(0,0,0,.06);
}
.pp-highlights__heading {
   font-size     : 1.35rem;
   font-weight   : 700;
   color         : var(--color-primary);
   margin        : 0 0 18px;
   display       : flex;
   align-items   : center;
   gap           : 8px;
}
.pp-highlights__heading-icon { color: var(--color-secondary); font-size: 1.35rem; }

.pp-highlights__list {
   display       : flex;
   flex-direction: column;
   gap           : 14px;
}
.pp-highlight-item {
   display       : flex;
   gap           : 14px;
   align-items   : flex-start;
   background    : #f8f9fb;
   border-left   : 4px solid var(--color-secondary);
   border-radius : 0 8px 8px 0;
   padding       : 14px 16px;
}
.pp-highlight-item__icon-wrap {
   flex-shrink   : 0;
   width         : 40px;
   height        : 40px;
   border-radius : 50%;
   background    : var(--color-secondary);
   display       : flex;
   align-items   : center;
   justify-content: center;
   color         : #fff;
   font-size     : 1.1rem;
}
.pp-highlight-item__text {
   margin        : 0;
   font-size     : 1.1rem;
   color         : #444;
   line-height   : 1.85;
}
.pp-highlight-item__link {
   color         : var(--color-secondary);
   font-weight   : 600;
}
.pp-highlight-item__link:hover { color: var(--color-primary); }

/* ── Content card (Politics wrapper) ── */
.pp-content-card {
   background    : #fff;
   border        : 1px solid #e2e6ea;
   border-radius : 10px;
   padding       : 28px 32px;
   box-shadow    : 0 2px 8px rgba(0,0,0,.06);
}

/* ── Sections ── */
.pp-sections { display: flex; flex-direction: column; gap: 0; }

.pp-section {
   padding       : 28px 0;
   border-bottom : 1px solid var(--color-bg);
}
.pp-section:last-child { border-bottom: none; padding-bottom: 0; }

.pp-section__title {
   font-size     : 1.4rem;
   font-weight   : 800;
   color         : var(--color-primary);
   display       : flex;
   align-items   : center;
   gap           : 12px;
   margin        : 0 0 14px;
}
.pp-section__badge {
   flex-shrink   : 0;
   display       : inline-flex;
   align-items   : center;
   justify-content: center;
   width         : 36px;
   height        : 36px;
   background    : var(--color-primary);
   color         : var(--color-accent);
   font-size     : 0.85rem;
   font-weight   : 900;
   border-radius : 6px;
   font-family   : monospace;
   letter-spacing: 0.02em;
}
.pp-section__subtitle {
   font-size     : 1.1rem;
   font-weight   : 700;
   color         : #444;
   margin        : 16px 0 10px;
   border-left   : 3px solid var(--color-accent);
   padding-left  : 10px;
}
.pp-section__body {
   font-size     : 1.15rem;
   color         : #555;
   line-height   : 1.95;
   margin        : 0 0 12px;
}
.pp-section__body:last-child { margin-bottom: 0; }
.pp-section__link { color: var(--color-secondary); font-weight: 600; }
.pp-section__link:hover { color: var(--color-primary); }

/* ── Info boxes (replacing .alert.alert-info) ── */
.pp-info-box {
   background    : #f0f5ff;
   border        : 1px solid #c8d8f7;
   border-left   : 4px solid var(--color-secondary);
   border-radius : 0 8px 8px 0;
   padding       : 18px 22px;
   margin        : 12px 0;
   font-size     : 1.15rem;
   color         : #444;
   line-height   : 1.95;
}
.pp-info-box strong {
   display       : block;
   color         : var(--color-primary);
   margin-bottom : 6px;
   font-size     : 1.15rem;
}
.pp-info-box p { margin: 0; }
.pp-info-box__list {
   margin        : 8px 0 0 0;
   padding-left  : 20px;
   font-size     : 1.15rem;
   line-height   : 1.95;
}
.pp-info-box__list li { margin-bottom: 8px; }
.pp-info-box a { color: var(--color-secondary); font-weight: 600; }
.pp-info-box a:hover { color: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 991px) {
   .pp-sidebar { position: static; margin-bottom: 28px; }
   .pp-content-card { padding: 20px 16px; }
   .pp-hero__title { font-size: 1.5rem; }
}
@media (max-width: 575px) {
   .pp-hero { padding: 36px 0 32px; }
   .pp-hero__title { font-size: 1.25rem; }
}

/* =====================================================
   FOOTER  ft-*
===================================================== */
.ft-root {
   background : var(--color-primary);
   color      : #fff;
   border-top : 3px solid var(--color-accent);
}

/* ── Trust strip ── */
.ft-trust {
   border-bottom : 1px solid rgba(255,255,255,.08);
   padding       : 18px 0;
}
.ft-trust__grid {
   display              : grid;
   grid-template-columns: repeat(4, 1fr);
   gap                  : 12px;
}
.ft-trust__item {
   display    : flex;
   align-items: center;
   gap        : 12px;
}
.ft-trust__icon {
   width           : 38px;
   height          : 38px;
   border-radius   : 50%;
   background      : rgba(255,224,0,.1);
   border          : 1px solid rgba(255,224,0,.25);
   display         : flex;
   align-items     : center;
   justify-content : center;
   font-size       : 15px;
   color           : var(--color-accent);
   flex-shrink     : 0;
}
.ft-trust__text {}
.ft-trust__label {
   font-size  : 12px;
   font-weight: 700;
   color      : #fff;
   display    : block;
   line-height: 1.3;
}
.ft-trust__sub {
   font-size: 11px;
   color    : rgba(255,255,255,.5);
   display  : block;
}
@media (max-width: 768px) {
   .ft-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 400px) {
   .ft-trust__grid { grid-template-columns: 1fr; }
}

/* ── Top section ── */
.ft-top {
   padding       : 48px 0 36px;
   border-bottom : 1px solid rgba(255,255,255,0.1);
   background    : linear-gradient(to bottom, rgba(255,255,255,.025) 0%, transparent 100%);
}

.ft-grid {
   display               : grid;
   grid-template-columns : repeat(4, 1fr);
   gap                   : 36px;
}

.ft-col { min-width: 0; }

/* ── Widget title ── */
.ft-widget-title {
   color          : var(--color-accent);
   font-size      : 11px;
   font-weight    : 700;
   text-transform : uppercase;
   letter-spacing : 1.2px;
   margin-bottom  : 18px;
   padding-bottom : 8px;
   border-bottom  : 2px solid rgba(255,224,0,0.35);
   display        : inline-block;
}

/* ── Contact list ── */
.ft-contact-list {
   list-style    : none;
   padding       : 0;
   margin        : 0 0 20px;
}
.ft-contact-list li {
   display     : flex;
   gap         : 8px;
   font-size   : 13px;
   color       : rgba(255,255,255,0.75);
   margin-bottom: 9px;
   align-items : flex-start;
   line-height : 1.45;
}
.ft-contact-list li i {
   color      : var(--color-accent);
   margin-top : 2px;
   flex-shrink: 0;
   width      : 14px;
   text-align : center;
}
.ft-contact-list a {
   color          : rgba(255,255,255,0.75);
   text-decoration: none;
   transition     : color 0.2s;
}
.ft-contact-list a:hover { color: var(--color-accent); }

/* ── Social icons ── */
.ft-social {
   display    : flex;
   gap        : 10px;
   margin-top : 6px;
}
.ft-social__icon {
   width          : 34px;
   height         : 34px;
   border-radius  : 50%;
   border         : 1px solid rgba(255,255,255,0.3);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : #fff;
   text-decoration: none;
   font-size      : 14px;
   transition     : background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.ft-social__icon:hover {
   background  : var(--color-accent);
   border-color: var(--color-accent);
   color       : var(--color-primary);
   transform   : translateY(-3px);
}

/* ── Quick / policy links ── */
.ft-links {
   list-style: none;
   padding   : 0;
   margin    : 0;
}
.ft-links li { margin-bottom: 10px; }
.ft-links a {
   color          : rgba(255,255,255,0.75);
   text-decoration: none;
   font-size      : 13px;
   display        : flex;
   align-items    : center;
   gap            : 7px;
   transition     : color 0.2s, padding-left 0.2s;
}
.ft-links a:hover {
   color       : var(--color-accent);
   padding-left: 4px;
}
.ft-links a i {
   color    : var(--color-accent);
   font-size: 10px;
}

/* ── WhatsApp link ── */
.ft-wa-link {
   display        : flex;
   align-items    : center;
   gap            : 7px;
   color          : rgba(255,255,255,0.75) !important;
   text-decoration: none;
   font-size      : 13px;
   transition     : color 0.2s;
}
.ft-wa-link:hover { color: var(--color-accent) !important; }
.ft-wa-link img   { width: 16px; height: 16px; }

/* ── Payments col ── */
.ft-comodo {
   width         : 100%;
   max-width     : 130px;
   margin-bottom : 14px;
   display       : block;
}
.ft-schedules-label {
   font-size  : 12px;
   color      : rgba(255,255,255,0.55);
   margin     : 0 0 6px;
}
.ft-schedules-wrap { margin-top: 10px; }
.ft-schedules {
   font-size  : 13px;
   color      : rgba(255,255,255,0.75);
   line-height: 1.9;
   margin-top : 4px;
}

/* ── Bottom bar ── */
.ft-bottom {
   background : #001E3C;
   padding    : 14px 0;
}
.ft-bottom__inner {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   flex-wrap      : wrap;
   gap            : 12px;
}
.ft-copyright {
   font-size : 12px;
   color     : rgba(255,255,255,0.55);
   margin    : 0;
}
.ft-privacy-link {
   font-size      : 12px;
   color          : rgba(255,255,255,0.55);
   text-decoration: none;
   transition     : color 0.2s;
}
.ft-privacy-link:hover { color: var(--color-accent); }
.ft-payments {
   height     : 26px;
   object-fit : contain;
}

/* ── Responsive ── */
@media (max-width: 992px) {
   .ft-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
   .ft-grid   { grid-template-columns: 1fr; gap: 28px; }
   .ft-top    { padding: 32px 0 28px; }
   .ft-bottom__inner { flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   SOLUCIÓN DETALLE  sol-*
===================================================== */

/* ── Hero ── */
.sol-hero {
   background   : linear-gradient(135deg, #001b35 0%, var(--color-primary) 45%, var(--color-secondary) 100%);
   padding      : 56px 0 60px;
   margin-bottom: 40px;
   position     : relative;
   overflow     : hidden;
}

/* Decoración: arco luminoso en la esquina derecha */
.sol-hero::before {
   content      : '';
   position     : absolute;
   top          : -120px;
   right        : -120px;
   width        : 480px;
   height       : 480px;
   border-radius: 50%;
   background   : radial-gradient(circle, rgba(255,224,0,.08) 0%, transparent 70%);
   pointer-events: none;
}

/* Línea amarilla en la parte inferior */
.sol-hero::after {
   content   : '';
   position  : absolute;
   bottom    : 0;
   left      : 0;
   right     : 0;
   height    : 3px;
   background: linear-gradient(90deg, transparent, var(--color-accent) 30%, var(--color-accent) 70%, transparent);
}

.sol-hero__inner {
   display    : flex;
   align-items: center;
   gap        : 48px;
   position   : relative;
   z-index    : 1;
   padding    : 0 24px;
}
.sol-hero__content {
   flex       : 1;
   min-width  : 0;
   padding-left: 16px;
}
.sol-hero__img-side {
   flex-shrink  : 0;
   padding-right: 16px;
}

/* Offer badge */
.sol-offer-badge {
   display       : inline-flex;
   align-items   : center;
   gap           : 6px;
   background    : var(--color-accent);
   color         : var(--color-primary);
   font-size     : 11px;
   font-weight   : 800;
   padding       : 5px 14px;
   border-radius : 20px;
   margin-bottom : 16px;
   text-transform: uppercase;
   letter-spacing: .6px;
   box-shadow    : 0 4px 12px rgba(255,224,0,.3);
}

.sol-hero__title {
   color         : #fff;
   font-size     : clamp(1.8rem, 4vw, 2.6rem);
   font-weight   : 800;
   letter-spacing: -.5px;
   margin-bottom : 14px;
   line-height   : 1.1;
}
.sol-hero__desc {
   color        : rgba(255,255,255,0.78);
   font-size    : 14px;
   line-height  : 1.75;
   margin-bottom: 24px;
   max-width    : 520px;
}

/* Price */
.sol-price-wrap  { margin-bottom: 24px; }
.sol-price-old {
   color          : rgba(255,255,255,0.45);
   text-decoration: line-through;
   font-size      : 15px;
   margin-bottom  : 4px;
}
.sol-price-new {
   color      : var(--color-accent);
   font-size  : 2.2rem;
   font-weight: 700;
   line-height: 1;
}
.sol-price-save        { color: rgba(255,255,255,0.65); font-size: 13px; margin-top: 6px; }
.sol-price-save strong { color: var(--color-accent); }

/* CTA button */
.sol-btn-cart {
   display      : inline-flex;
   align-items  : center;
   gap          : 8px;
   background   : var(--color-accent);
   color        : var(--color-primary);
   font-weight  : 800;
   font-size    : 14px;
   border       : none;
   border-radius: 6px;
   padding      : 13px 28px;
   cursor       : pointer;
   transition   : background .2s, transform .15s, box-shadow .15s;
   margin-bottom: 22px;
   box-shadow   : 0 6px 20px rgba(255,224,0,.35);
}
.sol-btn-cart:hover {
   background: var(--color-accent-hover);
   transform : translateY(-2px);
   box-shadow: 0 10px 28px rgba(255,194,0,.5);
}
.sol-btn-cart:active {
   transform : translateY(0);
   box-shadow: 0 4px 12px rgba(255,194,0,.3);
}

/* Actions + countdown wrappers */
.sol-hero__actions   { display: block; margin-bottom: 24px; }
.sol-hero__countdown { display: block; }

/* Countdown */
.sol-countdown        { display: inline-flex; flex-direction: column; gap: 8px; }
.sol-countdown__label { color: rgba(255,255,255,0.55); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.sol-countdown__units { display: flex; align-items: center; gap: 4px; }
.sol-countdown__unit {
   display        : flex;
   flex-direction : column;
   align-items    : center;
   background     : rgba(255,255,255,0.1);
   border-radius  : 6px;
   padding        : 8px 12px;
   min-width      : 52px;
}
.sol-countdown__num  { color: var(--color-accent); font-size: 22px; font-weight: 700; line-height: 1; }
.sol-countdown__name { color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 3px; }
.sol-countdown__sep  { color: rgba(255,255,255,0.35); font-size: 20px; font-weight: 700; padding-bottom: 12px; }

/* Hero image */
.sol-hero__img-wrap {
   position     : relative;
   flex-shrink  : 0;
   cursor       : pointer;
   border-radius: 14px;
   overflow     : hidden;
   box-shadow   : 0 32px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
   max-width    : 420px;
   width        : 100%;
   background   : rgba(255,255,255,.04);
}
.sol-hero__img                              { width: 100%; height: auto; display: block; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.sol-hero__img-wrap:hover .sol-hero__img    { transform: scale(1.05); }
.sol-hero__img-zoom {
   position       : absolute;
   bottom         : 12px;
   right          : 12px;
   background     : rgba(0,0,0,.55);
   color          : #fff;
   width          : 36px;
   height         : 36px;
   border-radius  : 50%;
   display        : flex;
   align-items    : center;
   justify-content: center;
   font-size      : 14px;
   backdrop-filter: blur(6px);
   transition     : background .15s, transform .15s;
}
.sol-hero__img-wrap:hover .sol-hero__img-zoom {
   background: rgba(255,224,0,.85);
   color     : var(--color-primary);
   transform : scale(1.1);
}

/* ── Description card ── */
.sol-desc {
   display      : flex;
   align-items  : flex-start;
   gap          : 20px;
   background   : linear-gradient(135deg, #001b35 0%, var(--color-primary) 100%);
   border-radius: 12px;
   padding      : 28px 32px;
   margin       : 0 0 32px;
   position     : relative;
   overflow     : hidden;
   box-shadow   : 0 8px 32px rgba(0,27,53,.18);
}

/* Brillo decorativo */
.sol-desc::after {
   content      : '';
   position     : absolute;
   top          : -60px;
   right        : -60px;
   width        : 200px;
   height       : 200px;
   border-radius: 50%;
   background   : radial-gradient(circle, rgba(255,224,0,.07) 0%, transparent 70%);
   pointer-events: none;
}

/* Borde izquierdo amarillo */
.sol-desc::before {
   content      : '';
   position     : absolute;
   top          : 0;
   left         : 0;
   bottom       : 0;
   width        : 4px;
   background   : linear-gradient(to bottom, var(--color-accent), var(--color-accent-hover));
   border-radius: 12px 0 0 12px;
}

.sol-desc__icon {
   flex-shrink    : 0;
   width          : 44px;
   height         : 44px;
   background     : rgba(255,224,0,.12);
   border         : 1px solid rgba(255,224,0,.25);
   border-radius  : 10px;
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 18px;
   margin-top     : 2px;
}

.sol-desc__body {
   flex    : 1;
   min-width: 0;
}

.sol-desc__text {
   color        : rgba(255,255,255,.88);
   font-size    : 15px;
   line-height  : 1.75;
   margin       : 0 0 14px;
}

.sol-desc__tag {
   display      : inline-flex;
   align-items  : center;
   gap          : 6px;
   background   : rgba(255,224,0,.1);
   border       : 1px solid rgba(255,224,0,.25);
   color        : var(--color-accent);
   font-size    : 12px;
   font-weight  : 700;
   padding      : 5px 12px;
   border-radius: 20px;
   letter-spacing: .3px;
}

.sol-desc__tag i { font-size: 11px; }

/* ── Hint ── */
.sol-hint {
   display    : flex;
   align-items: flex-start;
   gap        : 8px;
   font-size  : 13px;
   color      : var(--color-text-muted);
   margin     : 0 0 28px;
}

.sol-hint i {
   color      : var(--color-secondary);
   flex-shrink: 0;
   margin-top : 2px;
}

/* ── Products section ── */
.sol-products { margin-bottom: 48px; }

.sol-products__header {
   display      : flex;
   align-items  : center;
   gap          : 20px;
   background   : linear-gradient(135deg, #001b35 0%, var(--color-primary) 100%);
   border-radius: 10px;
   padding      : 20px 28px;
   margin-bottom: 24px;
   box-shadow   : 0 4px 16px rgba(0,27,53,.14);
}

.sol-products__header-icon {
   flex-shrink    : 0;
   width          : 46px;
   height         : 46px;
   background     : rgba(255,224,0,.12);
   border         : 1px solid rgba(255,224,0,.3);
   border-radius  : 10px;
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 18px;
}

.sol-products__header-text { flex: 1; min-width: 0; }

.sol-products__title {
   color         : #fff;
   font-size     : 1.15rem;
   font-weight   : 800;
   letter-spacing: -.2px;
   margin        : 0 0 4px;
   display       : flex;
   align-items   : center;
   gap           : 0;
}

.sol-products__hint {
   font-size  : 12.5px;
   color      : rgba(255,255,255,.55);
   margin     : 0;
   display    : flex;
   align-items: center;
   gap        : 6px;
}

.sol-products__hint i { color: rgba(255,224,0,.7); font-size: 11px; }

.sol-products__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ── Product group ── */
.sol-group {
   background   : #fff;
   border       : 1px solid #e2e6ea;
   border-radius: 10px;
   overflow     : hidden;
   box-shadow   : 0 2px 8px rgba(0,0,0,.04);
}
.sol-group__header {
   background     : linear-gradient(135deg, #002a4a 0%, var(--color-primary) 100%);
   border-top     : 3px solid var(--color-accent);
   padding        : 13px 20px;
   display        : flex;
   align-items    : center;
   justify-content: space-between;
}
.sol-group__title {
   color         : #fff;
   font-size     : 12px;
   font-weight   : 800;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin        : 0;
}
.sol-group__total {
   color                : var(--color-accent);
   font-size            : 16px;
   font-weight          : 800;
   letter-spacing       : -.3px;
   font-variant-numeric : tabular-nums;
}
.sol-group__body  { padding: 14px; background: #fafbfc; }
.sol-group__items { display: flex; flex-direction: column; gap: 10px; }

/* ── Sol product card (sol-card) ── */
.sol-card {
   display      : flex;
   align-items  : flex-start;
   gap          : 14px;
   background   : #fff;
   border       : 1px solid #e5e9f0;
   border-radius: 8px;
   padding      : 12px;
   transition   : box-shadow .2s, border-color .2s;
}
.sol-card:hover {
   box-shadow  : 0 4px 16px rgba(4,87,160,.1);
   border-color: #bdd0e8;
}

.sol-card__img-wrap {
   position       : relative;
   flex-shrink    : 0;
   width          : 88px;
   height         : 88px;
   background     : #f8f9fb;
   border-radius  : 6px;
   display        : flex;
   align-items    : center;
   justify-content: center;
   overflow       : hidden;
   border         : 1px solid var(--color-bg);
}

.sol-card__qty {
   position       : absolute;
   top            : 4px;
   left           : 4px;
   background     : #1a7a3c;
   color          : #fff;
   font-size      : 11px;
   font-weight    : 800;
   width          : 22px;
   height         : 22px;
   border-radius  : 50%;
   display        : flex;
   align-items    : center;
   justify-content: center;
   z-index        : 1;
   box-shadow     : 0 2px 4px rgba(0,0,0,.2);
}

.sol-card__img {
   width      : 100%;
   height     : 100%;
   object-fit : contain;
   padding    : 6px;
   transition : transform .25s;
}
.sol-card:hover .sol-card__img { transform: scale(1.05); }

.sol-card__body {
   flex      : 1;
   min-width : 0;
   display   : flex;
   flex-direction: column;
   gap       : 3px;
}

.sol-card__brand {
   font-size     : 10px;
   font-weight   : 700;
   text-transform: uppercase;
   letter-spacing: .7px;
   color         : var(--color-secondary);
}

.sol-card__title {
   font-size         : 13px;
   font-weight       : 600;
   color             : var(--color-text);
   line-height       : 1.4;
   letter-spacing    : -.05px;
   text-decoration   : none;
   display           : -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow          : hidden;
}
.sol-card__title:hover { color: var(--color-secondary); text-decoration: none; }

.sol-card__model {
   font-size: 11px;
   color    : var(--color-text-muted);
   margin   : 0;
}

.sol-card__stock {
   display    : flex;
   align-items: center;
   gap        : 5px;
   font-size  : 11px;
   font-weight: 600;
   margin-top : 1px;
}
.sol-card__stock-dot {
   width       : 6px;
   height      : 6px;
   border-radius: 50%;
   flex-shrink : 0;
}
.sol-card__stock--in  { color: #1a7a3c; }
.sol-card__stock--in  .sol-card__stock-dot { background: #28a745; }
.sol-card__stock--out { color: var(--color-danger); }
.sol-card__stock--out .sol-card__stock-dot { background: var(--color-danger); }

.sol-card__price-wrap {
   display    : flex;
   align-items: center;
   gap        : 8px;
   flex-wrap  : wrap;
   margin-top : 4px;
}
.sol-card__price-old {
   font-size            : 12px;
   color                : #9aa0a6;
   text-decoration      : line-through;
   font-variant-numeric : tabular-nums;
}
.sol-card__price {
   font-size            : 18px;
   font-weight          : 800;
   color                : var(--color-primary);
   line-height          : 1;
   letter-spacing       : -.3px;
   font-variant-numeric : tabular-nums;
}
.sol-card__discount {
   font-size    : 10px;
   font-weight  : 800;
   background   : var(--color-danger);
   color        : #fff;
   padding      : 2px 5px;
   border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   DEAL BANNER  (db-*)
═══════════════════════════════════════════════════════════════ */
.db-strip {
  background : linear-gradient(135deg, #001b35 0%, var(--color-primary) 60%, var(--color-secondary) 100%);
  padding    : 14px 0;
  position   : relative;
  overflow   : hidden;
}

/* Destellos decorativos */
.db-strip::before {
  content      : '';
  position     : absolute;
  top: -80px; left: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background   : radial-gradient(circle, rgba(255,224,0,.07) 0%, transparent 70%);
  pointer-events: none;
}
.db-strip::after {
  content   : '';
  position  : absolute;
  bottom    : 0; left: 0; right: 0;
  height    : 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent) 30%, var(--color-accent) 70%, transparent);
}

.db-strip__inner {
  display    : flex;
  align-items: center;
  gap        : 20px;
  flex-wrap  : wrap;
}

.db-strip__badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 6px;
  background    : var(--color-accent);
  color         : var(--color-primary);
  font-size     : 11px;
  font-weight   : 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding       : 5px 14px;
  border-radius : 20px;
  white-space   : nowrap;
  flex-shrink   : 0;
  box-shadow    : 0 3px 10px rgba(255,224,0,.3);
}

.db-strip__text {
  flex       : 1;
  color      : rgba(255,255,255,.8);
  font-size  : 13px;
  font-weight: 500;
  margin     : 0;
  min-width  : 0;
}

.db-strip__countdown {
  display    : flex;
  align-items: center;
  gap        : 8px;
  flex-shrink: 0;
}

.db-strip__countdown-label {
  color      : rgba(255,255,255,.5);
  font-size  : 11px;
  white-space: nowrap;
}

.db-strip__units {
  display    : flex;
  align-items: center;
  gap        : 3px;
}

.db-strip__unit {
  display        : inline-flex;
  flex-direction : column;
  align-items    : center;
  background     : rgba(255,255,255,.1);
  border         : 1px solid rgba(255,255,255,.12);
  border-radius  : 5px;
  padding        : 3px 8px;
  font-size      : 15px;
  font-weight    : 800;
  color          : var(--color-accent);
  line-height    : 1;
  font-variant-numeric: tabular-nums;
  min-width      : 36px;
  text-align     : center;
}

.db-strip__unit em {
  font-style : normal;
  font-size  : 9px;
  font-weight: 500;
  color      : rgba(255,255,255,.4);
  margin-top : 2px;
  letter-spacing: .5px;
}

@keyframes dbTick {
  from { opacity: .5; transform: translateY(-3px); }
  to   { opacity: 1;  transform: translateY(0); }
}
.db-strip__unit--tick { animation: dbTick .22s ease-out both; }

.db-strip__sep {
  color      : rgba(255,255,255,.3);
  font-size  : 14px;
  font-weight: 700;
  padding-bottom: 8px;
}

.db-strip__cta {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  background   : transparent;
  border       : 1.5px solid rgba(255,224,0,.5);
  color        : var(--color-accent);
  font-size    : 13px;
  font-weight  : 700;
  padding      : 7px 16px;
  border-radius: 6px;
  text-decoration: none;
  white-space  : nowrap;
  flex-shrink  : 0;
  transition   : background .15s, border-color .15s;
}
.db-strip__cta:hover {
  background  : rgba(255,224,0,.12);
  border-color: var(--color-accent);
  color       : var(--color-accent);
  text-decoration: none;
}

@media (max-width: 768px) {
  .db-strip__text { display: none; }
  .db-strip__inner { justify-content: space-between; }
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE FILTERS BAR  (af-*)
═══════════════════════════════════════════════════════════════ */
@keyframes afChipIn {
  from { opacity: 0; transform: translateY(-6px) scale(.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);  }
}

.af-bar {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : 8px;
  padding    : 10px 14px;
  background : #fff;
  border     : 1px solid #e0e3e9;
  border-radius: 8px;
  margin-bottom: 14px;
}

.af-bar__label {
  font-size  : 12px;
  font-weight: 600;
  color      : var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  display    : flex;
  align-items: center;
  gap        : 5px;
}
.af-bar__label i { color: var(--color-secondary); }

.af-bar__chips {
  display : flex;
  flex-wrap: wrap;
  gap     : 6px;
  flex    : 1;
}

.af-chip {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  background   : var(--color-primary);
  color        : #fff;
  font-size    : 12px;
  font-weight  : 600;
  padding      : 4px 8px 4px 12px;
  border-radius: 20px;
  animation    : afChipIn .2s ease-out both;
}

.af-chip--price {
  background: var(--color-secondary);
}
.af-chip--price i { font-size: 10px; opacity: .8; }

.af-chip__remove {
  background   : rgba(255,255,255,.2);
  border       : none;
  color        : #fff;
  width        : 18px;
  height       : 18px;
  border-radius: 50%;
  font-size    : 13px;
  line-height  : 1;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  padding      : 0;
  transition   : background .12s;
  flex-shrink  : 0;
}
.af-chip__remove:hover { background: rgba(255,255,255,.35); }

.af-bar__clear {
  margin-left  : auto;
  background   : none;
  border       : 1px solid #e0e3e9;
  color        : var(--color-text-muted);
  font-size    : 11px;
  font-weight  : 600;
  padding      : 4px 10px;
  border-radius: 4px;
  cursor       : pointer;
  white-space  : nowrap;
  transition   : border-color .12s, color .12s;
  flex-shrink  : 0;
}
.af-bar__clear:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* ── Otras soluciones ── */
.sol-other             { background: var(--color-bg); padding: 44px 0 52px; margin-top: 48px; }
.sol-other__heading {
   color          : var(--color-primary);
   font-size      : 1.25rem;
   font-weight    : 700;
   margin-bottom  : 28px;
   padding-bottom : 10px;
   border-bottom  : 3px solid var(--color-accent);
   display        : inline-block;
}

/* ── Responsive ── */
@media (max-width: 992px) {
   .sol-hero__inner       { flex-direction: column-reverse; gap: 32px; }
   .sol-hero__img-wrap    { max-width: 100%; }
   .sol-products__grid    { grid-template-columns: 1fr; }
   .sol-hero__desc        { max-width: 100%; }
}
@media (max-width: 576px) {
   .sol-hero            { padding: 36px 0; }
   .sol-hero__title     { font-size: 1.5rem; }
   .sol-price-new       { font-size: 1.6rem; }
   .sol-countdown__unit { min-width: 42px; padding: 6px 8px; }
   .sol-countdown__num  { font-size: 18px; }
}

/* ============================================================
   BRANDS LIST  (brl-*)
   ============================================================ */

.brl-page {
   padding: 32px 0 48px;
}

/* ── Encabezado ── */
.brl-hero {
   display    : flex;
   align-items: center;
   gap        : 16px;
   margin-bottom: 28px;
}
.brl-hero__icon-wrap {
   width           : 52px;
   height          : 52px;
   background      : var(--color-primary);
   border-radius   : 12px;
   display         : flex;
   align-items     : center;
   justify-content : center;
   flex-shrink     : 0;
}
.brl-hero__icon-wrap i { color: var(--color-accent); font-size: 22px; }
h1.brl-hero__title,
.brl-hero__title {
   font-size  : 1.6rem;
   font-weight: 700;
   color      : var(--color-primary);
   margin     : 0 0 4px;
}
.brl-hero__sub {
   font-size: .9rem;
   color    : var(--color-text-muted);
   margin   : 0;
}

/* ── Búsqueda ── */
.brl-search {
   position     : relative;
   max-width    : 420px;
   margin-bottom: 24px;
}
.brl-search__icon {
   position  : absolute;
   left      : 13px;
   top       : 50%;
   transform : translateY(-50%);
   color     : #aaa;
   font-size : .85rem;
   pointer-events: none;
}
.brl-search__input {
   width        : 100%;
   padding      : 10px 14px 10px 36px;
   border       : 1.5px solid #dde1e7;
   border-radius: 8px;
   font-size    : .93rem;
   background   : #fff;
   outline      : none;
   transition   : border-color .2s, box-shadow .2s;
}
.brl-search__input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.12);
}

/* ── Índice de letras ── */
.brl-index {
   display      : flex;
   flex-wrap    : wrap;
   gap          : 6px;
   margin-bottom: 28px;
}
.brl-index__letter {
   display         : inline-flex;
   align-items     : center;
   justify-content : center;
   width           : 36px;
   height          : 36px;
   background      : #fff;
   border          : 1.5px solid #dde1e7;
   border-radius   : 8px;
   font-size       : .85rem;
   font-weight     : 700;
   color           : var(--color-primary);
   text-decoration : none;
   transition      : background .15s, color .15s, border-color .15s;
}
.brl-index__letter:hover {
   background  : var(--color-primary);
   color       : var(--color-accent);
   border-color: var(--color-primary);
   text-decoration: none;
}

/* ── Tarjeta de grupo ── */
.brl-group-col   { margin-bottom: 24px; }
.brl-group {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #E5E9EF;
   overflow     : hidden;
   height       : 100%;
}
.brl-group__letter {
   background : var(--color-primary);
   color      : var(--color-accent);
   font-size  : 1.3rem;
   font-weight: 800;
   padding    : 10px 18px;
   letter-spacing: 1px;
}
.brl-group__list {
   list-style: none;
   margin    : 0;
   padding   : 8px 0;
}
.brl-group__link {
   display        : flex;
   align-items    : center;
   gap            : 8px;
   padding        : 9px 18px;
   font-size      : 1.15rem;
   color          : var(--color-text);
   text-decoration: none;
   transition     : background .15s, color .15s;
}
.brl-group__link:hover {
   background     : var(--color-bg);
   color          : var(--color-secondary);
   text-decoration: none;
}
.brl-group__arrow { font-size: .65rem; color: #aaa; flex-shrink: 0; }
.brl-group__link:hover .brl-group__arrow { color: var(--color-secondary); }

/* ── Estado vacío / cargando ── */
.brl-empty {
   text-align: center;
   padding   : 60px 20px;
}
.brl-empty__icon {
   font-size    : 3rem;
   color        : #dde1e7;
   margin-bottom: 16px;
   display      : block;
}
.brl-empty__msg { color: var(--color-text-muted); font-size: 1rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
   .brl-hero__title      { font-size: 1.3rem; }
   .brl-index__letter    { width: 32px; height: 32px; font-size: .78rem; }
   .brl-group__letter    { font-size: 1.1rem; }
   .brl-group__link      { font-size: 1.05rem; padding: 8px 14px; }
}

/* ============================================================
   LOGIN  (lg-*)
   ============================================================ */

/* ── Página contenedora ── */
.lg-page {
   min-height     : calc(100vh - 180px);
   display        : flex;
   align-items    : center;
   justify-content: center;
   background     : var(--color-bg);
   padding        : 40px 16px;
}

/* ── Tarjeta dividida ── */
.lg-card {
   display          : flex;
   width            : 100%;
   max-width        : 900px;
   min-height       : 540px;
   border-radius    : 14px;
   overflow         : hidden;
   box-shadow       : 0 8px 40px rgba(0,59,100,.14);
}

/* ── Panel izquierdo: branding ── */
.lg-brand {
   flex             : 0 0 42%;
   background       : linear-gradient(160deg, var(--color-primary) 0%, var(--color-secondary) 100%);
   color            : #fff;
   display          : flex;
   align-items      : center;
   justify-content  : center;
   padding          : 48px 36px;
}
.lg-brand__inner     { display: flex; flex-direction: column; gap: 18px; }

.lg-brand__logo-wrap { display: inline-block; }
.lg-brand__logo {
   max-height   : 56px;
   max-width    : 180px;
   object-fit   : contain;
   filter       : brightness(0) invert(1);
}
.lg-brand__name {
   font-size   : 1.5rem;
   font-weight : 700;
   color       : var(--color-accent);
   text-decoration: none;
}

.lg-brand__headline {
   font-size   : 1.4rem;
   font-weight : 700;
   color       : #fff;
   margin      : 0;
   line-height : 1.3;
}
.lg-brand__sub {
   font-size   : .93rem;
   color       : rgba(255,255,255,.78);
   margin      : 0;
   line-height : 1.55;
}

.lg-brand__perks {
   list-style  : none;
   margin      : 8px 0 0;
   padding     : 0;
   display     : flex;
   flex-direction: column;
   gap         : 10px;
}
.lg-brand__perks li {
   display    : flex;
   align-items: center;
   gap        : 10px;
   font-size  : .88rem;
   color      : rgba(255,255,255,.85);
}
.lg-brand__perks li i {
   color      : var(--color-accent);
   font-size  : .9rem;
   flex-shrink: 0;
}

/* ── Panel derecho: formulario ── */
.lg-form-panel {
   flex           : 1;
   background     : #fff;
   display        : flex;
   align-items    : center;
   justify-content: center;
   padding        : 48px 44px;
}
.lg-form-panel__inner { width: 100%; max-width: 360px; }

.lg-form__title {
   font-size   : 1.55rem;
   font-weight : 700;
   color       : var(--color-primary);
   margin      : 0 0 6px;
}
.lg-form__subtitle {
   font-size  : .88rem;
   color      : #666;
   margin     : 0 0 28px;
}
.lg-form__register {
   font-size   : .88rem;
   color       : #666;
   text-align  : center;
   margin      : 20px 0 0;
}

/* ── Links ── */
.lg-link           { color: var(--color-secondary); text-decoration: none; }
.lg-link:hover     { text-decoration: underline; }
.lg-link--bold     { font-weight: 700; }
.lg-link--muted    { color: #888; font-size: .84rem; }
.lg-link--muted:hover { color: var(--color-secondary); }

/* ── Campos ── */
.lg-form          { display: flex; flex-direction: column; gap: 20px; }

.lg-field         { display: flex; flex-direction: column; gap: 6px; }
.lg-field__label  { font-size: .84rem; font-weight: 600; color: #333; }
.lg-required      { color: var(--color-danger); }

.lg-field__wrap {
   position     : relative;
   display      : flex;
   align-items  : center;
}
.lg-field__icon {
   position   : absolute;
   left       : 13px;
   color      : #aaa;
   font-size  : .85rem;
   pointer-events: none;
}
.lg-field__input {
   width          : 100%;
   padding        : 11px 14px 11px 36px;
   border         : 1.5px solid #dde1e7;
   border-radius  : 8px;
   font-size      : .93rem;
   color          : #222;
   background     : #F8F9FB;
   transition     : border-color .2s, box-shadow .2s;
   outline        : none;
}
.lg-field__input:focus {
   border-color : var(--color-secondary);
   background   : #fff;
   box-shadow   : 0 0 0 3px rgba(4,87,160,.12);
}
.lg-field__input--pass { padding-right: 42px; }

.lg-field__eye {
   position   : absolute;
   right      : 12px;
   background : none;
   border     : none;
   cursor     : pointer;
   color      : #aaa;
   padding    : 4px;
   line-height: 1;
   transition : color .2s;
}
.lg-field__eye:hover { color: var(--color-secondary); }

/* ── Error de validación ── */
.lg-field__error {
   margin     : 0;
   font-size  : .8rem;
   color      : var(--color-danger);
   font-weight: 500;
}

/* ── Teléfono (react-phone-input-2) ── */
.lg-phone-wrap .react-tel-input {
   width: 100%;
}
.lg-phone-wrap .react-tel-input .form-control {
   width          : 100%;
   height         : 44px;
   border         : 1.5px solid #dde1e7;
   border-radius  : 8px;
   font-size      : .93rem;
   color          : #222;
   background     : #F8F9FB;
   padding-left   : 52px;
   transition     : border-color .2s, box-shadow .2s;
}
.lg-phone-wrap .react-tel-input .form-control:focus {
   border-color : var(--color-secondary);
   background   : #fff;
   box-shadow   : 0 0 0 3px rgba(4,87,160,.12);
   outline      : none;
}
.lg-phone-wrap .react-tel-input .flag-dropdown {
   border         : 1.5px solid #dde1e7;
   border-right   : none;
   border-radius  : 8px 0 0 8px;
   background     : #F8F9FB;
}
.lg-phone-wrap .react-tel-input .flag-dropdown.open,
.lg-phone-wrap .react-tel-input .flag-dropdown:hover {
   background: #fff;
}

/* ── Olvidé contraseña ── */
.lg-forgot { text-align: right; margin-top: -8px; }

/* ── Botón submit ── */
.lg-btn-submit {
   width          : 100%;
   padding        : 13px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .97rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 8px;
   transition     : background .2s, transform .1s;
   margin-top     : 4px;
}
.lg-btn-submit:hover  { background: #f5d800; }
.lg-btn-submit:active { transform: scale(.98); }

/* ── Responsive ── */
@media (max-width: 768px) {
   .lg-card        { flex-direction: column; max-width: 480px; min-height: auto; }
   .lg-brand       { padding: 32px 28px; }
   .lg-brand__perks { display: none; }
   .lg-form-panel  { padding: 36px 28px; }
}
@media (max-width: 480px) {
   .lg-page        { padding: 24px 12px; }
   .lg-form-panel  { padding: 28px 20px; }
   .lg-form__title { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════
   INFORMACIÓN DE CONTACTO  (inf-*)
   ════════════════════════════════════════════════════════ */

/* ── Encabezado ── */
.inf-section__head {
   display      : flex;
   align-items  : center;
   gap          : 16px;
   margin-bottom: 24px;
}

.inf-section__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.inf-section__title,
.inf-section__title {
   margin     : 0 0 2px;
   font-size  : 1.25rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.inf-section__subtitle {
   margin   : 0;
   font-size: .875rem;
   color    : #6b7280;
}

/* ── Tarjeta principal ── */
.inf-card {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   display      : flex;
   gap          : 0;
   overflow     : hidden;
}

/* ── Columna avatar ── */
.inf-avatar-col {
   width          : 220px;
   flex-shrink    : 0;
   background     : #f8fafc;
   border-right   : 1px solid #e9ecef;
   display        : flex;
   flex-direction : column;
   align-items    : center;
   padding        : 32px 20px;
   gap            : 14px;
}

.inf-avatar-wrap {
   width        : 110px;
   height       : 110px;
   border-radius: 50%;
   overflow     : hidden;
   border       : 3px solid var(--color-primary);
   background   : #eef2f7;
   display      : flex;
   align-items  : center;
   justify-content: center;
}

.inf-avatar__img {
   width     : 100%;
   height    : 100%;
   object-fit: cover;
}

.inf-avatar__placeholder {
   font-size: 2.8rem;
   color    : #9ca3af;
}

.inf-avatar__label {
   margin   : 0;
   font-size: .78rem;
   font-weight: 600;
   color    : #6b7280;
   text-transform: uppercase;
   letter-spacing: .05em;
}

/* botón de cambiar foto */
.inf-file-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 7px;
   padding        : 8px 14px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .82rem;
   font-weight    : 700;
   border-radius  : 8px;
   cursor         : pointer;
   transition     : background .2s;
   text-align     : center;
}

.inf-file-btn:hover { background: #f5d800; }

.inf-file-input {
   display: none;
}

/* ── Columna campos ── */
.inf-fields-col {
   flex   : 1;
   padding: 28px 28px 24px;
   display: flex;
   flex-direction: column;
   gap    : 20px;
}

/* ── Campo individual ── */
.inf-field {
   display       : flex;
   flex-direction: column;
   gap           : 6px;
}

.inf-field__label {
   font-size  : .82rem;
   font-weight: 700;
   color      : #374151;
   display    : flex;
   align-items: center;
   gap        : 6px;
   margin     : 0;
}

.inf-field__icon { color: var(--color-primary); font-size: .8rem; }

.inf-field__input {
   width        : 100%;
   padding      : 10px 14px;
   border       : 1.5px solid #e5e7eb;
   border-radius: 8px;
   font-size    : 1rem;
   color        : #1f2937;
   background   : #fff;
   transition   : border-color .2s, box-shadow .2s;
   outline      : none;
}

.inf-field__input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.1);
}

/* ── Botón guardar ── */
.inf-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

.inf-save-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 8px;
   padding        : 10px 24px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .95rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   transition     : background .2s, transform .1s;
}

.inf-save-btn:hover  { background: #f5d800; }
.inf-save-btn:active { transform: scale(.97); }

/* ── Responsive ── */
@media (max-width: 767px) {
   .inf-card        { flex-direction: column; }
   .inf-avatar-col  { width: 100%; border-right: none; border-bottom: 1px solid #e9ecef; padding: 24px 20px; }
   .inf-fields-col  { padding: 20px; }
   .inf-actions     { justify-content: stretch; }
   .inf-save-btn    { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════
   DIRECCIÓN DE ENVÍO  (ship-*)
   ════════════════════════════════════════════════════════ */

/* ── Encabezado de sección ── */
.ship-section__head {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   flex-wrap      : wrap;
   gap            : 16px;
   margin-bottom  : 24px;
}

.ship-section__title-wrap {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.ship-section__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.ship-section__title,
.ship-section__title {
   margin     : 0 0 2px;
   font-size  : 1.25rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.ship-section__subtitle {
   margin   : 0;
   font-size: .875rem;
   color    : #6b7280;
}

/* ── Botón nueva dirección ── */
.ship-add-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 7px;
   padding        : 9px 18px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .9rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   text-decoration: none;
   transition     : background .2s, transform .1s;
}

.ship-add-btn:hover  { background: #f5d800; }
.ship-add-btn:active { transform: scale(.97); }

/* ── Estado vacío ── */
.ship-empty {
   text-align   : center;
   padding      : 48px 24px;
   color        : #9ca3af;
   display      : flex;
   flex-direction: column;
   align-items  : center;
   gap          : 16px;
}

.ship-empty__icon { font-size: 2.8rem; display: block; }
.ship-empty__msg  { font-size: 1rem; margin: 0; }

/* ── Grid de tarjetas ── */
.ship-grid { margin-top: 4px; }
.ship-card-col { margin-bottom: 20px; }

/* ── Tarjeta de dirección ── */
.ship-card {
   background   : #fff;
   border-radius: 12px;
   border       : 1.5px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
   height       : 100%;
   display      : flex;
   flex-direction: column;
   transition   : box-shadow .2s, border-color .2s;
}

.ship-card:hover { box-shadow: 0 6px 20px rgba(0,59,100,.1); }

.ship-card--default {
   border-color: var(--color-primary);
   box-shadow  : 0 2px 12px rgba(0,59,100,.15);
}

/* header de la tarjeta */
.ship-card__header {
   background     : var(--color-primary);
   padding        : 12px 16px;
   display        : flex;
   align-items    : center;
   justify-content: space-between;
}

.ship-card--default .ship-card__header { background: var(--color-primary); }

.ship-card__header-left {
   display    : flex;
   align-items: center;
   gap        : 8px;
}

.ship-card__pin  { color: var(--color-accent); font-size: 14px; }

.ship-card__city {
   color      : #fff;
   font-size  : .95rem;
   font-weight: 700;
}

.ship-card__badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   background   : var(--color-accent);
   color        : var(--color-primary);
   font-size    : .75rem;
   font-weight  : 700;
   padding      : 3px 9px;
   border-radius: 20px;
}

/* cuerpo */
.ship-card__body {
   padding: 16px;
   flex   : 1;
   display: flex;
   flex-direction: column;
   gap    : 10px;
}

.ship-card__row {
   display       : flex;
   flex-direction: column;
   gap           : 2px;
   margin        : 0;
}

.ship-card__label {
   font-size  : .72rem;
   font-weight: 700;
   color      : #9ca3af;
   text-transform: uppercase;
   letter-spacing: .05em;
}

.ship-card__value {
   font-size: .95rem;
   color    : #1f2937;
}

/* footer con acciones */
.ship-card__footer {
   padding        : 10px 16px 14px;
   display        : flex;
   align-items    : center;
   gap            : 8px;
   border-top     : 1px solid #f1f5f9;
}

.ship-card__action {
   display        : inline-flex;
   align-items    : center;
   gap            : 5px;
   padding        : 6px 12px;
   border-radius  : 7px;
   font-size      : .8rem;
   font-weight    : 600;
   border         : none;
   cursor         : pointer;
   transition     : background .2s, transform .1s;
}

.ship-card__action:active { transform: scale(.97); }

.ship-card__action--edit {
   background: #eef2f7;
   color     : var(--color-primary);
}
.ship-card__action--edit:hover { background: #dde3ec; }

.ship-card__action--default {
   background: var(--color-accent);
   color     : var(--color-primary);
   flex      : 1;
   justify-content: center;
}
.ship-card__action--default:hover { background: #f5d800; }

.ship-card__action--delete {
   background: #fef2f2;
   color     : #dc2626;
   padding   : 6px 10px;
   margin-left: auto;
}
.ship-card__action--delete:hover { background: #fee2e2; }

/* ════════════════════════════
   MODAL DE DIRECCIÓN
   ════════════════════════════ */

.ship-modal-overlay {
   position  : fixed;
   inset     : 0;
   background: rgba(0, 0, 0, .55);
   display   : flex;
   align-items: center;
   justify-content: center;
   z-index   : 9999;
   padding   : 20px;
}

.ship-modal {
   background   : #fff;
   border-radius: 14px;
   width        : 100%;
   max-width    : 540px;
   box-shadow   : 0 20px 60px rgba(0,0,0,.25);
   overflow     : hidden;
   outline      : none;
}

.ship-modal__header {
   background     : var(--color-primary);
   padding        : 16px 20px;
   display        : flex;
   align-items    : center;
   justify-content: space-between;
}

.ship-modal__header-left {
   display    : flex;
   align-items: center;
   gap        : 10px;
}

.ship-modal__header-icon {
   color    : var(--color-accent);
   font-size: 18px;
}

h3.ship-modal__title,
.ship-modal__title {
   margin     : 0;
   font-size  : 1.05rem;
   font-weight: 700;
   color      : #fff;
}

.ship-modal__close {
   background   : rgba(255,255,255,.12);
   border       : none;
   color        : #fff;
   width        : 32px;
   height       : 32px;
   border-radius: 8px;
   cursor       : pointer;
   display      : flex;
   align-items  : center;
   justify-content: center;
   font-size    : 14px;
   transition   : background .2s;
}

.ship-modal__close:hover { background: rgba(255,255,255,.22); }

.ship-modal__body { padding: 24px 20px 8px; }

.ship-modal__footer {
   padding        : 16px 20px;
   display        : flex;
   justify-content: flex-end;
   gap            : 10px;
   border-top     : 1px solid #f1f5f9;
}

.ship-modal__cancel {
   padding      : 9px 18px;
   background   : #f0f4f8;
   color        : #374151;
   font-size    : .9rem;
   font-weight  : 600;
   border       : 1.5px solid #e5e7eb;
   border-radius: 8px;
   cursor       : pointer;
   transition   : background .2s;
}

.ship-modal__cancel:hover { background: #e5e7eb; }

.ship-modal__save {
   display        : inline-flex;
   align-items    : center;
   gap            : 7px;
   padding        : 9px 20px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .9rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   transition     : background .2s, transform .1s;
}

.ship-modal__save:hover  { background: #f5d800; }
.ship-modal__save:active { transform: scale(.97); }

/* ── Formulario dentro del modal ── */
.ship-form {
   display       : flex;
   flex-direction: column;
   gap           : 4px;
}

.ship-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap    : 0 16px;
}

/* ── Responsive ── */
@media (max-width: 575px) {
   .ship-section__head  { flex-direction: column; align-items: flex-start; }
   .ship-form__row      { grid-template-columns: 1fr; }
   .ship-modal          { border-radius: 10px; }
   .ship-card__footer   { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════
   COTIZACIONES  (quo-*)
   ════════════════════════════════════════════════════════ */

/* ── Sección contenedora ── */
.quo-section { padding: 0; }

.quo-section__head {
   display      : flex;
   align-items  : flex-start;
   margin-bottom: 24px;
}

.quo-section__title-wrap {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.quo-section__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.quo-section__title,
.quo-section__title {
   margin     : 0 0 2px;
   font-size  : 1.25rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.quo-section__subtitle {
   margin   : 0;
   font-size: .875rem;
   color    : #6b7280;
}

/* ── Buscador ── */
.quo-search {
   position     : relative;
   margin-bottom: 20px;
}

.quo-search__icon {
   position : absolute;
   left     : 14px;
   top      : 50%;
   transform: translateY(-50%);
   color    : #9ca3af;
   font-size: 14px;
}

.quo-search__input {
   width        : 100%;
   padding      : 10px 14px 10px 38px;
   border       : 1.5px solid #e5e7eb;
   border-radius: 8px;
   font-size    : .95rem;
   color        : #1f2937;
   background   : #fff;
   transition   : border-color .2s, box-shadow .2s;
   outline      : none;
}

.quo-search__input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.1);
}

/* ── Tabla ── */
.quo-table-wrap {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
}

.quo-table {
   width          : 100%;
   border-collapse: collapse;
}

.quo-table__head { background: var(--color-primary); }

.quo-table__head th {
   color         : #fff;
   font-size     : .875rem;
   font-weight   : 600;
   letter-spacing: .03em;
   text-transform: uppercase;
   padding       : 14px 18px;
   text-align    : left;
}

.quo-table__row {
   border-bottom: 1px solid #f1f5f9;
   transition   : background .15s;
}

.quo-table__row:last-child { border-bottom: none; }
.quo-table__row:hover      { background: #f8fafc; }

.quo-table__row td {
   padding       : 15px 18px;
   font-size     : 1rem;
   color         : #374151;
   vertical-align: middle;
}

.quo-table__folio {
   font-weight  : 700;
   color        : var(--color-primary);
   font-family  : monospace;
   font-size    : .9rem;
   background   : #eef2f7;
   padding      : 4px 10px;
   border-radius: 4px;
}

.quo-table__date   { color: #6b7280; white-space: nowrap; }
.quo-table__amount { font-weight: 700; color: var(--color-primary); }
.quo-table__payments { text-align: center; }
.quo-table__actions  { text-align: right; }

/* ── Badges de saldo ── */
.quo-badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   padding      : 4px 10px;
   border-radius: 20px;
   font-size    : .82rem;
   font-weight  : 700;
   white-space  : nowrap;
}

.quo-badge--paid    { background: #dcfce7; color: #16a34a; }
.quo-badge--pending { background: #fef2f2; color: #dc2626; }
.quo-badge--neutral { background: #eef2f7; color: var(--color-primary); }

/* ── Botones de acción ── */
.quo-table__btn-group {
   display: inline-flex;
   gap    : 8px;
}

.quo-table__btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 5px;
   padding        : 7px 13px;
   border-radius  : 8px;
   font-size      : .85rem;
   font-weight    : 700;
   text-decoration: none;
   transition     : background .2s, transform .1s;
   white-space    : nowrap;
}

.quo-table__btn:active { transform: scale(.97); }

.quo-table__btn--detail {
   background: var(--color-accent);
   color     : var(--color-primary);
}
.quo-table__btn--detail:hover { background: #f5d800; color: var(--color-primary); text-decoration: none; }

.quo-table__btn--receipt {
   background: #eef2f7;
   color     : var(--color-primary);
}
.quo-table__btn--receipt:hover { background: #dde3ec; color: var(--color-primary); text-decoration: none; }

/* ── Estado vacío ── */
.quo-empty {
   text-align : center;
   padding    : 48px 24px;
   color      : #9ca3af;
}

.quo-empty__icon { font-size: 3rem; margin-bottom: 12px; display: block; }
.quo-empty__msg  { font-size: 1rem; margin: 0; }

/* ════════════════════════════
   DETALLE DE COTIZACIÓN
   ════════════════════════════ */

.quo-detail { display: flex; flex-direction: column; gap: 24px; }

.quo-detail__back {
   display        : inline-flex;
   align-items    : center;
   gap            : 6px;
   color          : var(--color-secondary);
   font-size      : .875rem;
   font-weight    : 600;
   text-decoration: none;
}

.quo-detail__back:hover { color: var(--color-primary); text-decoration: none; }

.quo-detail__header {
   background     : var(--color-primary);
   border-radius  : 12px;
   padding        : 20px 24px;
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   gap            : 16px;
   flex-wrap      : wrap;
}

.quo-detail__header-left {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.quo-detail__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : rgba(255,224,0,.15);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.quo-detail__folio,
.quo-detail__folio {
   margin     : 0 0 6px;
   font-size  : 1.1rem;
   font-weight: 700;
   color      : #fff;
}

.quo-detail__dates {
   display  : flex;
   gap      : 20px;
   flex-wrap: wrap;
}

.quo-detail__dates span {
   font-size: .82rem;
   color    : rgba(255,255,255,.75);
   display  : flex;
   align-items: center;
   gap      : 5px;
}

.quo-detail__action { flex-shrink: 0; }

/* botón carrito */
.quo-cart-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 8px;
   padding        : 10px 20px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .95rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   transition     : background .2s, transform .1s;
}

.quo-cart-btn:hover  { background: #f5d800; }
.quo-cart-btn:active { transform: scale(.97); }

/* aviso de vencimiento */
.quo-expired {
   display    : flex;
   align-items: center;
   gap        : 10px;
   background : #fef2f2;
   border     : 1px solid #fecaca;
   border-radius: 8px;
   padding    : 10px 16px;
   color      : #dc2626;
   font-size  : .9rem;
   font-weight: 600;
}

.quo-expired__icon { font-size: 1.1rem; }
.quo-expired__msg  { margin: 0; }

/* tarjeta de productos */
.quo-products {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
}

.quo-card__header {
   background : var(--color-primary);
   color      : #fff;
   padding    : 12px 18px;
   font-size  : .9rem;
   font-weight: 700;
   display    : flex;
   align-items: center;
   gap        : 8px;
}

.quo-card__body { padding: 0 0 16px; }

.quo-prod-table-wrap { overflow-x: auto; }

.quo-prod-table {
   width          : 100%;
   border-collapse: collapse;
}

.quo-prod-table thead tr {
   background   : #f0f4f8;
   border-bottom: 2px solid #e2e8f0;
}

.quo-prod-table thead th {
   padding       : 12px 16px;
   font-size     : .875rem;
   font-weight   : 700;
   color         : var(--color-primary);
   text-transform: uppercase;
   letter-spacing: .03em;
   text-align    : left;
}

.quo-prod-table__row {
   border-bottom: 1px solid #f1f5f9;
   transition   : background .15s;
}

.quo-prod-table__row:last-child { border-bottom: none; }
.quo-prod-table__row:hover      { background: #f8fafc; }

.quo-prod-table__row td {
   padding       : 14px 16px;
   font-size     : 1rem;
   color         : #374151;
   vertical-align: middle;
}

.quo-prod-table__img {
   width        : 56px;
   height       : 56px;
   object-fit   : contain;
   border-radius: 6px;
   border       : 1px solid #e9ecef;
   background   : #f8f9fb;
}

.quo-prod-table__name  { font-weight: 600; color: #1f2937; }
.quo-prod-table__qty   { text-align: center; }
.quo-prod-table__total { font-weight: 700; color: var(--color-primary); }

/* totales */
.quo-totals {
   display       : flex;
   flex-direction: column;
   align-items   : flex-end;
   gap           : 4px;
   padding       : 16px 18px 0;
   border-top    : 1px solid #f1f5f9;
   margin-top    : 8px;
}

.quo-totals__row {
   display        : flex;
   gap            : 24px;
   width          : 260px;
   justify-content: space-between;
   font-size      : 1rem;
   color          : #374151;
   padding        : 5px 0;
}

.quo-totals__row--total {
   font-size  : 1.05rem;
   font-weight: 700;
   color      : var(--color-primary);
   border-top : 2px solid var(--color-primary);
   padding-top: 10px;
   margin-top : 4px;
}

.quo-totals__label { color: #6b7280; }
.quo-totals__row--total .quo-totals__label { color: var(--color-primary); }
.quo-totals__value { font-weight: 600; }

/* formulario de pago anticipo */
.quo-pay-form { display: flex; justify-content: center; }

.quo-pay-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 8px;
   padding        : 11px 24px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .95rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   transition     : background .2s, transform .1s;
}

.quo-pay-btn:hover  { background: #f5d800; }
.quo-pay-btn:active { transform: scale(.97); }

/* ── Responsive ── */
@media (max-width: 991px) {
   .quo-detail__header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
   .quo-table__head th,
   .quo-table__row td { padding: 10px 12px; }
   .quo-totals__row   { width: 100%; }
   .quo-detail__dates { flex-direction: column; gap: 6px; }
}

/* ════════════════════════════════════════════════════════
   ÓRDENES DE SERVICIO  (sos-*)
   ════════════════════════════════════════════════════════ */

/* ── Sección contenedora ── */
.sos-section { padding: 0; }

.sos-section__head {
   display      : flex;
   align-items  : flex-start;
   margin-bottom: 24px;
}

.sos-section__title-wrap {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.sos-section__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.sos-section__title,
.sos-section__title {
   margin     : 0 0 2px;
   font-size  : 1.25rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.sos-section__subtitle {
   margin   : 0;
   font-size: .875rem;
   color    : #6b7280;
}

/* ── Buscador ── */
.sos-search {
   position     : relative;
   margin-bottom: 20px;
}

.sos-search__icon {
   position : absolute;
   left     : 14px;
   top      : 50%;
   transform: translateY(-50%);
   color    : #9ca3af;
   font-size: 14px;
}

.sos-search__input {
   width        : 100%;
   padding      : 10px 14px 10px 38px;
   border       : 1.5px solid #e5e7eb;
   border-radius: 8px;
   font-size    : .95rem;
   color        : #1f2937;
   background   : #fff;
   transition   : border-color .2s, box-shadow .2s;
   outline      : none;
}

.sos-search__input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.1);
}

/* ── Tabla de órdenes ── */
.sos-table-wrap {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
}

.sos-table {
   width          : 100%;
   border-collapse: collapse;
}

.sos-table__head { background: var(--color-primary); }

.sos-table__head th {
   color         : #fff;
   font-size     : .875rem;
   font-weight   : 600;
   letter-spacing: .03em;
   text-transform: uppercase;
   padding       : 14px 18px;
   text-align    : left;
}

.sos-table__row {
   border-bottom: 1px solid #f1f5f9;
   transition   : background .15s;
}

.sos-table__row:last-child { border-bottom: none; }
.sos-table__row:hover      { background: #f8fafc; }

.sos-table__row td {
   padding       : 16px 18px;
   font-size     : 1rem;
   color         : #374151;
   vertical-align: middle;
}

.sos-table__folio {
   font-weight  : 700;
   color        : var(--color-primary);
   font-family  : monospace;
   font-size    : .9rem;
   background   : #eef2f7;
   padding      : 4px 10px;
   border-radius: 4px;
}

.sos-table__date  { color: #6b7280; white-space: nowrap; }
.sos-table__desc  { max-width: 220px; color: #4b5563; }
.sos-table__actions { text-align: right; white-space: nowrap; }

/* ── Badges de estatus ── */
.sos-badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   padding      : 4px 10px;
   border-radius: 20px;
   font-size    : .8rem;
   font-weight  : 700;
   color        : #fff;
   white-space  : nowrap;
}

.sos-badge--paid { background: #16a34a !important; }

.sos-badge--detail {
   font-size : .82rem;
   flex-shrink: 0;
}

/* ── Botones de acción en tabla ── */
.sos-table__btn-group {
   display: inline-flex;
   gap    : 8px;
}

.sos-table__btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 5px;
   padding        : 7px 13px;
   border-radius  : 8px;
   font-size      : .82rem;
   font-weight    : 700;
   text-decoration: none;
   transition     : background .2s, transform .1s;
   white-space    : nowrap;
}

.sos-table__btn:active { transform: scale(.97); }

.sos-table__btn--pay {
   background: var(--color-accent);
   color     : var(--color-primary);
}
.sos-table__btn--pay:hover  { background: #f5d800; color: var(--color-primary); text-decoration: none; }

.sos-table__btn--info {
   background: #eef2f7;
   color     : var(--color-primary);
}
.sos-table__btn--info:hover { background: #dde3ec; color: var(--color-primary); text-decoration: none; }

.sos-table__btn--receipt {
   background: var(--color-primary);
   color     : var(--color-accent);
   padding   : 7px 10px;
}
.sos-table__btn--receipt:hover { background: #002d4e; color: var(--color-accent); text-decoration: none; }

/* ── Estado vacío ── */
.sos-empty {
   text-align : center;
   padding    : 48px 24px;
   color      : #9ca3af;
}

.sos-empty__icon {
   font-size    : 3rem;
   margin-bottom: 12px;
   display      : block;
}

.sos-empty__msg { font-size: 1rem; margin: 0; }

/* ════════════════════════════
   DETALLE DE ORDEN (sos-detail)
   ════════════════════════════ */

.sos-detail__back {
   display        : inline-flex;
   align-items    : center;
   gap            : 6px;
   color          : var(--color-secondary);
   font-size      : .875rem;
   font-weight    : 600;
   text-decoration: none;
   margin-bottom  : 20px;
}

.sos-detail__back:hover { color: var(--color-primary); text-decoration: none; }

.sos-detail__body { margin-top: 4px; }

.sos-detail__empty { color: #9ca3af; font-size: 1rem; padding: 32px 0; }

/* ── Tarjeta de información de la orden ── */
.sos-info-card {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
   margin-bottom: 0;
}

.sos-info-card__header {
   background     : var(--color-primary);
   padding        : 18px 20px;
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   gap            : 12px;
   flex-wrap      : wrap;
}

.sos-info-card__header-left {
   display    : flex;
   align-items: center;
   gap        : 14px;
}

.sos-info-card__icon-wrap {
   width          : 44px;
   height         : 44px;
   border-radius  : 8px;
   background     : rgba(255,224,0,.15);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 18px;
   flex-shrink    : 0;
}

h2.sos-info-card__folio,
.sos-info-card__folio {
   margin     : 0 0 3px;
   font-size  : 1.05rem;
   font-weight: 700;
   color      : #fff;
}

.sos-info-card__date {
   margin   : 0;
   font-size: .82rem;
   color    : rgba(255,255,255,.7);
}

.sos-info-card__body {
   padding: 20px;
}

.sos-info-card__label {
   font-size  : .75rem;
   font-weight: 700;
   color      : #9ca3af;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin     : 0 0 6px;
}

.sos-info-card__desc {
   font-size  : 1rem;
   color      : #374151;
   line-height: 1.6;
   margin     : 0;
}

.sos-info-card__footer {
   padding   : 0 20px 20px;
}

.sos-pay-btn {
   width          : 100%;
   padding        : 12px 0;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : 1rem;
   font-weight    : 700;
   border         : none;
   border-radius  : 8px;
   cursor         : pointer;
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 8px;
   transition     : background .2s, transform .1s;
}

.sos-pay-btn:hover  { background: #f5d800; }
.sos-pay-btn:active { transform: scale(.98); }

/* ── Sidebar de totales y PDFs ── */
.sos-sidebar {
   display       : flex;
   flex-direction: column;
   gap           : 16px;
}

.sos-sidebar__card {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
}

.sos-sidebar__card-header {
   background : var(--color-primary);
   color      : #fff;
   padding    : 12px 16px;
   font-size  : .9rem;
   font-weight: 700;
   display    : flex;
   align-items: center;
   gap        : 8px;
}

.sos-sidebar__card-body {
   padding: 16px;
}

.sos-sidebar__card-body--pdfs {
   display       : flex;
   flex-direction: column;
   gap           : 10px;
}

/* totales */
.sos-totals__row {
   display        : flex;
   justify-content: space-between;
   align-items    : center;
   padding        : 8px 0;
   font-size      : .95rem;
   color          : #374151;
   border-bottom  : 1px solid #f1f5f9;
}

.sos-totals__row:last-child { border-bottom: none; }

.sos-totals__label { color: #6b7280; }
.sos-totals__value { font-weight: 600; color: var(--color-primary); }

.sos-totals__row--total {
   font-size  : 1.05rem;
   font-weight: 700;
   color      : var(--color-primary);
   border-top : 2px solid var(--color-primary);
   margin-top : 4px;
   padding-top: 12px;
}

.sos-totals__row--total .sos-totals__label { color: var(--color-primary); font-weight: 700; }

/* botones PDF */
.sos-pdf-btn {
   width          : 100%;
   padding        : 9px 14px;
   background     : #f0f4f8;
   color          : var(--color-primary);
   font-size      : .875rem;
   font-weight    : 600;
   border         : 1.5px solid #d1d9e6;
   border-radius  : 8px;
   cursor         : pointer;
   display        : flex;
   align-items    : center;
   gap            : 8px;
   transition     : background .2s, border-color .2s;
}

.sos-pdf-btn:hover { background: #dde3ec; border-color: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 991px) {
   .sos-sidebar { margin-top: 20px; }
   .sos-info-card__header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
   .sos-table__head th,
   .sos-table__row td { padding: 10px 12px; }
   .sos-table__desc   { max-width: 140px; font-size: .875rem; }
}

/* ════════════════════════════════════════════════════════
   COMPRAS  (pur-*)
   ════════════════════════════════════════════════════════ */

/* ── Sección contenedora ── */
.pur-section { padding: 0; }

.pur-section__head {
   display      : flex;
   align-items  : flex-start;
   margin-bottom: 24px;
}

.pur-section__title-wrap {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.pur-section__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.pur-section__title,
.pur-section__title {
   margin     : 0 0 2px;
   font-size  : 1.25rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.pur-section__subtitle {
   margin   : 0;
   font-size: .875rem;
   color    : #6b7280;
}

/* ── Buscador ── */
.pur-search {
   position     : relative;
   margin-bottom: 20px;
}

.pur-search__icon {
   position : absolute;
   left     : 14px;
   top      : 50%;
   transform: translateY(-50%);
   color    : #9ca3af;
   font-size: 14px;
}

.pur-search__input {
   width        : 100%;
   padding      : 10px 14px 10px 38px;
   border       : 1.5px solid #e5e7eb;
   border-radius: 8px;
   font-size    : .9rem;
   color        : #1f2937;
   background   : #fff;
   transition   : border-color .2s, box-shadow .2s;
   outline      : none;
}

.pur-search__input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.1);
}

/* ── Tabla de compras ── */
.pur-table-wrap {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
}

.pur-table {
   width          : 100%;
   border-collapse: collapse;
}

.pur-table__head {
   background: var(--color-primary);
}

.pur-table__head th {
   color      : #fff;
   font-size  : .875rem;
   font-weight: 600;
   letter-spacing: .03em;
   text-transform: uppercase;
   padding    : 14px 18px;
   text-align : left;
}

.pur-table__row {
   border-bottom: 1px solid #f1f5f9;
   transition   : background .15s;
}

.pur-table__row:last-child { border-bottom: none; }
.pur-table__row:hover      { background: #f8fafc; }

.pur-table__row td {
   padding  : 16px 18px;
   font-size: 1rem;
   color    : #374151;
   vertical-align: middle;
}

.pur-table__folio {
   font-weight  : 700;
   color        : var(--color-primary);
   font-family  : monospace;
   font-size    : .9rem;
   background   : #eef2f7;
   padding      : 4px 10px;
   border-radius: 4px;
}

.pur-table__date  { color: #6b7280; font-size: 1rem; }
.pur-table__amount { font-weight: 700; color: var(--color-primary); font-size: 1rem; }

.pur-badge {
   display      : inline-flex;
   align-items  : center;
   justify-content: center;
   min-width    : 32px;
   padding      : 3px 10px;
   background   : #eef2f7;
   color        : var(--color-primary);
   font-size    : .9rem;
   font-weight  : 700;
   border-radius: 20px;
}

.pur-table__actions { text-align: right; }

.pur-table__btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 6px;
   padding        : 8px 16px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .9rem;
   font-weight    : 700;
   border-radius  : 8px;
   text-decoration: none;
   transition     : background .2s, transform .1s;
   white-space    : nowrap;
}

.pur-table__btn:hover  { background: #f5d800; color: var(--color-primary); text-decoration: none; }
.pur-table__btn:active { transform: scale(.97); }

/* ── Estado vacío ── */
.pur-empty {
   text-align : center;
   padding    : 48px 24px;
   color      : #9ca3af;
}

.pur-empty__icon {
   font-size    : 3rem;
   margin-bottom: 12px;
   display      : block;
}

.pur-empty__msg {
   font-size: 1rem;
   margin   : 0;
}

/* ════════════════════════════
   DETALLE DE COMPRA
   ════════════════════════════ */
.pur-detail { display: flex; flex-direction: column; gap: 24px; }

/* encabezado */
.pur-detail__back {
   display        : inline-flex;
   align-items    : center;
   gap            : 6px;
   color          : var(--color-secondary);
   font-size      : .85rem;
   font-weight    : 600;
   text-decoration: none;
   margin-bottom  : 12px;
}

.pur-detail__back:hover { color: var(--color-primary); text-decoration: none; }

.pur-detail__header { margin-bottom: 4px; }

.pur-detail__meta {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.pur-detail__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.pur-detail__title,
.pur-detail__title {
   margin     : 0 0 4px;
   font-size  : 1.15rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.pur-detail__date {
   margin   : 0;
   font-size: .82rem;
   color    : #6b7280;
}

/* tarjeta contenedora (pagos / productos) */
.pur-payments,
.pur-products {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.05);
   overflow     : hidden;
}

.pur-card__header {
   background : var(--color-primary);
   color      : #fff;
   padding    : 12px 18px;
   font-size  : .9rem;
   font-weight: 700;
   display    : flex;
   align-items: center;
   gap        : 8px;
}

.pur-card__body { padding: 0 0 16px; }

/* tabla de pagos */
.pur-pay-table-wrap { overflow-x: auto; }

.pur-pay-table {
   width          : 100%;
   border-collapse: collapse;
}

.pur-pay-table thead tr {
   background   : #f0f4f8;
   border-bottom: 2px solid #e2e8f0;
}

.pur-pay-table thead th {
   padding   : 12px 16px;
   font-size : .875rem;
   font-weight: 700;
   color      : var(--color-primary);
   text-transform: uppercase;
   letter-spacing: .03em;
   text-align : left;
}

.pur-pay-table__row {
   border-bottom: 1px solid #f1f5f9;
   transition   : background .15s;
}

.pur-pay-table__row:last-child { border-bottom: none; }
.pur-pay-table__row:hover      { background: #f8fafc; }

.pur-pay-table__row td {
   padding  : 14px 16px;
   font-size: 1rem;
   color    : #374151;
   vertical-align: middle;
}

.pur-pay-table__id {
   font-family: monospace;
   font-size  : .78rem;
   color      : #6b7280;
}

/* tabla de productos */
.pur-prod-table-wrap { overflow-x: auto; }

.pur-prod-table {
   width          : 100%;
   border-collapse: collapse;
}

.pur-prod-table thead tr {
   background   : #f0f4f8;
   border-bottom: 2px solid #e2e8f0;
}

.pur-prod-table thead th {
   padding   : 12px 16px;
   font-size : .875rem;
   font-weight: 700;
   color      : var(--color-primary);
   text-transform: uppercase;
   letter-spacing: .03em;
   text-align : left;
}

.pur-prod-table__row {
   border-bottom: 1px solid #f1f5f9;
   transition   : background .15s;
}

.pur-prod-table__row:last-child { border-bottom: none; }
.pur-prod-table__row:hover      { background: #f8fafc; }

.pur-prod-table__row td {
   padding       : 14px 16px;
   font-size     : 1rem;
   color         : #374151;
   vertical-align: middle;
}

.pur-prod-table__img {
   width        : 56px;
   height       : 56px;
   object-fit   : contain;
   border-radius: 6px;
   border       : 1px solid #e9ecef;
   background   : #f8f9fb;
}

.pur-prod-table__name  { font-weight: 600; color: #1f2937; max-width: 260px; }
.pur-prod-table__qty   { text-align: center; }
.pur-prod-table__total { font-weight: 700; color: var(--color-primary); }

/* totales */
.pur-totals {
   display       : flex;
   flex-direction: column;
   align-items   : flex-end;
   gap           : 6px;
   padding       : 16px 18px 0;
   border-top    : 1px solid #f1f5f9;
   margin-top    : 8px;
}

.pur-totals__row {
   display : flex;
   gap     : 24px;
   width   : 260px;
   justify-content: space-between;
   font-size: 1rem;
   color    : #374151;
}

.pur-totals__row--total {
   font-size  : 1rem;
   font-weight: 700;
   color      : var(--color-primary);
   border-top : 2px solid var(--color-primary);
   padding-top: 8px;
   margin-top : 4px;
}

.pur-totals__label { color: #6b7280; }
.pur-totals__row--total .pur-totals__label { color: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 575px) {
   .pur-table__head th,
   .pur-table__row td { padding: 10px 12px; }
   .pur-table__btn    { padding: 6px 10px; font-size: .75rem; }
   .pur-totals__row   { width: 100%; }
}

/* ════════════════════════════════════════════════════════
   DISPOSITIVOS  (dev-*)
   ════════════════════════════════════════════════════════ */

/* ── Sección contenedora ── */
.dev-section { padding: 0; }

.dev-section__head {
   display       : flex;
   align-items   : flex-start;
   gap           : 16px;
   margin-bottom : 24px;
}

.dev-section__title-wrap {
   display    : flex;
   align-items: center;
   gap        : 16px;
}

.dev-section__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}

h2.dev-section__title,
.dev-section__title {
   margin     : 0 0 2px;
   font-size  : 1.25rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.dev-section__subtitle {
   margin   : 0;
   font-size: .875rem;
   color    : #6b7280;
}

/* ── Buscador ── */
.dev-search {
   position     : relative;
   margin-bottom: 24px;
}

.dev-search__icon {
   position : absolute;
   left     : 14px;
   top      : 50%;
   transform: translateY(-50%);
   color    : #9ca3af;
   font-size: 14px;
}

.dev-search__input {
   width        : 100%;
   padding      : 10px 14px 10px 38px;
   border       : 1.5px solid #e5e7eb;
   border-radius: 8px;
   font-size    : .9rem;
   color        : #1f2937;
   background   : #fff;
   transition   : border-color .2s, box-shadow .2s;
   outline      : none;
}

.dev-search__input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.1);
}

/* ── Grid ── */
.dev-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   gap: 20px;
   margin-top: 4px;
}

/* ── Tarjeta de dispositivo ── */
.dev-card {
   background   : #fff;
   border-radius: 12px;
   border       : 1px solid #e9ecef;
   box-shadow   : 0 2px 8px rgba(0,0,0,.06);
   overflow     : hidden;
   display      : flex;
   flex-direction: column;
   height       : 100%;
   transition   : transform .2s, box-shadow .2s;
}

.dev-card:hover {
   transform : translateY(-4px);
   box-shadow: 0 8px 24px rgba(0,59,100,.12);
}

/* franja superior navy */
.dev-card__header {
   background  : var(--color-primary);
   padding     : 10px 14px;
   min-height  : 38px;
   display     : flex;
   align-items : center;
   justify-content: flex-end;
}

/* badge de notificaciones */
.dev-card__badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   background   : var(--color-accent);
   color        : var(--color-primary);
   font-size    : .72rem;
   font-weight  : 700;
   padding      : 3px 9px;
   border-radius: 20px;
}

/* imagen centrada */
.dev-card__img-wrap {
   display        : flex;
   align-items    : center;
   justify-content: center;
   padding        : 20px 16px 12px;
   background     : #f8f9fb;
}

.dev-card__img {
   width     : 100px;
   height    : 100px;
   object-fit: contain;
}

/* info */
.dev-card__body {
   padding: 14px 16px 16px;
   flex   : 1;
}

.dev-card__device-name {
   margin     : 0 0 4px;
   font-size  : .95rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.dev-card__owner {
   margin   : 0;
   font-size: .8rem;
   color    : #6b7280;
   display  : flex;
   align-items: center;
   gap      : 5px;
}

.dev-card__owner-icon { font-size: .75rem; }

/* botón de notificaciones */
.dev-card__footer {
   padding   : 0 16px 16px;
}

.dev-card__btn {
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 7px;
   width          : 100%;
   padding        : 9px 0;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .82rem;
   font-weight    : 700;
   border-radius  : 8px;
   text-decoration: none;
   transition     : background .2s, transform .1s;
}

.dev-card__btn:hover  { background: #f5d800; color: var(--color-primary); text-decoration: none; }
.dev-card__btn:active { transform: scale(.97); }

/* ── Estado vacío ── */
.dev-empty {
   text-align : center;
   padding    : 48px 24px;
   color      : #9ca3af;
}

.dev-empty__icon {
   font-size    : 3rem;
   margin-bottom: 12px;
   display      : block;
}

.dev-empty__msg {
   font-size: 1rem;
   margin   : 0;
}

/* ── Notificaciones (dev-notif-*) ── */
.dev-notif { padding: 0; }

.dev-breadcrumb {
   display    : flex;
   align-items: center;
   gap        : 8px;
   margin-bottom: 20px;
   font-size  : 13px;
}
.dev-breadcrumb__link {
   color          : var(--color-secondary);
   text-decoration: none;
   display        : flex;
   align-items    : center;
   gap            : 5px;
}
.dev-breadcrumb__link:hover { text-decoration: underline; }
.dev-breadcrumb__sep        { color: var(--color-text-muted); }
.dev-breadcrumb__current    { color: var(--color-text-muted); }

.dev-notif__table-wrap {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 8px;
   overflow     : hidden;
   box-shadow   : 0 2px 8px rgba(0,0,0,.04);
}
.dev-notif__table {
   width          : 100%;
   border-collapse: collapse;
   font-size      : 14px;
}
.dev-notif__table thead {
   background: var(--color-primary);
   color     : #fff;
}
.dev-notif__table th {
   padding    : 11px 16px;
   font-weight: 600;
   font-size  : 12px;
   text-align : left;
   letter-spacing: .4px;
}
.dev-notif__row { border-bottom: 1px solid var(--color-bg); }
.dev-notif__row:last-child { border-bottom: none; }
.dev-notif__row:hover { background: #f8f9fb; }
.dev-notif__row td { padding: 12px 16px; vertical-align: middle; }

.dev-notif__folio {
   color          : var(--color-secondary);
   font-weight    : 600;
   text-decoration: none;
}
.dev-notif__folio:hover { text-decoration: underline; }
.dev-notif__desc { color: #1a2533; }
.dev-notif__msg  { color: var(--color-text-muted); font-size: 13px; }
.dev-notif__badge {
   display      : inline-block;
   padding      : 3px 10px;
   border-radius: 20px;
   font-size    : 12px;
   font-weight  : 600;
   white-space  : nowrap;
}

/* ── Skeleton card dispositivo ── */
.dev-card--skeleton { pointer-events: none; }
.dev-skeleton-img {
    width        : 100px;
    height       : 100px;
    border-radius: 8px;
}

/* ── InfoDevice detail ── */
.dev-info-wrap { display: flex; flex-direction: column; gap: 16px; }
.dev-detail-card {
    display      : flex;
    gap          : 24px;
    background   : #fff;
    border       : 1px solid var(--color-border);
    border-radius: 12px;
    padding      : 24px;
    align-items  : flex-start;
}
.dev-detail-card__img-wrap {
    flex-shrink  : 0;
    width        : 120px;
    height       : 120px;
    background   : var(--color-bg);
    border-radius: 10px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    overflow     : hidden;
}
.dev-detail-card__img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.dev-detail-card__info { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.dev-detail-card__name {
    font-size  : 18px;
    font-weight: 700;
    color      : var(--color-primary);
    margin     : 0;
}
.dev-detail-card__row {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-size  : 13px;
}
.dev-detail-card__label {
    display    : flex;
    align-items: center;
    gap        : 6px;
    color      : var(--color-text-muted);
    min-width  : 120px;
    flex-shrink: 0;
}
.dev-detail-card__label i { width: 14px; color: var(--color-secondary); font-size: 12px; }
.dev-detail-card__value   { font-weight: 600; color: #333; }
.dev-detail-card__value--mono { font-family: 'Courier New', monospace; font-size: 12px; }
.dev-detail-card__badge {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 3px 10px;
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 600;
}
.dev-detail-card__badge--warn { background: #fff3cd; color: #856404; }
.dev-detail-card__badge--ok   { background: #d1e7dd; color: #0a3622; }

/* ── Responsive ── */
@media (max-width: 991px) {
   .dev-section__head { flex-direction: column; align-items: flex-start; }
   .dev-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 600px) {
   .dev-detail-card { flex-direction: column; align-items: center; text-align: center; }
   .dev-detail-card__label { min-width: unset; }
   .dev-detail-card__row { flex-direction: column; gap: 4px; }
}
@media (max-width: 575px) {
   .dev-grid       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
   .dev-card__img  { width: 80px; height: 80px; }
   .dev-notif__table th:nth-child(3),
   .dev-notif__row td:nth-child(3) { display: none; }
}

/* ============================================================
   KnowlegdeSupport — kb-* (base_conocimiento / post)
   ============================================================ */

/* ── Layout ── */
.kb-layout {
   display             : grid;
   grid-template-columns: 1fr 280px;
   gap                 : 32px;
   align-items         : start;
}

.kb-post-layout {
   display             : grid;
   grid-template-columns: 1fr 280px;
   gap                 : 32px;
   align-items         : start;
   padding-top         : 32px;
   padding-bottom      : 48px;
}

/* ── Sidebar shared (ContainerList + PostKnowledge) ── */
.kb-sidebar {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 8px;
   overflow     : hidden;
}

.kb-sidebar-cats,
.kb-sidebar__block {
   padding      : 20px 20px 16px;
   border-bottom: 1px solid var(--color-border);
}

.kb-sidebar-cats:last-child,
.kb-sidebar__block:last-child {
   border-bottom: none;
}

.kb-sidebar__title {
   font-size    : .75rem;
   font-weight  : 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color        : var(--color-primary);
   margin       : 0 0 12px;
}

.kb-sidebar__list {
   list-style: none;
   margin    : 0;
   padding   : 0;
}

.kb-sidebar__list li {
   border-bottom: 1px solid var(--color-border);
}

.kb-sidebar__list li:last-child { border-bottom: none; }

.kb-sidebar__list a {
   display     : block;
   padding     : 8px 0;
   font-size   : .875rem;
   color       : var(--color-secondary) !important;
   transition  : color .15s;
}

.kb-sidebar__list a:hover { color: var(--color-primary) !important; }

.kb-sidebar__tag {
   font-size  : .9rem;
   color      : var(--color-text-muted);
}

/* ── Load-more button (ContainerList) ── */
.kb-load-more-wrap {
   text-align : center;
   margin-top : 24px;
}

/* ── Recent posts list (PostNews) ── */
.kb-recent-list {
   list-style: none;
   margin    : 0;
   padding   : 0;
}

.kb-recent-item {
   display       : flex;
   flex-direction: column;
   gap           : 2px;
   padding       : 8px 0;
   border-bottom : 1px solid var(--color-border);
}

.kb-recent-item:last-child { border-bottom: none; }

.kb-recent-item a {
   font-size  : .85rem;
   color      : var(--color-secondary) !important;
   line-height: 1.35;
   transition : color .15s;
}

.kb-recent-item a:hover { color: var(--color-primary) !important; }

.kb-recent-date {
   font-size: .75rem;
   color    : var(--color-text-muted);
}

/* ── Article (PostKnowledge) ── */
.kb-article {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 8px;
   padding      : 32px;
}

.kb-article__date {
   display        : inline-flex;
   flex-direction : column;
   align-items    : center;
   background     : var(--color-primary);
   color          : #fff;
   border-radius  : 6px;
   padding        : 8px 14px;
   margin-bottom  : 16px;
   line-height    : 1.1;
}

.kb-article__date-day {
   font-size  : 1.5rem;
   font-weight: 700;
}

.kb-article__date-month {
   font-size     : .7rem;
   text-transform: uppercase;
   letter-spacing: .06em;
}

.kb-article__title {
   font-size    : 1.5rem;
   font-weight  : 700;
   color        : var(--color-primary);
   margin-bottom: 4px;
}

.kb-article__number {
   font-size    : .85rem;
   color        : var(--color-text-muted);
   margin-bottom: 20px;
}

.kb-article__body {
   font-size   : .95rem;
   line-height : 1.7;
   color       : #333;
   margin-bottom: 28px;
}

.kb-article__share {
   display    : flex;
   align-items: center;
   gap        : 12px;
   padding    : 16px 0;
   border-top : 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 24px;
}

.kb-article__share-label {
   font-size  : .85rem;
   font-weight: 600;
   color      : var(--color-primary);
   white-space: nowrap;
}

.kb-social { display: flex; gap: 8px; }

.kb-social__btn {
   display        : inline-flex;
   align-items    : center;
   justify-content: center;
   width          : 34px;
   height         : 34px;
   border-radius  : 50%;
   color          : #fff !important;
   font-size      : .9rem;
   transition     : opacity .15s;
}

.kb-social__btn:hover { opacity: .82; }
.kb-social__btn--fb { background: #1877f2; }
.kb-social__btn--tw { background: #1da1f2; }
.kb-social__btn--wa { background: #25d366; }

.kb-article__author {
   display    : flex;
   align-items: center;
   gap        : 14px;
}

.kb-article__author-img {
   width        : 64px;
   height       : 64px;
   border-radius: 50%;
   object-fit   : cover;
   border       : 2px solid var(--color-border);
}

.kb-article__author-info {
   display       : flex;
   flex-direction: column;
   gap           : 2px;
}

.kb-article__author-label {
   font-size: .75rem;
   color    : var(--color-text-muted);
}

/* ── Responsive ── */
@media (max-width: 991px) {
   .kb-layout,
   .kb-post-layout {
      grid-template-columns: 1fr;
   }

   .kb-sidebar { order: -1; }
}

@media (max-width: 575px) {
   .kb-article { padding: 20px 16px; }
}

/* ─────────────────────────────────────────────
   ITEM INPUT  (ii-*)
───────────────────────────────────────────── */
.ii-field {
   display       : flex;
   flex-direction: column;
   gap           : 5px;
   margin-bottom : 14px;
}

.ii-label {
   font-size  : .82rem;
   font-weight: 600;
   color      : var(--color-primary);
}

.ii-field--required .ii-label::after {
   content    : ' *';
   color      : var(--color-danger);
}

.ii-input {
   width        : 100%;
   height       : 38px;
   padding      : 0 10px;
   border       : 1.5px solid var(--color-border);
   border-radius: 6px;
   font-size    : .9rem;
   color        : #222;
   background   : #fff;
   transition   : border-color .18s;
   outline      : none;
}

.ii-input:focus {
   border-color: var(--color-secondary);
   box-shadow  : 0 0 0 3px rgba(4,87,160,.12);
}

.ii-input--disabled {
   background: var(--color-bg);
   color     : var(--color-text-muted);
   cursor    : not-allowed;
}

.ii-error {
   font-size: .78rem;
   color    : var(--color-danger);
}

/* ─────────────────────────────────────────────
   ITEM MODAL  (gm-*)
───────────────────────────────────────────── */
.gm-overlay {
   position        : fixed;
   inset           : 0;
   background      : rgba(0,0,0,.52);
   z-index         : 9000;
   display         : flex;
   align-items     : center;
   justify-content : center;
}

.gm-modal {
   position     : relative;
   background   : #fff;
   border-radius: 10px;
   width        : 100%;
   max-width    : 560px;
   max-height   : 90vh;
   overflow-y   : auto;
   outline      : none;
   box-shadow   : 0 8px 32px rgba(0,0,0,.18);
}

.gm-dialog { width: 100%; }

.gm-content { display: flex; flex-direction: column; }

.gm-header {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   padding        : 16px 20px;
   border-bottom  : 1px solid var(--color-border);
}

.gm-title {
   margin     : 0;
   font-size  : 1rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.gm-close {
   background : none;
   border     : none;
   font-size  : 1.4rem;
   line-height: 1;
   color      : var(--color-text-muted);
   cursor     : pointer;
   padding    : 0 4px;
   transition : color .15s;
}

.gm-close:hover { color: var(--color-primary); }

.gm-body {
   padding  : 20px;
   flex-grow: 1;
}

.gm-footer {
   display        : flex;
   justify-content: flex-end;
   gap            : 10px;
   padding        : 14px 20px;
   border-top     : 1px solid var(--color-border);
}

@media (max-width: 575px) {
   .gm-modal    { max-width: 98vw; border-radius: 8px; }
   .gm-body     { padding: 16px; }
   .gm-footer   { padding: 12px 16px; }
}

/* ─────────────────────────────────────────────
   RESET PASSWORD  (rp-*)
───────────────────────────────────────────── */
.rp-wrap {
   display         : flex;
   justify-content : center;
   padding         : 48px 16px 64px;
   background      : var(--color-bg);
   min-height      : 60vh;
}

.rp-card {
   width        : 100%;
   max-width    : 480px;
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 12px;
   overflow     : hidden;
}

.rp-card__header {
   display     : flex;
   align-items : center;
   gap         : 14px;
   padding     : 24px 28px;
   border-bottom: 1px solid var(--color-border);
   background  : var(--color-bg);
}

.rp-card__icon-wrap {
   width          : 44px;
   height         : 44px;
   border-radius  : 50%;
   background     : var(--color-primary);
   color          : var(--color-accent);
   display        : flex;
   align-items    : center;
   justify-content: center;
   font-size      : 18px;
   flex-shrink    : 0;
}

.rp-card__title {
   margin     : 0 0 2px;
   font-size  : 1rem;
   font-weight: 700;
   color      : var(--color-primary);
}

.rp-card__subtitle {
   margin   : 0;
   font-size: .82rem;
   color    : var(--color-text-muted);
}

.rp-card__body { padding: 28px; }

.rp-form { display: flex; flex-direction: column; gap: 4px; }

.rp-form__footer {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   margin-top     : 8px;
   flex-wrap      : wrap;
   gap            : 10px;
}

.rp-form__link {
   font-size      : .84rem;
   color          : var(--color-secondary);
   text-decoration: none;
}

.rp-form__link:hover {
   color          : var(--color-primary);
   text-decoration: underline;
}

@media (max-width: 480px) {
   .rp-card__header { padding: 18px 20px; }
   .rp-card__body   { padding: 20px; }
   .rp-form__footer { flex-direction: column; align-items: stretch; }
   .rp-form__footer .co-btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   INFO COMPANY  (ic-*)
   /quienes_somos | /mision | /vision | /valores
───────────────────────────────────────────── */
.ic-hero {
   background   : var(--color-primary);
   padding      : 40px 0 32px;
   margin-bottom: 0;
}

.ic-hero__eyebrow {
   font-size    : .78rem;
   font-weight  : 600;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color        : var(--color-accent);
   margin-bottom: 6px;
}

.ic-hero__title {
   font-size  : 30px;
   font-weight: 800;
   color      : #fff;
   margin     : 0 0 16px;
   display    : flex;
   align-items: center;
   gap        : 12px;
}

.ic-hero__icon {
   background   : var(--color-accent);
   color        : var(--color-primary);
   width        : 42px;
   height       : 42px;
   border-radius: 50%;
   display      : flex;
   align-items  : center;
   justify-content: center;
   font-size    : 17px;
   flex-shrink  : 0;
}

.ic-body { padding: 36px 15px 64px; }

.ic-grid {
   display              : grid;
   grid-template-columns: 260px 1fr;
   gap                  : 28px;
   align-items          : start;
}

.ic-main { min-width: 0; }

/* ── Sidebar ── */
.ic-sidebar {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
   position     : sticky;
   top          : 80px;
}

.ic-sidebar__heading {
   font-size    : .72rem;
   font-weight  : 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color        : var(--color-text-muted);
   padding      : 14px 18px 10px;
   margin       : 0;
   border-bottom: 1px solid var(--color-border);
}

.ic-sidebar__nav {
   display       : flex;
   flex-direction: column;
}

.ic-sidebar__link {
   display        : flex;
   align-items    : center;
   gap            : 10px;
   padding        : 13px 18px;
   font-size      : .9rem;
   color          : #444;
   text-decoration: none;
   border-bottom  : 1px solid var(--color-border);
   transition     : background .15s, color .15s;
}

.ic-sidebar__link:last-child { border-bottom: none; }

.ic-sidebar__link:hover {
   background: var(--color-bg);
   color     : var(--color-primary);
}

.ic-sidebar__link--active {
   background : #eef3fa;
   color      : var(--color-primary);
   font-weight: 700;
}

.ic-sidebar__link-icon {
   width     : 18px;
   text-align: center;
   color     : var(--color-secondary);
   font-size : .85rem;
   flex-shrink: 0;
}

.ic-sidebar__link--active .ic-sidebar__link-icon { color: var(--color-primary); }

.ic-sidebar__link-arrow {
   margin-left: auto;
   font-size  : .65rem;
   color      : var(--color-primary);
}

/* ── Content card ── */
.ic-content-card {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   padding      : 32px;
}

.ic-content { font-size: 14px; color: #444; line-height: 1.8; }

.ic-content h1,
.ic-content h2,
.ic-content h3,
.ic-content h4 {
   color      : var(--color-primary);
   font-weight: 700;
   margin-top : 24px;
   margin-bottom: 10px;
}

.ic-content h1 { font-size: 24px; }
.ic-content h2 { font-size: 20px; border-bottom: 2px solid var(--color-bg); padding-bottom: 8px; }
.ic-content h3 { font-size: 16px; }

.ic-content p  { margin-bottom: 14px; }

.ic-content ul,
.ic-content ol { padding-left: 20px; margin-bottom: 14px; }

.ic-content li { margin-bottom: 6px; }

.ic-content strong,
.ic-content b  { color: #222; }

.ic-content a  { color: var(--color-secondary); text-decoration: underline; }
.ic-content a:hover { color: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 991px) {
   .ic-grid { grid-template-columns: 1fr; }
   .ic-content-card { padding: 24px 20px; }
   .ic-sidebar { position: static; }
}

@media (max-width: 575px) {
   .ic-hero__title  { font-size: 22px; }
   .ic-content-card { padding: 18px; }
}


/* ═══════════════════════════════════════════════════════════
   GridWidgets (wb-*)
   ═══════════════════════════════════════════════════════════ */

@keyframes wbFadeUp {
   from { opacity: 0; transform: translateY(14px); }
   to   { opacity: 1; transform: translateY(0); }
}

/* ── Grid container ── */
.wb-grid {
   display              : grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows   : repeat(3, 260px);
   gap                  : 8px;
   margin               : 16px 0 24px;
}

/* ── Item base ── */
.wb-item {
   position     : relative;
   overflow     : hidden;
   border-radius: 8px;
   background   : var(--color-text);
   animation    : wbFadeUp 0.7s ease both;
}

.wb-item a {
   display        : block;
   width          : 100%;
   height         : 100%;
   text-decoration: none;
   color          : inherit;
}

/* ── Grid placement — cuadrícula uniforme 3×3 ── */
.wb-item--1 { animation-delay: 0.05s; }
.wb-item--2 { animation-delay: 0.10s; }
.wb-item--3 { animation-delay: 0.15s; }
.wb-item--4 { animation-delay: 0.20s; }
.wb-item--5 { animation-delay: 0.25s; }
.wb-item--6 { animation-delay: 0.30s; }
.wb-item--7 { animation-delay: 0.35s; }
.wb-item--8 { animation-delay: 0.40s; }
.wb-item--9 { animation-delay: 0.45s; }

/* ── Image ── */
.wb-img {
   width     : 100%;
   height    : 100%;
   object-fit: contain;
   display   : block;
   transition: transform 0.4s ease;
}

.wb-item:hover .wb-img { transform: scale(1.04); }

/* ── Text layer overlay ── */
.wb-layer {
   position  : absolute;
   inset     : 0;
   padding   : 20px 24px;
   display   : flex;
   flex-direction: column;
   justify-content: center;
}

.wb-layer--mid-left   { align-items: flex-start; text-align: left; }
.wb-layer--mid-right  { align-items: flex-end;   text-align: right; }
.wb-layer--mid-center { align-items: center;     text-align: center; }
.wb-layer--top-right  { justify-content: flex-start; align-items: flex-end; text-align: right; }
.wb-layer--top-center { justify-content: flex-start; align-items: center;   text-align: center; }
.wb-layer--bot-center { justify-content: flex-end;   align-items: center;   text-align: center; }
.wb-layer--bot-right  { justify-content: flex-end;   align-items: flex-end; text-align: right; }

/* ── Text elements ── */
.wb-eyebrow {
   font-size     : 11px;
   font-weight   : 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color         : var(--color-accent);
   margin        : 0 0 4px;
}

.wb-title {
   font-size  : 1.5rem;
   font-weight: 700;
   color      : #fff;
   margin     : 0 0 6px;
   line-height: 1.2;
}

.wb-sub {
   font-size  : 1rem;
   font-weight: 500;
   color      : rgba(255,255,255,.85);
   margin     : 0 0 8px;
}

.wb-price {
   font-size  : 1.4rem;
   font-weight: 700;
   color      : var(--color-accent);
   margin     : 0 0 10px;
}

.wb-note {
   font-size: .85rem;
   color    : rgba(255,255,255,.7);
   margin   : 0 0 10px;
}

/* ── CTA button ── */
.wb-btn {
   display        : inline-block;
   padding        : 8px 20px;
   background     : var(--color-accent);
   color          : var(--color-primary);
   font-size      : .85rem;
   font-weight    : 700;
   border-radius  : 6px;
   margin-top     : 6px;
   transition     : background 0.15s;
   white-space    : nowrap;
   text-decoration: none;
}

.wb-item:hover .wb-btn { background: var(--color-accent-hover); }

/* ── Skeleton ── */
.wb-skeleton {
   border-radius: 8px;
   overflow     : hidden;
   background   : var(--color-text);
   background-image: linear-gradient(90deg, var(--color-text) 25%, #353535 50%, var(--color-text) 75%);
   background-size: 200% 100%;
   animation   : wbShimmer 1.6s infinite;
}

@keyframes wbShimmer {
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}

/* ── Responsive ── */
@media (max-width: 991px) {
   .wb-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows   : repeat(5, 220px);
   }
}

@media (max-width: 575px) {
   .wb-grid {
      grid-template-columns: 1fr;
      grid-template-rows   : repeat(9, 220px);
   }
}

/* ══════════════════════════════════════════════════════════════════════
   ÓRDENES DE SERVICIO  (so-*)
══════════════════════════════════════════════════════════════════════ */

/* Encabezado de sección */
.so-head {
   display      : flex;
   align-items  : flex-start;
   gap          : 16px;
   margin-bottom: 24px;
   padding-bottom: 20px;
   border-bottom: 2px solid var(--color-accent);
}
.so-head__icon-wrap {
   width          : 48px;
   height         : 48px;
   border-radius  : 10px;
   background     : var(--color-primary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 20px;
   flex-shrink    : 0;
}
.so-head__title {
   font-size  : 20px !important;
   font-weight: 700 !important;
   color      : var(--color-primary) !important;
   margin     : 0 0 4px !important;
}
.so-head__subtitle {
   font-size: 13px;
   color    : var(--color-text-muted);
   margin   : 0;
}

/* Tabla de órdenes */
.so-table-wrap {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
}
.so-table {
   width          : 100%;
   border-collapse: collapse;
   font-size      : 13px;
}
.so-table thead tr {
   background: var(--color-primary);
}
.so-table thead th {
   padding    : 12px 16px;
   color      : #fff;
   font-weight: 600;
   font-size  : 12px;
   text-align : left;
   white-space: nowrap;
}
.so-table__row {
   border-bottom: 1px solid var(--color-bg);
   transition   : background .15s;
}
.so-table__row:last-child { border-bottom: none; }
.so-table__row:hover      { background: #f8f9fb; }
.so-table td {
   padding   : 12px 16px;
   color     : #333;
   vertical-align: middle;
}
.so-table__folio {
   font-weight: 600;
   color      : var(--color-primary) !important;
   white-space: nowrap;
}
.so-table__date  { white-space: nowrap; color: var(--color-text-muted) !important; }
.so-table__desc  { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badge de estatus */
.so-badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   padding      : 3px 10px;
   border-radius: 20px;
   font-size    : 11px;
   font-weight  : 600;
   white-space  : nowrap;
}

/* Botones de acción */
.so-table__actions {
   display: flex;
   gap    : 6px;
   flex-wrap: wrap;
}
.so-btn {
   display        : inline-flex;
   align-items    : center;
   gap            : 5px;
   padding        : 5px 12px;
   border-radius  : 6px;
   font-size      : 12px;
   font-weight    : 600;
   text-decoration: none;
   border         : 1px solid transparent;
   cursor         : pointer;
   transition     : all .15s;
   white-space    : nowrap;
}
.so-btn--primary {
   background: var(--color-secondary);
   color     : #fff !important;
   border-color: var(--color-secondary);
}
.so-btn--primary:hover {
   background  : var(--color-primary);
   border-color: var(--color-primary);
   color       : #fff !important;
}
.so-btn--outline {
   background  : #fff;
   color       : var(--color-secondary) !important;
   border-color: var(--color-secondary);
}
.so-btn--outline:hover {
   background  : var(--color-primary);
   color       : #fff !important;
   border-color: var(--color-primary);
}

/* ── Filtros ── */
.so-filters {
    display       : flex;
    flex-wrap     : wrap;
    gap           : 12px;
    align-items   : center;
    margin-bottom : 12px;
}
.so-filters__search {
    position: relative;
    flex    : 1;
    min-width: 180px;
}
.so-filters__icon {
    position : absolute;
    left     : 11px;
    top      : 50%;
    transform: translateY(-50%);
    color    : var(--color-text-muted);
    font-size: 13px;
}
.so-filters__input {
    width        : 100%;
    padding      : 7px 12px 7px 32px;
    border       : 1px solid var(--color-border);
    border-radius: 6px;
    font-size    : 13px;
    outline      : none;
    transition   : border-color .2s;
}
.so-filters__input:focus { border-color: var(--color-secondary); }
.so-filters__status {
    display : flex;
    flex-wrap: wrap;
    gap     : 6px;
}
.so-filter-btn {
    padding      : 5px 12px;
    border       : 1px solid var(--color-border);
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 500;
    background   : #fff;
    color        : #555;
    cursor       : pointer;
    transition   : all .15s;
    white-space  : nowrap;
}
.so-filter-btn:hover          { border-color: var(--color-secondary); color: var(--color-secondary); }
.so-filter-btn--active        { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }

/* ── Skeleton loading ── */
@keyframes so-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.so-skeleton-wrap {
    background   : #fff;
    border       : 1px solid var(--color-border);
    border-radius: 10px;
    overflow     : hidden;
    padding      : 8px 0;
}
.so-skeleton-row {
    display    : flex;
    gap        : 16px;
    padding    : 14px 16px;
    border-bottom: 1px solid var(--color-bg);
}
.so-skeleton-row:last-child { border-bottom: none; }
.so-skeleton-cell {
    height       : 14px;
    border-radius: 4px;
    background   : linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation    : so-shimmer 1.4s infinite linear;
}
.so-skeleton-cell--sm { flex: 1; max-width: 100px; }
.so-skeleton-cell--lg { flex: 2; }

/* ── Skeleton detallado (info card + summary card) ── */
.so-sk-card {
    background   : #fff;
    border       : 1px solid var(--color-border);
    border-radius: 10px;
    overflow     : hidden;
}
.so-sk-card__head {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 18px 20px;
    border-bottom : 1px solid var(--color-bg);
}
.so-sk-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.so-sk-avatar { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.so-sk-stack  { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.so-sk-line   { display: flex; align-items: center; gap: 12px; }
.so-sk-dot    { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.so-sk-row    { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.so-sk-amount { width: 70px; height: 14px; flex-shrink: 0; }
.so-sk-btn    { height: 44px; border-radius: 8px; margin-top: 6px; }
.so-sk-card .so-skeleton-cell { animation: so-shimmer 1.4s infinite linear; }

/* ── Estado de error ── */
.so-error-state {
    text-align   : center;
    padding      : 56px 24px;
    background   : #fff;
    border       : 1px solid var(--color-border);
    border-radius: 10px;
}
.so-error-state__icon {
    font-size    : 46px;
    color        : #e53e3e;
    margin-bottom: 14px;
    display      : block;
}
.so-error-state__title {
    font-size  : 1.2rem;
    font-weight: 700;
    color      : var(--color-text);
    margin     : 0 0 8px;
}
.so-error-state__msg {
    color      : var(--color-text-muted);
    font-size  : 14px;
    margin     : 0 0 22px;
}
.so-error-state__actions {
    display        : flex;
    gap            : 10px;
    justify-content: center;
    flex-wrap      : wrap;
}
[data-theme="dark"] .so-sk-card,
[data-theme="dark"] .so-error-state { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .so-error-state__title { color: var(--color-text); }

/* Estado vacío */
.so-empty {
   text-align: center;
   padding   : 56px 24px;
   background: #fff;
   border    : 1px solid var(--color-border);
   border-radius: 10px;
}
.so-empty__icon {
   font-size    : 48px;
   color        : var(--color-border);
   display      : block;
   margin-bottom: 16px;
}
.so-empty__msg {
   font-size: 15px;
   color    : var(--color-text-muted);
   margin   : 0;
}

/* ── Tarjeta principal de información de la orden ── */
.so-info-card {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
}
.so-info-card__header {
   display        : flex;
   align-items    : center;
   gap            : 14px;
   padding        : 18px 20px;
   background     : var(--color-primary);
   flex-wrap      : wrap;
}
.so-info-card__icon-wrap {
   width          : 44px;
   height         : 44px;
   border-radius  : 8px;
   background     : rgba(255,255,255,.12);
   border         : 1px solid rgba(255,224,0,.3);
   display        : flex;
   align-items    : center;
   justify-content: center;
   color          : var(--color-accent);
   font-size      : 18px;
   flex-shrink    : 0;
}
.so-info-card__label {
   margin     : 0 0 2px;
   font-size  : 11px;
   font-weight: 600;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color      : rgba(255,255,255,.6);
}
.so-info-card__folio {
   margin     : 0;
   font-size  : 18px;
   font-weight: 700;
   color      : #fff;
}
.so-info-card__status {
   margin-left  : auto;
   display      : inline-flex;
   align-items  : center;
   gap          : 6px;
   padding      : 5px 14px;
   border-radius: 20px;
   font-size    : 12px;
   font-weight  : 600;
   white-space  : nowrap;
}
.so-info-card__body {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 0;
}

/* Fila de información (icono + label + valor) */
.so-info-row {
   display      : flex;
   align-items  : flex-start;
   gap          : 14px;
   padding      : 14px 0;
   border-bottom: 1px solid var(--color-bg);
}
.so-info-row:last-child { border-bottom: none; }
.so-info-row__icon {
   width          : 32px;
   height         : 32px;
   border-radius  : 6px;
   background     : #f0f4ff;
   color          : var(--color-secondary);
   display        : flex;
   align-items    : center;
   justify-content: center;
   font-size      : 13px;
   flex-shrink    : 0;
   margin-top     : 2px;
}
.so-info-row__label {
   margin     : 0 0 3px;
   font-size  : 11px;
   font-weight: 600;
   color      : var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: .8px;
}
.so-info-row__value {
   margin    : 0;
   font-size : 14px;
   color     : var(--color-text);
   font-weight: 500;
}
.so-info-row__value--desc {
   font-weight: 400;
   color      : #444;
   line-height: 1.6;
}

/* Footer de pago pendiente */
.so-info-card__footer {
   padding      : 18px 20px;
   background   : #fff8e6;
   border-top   : 1px solid #ffe082;
}
.so-info-card__pay-note {
   display    : flex;
   align-items: center;
   gap        : 8px;
   font-size  : 13px;
   color      : #856404;
   margin     : 0 0 14px;
   font-weight: 500;
}
.so-pay-btn {
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 8px;
   width          : 100%;
   padding        : 12px;
   background     : var(--color-secondary);
   color          : #fff;
   border         : none;
   border-radius  : 8px;
   font-size      : 14px;
   font-weight    : 700;
   cursor         : pointer;
   transition     : background .15s;
}
.so-pay-btn:hover { background: var(--color-primary); }
.so-pay-btn:disabled { opacity: .7; cursor: wait; }

/* ── Pago de orden de servicio: monto, selector de pasarela, seguridad ── */
.so-pay-amount {
   display        : flex;
   align-items    : baseline;
   justify-content: space-between;
   gap            : 8px;
   margin-bottom  : 12px;
   padding-bottom : 12px;
   border-bottom  : 1px dashed #ffe082;
}
.so-pay-amount__label {
   font-size  : 13px;
   color      : #856404;
   font-weight: 600;
}
.so-pay-amount__value {
   font-size  : 20px;
   font-weight: 800;
   color      : #5a4500;
}
.so-pay-note {
   display    : flex;
   align-items: center;
   gap        : 8px;
   font-size  : 12.5px;
   color      : #856404;
   margin     : 0 0 12px;
   font-weight: 500;
}
.so-gateway-group {
   display              : grid;
   grid-template-columns: 1fr 1fr;
   gap                  : 10px;
   margin-bottom        : 14px;
}
.so-gateway {
   display      : flex;
   align-items  : center;
   gap          : 10px;
   padding      : 12px;
   background   : #fff;
   border       : 2px solid var(--color-border);
   border-radius: 10px;
   cursor       : pointer;
   text-align   : left;
   transition   : border-color .15s, box-shadow .15s, background .15s;
   position     : relative;
}
.so-gateway:hover:not(:disabled) { border-color: var(--color-secondary); }
.so-gateway:disabled { opacity: .6; cursor: not-allowed; }
.so-gateway--active {
   border-color: var(--color-secondary);
   background   : #f5faff;
   box-shadow   : 0 0 0 3px rgba(4, 87, 160, .12);
}
.so-gateway__icon {
   font-size : 20px;
   color     : var(--color-secondary);
   flex-shrink: 0;
}
.so-gateway__text {
   display       : flex;
   flex-direction: column;
   gap           : 1px;
   flex          : 1;
   min-width     : 0;
}
.so-gateway__label {
   font-size  : 13px;
   font-weight: 700;
   color      : var(--color-text);
}
.so-gateway__sub {
   font-size: 11px;
   color    : var(--color-text-muted);
}
.so-gateway__check {
   color     : var(--color-secondary);
   font-size : 15px;
   opacity   : 0;
   transition: opacity .15s;
   flex-shrink: 0;
}
.so-gateway--active .so-gateway__check { opacity: 1; }
.so-pay-secure {
   display    : flex;
   align-items: center;
   gap        : 7px;
   font-size  : 11.5px;
   color      : #6b7280;
   margin     : 10px 0 0;
   justify-content: center;
}
.so-pay-secure i { color: #16a34a; }
.so-info-card__footer--paid {
   background : #ecfdf5;
   border-top : 1px solid #a7f3d0;
}
.so-pay-paid {
   display    : flex;
   align-items: center;
   gap        : 8px;
   margin     : 0;
   font-size  : 13px;
   font-weight: 600;
   color      : #065f46;
}
@media (max-width: 480px) {
   .so-gateway-group { grid-template-columns: 1fr; }
}
[data-theme="dark"] .so-gateway {
   background  : var(--color-surface);
   border-color: var(--color-border);
}
[data-theme="dark"] .so-gateway--active {
   background  : #0d2236;
   border-color: var(--color-secondary);
}
[data-theme="dark"] .so-gateway__label { color: var(--color-text); }
[data-theme="dark"] .so-info-card__footer--paid {
   background : #0d2818;
   border-top-color: #065f46;
}
[data-theme="dark"] .so-pay-paid { color: #6ee7b7; }
[data-theme="dark"] .so-pay-secure { color: var(--color-text-muted); }

/* ── Tarjeta de resumen/pago (columna derecha) ── */
.so-summary-card {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
   position     : sticky;
   top          : 80px;
}
.so-summary-card__header {
   display     : flex;
   align-items : center;
   gap         : 8px;
   padding     : 14px 18px;
   background  : #f8f9fb;
   border-bottom: 1px solid var(--color-border);
   font-size   : 14px;
   font-weight : 700;
   color       : var(--color-primary);
}
.so-summary-card__header-icon {
   color    : var(--color-secondary);
   font-size: 15px;
}
.so-summary-card__body {
   padding: 16px 18px;
}

/* Filas de totales */
.so-total-row {
   display        : flex;
   justify-content: space-between;
   align-items    : center;
   padding        : 8px 0;
   font-size      : 13px;
   color          : #444;
   border-bottom  : 1px solid var(--color-bg);
}
.so-total-row:last-child { border-bottom: none; }
.so-total-row--total {
   margin-top : 8px;
   padding-top: 12px;
   border-top : 2px solid var(--color-primary) !important;
   font-size  : 15px !important;
   font-weight: 700;
   color      : var(--color-primary) !important;
}

/* Sección PDFs */
.so-summary-card__pdf {
   padding      : 14px 18px 18px;
   border-top   : 1px solid var(--color-bg);
   display      : flex;
   flex-direction: column;
   gap          : 8px;
}
.so-summary-card__pdf-title {
   display    : flex;
   align-items: center;
   gap        : 6px;
   font-size  : 12px;
   font-weight: 700;
   color      : var(--color-primary);
   margin     : 0 0 4px;
   text-transform: uppercase;
   letter-spacing: .8px;
}
.so-summary-card__pdf-title i { color: #dc3545; }
.so-pdf-btn {
   display        : flex;
   align-items    : center;
   gap            : 8px;
   padding        : 9px 14px;
   background     : #fff;
   border         : 1px solid var(--color-border);
   border-radius  : 6px;
   font-size      : 13px;
   font-weight    : 500;
   color          : var(--color-primary);
   cursor         : pointer;
   transition     : all .15s;
   text-align     : left;
}
.so-pdf-btn i { color: #dc3545; font-size: 14px; }
.so-pdf-btn:hover {
   background  : var(--color-primary);
   border-color: var(--color-primary);
   color       : #fff;
}
.so-pdf-btn:hover i { color: #fff; }

/* Grid de detalle de orden (info + payment) */
.so-detail-grid {
   display              : grid;
   grid-template-columns: 1fr 280px;
   gap                  : 20px;
   align-items          : start;
}

/* Responsive */
@media (max-width: 900px) {
   .so-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
   .so-head                  { flex-direction: column; }
   .so-info-card__status     { margin-left: 0; }
   .so-summary-card          { position: static; }
   .so-table thead th:nth-child(3),
   .so-table td:nth-child(3)       { display: none; }
   .so-table__date                 { display: none; }
   .so-table thead th:nth-child(2) { display: none; }
}
@media (max-width: 575px) {
   .so-table-wrap { border-radius: 0; border-left: none; border-right: none; }
   .so-btn span   { display: none; }
   .so-btn        { padding: 6px 9px; }
}

/* ══════════════════════════════════════════════════════════════════════
   COTIZACIONES  (qt-*)
══════════════════════════════════════════════════════════════════════ */

/* Tabla de lista de cotizaciones */
/* ── Barra de filtros cotizaciones (qtf-*) ── */
.qtf-bar {
   display    : flex;
   align-items: center;
   gap        : 10px;
   flex-wrap  : wrap;
   margin-bottom: 14px;
}
.qtf-search {
   position  : relative;
   flex       : 1 1 200px;
   min-width  : 160px;
}
.qtf-search__icon {
   position   : absolute;
   left       : 10px;
   top        : 50%;
   transform  : translateY(-50%);
   color      : var(--color-text-muted);
   font-size  : 12px;
   pointer-events: none;
}
.qtf-search__input {
   width      : 100%;
   padding    : 8px 32px 8px 30px;
   border     : 1px solid var(--color-border);
   border-radius: 7px;
   font-size  : 13px;
   background : var(--color-surface, #fff);
   color      : var(--color-text);
   transition : border-color .2s;
   box-sizing : border-box;
}
.qtf-search__input:focus {
   outline     : none;
   border-color: var(--color-primary);
}
.qtf-search__clear {
   position  : absolute;
   right     : 8px;
   top       : 50%;
   transform : translateY(-50%);
   background: none;
   border    : none;
   cursor    : pointer;
   color     : var(--color-text-muted);
   font-size : 12px;
   padding   : 2px;
   line-height: 1;
}
.qtf-search__clear:hover { color: var(--color-primary); }

.qtf-status {
   display  : flex;
   gap      : 4px;
   flex-wrap: wrap;
}
.qtf-status__btn {
   padding      : 6px 14px;
   border       : 1px solid var(--color-border);
   border-radius: 20px;
   background   : transparent;
   color        : var(--color-text-muted);
   font-size    : 12px;
   font-weight  : 500;
   cursor       : pointer;
   transition   : all .18s;
   white-space  : nowrap;
}
.qtf-status__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.qtf-status__btn--active {
   background   : var(--color-primary);
   border-color : var(--color-primary);
   color        : #fff;
}

.qtf-clear {
   display    : inline-flex;
   align-items: center;
   gap        : 5px;
   padding    : 6px 12px;
   background : transparent;
   border     : 1px solid #e0e0e0;
   border-radius: 7px;
   font-size  : 12px;
   color      : var(--color-text-muted);
   cursor     : pointer;
   transition : all .18s;
   white-space: nowrap;
}
.qtf-clear:hover { border-color: #c00; color: #c00; }

/* Estado vacío en filtros */
.qtf-empty {
   padding  : 40px 20px;
   text-align: center;
}
.qtf-empty__icon {
   font-size: 32px;
   color    : var(--color-border);
   display  : block;
   margin-bottom: 10px;
}
.qtf-empty__msg {
   font-size: 14px;
   color    : var(--color-text-muted);
   margin   : 0 0 12px;
}
.qtf-empty__reset {
   display    : inline-flex;
   align-items: center;
   gap        : 6px;
   padding    : 7px 16px;
   background : transparent;
   border     : 1px solid var(--color-primary);
   border-radius: 6px;
   color      : var(--color-primary);
   font-size  : 13px;
   cursor     : pointer;
   transition : all .18s;
}
.qtf-empty__reset:hover { background: var(--color-primary); color: #fff; }

.qt-table-wrap {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
}
.qt-table {
   width          : 100%;
   border-collapse: collapse;
   font-size      : 13px;
}
.qt-table thead tr { background: var(--color-primary); }
.qt-table thead th {
   padding    : 12px 16px;
   color      : #fff;
   font-weight: 600;
   font-size  : 12px;
   text-align : left;
   white-space: nowrap;
}
.qt-table__row {
   border-bottom: 1px solid var(--color-bg);
   transition   : background .15s;
}
.qt-table__row:last-child { border-bottom: none; }
.qt-table__row:hover      { background: #f8f9fb; }
.qt-table td {
   padding       : 12px 16px;
   color         : #333;
   vertical-align: middle;
}
.qt-table__folio  { font-weight: 600; color: var(--color-primary) !important; white-space: nowrap; }
.qt-table__date   { white-space: nowrap; color: var(--color-text-muted) !important; }
.qt-table__center { text-align: center; }

/* Badges de saldo */
.qt-badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   padding      : 3px 10px;
   border-radius: 20px;
   font-size    : 11px;
   font-weight  : 600;
   white-space  : nowrap;
}
.qt-badge--paid    { background: #d1e7dd; color: #0a3622; }
.qt-badge--pending { background: #fff3cd; color: #856404; }

/* Fechas en el header de detalle */
.qt-head-right {
   margin-left : auto;
   display     : flex;
   flex-direction: column;
   align-items : flex-end;
   gap         : 10px;
}
.qt-dates {
   display     : flex;
   gap         : 20px;
   flex-wrap   : wrap;
}
.qt-pdf-btn {
   display    : inline-flex;
   align-items: center;
   gap        : 7px;
   padding    : 7px 16px;
   background : var(--color-primary);
   color      : #fff;
   border     : none;
   border-radius: 6px;
   font-size  : 13px;
   font-weight: 600;
   cursor     : pointer;
   transition : background .2s, opacity .2s;
   white-space: nowrap;
}
.qt-pdf-btn:hover:not(:disabled) { background: #034a8a; }
.qt-pdf-btn--loading,
.qt-pdf-btn:disabled { opacity: .7; cursor: not-allowed; }
.qt-dates__item {
   display    : flex;
   align-items: center;
   gap        : 6px;
   font-size  : 12px;
   color      : var(--color-text-muted);
}
.qt-dates__item i      { color: var(--color-secondary); }
.qt-dates__item strong { color: var(--color-primary); }

/* Grid detalle (tabla productos + panel resumen) */
.qt-detail-grid {
   display              : grid;
   grid-template-columns: 1fr 300px;
   gap                  : 20px;
   align-items          : start;
}

/* Tarjeta de productos */
.qt-prod-card {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
}
.qt-prod-card__header {
   display     : flex;
   align-items : center;
   gap         : 8px;
   padding     : 14px 18px;
   background  : #f8f9fb;
   border-bottom: 1px solid var(--color-border);
   font-size   : 14px;
   font-weight : 700;
   color       : var(--color-primary);
}
.qt-prod-card__header i { color: var(--color-secondary); }
.qt-prod-table-wrap     { overflow-x: auto; }
.qt-prod-table {
   width          : 100%;
   border-collapse: collapse;
   font-size      : 13px;
}
.qt-prod-table thead tr { background: var(--color-primary); }
.qt-prod-table thead th {
   padding    : 10px 14px;
   color      : #fff;
   font-weight: 600;
   font-size  : 12px;
   text-align : left;
   white-space: nowrap;
}
.qt-prod-table__row     { border-bottom: 1px solid var(--color-bg); }
.qt-prod-table__row:last-child { border-bottom: none; }
.qt-prod-table__row:hover     { background: #f8f9fb; }
.qt-prod-table td { padding: 10px 14px; vertical-align: middle; }
.qt-prod-table__img-cell { width: 64px; }
.qt-prod-table__img {
   width        : 54px;
   height       : 54px;
   object-fit   : contain;
   border       : 1px solid var(--color-border);
   border-radius: 6px;
   background   : #fafafa;
   padding      : 3px;
}
.qt-prod-table__name   { font-weight: 500; color: var(--color-text); }
.qt-prod-table__center { text-align: center; }

/* Área de acción (dentro del panel resumen) */
.qt-action {
   padding   : 14px 18px 18px;
   border-top: 1px solid var(--color-bg);
}

/* Cotización expirada */
.qt-expired {
   text-align: center;
   padding   : 16px 12px;
}
.qt-expired__icon {
   font-size    : 32px;
   color        : #dc3545;
   display      : block;
   margin-bottom: 10px;
}
.qt-expired__msg {
   font-size  : 13px;
   color      : #842029;
   font-weight: 600;
   margin     : 0;
}

/* Responsive */
@media (max-width: 960px) {
   .qt-detail-grid  { grid-template-columns: 1fr; }
   .qt-head-right   { margin-left: 0; align-items: flex-start; }
}
@media (max-width: 767px) {
   .qt-prod-table__img-cell,
   .qt-prod-table thead th:first-child { display: none; }
   .qt-table__date                     { display: none; }
   .qt-table thead th:nth-child(2),
   .qt-table thead th:nth-child(3)     { display: none; }
   .qt-table td:nth-child(2),
   .qt-table td:nth-child(3)           { display: none; }
}
@media (max-width: 575px) {
   .qt-table-wrap { border-radius: 0; border-left: none; border-right: none; }
}

/* ── Toggle tabla ↔ cards según viewport ── */
.qt-cards--mobile  { display: none; }          /* oculto en desktop */
@media (max-width: 640px) {
   .qt-table-wrap--desktop { display: none; }  /* ocultar tabla */
   .qt-cards--mobile       { display: flex; flex-direction: column; gap: 12px; }
}

/* ── Cards mobile de cotizaciones (qtc-*) ── */
.qtc {
   background   : var(--color-surface, #fff);
   border       : 1px solid var(--color-border);
   border-radius: 12px;
   overflow     : hidden;
   box-shadow   : 0 1px 4px rgba(0,0,0,.06);
}
.qtc--expired { border-left: 4px solid #ef4444; }

.qtc__header {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   padding        : 12px 14px;
   background     : var(--color-primary);
   gap            : 8px;
}
.qtc__folio {
   display    : flex;
   align-items: center;
   gap        : 7px;
   color      : #fff;
   font-size  : 13px;
   font-weight: 700;
}
.qtc__folio i { opacity: .85; }

.qtc__body {
   padding : 12px 14px;
   display : grid;
   grid-template-columns: 1fr 1fr;
   gap     : 10px 6px;
}
.qtc__row {
   display       : flex;
   flex-direction: column;
   gap           : 2px;
}
.qtc__label {
   font-size  : 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   color      : var(--color-text-muted);
}
.qtc__value {
   font-size  : 13px;
   color      : var(--color-text);
   display    : flex;
   flex-wrap  : wrap;
   align-items: center;
   gap        : 4px;
}
.qtc__value--amount {
   font-weight: 700;
   color      : var(--color-primary);
}

.qtc__actions {
   padding    : 10px 14px;
   display    : flex;
   gap        : 8px;
   border-top : 1px solid var(--color-border);
}
.qtc__actions .so-btn { flex: 1; justify-content: center; }

/* dark mode cards */
[data-theme="dark"] .qtc { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .qtc__header { background: #0a3060; }

/* ── qt-expiry-badge — badge inline en la tabla de cotizaciones ────── */
/* ── Badge de estado en el detalle (qt-status-badge) ── */
.qt-title-row {
   display    : flex;
   align-items: center;
   gap        : 10px;
   flex-wrap  : wrap;
}
.qt-status-badge {
   display     : inline-flex;
   align-items : center;
   gap         : 6px;
   padding     : 4px 12px;
   border-radius: 20px;
   font-size   : 12px;
   font-weight : 600;
   white-space : nowrap;
}
/* Colores por estado */
.qt-status-badge--paid         { background: #dcfce7; color: #166534; }
.qt-status-badge--partial      { background: #dbeafe; color: #1e40af; }
.qt-status-badge--anticipation { background: #fef9c3; color: #854d0e; }
.qt-status-badge--pending      { background: #fef9c3; color: #854d0e; }
.qt-status-badge--expired      { background: #fee2e2; color: #991b1b; }

/* Dark mode */
[data-theme="dark"] .qt-status-badge--paid         { background: #14532d; color: #86efac; }
[data-theme="dark"] .qt-status-badge--partial      { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .qt-status-badge--anticipation { background: #422006; color: #fde68a; }
[data-theme="dark"] .qt-status-badge--pending      { background: #422006; color: #fde68a; }
[data-theme="dark"] .qt-status-badge--expired      { background: #450a0a; color: #fca5a5; }

.qt-expiry-badge {
   display     : flex;
   align-items : center;
   gap         : 4px;
   font-size   : 11px;
   font-weight : 600;
   padding     : 2px 7px;
   border-radius: 20px;
   margin-top  : 4px;
   width       : fit-content;
   white-space : nowrap;
}
.qt-expiry-badge--expired  { background: #fdecea; color: #c0392b; }
.qt-expiry-badge--critical { background: #fdecea; color: #c0392b; }
.qt-expiry-badge--warning  { background: #fff3cd; color: #92600a; }
.qt-expiry-badge--caution  { background: #e8f4fd; color: #1a6fa8; }

.qt-table__row--expired { background: #fff8f8; }
.qt-table__row--expired:hover { background: #fdecea; }

/* ── qt-expiry-banner — banner full-width en detalle cotización ─────── */
.qt-expiry-banner {
   display       : flex;
   align-items   : flex-start;
   gap           : 14px;
   padding       : 14px 20px;
   border-radius : 10px;
   border        : 1px solid;
   margin-bottom : 24px;
}
.qt-expiry-banner--expired  { background: #fdecea; border-color: #f5c6cb; }
.qt-expiry-banner--critical { background: #fdecea; border-color: #f5c6cb; }
.qt-expiry-banner--warning  { background: #fff8e1; border-color: #ffe082; }
.qt-expiry-banner--caution  { background: #e3f2fd; border-color: #90caf9; }

.qt-expiry-banner__icon {
   font-size   : 20px;
   margin-top  : 1px;
   flex-shrink : 0;
}
.qt-expiry-banner--expired  .qt-expiry-banner__icon,
.qt-expiry-banner--critical .qt-expiry-banner__icon { color: #c0392b; }
.qt-expiry-banner--warning  .qt-expiry-banner__icon { color: #e67e22; }
.qt-expiry-banner--caution  .qt-expiry-banner__icon { color: #1a6fa8; }

.qt-expiry-banner__body {
   display        : flex;
   flex-direction : column;
   gap            : 3px;
}
.qt-expiry-banner__title {
   font-size   : 14px;
   font-weight : 700;
}
.qt-expiry-banner--expired  .qt-expiry-banner__title,
.qt-expiry-banner--critical .qt-expiry-banner__title { color: #922b21; }
.qt-expiry-banner--warning  .qt-expiry-banner__title { color: #7d5500; }
.qt-expiry-banner--caution  .qt-expiry-banner__title { color: #1a5276; }

.qt-expiry-banner__sub {
   font-size : 13px;
   color     : #555;
   line-height: 1.5;
}

/* Dark mode */
[data-theme="dark"] .qt-expiry-badge--expired,
[data-theme="dark"] .qt-expiry-badge--critical { background: #3a1010; color: #f87171; }
[data-theme="dark"] .qt-expiry-badge--warning  { background: #3a2a00; color: #fbbf24; }
[data-theme="dark"] .qt-expiry-badge--caution  { background: #0a2a40; color: #60a5fa; }
[data-theme="dark"] .qtf-search__input  { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .qtf-status__btn   { border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .qtf-status__btn--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .qtf-clear         { border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .qt-table__row--expired    { background: #2a1010; }
[data-theme="dark"] .qt-table__row--expired:hover { background: #3a1515; }
[data-theme="dark"] .qt-expiry-banner--expired,
[data-theme="dark"] .qt-expiry-banner--critical { background: #2a1010; border-color: #7b2020; }
[data-theme="dark"] .qt-expiry-banner--warning  { background: #2a2000; border-color: #7b5500; }
[data-theme="dark"] .qt-expiry-banner--caution  { background: #0a1e30; border-color: #1a4a70; }
[data-theme="dark"] .qt-expiry-banner__sub      { color: var(--color-text-muted); }

/* ── qt-progress__* — Barra de progreso de pago ─────────────────────── */
.qt-progress {
    border-top  : 1px solid var(--color-bg);
    padding     : 16px 20px;
}
.qt-progress__header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-bottom   : 10px;
}
.qt-progress__label {
    font-size   : 12px;
    font-weight : 600;
    color       : #555;
    display     : flex;
    align-items : center;
    gap         : 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.qt-progress__label i { color: var(--color-secondary); }

.qt-progress__pct {
    font-size   : 13px;
    font-weight : 700;
    color       : var(--color-primary);
}
.qt-progress__pct--done { color: #1a7a4a; }

.qt-progress__bar-wrap {
    height        : 10px;
    background    : #e9ecef;
    border-radius : 99px;
    overflow      : hidden;
    margin-bottom : 12px;
}
.qt-progress__bar-fill {
    height            : 100%;
    background        : linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius     : 99px;
    transition        : width .6s cubic-bezier(.4,0,.2,1);
    min-width         : 4px;
}
.qt-progress__bar-fill--done {
    background: linear-gradient(90deg, #1a7a4a, #27ae60);
}

.qt-progress__legend {
    display : flex;
    gap     : 20px;
}
.qt-progress__leg-item {
    display     : flex;
    align-items : flex-start;
    gap         : 7px;
    flex        : 1;
}
.qt-progress__leg-dot {
    width         : 10px;
    height        : 10px;
    border-radius : 50%;
    flex-shrink   : 0;
    margin-top    : 4px;
}
.qt-progress__leg-item--paid    .qt-progress__leg-dot { background: var(--color-primary); }
.qt-progress__leg-item--pending .qt-progress__leg-dot { background: #ced4da; }

.qt-progress__leg-item > div {
    display        : flex;
    flex-direction : column;
    gap            : 1px;
}
.qt-progress__leg-label {
    font-size   : 11px;
    color       : #888;
    font-weight : 500;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.qt-progress__leg-amount {
    font-size   : 13px;
    font-weight : 700;
    color       : #1a1a2e;
}
.qt-progress__leg-item--paid    .qt-progress__leg-amount { color: var(--color-primary); }
.qt-progress__leg-item--pending .qt-progress__leg-amount { color: #888; }

/* Dark mode */
[data-theme="dark"] .qt-progress           { border-top-color: var(--color-border); }
[data-theme="dark"] .qt-progress__label    { color: var(--color-text-muted); }
[data-theme="dark"] .qt-progress__bar-wrap { background: #2a2f45; }
[data-theme="dark"] .qt-progress__leg-item--paid .qt-progress__leg-amount    { color: var(--color-secondary); }
[data-theme="dark"] .qt-progress__leg-item--pending .qt-progress__leg-dot    { background: #444; }
[data-theme="dark"] .qt-progress__leg-item--pending .qt-progress__leg-amount { color: var(--color-text-muted); }
[data-theme="dark"] .qt-progress__leg-label { color: var(--color-text-muted); }

/* ── qt-pay-history__* / qt-pay-item__* — Historial de pagos ────────── */
.qt-pay-history {
    background    : #fff;
    border        : 1px solid #e8edf3;
    border-radius : 12px;
    overflow      : hidden;
    margin-bottom : 24px;
}
.qt-pay-history__header {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    padding       : 14px 20px;
    background    : #f8f9fc;
    border-bottom : 1px solid #e8edf3;
    font-size     : 13px;
    font-weight   : 700;
    color         : #1a1a2e;
}
.qt-pay-history__header i    { color: var(--color-secondary); }
.qt-pay-history__count {
    margin-left   : auto;
    font-size     : 11px;
    font-weight   : 500;
    color         : #888;
    background    : #e8edf3;
    padding       : 2px 8px;
    border-radius : 20px;
}

.qt-pay-history__list { padding: 8px 0; }

.qt-pay-item {
    display       : flex;
    align-items   : center;
    gap           : 14px;
    padding       : 12px 20px;
    border-bottom : 1px solid #f0f4f8;
    transition    : background .15s;
}
.qt-pay-item:last-child { border-bottom: none; }
.qt-pay-item:hover      { background: #f8f9fc; }

.qt-pay-item__num {
    width         : 28px;
    height        : 28px;
    border-radius : 50%;
    background    : var(--color-primary);
    color         : #fff;
    font-size     : 11px;
    font-weight   : 700;
    display       : flex;
    align-items   : center;
    justify-content: center;
    flex-shrink   : 0;
}

.qt-pay-item__body {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    min-width     : 0;
}
.qt-pay-item__folio {
    font-size     : 13px;
    font-weight   : 600;
    color         : #1a1a2e;
    display       : flex;
    align-items   : center;
    gap           : 5px;
}
.qt-pay-item__folio i { color: var(--color-secondary); font-size: 11px; }
.qt-pay-item__method {
    font-size     : 11px;
    color         : #888;
}
.qt-pay-item__ref {
    font-size     : 10px;
    color         : #aaa;
    font-family   : monospace;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.qt-pay-item__right {
    display       : flex;
    flex-direction: column;
    align-items   : flex-end;
    gap           : 3px;
    flex-shrink   : 0;
}
.qt-pay-item__date   { font-size: 11px; color: #999; white-space: nowrap; }
.qt-pay-item__amount { font-size: 14px; color: #1a7a4a; }

/* Dark mode */
[data-theme="dark"] .qt-pay-history          { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .qt-pay-history__header  { background: #1e2235; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .qt-pay-history__count   { background: #2a2f45; color: var(--color-text-muted); }
[data-theme="dark"] .qt-pay-item             { border-color: var(--color-border); }
[data-theme="dark"] .qt-pay-item:hover       { background: #1e2235; }
[data-theme="dark"] .qt-pay-item__folio      { color: var(--color-text); }
[data-theme="dark"] .qt-pay-item__method,
[data-theme="dark"] .qt-pay-item__date       { color: var(--color-text-muted); }
[data-theme="dark"] .qt-pay-item__ref        { color: #666; }
[data-theme="dark"] .qt-pay-item__amount     { color: #4ade80; }

/* ══════════════════════════════════════════════════════════════════════
   COMPRAS  (pu-*)
══════════════════════════════════════════════════════════════════════ */

/* ── Encabezado del detalle de compra ── */
.pu-detail-head {
   display        : flex;
   align-items    : flex-start;
   justify-content: space-between;
   flex-wrap      : wrap;
   gap            : 20px;
   margin-bottom  : 24px;
   padding-bottom : 20px;
   border-bottom  : 2px solid var(--color-accent);
}
.pu-detail-head__left {
   display    : flex;
   align-items: flex-start;
   gap        : 16px;
}
.pu-detail-head__top {
   display    : flex;
   align-items: center;
   gap        : 10px;
   flex-wrap  : wrap;
   margin-bottom: 4px;
}
.pu-detail-head__folio {
   color: var(--color-secondary);
}
.pu-detail-head__badge {
   display      : inline-flex;
   align-items  : center;
   gap          : 5px;
   padding      : 3px 12px;
   border-radius: 20px;
   background   : #d1e7dd;
   color        : #0a3622;
   font-size    : 12px;
   font-weight  : 600;
   white-space  : nowrap;
   border       : 1px solid transparent;
}

/* Chips de información (fecha / productos / pagos) */
.pu-detail-head__chips {
   display : flex;
   gap     : 12px;
   flex-wrap: wrap;
   align-self: center;
}
.pu-detail-chip {
   display        : flex;
   flex-direction : column;
   align-items    : center;
   gap            : 3px;
   padding        : 10px 18px;
   background     : #fff;
   border         : 1px solid var(--color-border);
   border-radius  : 8px;
   min-width      : 80px;
   text-align     : center;
}
.pu-detail-chip i      { color: var(--color-secondary); font-size: 16px; margin-bottom: 2px; }
.pu-detail-chip span   { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .6px; }
.pu-detail-chip strong { font-size: 13px; color: var(--color-primary); font-weight: 700; }

/* Badge de cantidad en tabla de productos */
.pu-qty-badge {
   display        : inline-flex;
   align-items    : center;
   justify-content: center;
   min-width      : 28px;
   height         : 28px;
   padding        : 0 8px;
   border-radius  : 20px;
   background     : #e8f0fe;
   color          : var(--color-secondary);
   font-size      : 12px;
   font-weight    : 700;
}

/* Contador en header de tarjeta de productos */
.pu-prod-count {
   margin-left  : auto;
   background   : rgba(255,255,255,.18);
   color        : #fff;
   border-radius: 20px;
   padding      : 1px 10px;
   font-size    : 12px;
   font-weight  : 600;
}

/* Tabla de lista de compras */
.pu-table-wrap {
   background   : #fff;
   border       : 1px solid var(--color-border);
   border-radius: 10px;
   overflow     : hidden;
}
.pu-table {
   width          : 100%;
   border-collapse: collapse;
   font-size      : 13px;
}
.pu-table thead tr { background: var(--color-primary); }
.pu-table thead th {
   padding    : 12px 16px;
   color      : #fff;
   font-weight: 600;
   font-size  : 12px;
   text-align : left;
   white-space: nowrap;
}
.pu-table__row {
   border-bottom: 1px solid var(--color-bg);
   transition   : background .15s;
}
.pu-table__row:last-child { border-bottom: none; }
.pu-table__row:hover      { background: #f8f9fb; }
.pu-table td {
   padding       : 13px 16px;
   color         : #333;
   vertical-align: middle;
}
.pu-table__folio  { font-weight: 600; color: var(--color-primary) !important; white-space: nowrap; }
.pu-table__date   { white-space: nowrap; color: var(--color-text-muted) !important; }
.pu-table__amount { font-weight: 600; }
.pu-table__center { text-align: center; }

/* Badge de número de pagos */
.pu-payments-badge {
   display        : inline-flex;
   align-items    : center;
   justify-content: center;
   min-width      : 28px;
   height         : 28px;
   padding        : 0 8px;
   border-radius  : 20px;
   background     : #e8f0fe;
   color          : var(--color-secondary);
   font-size      : 12px;
   font-weight    : 700;
}

/* Historial de pagos (dentro del panel lateral) */
.pu-payments-wrap {
   padding  : 14px 18px 18px;
   border-top: 1px solid var(--color-bg);
}
.pu-payments-title {
   display    : flex;
   align-items: center;
   gap        : 6px;
   font-size  : 12px;
   font-weight: 700;
   color      : var(--color-primary);
   margin     : 0 0 10px;
   text-transform: uppercase;
   letter-spacing: .8px;
}
.pu-payments-title i { color: var(--color-secondary); }
.pu-payments-table {
   width          : 100%;
   border-collapse: collapse;
   font-size      : 12px;
}
.pu-payments-table thead tr { background: var(--color-bg); }
.pu-payments-table thead th {
   padding    : 7px 10px;
   color      : var(--color-primary);
   font-weight: 600;
   text-align : left;
}
.pu-payments-table td {
   padding      : 7px 10px;
   border-bottom: 1px solid #f5f6f8;
   color        : #444;
}
.pu-payments-table tr:last-child td { border-bottom: none; }
.pu-payments-table__folio { font-weight: 600; color: var(--color-primary); }
.pu-payments-table__id    { font-size: 11px; color: var(--color-text-muted); word-break: break-all; }

/* Responsive */
@media (max-width: 900px) {
   .pu-detail-head         { flex-direction: column; }
   .pu-detail-head__chips  { align-self: flex-start; }
}
@media (max-width: 767px) {
   .pu-table__date                 { display: none; }
   .pu-table thead th:nth-child(2) { display: none; }
   .pu-detail-chip                 { padding: 8px 12px; min-width: 66px; }
}
@media (max-width: 575px) {
   .pu-table-wrap { border-radius: 0; border-left: none; border-right: none; }
   .so-btn span   { display: none; }
   .pu-detail-head__left { flex-direction: column; }
}


/* ============================================================
   COMPRAS — ESTADO VACÍO  (pu-empty-state)
   ============================================================ */
.pu-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 32px;
    text-align: center;
}
.pu-empty-state__svg {
    width: 130px;
    height: 130px;
    margin-bottom: 20px;
}
.pu-empty-state__svg svg { width: 100%; height: 100%; }
.pu-empty-state__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 10px;
    letter-spacing: -.3px;
}
.pu-empty-state__subtitle {
    font-size: 13.5px;
    color: var(--color-text-muted);
    max-width: 400px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.pu-empty-state__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 28px;
}
.pu-empty-state__trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 16px 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 100%;
    max-width: 480px;
}
.pu-empty-state__trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
}
.pu-empty-state__trust-item i { color: var(--color-secondary); font-size: 12px; }

[data-theme="dark"] .pu-empty-state__trust         { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pu-empty-state__trust-item    { background: #1a2035; border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .pu-empty-state__svg circle:first-child { fill: #1a2540; }

/* ============================================================
   COMPRAS — FILTROS  (pu-filter-*)
   ============================================================ */
.pu-filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.pu-filter__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pu-filter__label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pu-filter__input {
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12.5px;
    color: var(--color-text);
    background: #fff;
    min-width: 140px;
    outline: none;
    transition: border-color .15s;
}
.pu-filter__input:focus { border-color: var(--color-primary); }
.pu-filter__clear {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pu-filter__clear:hover {
    background: #e53e3e;
    color: #fff;
    border-color: #e53e3e;
}

/* ============================================================
   COMPRAS — PAGINACIÓN  (pu-pag-*)
   ============================================================ */
.pu-pag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 0 4px;
    gap: 12px;
    flex-wrap: wrap;
}
.pu-pag__info {
    font-size: 12px;
    color: var(--color-text-muted);
}
.pu-pag__btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.pu-pag__btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 8px;
    transition: background .15s, color .15s, border-color .15s;
}
.pu-pag__btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.pu-pag__btn--active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.pu-pag__btn:disabled { opacity: .4; cursor: not-allowed; }
.pu-pag__dots {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* ============================================================
   COMPRAS — TABLA: acciones dobles + botón Reordenar
   ============================================================ */
.pu-table__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.pu-reorder-btn--loading { opacity: .7; cursor: wait; }

/* Dark mode nuevos bloques */
[data-theme="dark"] .pu-filters           { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pu-filter__input     { background: #1a2035; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .pu-filter__input:focus { border-color: var(--color-primary); }
[data-theme="dark"] .pu-filter__clear     { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .pu-pag__btn          { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .pu-pag__btn--active  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============================================================
   COMPRAS — TIMELINE  (pu-tl-*)
   ============================================================ */
.pu-tl {
    display: flex;
    align-items: center;
    padding: 20px 28px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    gap: 0;
}
.pu-tl__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    opacity: .35;
    transition: opacity .2s;
}
.pu-tl__step--done,
.pu-tl__step--current { opacity: 1; }
.pu-tl__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--color-text-muted);
    transition: background .25s, color .25s, box-shadow .25s;
}
.pu-tl__step--done .pu-tl__icon {
    background: var(--color-primary);
    color: #fff;
}
.pu-tl__step--current .pu-tl__icon {
    background: var(--color-secondary);
    color: var(--color-primary);
    box-shadow: 0 0 0 5px rgba(255, 185, 0, .22);
}
.pu-tl__label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
    letter-spacing: .3px;
}
.pu-tl__step--done .pu-tl__label,
.pu-tl__step--current .pu-tl__label { color: var(--color-text); }
.pu-tl__line {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin: 0 6px;
    margin-bottom: 22px;
    min-width: 24px;
    transition: background .25s;
}
.pu-tl__line--done { background: var(--color-primary); }

/* ============================================================
   COMPRAS — DIRECCIÓN DE ENVÍO  (pu-addr-*)
   ============================================================ */
.pu-addr-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 16px;
}
.pu-addr-card__header {
    background: var(--color-bg);
    padding: 9px 16px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--color-border);
}
.pu-addr-card__header i { color: var(--color-secondary); font-size: 14px; }
.pu-addr-card__body { padding: 12px 16px; background: #fff; }
.pu-addr-card__street {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
    margin: 0 0 5px;
}
.pu-addr-card__meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}
.pu-addr-card__ref {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 6px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-style: italic;
}
.pu-addr-card__ref i { margin-top: 2px; color: var(--color-secondary); flex-shrink: 0; }

/* ============================================================
   COMPRAS — BOTÓN RESEÑAR  (pu-review-btn)
   ============================================================ */
.pu-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--color-secondary);
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    cursor: pointer;
}
.pu-review-btn:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
    text-decoration: none;
}
.pu-review-btn i { font-size: 10px; color: #f5a623; }
.pu-review-btn:hover i { color: var(--color-primary); }

/* Dark mode — nuevos bloques pu-tl / pu-addr */
[data-theme="dark"] .pu-tl                    { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pu-tl__icon              { background: #252b3d; color: var(--color-text-muted); }
[data-theme="dark"] .pu-tl__step--done .pu-tl__icon { background: var(--color-primary); color: #fff; }
[data-theme="dark"] .pu-tl__line              { background: var(--color-border); }
[data-theme="dark"] .pu-addr-card             { border-color: var(--color-border); }
[data-theme="dark"] .pu-addr-card__header     { background: #141824; border-bottom-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .pu-addr-card__body       { background: var(--color-surface); }
[data-theme="dark"] .pu-addr-card__street     { color: var(--color-text); }
[data-theme="dark"] .pu-review-btn            { border-color: var(--color-secondary); color: var(--color-text); }

/* Responsive timeline */
@media (max-width: 575px) {
    .pu-tl         { padding: 16px 14px; gap: 0; }
    .pu-tl__icon   { width: 32px; height: 32px; font-size: 13px; }
    .pu-tl__label  { font-size: 9.5px; }
    .pu-tl__line   { min-width: 10px; margin-bottom: 18px; }
    .pu-review-btn span { display: none; }
}

/* ============================================================
   COMPRAS — COMPROBANTE DE TRANSFERENCIA  (pu-comp-*)
   ============================================================ */
.pu-comp-card {
    background   : #fff;
    border       : 1px solid var(--color-border);
    border-radius: 10px;
    overflow     : hidden;
    margin-top   : 14px;
}
.pu-comp-card--done {
    border-color: #28a745;
}
.pu-comp-card__header {
    display     : flex;
    align-items : center;
    gap         : 8px;
    padding     : 12px 16px;
    background  : #f8f9fb;
    border-bottom: 1px solid var(--color-border);
    font-size   : 12px;
    font-weight : 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color       : var(--color-primary);
}
.pu-comp-card--done .pu-comp-card__header {
    background  : #f0fdf4;
    border-color: #bbf7d0;
    color       : #16a34a;
}
.pu-comp-card__icon--done { color: #28a745; }
.pu-comp-card__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pu-comp-card__note {
    font-size : 13px;
    color     : var(--color-text-muted);
    margin    : 0;
}
.pu-comp-link {
    display     : inline-flex;
    align-items : center;
    gap         : 6px;
    font-size   : 13px;
    font-weight : 600;
    color       : var(--color-primary);
    text-decoration: none;
}
.pu-comp-link:hover { text-decoration: underline; }
.pu-comp-replace-btn {
    display     : inline-flex;
    align-items : center;
    gap         : 6px;
    font-size   : 12px;
    color       : var(--color-text-muted);
    background  : none;
    border      : none;
    cursor      : pointer;
    padding     : 0;
}
.pu-comp-replace-btn:hover { color: var(--color-primary); }

/* Datos bancarios */
.pu-comp-banks {
    padding    : 12px 16px;
    background : #f8f9fb;
    border-bottom: 1px solid var(--color-border);
}
.pu-comp-banks__label {
    font-size  : 12px;
    font-weight: 600;
    color      : var(--color-text-muted);
    margin     : 0 0 10px;
    display    : flex;
    align-items: center;
    gap        : 6px;
}
.pu-comp-bank-row {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    padding       : 10px 0;
    border-bottom : 1px dashed var(--color-border);
}
.pu-comp-bank-row:last-child { border-bottom: none; }
.pu-comp-bank-name {
    font-size  : 13px;
    font-weight: 700;
    color      : var(--color-primary);
}
.pu-comp-bank-item {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 12px;
    color      : var(--color-text-muted);
}
.pu-comp-bank-label { color: var(--color-text-muted); }
.pu-comp-bank-mono {
    font-family : monospace;
    font-size   : 13px;
    color       : var(--color-text);
    letter-spacing: .5px;
}

/* Formulario */
.pu-comp-form {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pu-comp-form__row {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
}
.pu-comp-form__label {
    font-size  : 12px;
    font-weight: 600;
    color      : var(--color-text-muted);
}
.pu-comp-required { color: #dc3545; margin-left: 2px; }
.pu-comp-form__input {
    padding      : 8px 10px;
    border       : 1px solid var(--color-border);
    border-radius: 6px;
    font-size    : 13px;
    color        : var(--color-text);
    background   : #fff;
    transition   : border-color .15s;
    width        : 100%;
    box-sizing   : border-box;
}
.pu-comp-form__input:focus {
    outline     : none;
    border-color: var(--color-primary);
}
.pu-comp-form__input--error { border-color: #dc3545 !important; }
.pu-comp-form__error {
    font-size: 11px;
    color    : #dc3545;
}

/* Dropzone */
.pu-comp-dropzone {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 4px;
    padding        : 20px 12px;
    border         : 2px dashed var(--color-border);
    border-radius  : 8px;
    cursor         : pointer;
    transition     : border-color .15s, background .15s;
    text-align     : center;
}
.pu-comp-dropzone:hover { border-color: var(--color-primary); background: #f0f4ff; }
.pu-comp-dropzone--selected {
    border-color: #28a745;
    background  : #f0fdf4;
}
.pu-comp-dropzone--error { border-color: #dc3545; }
.pu-comp-dropzone__icon {
    font-size: 26px;
    color    : var(--color-text-muted);
}
.pu-comp-dropzone__icon--ok { color: #28a745; }
.pu-comp-dropzone__hint   { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.pu-comp-dropzone__formats{ font-size: 11px; color: var(--color-text-muted); }
.pu-comp-dropzone__name   { font-size: 12px; font-weight: 600; color: var(--color-text); word-break: break-all; }
.pu-comp-dropzone__change { font-size: 11px; color: var(--color-primary); text-decoration: underline; }

/* Acciones */
.pu-comp-form__actions {
    display    : flex;
    gap        : 8px;
    align-items: center;
    flex-wrap  : wrap;
}
.pu-comp-submit-btn { width: 100%; justify-content: center; }

/* Dark mode */
[data-theme="dark"] .pu-comp-card             { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pu-comp-card__header     { background: #141824; border-color: var(--color-border); }
[data-theme="dark"] .pu-comp-banks            { background: #141824; border-color: var(--color-border); }
[data-theme="dark"] .pu-comp-form__input      { background: #1a2035; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .pu-comp-dropzone         { border-color: var(--color-border); }
[data-theme="dark"] .pu-comp-dropzone:hover   { background: #1a2035; }
[data-theme="dark"] .pu-comp-dropzone--selected { background: #0d2018; }

/* Aviso: pago ya registrado por el admin */
.pu-comp-pago-registrado {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eef6ff;
    border: 1px solid #b8d9f8;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 16px 14px;
    font-size: 13px;
    color: #1a4f80;
    line-height: 1.5;
}
.pu-comp-pago-registrado i { margin-top: 2px; flex-shrink: 0; }

/* Datos del pago en solo lectura */
.pu-comp-pago-datos {
    display: flex;
    gap: 12px;
    margin: 0 16px 14px;
    flex-wrap: wrap;
}
.pu-comp-pago-dato {
    flex: 1;
    min-width: 120px;
    background: var(--color-bg, #f0f2f5);
    border: 1px solid var(--color-border, #c5cbd5);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pu-comp-pago-dato__label {
    font-size: 11px;
    color: var(--color-text-muted, #6d7278);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.pu-comp-pago-dato__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text, #1a1a2e);
}

[data-theme="dark"] .pu-comp-pago-registrado  { background: #0d1f35; border-color: #1e4a7a; color: #7ec8f7; }
[data-theme="dark"] .pu-comp-pago-dato        { background: #141824; border-color: var(--color-border); }
[data-theme="dark"] .pu-comp-pago-dato__value { color: var(--color-text); }

/* ============================================================
   COMPRAS — AUTOFACTURA PPD  (pu-inv-*)
   ============================================================ */

.pu-inv {
    border-top  : 1px solid var(--color-border);
    padding-top : 0;
    margin-top  : 4px;
}
.pu-inv__header {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    font-size    : 13px;
    font-weight  : 600;
    color        : var(--color-text);
    padding      : 14px 16px 10px;
    border-bottom: 1px solid var(--color-border);
}
.pu-inv__header-icon { color: var(--color-secondary); font-size: 15px; }

/* Loading */
.pu-inv__loading {
    padding   : 14px 16px;
    font-size : 13px;
    color     : var(--bb-muted);
}

/* Fuera de plazo */
.pu-inv__expired {
    display      : flex;
    align-items  : flex-start;
    gap          : 10px;
    padding      : 12px 16px;
    background   : #fff8e1;
    border-left  : 3px solid #f59e0b;
    margin       : 12px 16px;
    border-radius: 6px;
    font-size    : 13px;
    color        : #92400e;
}
.pu-inv__expired i { margin-top: 2px; font-size: 15px; }

/* Cancelada */
.pu-inv__cancelled {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 12px 16px;
    font-size    : 13px;
    color        : #dc2626;
}

/* Generada — UUID */
.pu-inv__done {
    display        : flex;
    align-items    : flex-start;
    gap            : 10px;
    padding        : 12px 16px 8px;
}
.pu-inv__done-icon { color: #16a34a; font-size: 18px; margin-top: 2px; }
.pu-inv__uuid { display: flex; flex-direction: column; gap: 2px; }
.pu-inv__uuid-label {
    font-size  : 11px;
    font-weight: 600;
    color      : var(--bb-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pu-inv__uuid-value {
    font-family : monospace;
    font-size   : 12px;
    color       : var(--color-text);
    word-break  : break-all;
}

/* Resumen datos fiscales */
.pu-inv__fiscal-summary {
    padding   : 10px 16px 4px;
    display   : flex;
    flex-direction: column;
    gap       : 4px;
}
.pu-inv__fiscal-row {
    display    : flex;
    gap        : 8px;
    font-size  : 12px;
    align-items: baseline;
}
.pu-inv__fiscal-label {
    font-weight   : 600;
    color         : var(--bb-muted);
    min-width     : 90px;
    flex-shrink   : 0;
    text-transform: uppercase;
    font-size     : 11px;
    letter-spacing: .3px;
}
.pu-inv__fiscal-value { color: var(--color-text); }

/* Botones */
.pu-inv__actions {
    display : flex;
    gap     : 8px;
    padding : 12px 16px 14px;
    flex-wrap: wrap;
}
.pu-inv__btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    padding      : 7px 14px;
    border-radius: 6px;
    font-size    : 12px;
    font-weight  : 600;
    cursor       : pointer;
    border       : 1px solid transparent;
    transition   : opacity .15s;
}
.pu-inv__btn:disabled { opacity: .6; cursor: not-allowed; }
.pu-inv__btn--generate {
    background : var(--color-secondary);
    color      : #fff;
    margin     : 4px 16px 0;
    width      : calc(100% - 32px);
    justify-content: center;
}
.pu-inv__btn--generate:hover:not(:disabled) { opacity: .88; }
.pu-inv__btn--pdf {
    background : #dc2626;
    color      : #fff;
}
.pu-inv__btn--pdf:hover:not(:disabled) { opacity: .88; }
.pu-inv__btn--xml {
    background : #fff;
    color      : var(--color-secondary);
    border-color: var(--color-secondary);
}
.pu-inv__btn--xml:hover:not(:disabled) { background: var(--color-secondary); color: #fff; }

/* Nota PPD */
.pu-inv__note {
    font-size  : 11px;
    color      : var(--bb-muted);
    padding    : 0 16px 14px;
    display    : flex;
    gap        : 5px;
    align-items: flex-start;
    line-height: 1.4;
}
.pu-inv__note i { margin-top: 1px; flex-shrink: 0; }

/* Error */
.pu-inv__error {
    font-size   : 12px;
    color       : #dc2626;
    padding     : 0 16px 8px;
    display     : flex;
    gap         : 6px;
    align-items : center;
}

/* Formulario de datos fiscales */
.pu-inv__form {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    padding       : 4px 16px 12px;
}
.pu-inv__field {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
}
.pu-inv__label {
    font-size  : 11px;
    font-weight: 600;
    color      : var(--bb-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.pu-inv__input,
.pu-inv__select {
    width         : 100%;
    padding       : 7px 10px;
    font-size     : 13px;
    border        : 1px solid var(--bb-border);
    border-radius : 6px;
    background    : var(--color-bg);
    color         : var(--color-text);
    outline       : none;
    transition    : border-color .15s;
}
.pu-inv__input:focus,
.pu-inv__select:focus { border-color: var(--color-secondary); }
.pu-inv__select { cursor: pointer; }

/* Dark mode */
[data-theme="dark"] .pu-inv__expired   { background: #2d1f00; border-color: #d97706; color: #fcd34d; }
[data-theme="dark"] .pu-inv__btn--xml  { background: transparent; color: var(--color-secondary); }
[data-theme="dark"] .pu-inv__btn--xml:hover:not(:disabled) { background: var(--color-secondary); color: #fff; }
[data-theme="dark"] .pu-inv__input,
[data-theme="dark"] .pu-inv__select    { background: var(--bb-card-bg); border-color: var(--bb-border); }

/* ============================================================
   COMPRAS — SKELETON DE CARGA  (pu-skeleton-*)
   ============================================================ */
.pu-skeleton { padding: 0 0 32px; }
.pu-skeleton__head {
    background: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
}
.pu-skeleton__line {
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
    background-size: 200% 100%;
    animation: pu-shimmer 1.4s infinite;
    border-radius: 6px;
    margin-bottom: 10px;
}
.pu-skeleton__line--title { height: 22px; width: 40%; }
.pu-skeleton__line--sub   { height: 14px; width: 25%; margin-bottom: 0; }
.pu-skeleton__timeline {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 16px;
    gap: 8px;
}
.pu-skeleton__step {
    flex: 1;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
    background-size: 200% 100%;
    animation: pu-shimmer 1.4s infinite;
}
.pu-skeleton__body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}
.pu-skeleton__block {
    border-radius: 10px;
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
    background-size: 200% 100%;
    animation: pu-shimmer 1.4s infinite;
}
.pu-skeleton__block--main { height: 320px; }
.pu-skeleton__block--side { height: 240px; }
@keyframes pu-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (max-width: 768px) {
    .pu-skeleton__body { grid-template-columns: 1fr; }
    .pu-skeleton__block--side { display: none; }
}
[data-theme="dark"] .pu-skeleton__head,
[data-theme="dark"] .pu-skeleton__timeline { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pu-skeleton__line,
[data-theme="dark"] .pu-skeleton__step,
[data-theme="dark"] .pu-skeleton__block {
    background: linear-gradient(90deg, #1e2535 25%, #252d42 50%, #1e2535 75%);
    background-size: 200% 100%;
}

/* ============================================================
   COMPRAS — ESTADO DE ERROR  (pu-error-state)
   ============================================================ */
.pu-error-state {
    text-align: center;
    padding: 60px 24px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.pu-error-state__icon {
    font-size: 48px;
    color: #e53e3e;
    margin-bottom: 16px;
    display: block;
}
.pu-error-state__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}
.pu-error-state__msg {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 24px;
}
.pu-error-state__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
[data-theme="dark"] .pu-error-state { background: var(--color-surface); border-color: var(--color-border); }

/* ============================================================
   COMPRAS — BADGE DE ESTADO (pu-detail-head__badge variantes)
   ============================================================ */
.pu-detail-head__badge--warning { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.pu-detail-head__badge--info    { background: #cff4fc; color: #055160; border: 1px solid #0dcaf0; }
.pu-detail-head__badge--success { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.pu-detail-head__badge--primary { background: #dbeafe; color: #1e3a8a; border: 1px solid #3b82f6; }
[data-theme="dark"] .pu-detail-head__badge--warning { background: #3a2b00; color: #fcd34d; border-color: #92400e; }
[data-theme="dark"] .pu-detail-head__badge--info    { background: #0d2b35; color: #67e8f9; border-color: #155e75; }
[data-theme="dark"] .pu-detail-head__badge--success { background: #0d2818; color: #6ee7b7; border-color: #065f46; }
[data-theme="dark"] .pu-detail-head__badge--primary { background: #0d1f3c; color: #93c5fd; border-color: #1d4ed8; }

/* ============================================================
   COMPRAS — CHIP ESTADO FISCAL  (pu-status-chip)
   ============================================================ */
.pu-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.pu-status-chip--fiscal {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}
[data-theme="dark"] .pu-status-chip--fiscal { background: #1e1042; color: #c4b5fd; border-color: #5b21b6; }

/* ============================================================
   COMPRAS — BOTÓN VOLVER A COMPRAR  (pu-reorder-btn)
   ============================================================ */
.pu-reorder-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.pu-reorder-btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.pu-reorder-btn:disabled { opacity: .65; cursor: wait; }
.pu-detail-head__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
@media (max-width: 640px) {
    .pu-detail-head__right { align-items: flex-start; }
}

/* ============================================================
   COMPRAS — CTA SOPORTE  (pu-support-card)
   ============================================================ */
.pu-support-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.pu-support-card__icon {
    font-size: 22px;
    color: #0284c7;
    flex-shrink: 0;
}
.pu-support-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 160px;
}
.pu-support-card__text strong { font-size: 13px; color: var(--color-text); }
.pu-support-card__text span   { font-size: 12px; color: var(--color-text-muted); }
.pu-support-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    transition: opacity .15s;
    white-space: nowrap;
}
.pu-support-card__btn:hover { opacity: .88; color: #fff; }
.pu-support-card__btn--wa   { background: #25d366; }
[data-theme="dark"] .pu-support-card { background: #0c1e2e; border-color: #0369a1; }
[data-theme="dark"] .pu-support-card__text strong { color: var(--color-text); }

/* ============================================================
   COMPRAS — PRODUCTOS MOBILE CARDS  (pu-prod-card-m)
   ============================================================ */
.pu-prod-table--desktop { display: block; }
.pu-prod-cards--mobile  { display: none; }

.pu-prod-card-m {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    align-items: flex-start;
}
.pu-prod-card-m:last-child { border-bottom: none; }
.pu-prod-card-m__img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    background: #fff;
}
.pu-prod-card-m__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.pu-prod-card-m__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
}
.pu-prod-card-m__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pu-prod-card-m__qty {
    font-size: 12px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.pu-prod-card-m__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}
@media (max-width: 640px) {
    .pu-prod-table--desktop { display: none !important; }
    .pu-prod-cards--mobile  { display: block; }
}
[data-theme="dark"] .pu-prod-card-m { border-color: var(--color-border); }
[data-theme="dark"] .pu-prod-card-m__img { background: #1a2035; border-color: var(--color-border); }

/* ============================================================
   COMPRAS — SECCIÓN DOCUMENTOS  (pu-docs-section)
   ============================================================ */
.pu-docs-section {
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    padding-top: 4px;
}
.pu-docs-section__header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
    padding: 12px 16px 4px;
}
.pu-docs-section__header i { color: var(--color-secondary); font-size: 13px; }
[data-theme="dark"] .pu-docs-section { border-color: var(--color-border); }

/* ============================================================
   COMPRAS — REFERENCIA DE PAGO CON COPIAR  (pu-pay-id)
   ============================================================ */
.pu-pay-id {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pu-pay-id__text {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: monospace;
    cursor: default;
}
.pu-pay-id__copy {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 11px;
    transition: color .15s, background .15s;
    line-height: 1;
}
.pu-pay-id__copy:hover { color: var(--color-primary); background: #f0f4ff; }
.pu-pay-id__copy--done { color: #16a34a !important; }
[data-theme="dark"] .pu-pay-id__copy:hover { background: #1a2035; color: var(--color-primary); }

/* ============================================================
   CATEGORY PAGE — cg-* + sw-*
   ============================================================ */

/* --- Hero banner --- */
.cg-hero {
   background: var(--color-primary);
   padding: 28px 0 20px;
}
.cg-hero__name {
   color: #fff;
   font-size: 1.8rem;
   font-weight: 700;
   margin: 0 0 8px;
   line-height: 1.2;
}

/* --- Layout --- */
.cg-body {
   background: var(--color-bg);
   padding: 20px 0 48px;
}
.cg-row {
   align-items: flex-start;
}
.cg-sidebar {
   padding-right: 0;
}

/* --- Toolbox (sort / count / layout toggle) --- */
.cg-toolbox {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 10px 16px;
   margin-bottom: 16px;
}
.cg-toolbox__count {
   flex: 0 0 100%;
   font-size: 12px;
   color: var(--color-text-muted);
   margin: 0;
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 8px;
}

.cg-toolbox__count strong {
   color: var(--color-primary);
}

.cg-toolbox__left,
.cg-toolbox__right {
   display: flex;
   align-items: center;
   gap: 12px;
}
.cg-toolbox__label {
   font-size: 12px;
   color: var(--color-text-muted);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   white-space: nowrap;
}
.cg-select-wrap {
   position: relative;
}
.cg-select-wrap::after {
   content: '';
   position: absolute;
   right: 9px;
   top: 50%;
   transform: translateY(-50%);
   border: 4px solid transparent;
   border-top-color: var(--color-text-muted);
   pointer-events: none;
}
.cg-toolbox__select {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   padding: 6px 28px 6px 10px;
   font-size: 13px;
   color: var(--color-text);
   background: #fff;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   min-width: 100px;
}
.cg-toolbox__select:focus {
   outline: none;
   border-color: var(--color-secondary);
   box-shadow: 0 0 0 2px rgba(4,87,160,.15);
}
.cg-layout-modes {
   display: flex;
   gap: 4px;
}
.cg-layout-btn {
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-border);
   border-radius: 4px;
   color: var(--color-text-muted);
   background: #fff;
   transition: background .15s, color .15s, border-color .15s;
   font-size: 14px;
   text-decoration: none;
}
.cg-layout-btn:hover,
.cg-layout-btn.active {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary);
}

/* --- Shop Sidebar widgets (sw-*) --- */
.sw-widget {
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   margin-bottom: 14px;
   overflow: hidden;
}
.sw-widget__title {
   background: var(--color-primary);
   color: #fff;
   padding: 12px 16px;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   user-select: none;
}
.sw-widget__title::after {
   content: '›';
   font-size: 18px;
   line-height: 1;
   transition: transform .2s;
   transform: rotate(90deg);
   font-weight: 400;
}
.sw-widget__body {
   padding: 10px 14px;
}
.sw-cat-list {
   list-style: none;
   padding: 0;
   margin: 0;
}
.sw-cat-item {
   border-bottom: 1px solid #f2f2f2;
}
.sw-cat-item:last-child {
   border-bottom: none;
}
.sw-cat-item label {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--color-text);
   cursor: pointer;
   padding: 7px 2px;
   margin: 0;
   font-weight: 400;
   transition: color .15s;
}
.sw-cat-item label:hover {
   color: var(--color-secondary);
}
.sw-cat-item--skel {
   height: 30px;
   background: #dde1e7;
   background-image: linear-gradient(90deg,#dde1e7 25%,#eef0f3 50%,#dde1e7 75%);
   background-size: 200% 100%;
   animation: wbShimmer 1.4s infinite;
   border-radius: 4px;
   margin-bottom: 6px;
   border: none;
}

.sw-brand__badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   height: 20px;
   padding: 0 5px;
   border-radius: 10px;
   background: var(--color-primary);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   margin-left: 8px;
   vertical-align: middle;
}

.sw-brand__clear {
   display: block;
   width: 100%;
   margin-top: 10px;
   padding: 6px 0;
   background: none;
   border: 1px solid var(--color-secondary);
   border-radius: 4px;
   color: var(--color-secondary);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: background .15s, color .15s;
}

.sw-brand__clear:hover {
   background: var(--color-secondary);
   color: #fff;
}

.sw-cat-item input[type="checkbox"] {
   accent-color: var(--color-primary);
   width: 15px;
   height: 15px;
   flex-shrink: 0;
   cursor: pointer;
}

/* --- Layout grid (reemplaza Bootstrap row/col) --- */
.cg-layout {
   display: grid;
   grid-template-columns: 240px 1fr;
   gap: 24px;
   align-items: start;
}

.cg-layout__main {
   min-width: 0;
}

/* Neutraliza márgenes negativos de Bootstrap .row dentro del grid */
.cg-layout__main .row {
   margin-left: 0;
   margin-right: 0;
}

/* --- Sidebar móvil --- */
.cg-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.45);
   z-index: 200;
}

.cg-filter-btn {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 201;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: 24px;
   padding: 10px 18px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(0,0,0,.25);
   gap: 8px;
   align-items: center;
}

.cg-filter-btn:hover { background: var(--color-secondary); }

/* --- Sidebar sticky wrapper --- */
.sw-sidebar { /* StickyBox maneja el comportamiento */ }

/* sw-price — Filtro de precio en ShopSidebar */
.sw-price { padding: 4px 0 8px; }
.sw-price__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sw-price__label { font-size: 13px; color: var(--color-text-muted); min-width: 58px; }
.sw-price__input-wrap { position: relative; flex: 1; }
.sw-price__symbol { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--color-text-muted); pointer-events: none; }
.sw-price__input { width: 100%; padding: 6px 8px 6px 20px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; color: var(--color-primary); outline: none; }
.sw-price__input:focus { border-color: var(--color-secondary); }
.sw-price__input::-webkit-inner-spin-button,
.sw-price__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sw-price__actions { display: flex; gap: 8px; margin-top: 4px; }
.sw-price__btn { flex: 1; padding: 7px 0; border: none; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.sw-price__btn:disabled { opacity: .5; cursor: default; }
.sw-price__btn--apply { background: var(--color-accent); color: var(--color-primary); }
.sw-price__btn--apply:hover:not(:disabled) { opacity: .85; }
.sw-price__btn--clear { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.sw-price__btn--clear:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.sw-price__badge { float: right; font-size: 10px; font-weight: 600; background: var(--color-accent); color: var(--color-primary); border-radius: 10px; padding: 1px 7px; margin-left: 6px; }

/* --- Búsqueda --- */
.sr-body {
   background: var(--color-bg);
   padding: 20px 0 48px;
}

/* --- Marcas grid (reemplaza Bootstrap row/col-lg-6) --- */
.brl-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0 24px;
}

/* --- Responsive --- */
@media (max-width: 991px) {
   .cg-layout { grid-template-columns: 1fr; }
   .cg-layout__aside {
      position: fixed;
      top: 0;
      left: -290px;
      width: 280px;
      height: 100vh;
      overflow-y: auto;
      background: #fff;
      z-index: 300;
      transition: left .3s ease;
      padding: 16px;
      box-shadow: 4px 0 20px rgba(0,0,0,.15);
   }
   .cg-filter-btn { display: flex; }
   body.cg-sidebar-open .cg-layout__aside { left: 0; }
   body.cg-sidebar-open .cg-overlay { display: block; }
   .cg-toolbox { padding: 8px 12px; }
}
@media (max-width: 768px) {
   .brl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
   .cg-hero__name { font-size: 1.4rem; }
   .cg-toolbox { flex-direction: column; align-items: flex-start; }
   .cg-toolbox__left, .cg-toolbox__right { width: 100%; }
}


/* ============================================================
   CATEGORY SHOWCASE — cs-*  (homepage, después de TopBrands)
   ============================================================ */

.cs-section {
   padding: 0 0 40px;
}

/* --- Bloque individual --- */
.cs-block {
   border: 1px solid var(--color-border);
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 20px;
   background: #fff;
}
.cs-block__inner {
   display: grid;
   grid-template-columns: 200px 280px 1fr;
   min-height: 340px;
}

/* --- Columna izquierda: lista de subcategorías --- */
.cs-col--cats {
   background: #f8f9fb;
   border-right: 1px solid var(--color-border);
   padding: 20px 16px;
   display: flex;
   flex-direction: column;
}
.cs-col__heading {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--color-primary);
   margin: 0 0 12px;
}
.cs-cat-list {
   list-style: none;
   padding: 0;
   margin: 0 0 auto;
   flex: 1;
}
.cs-cat-list li {
   border-bottom: 1px solid #ebebeb;
}
.cs-cat-list li:last-child {
   border-bottom: none;
}
.cs-cat-link {
   display: block;
   font-size: 13px;
   color: #333;
   padding: 7px 4px;
   text-decoration: none;
   transition: color .15s, padding-left .15s;
}
.cs-cat-link:hover {
   color: var(--color-secondary);
   padding-left: 8px;
}
.cs-view-all {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 14px;
   font-size: 12px;
   font-weight: 700;
   color: var(--color-secondary);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .04em;
   transition: color .15s;
}
.cs-view-all:hover {
   color: var(--color-primary);
}

/* --- Columna central: banner --- */
.cs-col--banner {
   background: var(--color-primary);
   position: relative;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
}
.cs-banner__bg {
   position: absolute;
   inset: -6%;
   background-size: cover;
   background-position: center;
   transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.cs-block:hover .cs-banner__bg {
   transform: scale(1.07);
}
.cs-col--banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 100%);
   z-index: 1;
}
.cs-banner__content {
   position: relative;
   padding: 24px 20px;
   z-index: 2;
}
.cs-banner__title {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 800;
   line-height: 1.2;
   margin: 0 0 6px;
   text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.cs-banner__subtitle {
   color: rgba(255,255,255,.85);
   font-size: 13px;
   margin: 0 0 14px;
}
.cs-banner__btn {
   display: inline-block;
   background: var(--color-accent);
   color: var(--color-primary);
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .05em;
   padding: 8px 18px;
   border-radius: 4px;
   text-decoration: none;
   transition: opacity .15s;
}
.cs-banner__btn:hover {
   opacity: .88;
   color: var(--color-primary);
}

/* --- Columna derecha: grid de productos --- */
.cs-col--products {
   padding: 16px;
   border-left: 1px solid var(--color-border);
}
.cs-products-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   height: 100%;
}

/* Ajuste de la bb-card dentro del showcase */
.cs-products-grid .bb-card {
   margin: 0;
   border-radius: 6px;
}
.cs-products-grid .bb-card .product-title {
   font-size: 12px;
   -webkit-line-clamp: 2;
}

/* Ajuste de pc-card dentro del showcase */
.cs-products-grid .pc-card {
   margin: 0;
}
.cs-products-grid .pc-title {
   font-size: 12px;
   -webkit-line-clamp: 2;
}
.cs-products-grid .pc-model {
   display: none;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
   .cs-block__inner {
      grid-template-columns: 180px 240px 1fr;
   }
}
@media (max-width: 900px) {
   .cs-block__inner {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
   }
   .cs-col--cats   { grid-column: 1; grid-row: 1; }
   .cs-col--banner { grid-column: 2; grid-row: 1; min-height: 220px; }
   .cs-col--products {
      grid-column: 1 / -1;
      grid-row: 2;
      border-left: none;
      border-top: 1px solid var(--color-border);
   }
   .cs-products-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
   .cs-block__inner { grid-template-columns: 1fr; }
   .cs-col--cats   { grid-column: 1; grid-row: 1; }
   .cs-col--banner { grid-column: 1; grid-row: 2; min-height: 180px; }
   .cs-col--products { grid-column: 1; grid-row: 3; }
   .cs-products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tarjeta producto en showcase (cs-prod) --- */
.cs-prod {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 12px 10px 14px;
   text-decoration: none;
   transition: box-shadow .22s cubic-bezier(.2,.8,.2,1),
               border-color .22s,
               transform .22s cubic-bezier(.2,.8,.2,1);
   will-change: transform;
}
.cs-prod:hover {
   border-color: #bdd0e8;
   box-shadow: 0 8px 24px rgba(4,87,160,.13), 0 2px 6px rgba(0,0,0,.07);
   transform: translateY(-3px);
   text-decoration: none;
}
.cs-prod--out {
   opacity: .85;
}
.cs-prod__img-wrap {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
   background: #fafafa;
   border-radius: 6px;
   overflow: hidden;
}
.cs-prod__img {
   max-width: 90%;
   max-height: 90%;
   object-fit: contain;
   transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.cs-prod:hover .cs-prod__img {
   transform: scale(1.06);
}
.cs-prod__img-wrap { position: relative; }

.cs-prod__badge {
   position: absolute;
   inset: 0;
   background: rgba(255,255,255,.65);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   backdrop-filter: blur(1px);
   z-index: 2;
   pointer-events: none;
}

.cs-prod__badge::after {
   content: 'Agotado';
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: var(--color-danger);
   border: 2px solid var(--color-danger);
   padding: 4px 10px;
   border-radius: 3px;
   background: rgba(255,255,255,.9);
   transform: rotate(-8deg);
   display: block;
}
.cs-prod__brand {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--color-secondary);
   margin: 0 0 3px;
}
.cs-prod__name {
   font-size: 12px;
   color: var(--color-text);
   margin: 0 0 8px;
   line-height: 1.35;
   flex: 1;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.cs-prod__pricing {
   display: flex;
   align-items: baseline;
   gap: 5px;
   flex-wrap: wrap;
}
.cs-prod__price {
   font-size: 15px;
   font-weight: 800;
   color: var(--color-primary);
}
.cs-prod__tax {
   font-size: 10px;
   color: var(--color-text-muted);
   white-space: nowrap;
}
.cs-prod__stock {
   font-size: 11px;
   color: #2e7d32;
   font-weight: 600;
   margin: 5px 0 0;
}
.cs-prod__stock--out {
   color: #e53935;
}
.cs-prod__cart-btn {
   margin-top: 10px;
   width: 100%;
   background: var(--color-accent);
   color: var(--color-primary);
   border: none;
   border-radius: 4px;
   padding: 7px 10px;
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   transition: background .15s, transform .15s, box-shadow .15s;
}
.cs-prod__cart-btn:hover:not(:disabled) {
   background: var(--color-accent-hover);
   transform: translateY(-1px);
   box-shadow: 0 3px 10px rgba(255,194,0,.4);
}
.cs-prod__cart-btn:active:not(:disabled) {
   transform: translateY(0);
   box-shadow: none;
}
.cs-prod__cart-btn:disabled {
   background: var(--color-border);
   color: var(--color-text-muted);
   cursor: not-allowed;
}

/* ── PAGE LOADER (Suspense fallback) ─────────────────────────────── */
.pl-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 60vh;
}

.pl-dots {
   display: flex;
   gap: 10px;
}

.pl-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--color-accent);
   animation: plBounce 1.2s ease-in-out infinite;
}

.pl-dot:nth-child(1) { animation-delay: 0s; }
.pl-dot:nth-child(2) { animation-delay: 0.2s; }
.pl-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes plBounce {
   0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
   40%            { transform: scale(1);   opacity: 1;   }
}

/* ── SKELETON — CategoryShowcase cs-* ───────────────────────────── */
.cs-block--skeleton {
   pointer-events: none;
   margin-bottom: 32px;
}

.cs-skeleton__col {
   border-radius: 6px;
   background: #e8eaed;
   background-image: linear-gradient(90deg, #e8eaed 25%, #f4f5f7 50%, #e8eaed 75%);
   background-size: 200% 100%;
   animation: csShimmer 1.6s infinite;
}

.cs-skeleton__col--cats    { height: 320px; }
.cs-skeleton__col--banner  { height: 320px; }
.cs-skeleton__col--products { height: 320px; }

@keyframes csShimmer {
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}

/* ── SKELETON — Ficha de producto pd-skel-* ──────────────────────── */
.pd-skel__gallery {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.pd-skel__img {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 8px;
   background: #e8eaed;
   background-image: linear-gradient(90deg, #e8eaed 25%, #f4f5f7 50%, #e8eaed 75%);
   background-size: 200% 100%;
   animation: csShimmer 1.6s infinite;
}

.pd-skel__thumbs {
   display: flex;
   gap: 8px;
}

.pd-skel__thumb {
   width: 64px;
   height: 64px;
   border-radius: 6px;
   background: #e8eaed;
   background-image: linear-gradient(90deg, #e8eaed 25%, #f4f5f7 50%, #e8eaed 75%);
   background-size: 200% 100%;
   animation: csShimmer 1.6s infinite;
}

.pd-skel__info {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding-top: 8px;
}

.pd-skel__line {
   border-radius: 4px;
   background: #e8eaed;
   background-image: linear-gradient(90deg, #e8eaed 25%, #f4f5f7 50%, #e8eaed 75%);
   background-size: 200% 100%;
   animation: csShimmer 1.6s infinite;
   height: 14px;
}

.pd-skel__line--brand  { width: 30%; height: 12px; }
.pd-skel__line--title  { width: 90%; height: 22px; }
.pd-skel__line--title2 { width: 70%; height: 22px; }
.pd-skel__line--price  { width: 45%; height: 32px; margin: 4px 0; }
.pd-skel__line--meta   { width: 80%; }
.pd-skel__line--btn    { width: 100%; height: 44px; margin-top: 8px; border-radius: 6px; }

/* ── GALERÍA DE PRODUCTO pd-gallery ─────────────────────────────── */
.pd-gallery {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.pd-gallery__main {
   position: relative;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   overflow: hidden;
   background: #fff;
}

.pd-gallery__zoom {
   width: 100%;
   display: block;
}

.pd-gallery__fullscreen {
   position: absolute;
   bottom: 10px;
   right: 10px;
   width: 34px;
   height: 34px;
   border: none;
   border-radius: 50%;
   background: rgba(0,0,0,.45);
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .2s;
}

.pd-gallery__fullscreen:hover { background: var(--color-primary); }

.pd-gallery__thumbs {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.pd-gallery__thumb {
   width: 64px;
   height: 64px;
   padding: 3px;
   border: 2px solid var(--color-border);
   border-radius: 6px;
   background: #fff;
   cursor: pointer;
   overflow: hidden;
   transition: border-color .2s;
   flex-shrink: 0;
}

.pd-gallery__thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

.pd-gallery__thumb--active,
.pd-gallery__thumb:hover {
   border-color: var(--color-primary);
}
}

/* ============================================================
   rv-* — Productos vistos recientemente
   ============================================================ */

.rv-section {
   margin: 32px 0;
}

.rv-header {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
   border-bottom: 2px solid var(--color-border);
   padding-bottom: 10px;
}

.rv-title {
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--color-primary);
   margin: 0;
}

.rv-title__icon {
   color: var(--color-secondary);
   margin-right: 8px;
   font-size: 1rem;
}

/* Scrollable row */
.rv-track {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 8px;
   scrollbar-width: none;
}

.rv-track::-webkit-scrollbar { display: none; }

/* Card */
.rv-card {
   flex: 0 0 160px;
   scroll-snap-align: start;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   overflow: hidden;
   text-decoration: none;
   color: inherit;
   transition: box-shadow .2s, border-color .2s;
   display: flex;
   flex-direction: column;
}

.rv-card:hover {
   box-shadow: 0 4px 16px rgba(0,0,0,.10);
   border-color: var(--color-secondary);
   text-decoration: none;
   color: inherit;
}

.rv-card__img-wrap {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   background: #f8f8f8;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.rv-card__img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 6px;
}

.rv-card__out-badge {
   position: absolute;
   top: 6px;
   left: 6px;
   background: var(--color-danger);
   color: #fff;
   font-size: 10px;
   font-weight: 600;
   padding: 2px 6px;
   border-radius: 4px;
}

.rv-card__body {
   padding: 8px 10px 10px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.rv-card__brand {
   font-size: 10px;
   font-weight: 600;
   color: var(--color-secondary);
   text-transform: uppercase;
   letter-spacing: .4px;
}

.rv-card__title {
   font-size: 12px;
   color: var(--color-text);
   margin: 0;
   line-height: 1.35;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.rv-card__price {
   font-size: 13px;
   font-weight: 700;
   color: var(--color-primary);
   margin: 4px 0 0;
}

.rv-card__currency {
   font-size: 10px;
   font-weight: 400;
   color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 576px) {
   .rv-card { flex: 0 0 140px; }
}

/* skip-to-content — Accesibilidad: enlace saltar al contenido */
.skip-to-content {
   position: absolute;
   top: -100%;
   left: 16px;
   z-index: 9999;
   padding: 10px 20px;
   background: var(--color-primary);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   border-radius: 0 0 6px 6px;
   text-decoration: none;
   transition: top .15s;
}
.skip-to-content:focus {
   top: 0;
   outline: 3px solid var(--color-accent);
   outline-offset: 2px;
}

/* ============================================================
   btt-* — Botón volver arriba
   ============================================================ */

.btt-btn {
   position: fixed;
   bottom: 28px;
   right: 24px;
   z-index: 1200;
   width: 42px;
   height: 42px;
   border: none;
   border-radius: 50%;
   background: var(--color-primary);
   color: #fff;
   font-size: 15px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0,0,0,.25);
   opacity: 0;
   transform: translateY(12px);
   pointer-events: none;
   transition: opacity .25s, transform .25s, background .2s;
}

.btt-btn--visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.btt-btn:hover {
   background: var(--color-secondary);
}

/* ============================================================
   ai-* — También te puede interesar (ficha de producto)
   ============================================================ */

.ai-section {
   padding: 36px 0 24px;
}

.ai-header {
   margin-bottom: 16px;
}

.ai-title {
   font-size: 20px;
   font-weight: 700;
   color: var(--color-primary);
   margin: 0;
}

.ai-title__icon {
   color: var(--color-secondary);
   margin-right: 8px;
   font-size: 17px;
}

.ai-track {
   display: flex;
   gap: 14px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 10px;
   scrollbar-width: thin;
   scrollbar-color: var(--color-secondary) transparent;
}

.ai-track::-webkit-scrollbar { height: 4px; }
.ai-track::-webkit-scrollbar-track { background: transparent; }
.ai-track::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 2px; }

.ai-card {
   flex: 0 0 170px;
   scroll-snap-align: start;
   border: 1px solid #e0e3e8;
   border-radius: 8px;
   overflow: hidden;
   text-decoration: none;
   color: inherit;
   background: #fff;
   transition: box-shadow .2s, transform .2s;
   display: flex;
   flex-direction: column;
}

.ai-card:hover {
   box-shadow: 0 4px 16px rgba(4,87,160,.18);
   transform: translateY(-2px);
   text-decoration: none;
   color: inherit;
}

.ai-card__img-wrap {
   position: relative;
   aspect-ratio: 1 / 1;
   background: #f8f8f8;
   overflow: hidden;
}

.ai-card__img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 8px;
}

.ai-card__out-badge {
   position: absolute;
   bottom: 6px;
   left: 6px;
   background: #e53935;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   padding: 2px 7px;
   border-radius: 20px;
}

.ai-card__body {
   padding: 10px 10px 12px;
   display: flex;
   flex-direction: column;
   gap: 3px;
   flex: 1;
}

.ai-card__brand {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--color-secondary);
}

.ai-card__title {
   font-size: 12px;
   color: #1a1a2e;
   line-height: 1.4;
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.ai-card__price {
   font-size: 14px;
   font-weight: 700;
   color: var(--color-primary);
   margin: 4px 0 0;
}

.ai-card__currency {
   font-size: 11px;
   font-weight: 400;
   color: #666;
}

@media (max-width: 575px) {
   .ai-card { flex: 0 0 145px; }
   .ai-title { font-size: 17px; }
}

/* ============================================================
   ct-preview__* — Mini-preview en toast de "Añadido al carrito"
   ============================================================ */

.ct-preview {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 4px;
}

.ct-preview__img {
   width: 48px;
   height: 48px;
   object-fit: contain;
   border-radius: 4px;
   background: #f0f0f0;
   flex-shrink: 0;
   border: 1px solid rgba(255,255,255,.25);
}

.ct-preview__name {
   font-size: 12px;
   font-weight: 500;
   line-height: 1.4;
   color: #fff;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* ============================================================
   cn-* — Cart Notification (toast React nativo, reemplaza toastr)
   ============================================================ */

.cn-toast {
   position: fixed;
   bottom: 28px;
   right: 24px;
   z-index: 9999;
   width: 300px;
   background: var(--color-primary);
   border-radius: 10px;
   box-shadow: 0 8px 28px rgba(0,0,0,.35);
   overflow: hidden;
   animation: cnSlideIn .3s ease;
}

@keyframes cnSlideIn {
   from { opacity: 0; transform: translateY(16px); }
   to   { opacity: 1; transform: translateY(0); }
}

.cn-toast__header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px 8px;
   border-bottom: 1px solid rgba(255,255,255,.12);
}

.cn-toast__icon {
   color: #4caf50;
   font-size: 16px;
   flex-shrink: 0;
}

.cn-toast__title {
   flex: 1;
   font-size: 13px;
   font-weight: 700;
   color: #fff;
}

.cn-toast__close {
   background: none;
   border: none;
   color: rgba(255,255,255,.6);
   cursor: pointer;
   padding: 2px 4px;
   font-size: 13px;
   line-height: 1;
   transition: color .15s;
}

.cn-toast__close:hover { color: #fff; }

.cn-toast__body {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
}

.cn-toast__img {
   width: 56px;
   height: 56px;
   object-fit: contain;
   border-radius: 6px;
   background: #fff;
   flex-shrink: 0;
   padding: 4px;
}

.cn-toast__info {
   flex: 1;
   min-width: 0;
}

.cn-toast__name {
   font-size: 12px;
   color: #fff;
   line-height: 1.4;
   margin: 0 0 4px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.cn-toast__price {
   font-size: 14px;
   font-weight: 700;
   color: var(--color-accent);
   margin: 0;
}

.cn-toast__currency {
   font-size: 11px;
   font-weight: 400;
   color: rgba(255,255,255,.7);
}

@media (max-width: 480px) {
   .cn-toast { width: calc(100vw - 32px); right: 16px; bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   VIRTUAL GRID  (vg-*)
   Contenedor react-window para catálogos con >24 productos en grid.
   El scrollbar interno se oculta; el scroll de la página es el real.
═══════════════════════════════════════════════════════════════════ */
.vg-list {
   /* Ocultar scrollbar sin deshabilitar scroll programático */
   scrollbar-width: none;           /* Firefox */
   -ms-overflow-style: none;        /* IE/Edge */
}
.vg-list::-webkit-scrollbar {
   display: none;                   /* Chrome / Safari */
}

/* ═══════════════════════════════════════════════════════════════════
   EMPTY STATE  (es-*)
   Aparece en grid-product cuando data.length === 0
═══════════════════════════════════════════════════════════════════ */
.es-wrap {
   width: 100%;
   padding: 72px 24px 80px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   animation: esFadeUp .4s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes esFadeUp {
   from { opacity: 0; transform: translateY(20px); }
   to   { opacity: 1; transform: translateY(0); }
}

/* ilustración */
.es-illustration {
   width: 160px;
   height: 160px;
   margin-bottom: 28px;
   filter: drop-shadow(0 8px 24px rgba(0,45,114,.12));
}

/* círculo de fondo de la lupa */
.es-illustration__bg {
   fill: #f0f4ff;
}
.es-illustration__glass-body {
   fill: #fff;
   stroke: #002D72;
   stroke-width: 7;
}
.es-illustration__glass-handle {
   stroke: #002D72;
   stroke-width: 9;
   stroke-linecap: round;
}
.es-illustration__x {
   stroke: #FFB800;
   stroke-width: 6.5;
   stroke-linecap: round;
}
.es-illustration__dots circle {
   fill: #d0daf5;
}

/* textos */
.es-title {
   font-size: 22px;
   font-weight: 800;
   color: var(--color-primary);
   margin: 0 0 10px;
   letter-spacing: -.4px;
   line-height: 1.2;
}
.es-sub {
   font-size: 14px;
   color: var(--color-text-muted);
   max-width: 380px;
   margin: 0 auto 28px;
   line-height: 1.6;
}

/* acciones */
.es-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   justify-content: center;
}
.es-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 10px 22px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   border: none;
   text-decoration: none;
   transition: transform .15s, box-shadow .15s, background .15s;
}
.es-btn--primary {
   background: var(--color-secondary);
   color: #fff;
   box-shadow: 0 4px 14px rgba(0,100,210,.25);
}
.es-btn--primary:hover {
   background: #0050b0;
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(0,100,210,.35);
   color: #fff;
   text-decoration: none;
}
.es-btn--ghost {
   background: #fff;
   color: var(--color-primary);
   border: 1.5px solid #d0d7e4;
}
.es-btn--ghost:hover {
   border-color: var(--color-secondary);
   color: var(--color-secondary);
   transform: translateY(-1px);
   text-decoration: none;
}

/* tip de sugerencias */
.es-tips {
   margin-top: 32px;
   background: #f7f9fc;
   border: 1px solid #e4e9f2;
   border-radius: 10px;
   padding: 16px 20px;
   text-align: left;
   max-width: 380px;
   width: 100%;
}
.es-tips__title {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--color-text-muted);
   margin: 0 0 10px;
}
.es-tips__list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
}
.es-tips__list li {
   font-size: 13px;
   color: #444;
   display: flex;
   align-items: flex-start;
   gap: 8px;
   line-height: 1.4;
}
.es-tips__list li i {
   color: var(--color-secondary);
   margin-top: 2px;
   flex-shrink: 0;
   font-size: 11px;
}

@media (max-width: 576px) {
   .es-wrap { padding: 48px 16px 56px; }
   .es-illustration { width: 120px; height: 120px; }
   .es-title { font-size: 18px; }
}


/* ══════════════════════════════════════════════════════════════════════
   DARK MODE  —  html[data-theme="dark"]
   ══════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --color-bg:             #0f1117;
  --color-surface:        #1a1e2d;
  --color-surface-muted:  #161b2a;
  --color-text:           #dce3ee;
  --color-text-muted:     #8892a4;
  --color-border:         #262d40;
  --color-secondary:      #5ba3f5;
  --color-link:           #5ba3f5;
  --color-link-hover:     #93c0fa;
  /* Navy → azul medio legible. Contraste sobre #0f1117: 4.6:1 (AA) */
  --color-primary:        #2d7bd4;
  --color-primary-hover:  #1a5fa8;
  /* accent, accent-hover, danger — identidad de marca, sin cambios */
}

/* ── Base ── */
[data-theme="dark"] body { background-color: var(--color-bg) !important; color: var(--color-text) !important; }
[data-theme="dark"] a { color: var(--color-secondary); }
[data-theme="dark"] a:hover { color: #93c0fa; }

/* ── Re-pin fondos que deben quedarse oscuros aunque --bb-navy cambió ──
   (estos elementos usan navy como bg con texto blanco encima) ─────── */
[data-theme="dark"] .hm-header,
[data-theme="dark"] .hm-mid                              { background-color: #001e38; }
[data-theme="dark"] .footer-middle                       { background-color: #001e38 !important; }
[data-theme="dark"] .footer-bottom                       { background-color: #00111f !important; }
[data-theme="dark"] .mc-drawer__head                     { background: #001e38; }
[data-theme="dark"] .mmenu-active .mobile-menu-container { background-color: #001e38 !important; }
[data-theme="dark"] .mobile-nav-toggler                  { background-color: #001e38 !important; }
[data-theme="dark"] .cart-table th                       { background-color: #001e38 !important; }
[data-theme="dark"] .order-summary .summary-title        { background-color: #001e38 !important; }
[data-theme="dark"] .loading-overlay                     { background-color: #001e38 !important; }
[data-theme="dark"] #toast-container .toast-success      { background-color: #1a5c9e !important; }
/* Op-section: se permite que quede azul medio (--bb-navy = #2d7bd4)
   pero reforzamos el texto semi-transparente para que sea legible  */
[data-theme="dark"] .op-subtitle { color: rgba(255,255,255,.82); }
/* Botón de búsqueda: ícono sobre fondo amarillo — mantener oscuro */
[data-theme="dark"] .hm-search__btn { color: var(--color-primary) !important; }

/* ── Theme toggle button ── */
.hm-theme-toggle { transition: color .2s, transform .3s !important; }
.hm-theme-toggle:hover { transform: rotate(20deg) !important; }
[data-theme="dark"] .hm-theme-toggle { color: var(--color-accent) !important; }

/* ── Search box ── */
[data-theme="dark"] .hm-search {
  background: #1e2538;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
[data-theme="dark"] .hm-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255,224,0,.2);
}
[data-theme="dark"] .hm-search__input { color: var(--color-text); background: transparent; }
[data-theme="dark"] .hm-search__input::placeholder { color: #3d4a60; }
[data-theme="dark"] .hm-search__icon { color: #4a5568; }
[data-theme="dark"] .hm-search__clear { color: #4a5568; }
[data-theme="dark"] .hm-search__clear:hover { color: var(--color-text); }
[data-theme="dark"] .hm-search__select-wrap {
  background: #252b3d;
  border-left-color: #2d3448;
}
[data-theme="dark"] .hm-search__select-wrap:hover { background: #2d3448; }
[data-theme="dark"] .hm-search__select-wrap::after { border-top-color: var(--color-accent); }
[data-theme="dark"] .hm-search__select { color: var(--color-text); background: transparent; }
[data-theme="dark"] .hm-search__btn { color: var(--color-primary); }

/* ── Search results dropdown ── */
[data-theme="dark"] .hm-search__results {
  background: #1a1e2d;
  border-color: var(--color-border);
  border-top-color: var(--color-accent);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
[data-theme="dark"] .hm-search__results-hd { color: var(--color-text-muted); border-bottom-color: var(--color-border); }
[data-theme="dark"] .hm-search__result-item { border-bottom-color: var(--color-border); }
[data-theme="dark"] .hm-search__result-item--active,
[data-theme="dark"] .hm-search__result-item--active .hm-search__result-link { background: #252b3d; }
[data-theme="dark"] .hm-search__result-link { color: var(--color-text); }
[data-theme="dark"] .hm-search__result-link:hover { background: #252b3d; }
[data-theme="dark"] .hm-search__result-img { background: #252b3d; border-color: var(--color-border); }
[data-theme="dark"] .hm-search__result-title { color: var(--color-text); }
[data-theme="dark"] .hm-search__result-item--active .hm-search__result-title,
[data-theme="dark"] .hm-search__result-link:hover .hm-search__result-title { color: var(--color-secondary); }
[data-theme="dark"] .hm-search__result-meta { color: var(--color-text-muted); }
[data-theme="dark"] .hm-search__hl { background: rgba(255,224,0,.18); color: var(--color-accent); }
[data-theme="dark"] .hm-search__result-price--final { color: var(--color-secondary); }
[data-theme="dark"] .hm-search__result-price--old { color: var(--color-text-muted); }
[data-theme="dark"] .hm-search__more { background: #141824; border-top-color: var(--color-border); }
[data-theme="dark"] .hm-search__more a { color: var(--color-secondary); }
[data-theme="dark"] .hm-search__more a:hover { background: #252b3d; }
[data-theme="dark"] .hm-search__msg { color: var(--color-text-muted); }
[data-theme="dark"] .hm-search__msg i { color: #2d3448; }
[data-theme="dark"] .hm-skel__img,
[data-theme="dark"] .hm-skel__line {
  background: #252b3d;
  background-image: linear-gradient(90deg, #252b3d 25%, #2d3448 50%, #252b3d 75%);
  background-size: 200% 100%;
}

/* ── Search history  hm-hist__* ─────────────────────────────────── */
.hm-hist { padding: 0; }

.hm-hist__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--color-bg);
}

.hm-hist__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
}

.hm-hist__label i { margin-right: 5px; }

.hm-hist__clear {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  transition: color .15s;
}

.hm-hist__clear:hover { color: var(--color-primary); }

.hm-hist__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.hm-hist__item {
  display: flex;
  align-items: center;
  padding: 0 8px 0 14px;
  gap: 6px;
  transition: background .12s;
}

.hm-hist__item:hover { background: #f7f8fa; }

.hm-hist__query {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  min-width: 0;
}

.hm-hist__icon {
  color: var(--color-border);
  font-size: 12px;
  flex-shrink: 0;
}

.hm-hist__remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-border);
  font-size: 11px;
  border-radius: 50%;
  transition: background .12s, color .12s;
  font-family: inherit;
}

.hm-hist__remove:hover { background: var(--color-bg); color: var(--color-danger); }

/* Dark mode */
[data-theme="dark"] .hm-hist__header   { border-bottom-color: var(--color-border); }
[data-theme="dark"] .hm-hist__label    { color: var(--color-text-muted); }
[data-theme="dark"] .hm-hist__clear    { color: var(--color-secondary); }
[data-theme="dark"] .hm-hist__item:hover { background: #1e2538; }
[data-theme="dark"] .hm-hist__query    { color: var(--color-text); }
[data-theme="dark"] .hm-hist__icon     { color: #3d4560; }
[data-theme="dark"] .hm-hist__remove:hover { background: #252b3d; color: #f04060; }

/* ── User dropdown ── */
[data-theme="dark"] .hm-user-dropdown {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
[data-theme="dark"] .hm-user-dropdown a,
[data-theme="dark"] .hm-user-dropdown span { color: var(--color-text); border-bottom-color: var(--color-border); }
[data-theme="dark"] .hm-user-dropdown a:hover,
[data-theme="dark"] .hm-user-dropdown span:hover { background: #252b3d; color: var(--color-secondary); }

/* ── Mega Menu mm-* ── */
[data-theme="dark"] .mm-panel { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 10px 32px rgba(0,0,0,.5); }
[data-theme="dark"] .mm-sidebar { background: #141824; border-right-color: var(--color-border); }
[data-theme="dark"] .mm-sidebar__item { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .mm-sidebar__link:hover,
[data-theme="dark"] .mm-sidebar__item--active .mm-sidebar__link { background: var(--color-surface); }
[data-theme="dark"] .mm-col { border-right-color: var(--color-border); }
[data-theme="dark"] .mm-col--l3 { background: #141824; }
[data-theme="dark"] .mm-list__item { border-bottom-color: rgba(255,255,255,.05); }
[data-theme="dark"] .mm-list__link:hover,
[data-theme="dark"] .mm-list__item--active .mm-list__link { background: #252b3d; }
[data-theme="dark"] .mm-list__link--l3 { color: var(--color-text-muted) !important; }
[data-theme="dark"] .mm-list__link--l3:hover { background: #252b3d; color: var(--color-secondary) !important; }
[data-theme="dark"] .mm-skeleton__row {
  background: #252b3d;
  background-image: linear-gradient(90deg, #252b3d 25%, #2d3448 50%, #252b3d 75%);
  background-size: 200% 100%;
}

/* ── bb-megamenu ── */
[data-theme="dark"] .bb-megamenu { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .bb-megamenu__left { background: #141824; border-right-color: var(--color-border); }
[data-theme="dark"] .bb-megamenu__lv2-link:hover,
[data-theme="dark"] .bb-megamenu__lv2-link--active { background-color: var(--color-surface) !important; }
[data-theme="dark"] .bb-megamenu__lv3-link:hover { background: #252b3d; color: var(--color-secondary) !important; }

/* ── Breadcrumb ── */
[data-theme="dark"] .bc-item--active { color: var(--color-text); }
[data-theme="dark"] .bc-nav--bar { background: #141824; border-bottom-color: var(--color-border); }

/* ── Product (Porto default card) ── */
[data-theme="dark"] .product-default { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .product-default figure { background-color: var(--color-surface) !important; border-bottom-color: var(--color-border) !important; }
[data-theme="dark"] .product-default .product-price,
[data-theme="dark"] .product-default .price-box .product-price { color: var(--color-accent) !important; }

/* ── Product single ── */
[data-theme="dark"] .product-single-details .product-desc { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .product-single-details ul li { border-bottom-color: var(--color-border) !important; }
[data-theme="dark"] .product-single-details .divider { border-color: var(--color-border) !important; }

/* ── Sidebar ── */
[data-theme="dark"] .sidebar .widget { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .info-box { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; }

/* ── Mini-carrito mc-* ── */
[data-theme="dark"] .mc-drawer { background: var(--color-surface); }
[data-theme="dark"] .mc-item { border-bottom-color: var(--color-border); }
[data-theme="dark"] .mc-item:hover { background: #252b3d; }
[data-theme="dark"] .mc-item__img { border-color: var(--color-border); }
[data-theme="dark"] .mc-item__name { color: var(--color-text) !important; }
[data-theme="dark"] .mc-item__meta { color: var(--color-text-muted); }
[data-theme="dark"] .mc-item__qty { color: var(--color-text); }
[data-theme="dark"] .mc-item__remove { color: #3d4560; }
[data-theme="dark"] .mc-empty { color: var(--color-text-muted); }
[data-theme="dark"] .mc-footer { border-top-color: var(--color-border); background: var(--color-surface); }
[data-theme="dark"] .mc-total__label { color: var(--color-text); }
[data-theme="dark"] .mc-btn--outline { background: var(--color-surface) !important; color: var(--color-text) !important; }
[data-theme="dark"] .mc-btn--outline:hover { background: var(--color-primary) !important; color: #fff !important; }

/* ── Section titles ── */
[data-theme="dark"] .section-title,
[data-theme="dark"] .section-sub-title,
[data-theme="dark"] h2.section-title,
[data-theme="dark"] h3.section-title { color: var(--color-text) !important; }

/* ── Pagination ── */
[data-theme="dark"] .styled-pagination li a { color: var(--color-text); border-color: var(--color-border); background: var(--color-surface); }
[data-theme="dark"] .styled-pagination li.active a,
[data-theme="dark"] .styled-pagination li:hover a { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; }

/* ── bb-card (tarjetas productos en catálogo / relacionados) ── */
[data-theme="dark"] .bb-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .bb-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.45); }
[data-theme="dark"] .bb-card__img-wrap { background: #202536; }
[data-theme="dark"] .bb-card__wish { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .bb-card__wish:hover,
[data-theme="dark"] .bb-card__wish--active { background: #2a1520 !important; }
[data-theme="dark"] .bb-card__stock--ok  { background: #1a3020; color: #4ade80; }
[data-theme="dark"] .bb-card__stock--out { background: #2a1520; color: #f87171; }

/* ── bb-list-item (vista lista del catálogo) ── */
[data-theme="dark"] .bb-list-item { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .bb-list-item__img-wrap { background: #202536; }

/* ── bb-toolbox (selector layout, filtros) ── */
[data-theme="dark"] .bb-toolbox__layout-btn { background: var(--color-surface); border-color: var(--color-border); }

/* ── brand-cat-card ── */
[data-theme="dark"] .brand-cat-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .brand-cat-card__img-wrap { background: #202536; }

/* ── Página de detalle de producto (pd-*) ── */
[data-theme="dark"] .pd-gallery .product-slider-container { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pd-gallery .prod-thumbnail .owl-dot img { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pd-gallery .prod-thumbnail .owl-dot.active img,
[data-theme="dark"] .pd-gallery .prod-thumbnail .owl-dot:hover img { border-color: var(--color-secondary); }

[data-theme="dark"] .pd-brand-chip { background: #1a2540; color: var(--color-secondary); }
[data-theme="dark"] h1.pd-title, [data-theme="dark"] .pd-title { color: var(--color-text); }

[data-theme="dark"] .pd-features { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .pd-features__title { color: var(--color-secondary); }
[data-theme="dark"] .pd-features__check { color: var(--color-secondary); }
[data-theme="dark"] .pd-features__item { color: var(--color-text); }

[data-theme="dark"] .pd-qty { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pd-qty__btn { color: var(--color-secondary); }
[data-theme="dark"] .pd-qty__btn:hover { background: #252b3d; }
[data-theme="dark"] .pd-qty__input { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }

[data-theme="dark"] .pd-tabs { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pd-tabs__list { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .pd-tab { color: var(--color-text-muted); border-bottom-color: var(--color-border); }
[data-theme="dark"] .pd-tab:hover,
[data-theme="dark"] .pd-tab--active { color: var(--color-secondary); }
[data-theme="dark"] .pd-tab-content { color: var(--color-text); background: var(--color-surface); }

[data-theme="dark"] .pd-download-item { color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .pd-download-item:hover { border-color: var(--color-secondary); background: #252b3d; color: var(--color-secondary); }
[data-theme="dark"] .pd-download-item:hover .pd-download-item__dl { color: var(--color-secondary); }

[data-theme="dark"] .pd-related__title { color: var(--color-secondary); }
[data-theme="dark"] .pd-related__sub { color: var(--color-text-muted); }

/* ── Página de detalle de producto nuevo (psd-*) ── */
[data-theme="dark"] .psd-price__current { color: var(--color-accent); }
[data-theme="dark"] .psd-price__old { color: var(--color-text-muted); }
[data-theme="dark"] .psd-info-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .psd-info-row { color: var(--color-text); }

/* ── Página error / acceso restringido (per-*) ── */
[data-theme="dark"] .per-page { background: var(--color-surface); }
[data-theme="dark"] .per-title { color: var(--color-secondary); }
[data-theme="dark"] .per-desc { color: var(--color-text-muted); }
/* per-btn-primary: texto sobre fondo amarillo — conservar navy oscuro */
[data-theme="dark"] .per-btn-primary { color: var(--color-primary); }

/* ── Texto genérico hardcodeado oscuro sobre fondos que cambian ── */
[data-theme="dark"] .pd-features__item,
[data-theme="dark"] .pd-tab-content p,
[data-theme="dark"] .pd-tab-content li { color: var(--color-text); }
[data-theme="dark"] .pd-tab-content h3,
[data-theme="dark"] .pd-tab-content h4,
[data-theme="dark"] .pd-tab-content h5 { color: var(--color-secondary); }

/* ── Líneas divisorias y bordes internos ── */
[data-theme="dark"] .pd-divider { background: var(--color-accent); }

/* ── Knowledge base (kb-*) ── */
[data-theme="dark"] .kb-search-results__link { background: var(--color-surface); }
[data-theme="dark"] .kb-search-results__link:hover { background: #252b3d; color: var(--color-secondary); }

/* ── ActiveFilters chips (buscador) ── */
[data-theme="dark"] .af-chip { background: #1e2538; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .af-chip__remove { color: var(--color-text-muted); }

/* ── DealBanner (homepage) ── */
[data-theme="dark"] .db-strip { background: #0d1b2a; border-color: var(--color-border); }

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE — MEJORAS COMPLEMENTARIAS (2026-05-21)
   Cubre: transición suave, formularios, cs-*, wl-*, sp-*, cm-*,
   co-*, so-*, qt-*, skeletons, scrollbar, selection, imágenes, print
══════════════════════════════════════════════════════════════════════ */

/* ── 1. Smooth theme toggle transition ─────────────────────────────── */
/* useTheme.js añade la clase `theme-transitioning` durante 300 ms       */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: color 0.25s ease,
              background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

/* ── 2. Scrollbar ───────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar       { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track  { background: #141824; }
[data-theme="dark"] ::-webkit-scrollbar-thumb  { background: #2d3448; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d4560; }

/* ── 3. Text selection ──────────────────────────────────────────────── */
[data-theme="dark"] ::selection {
  background: rgba(91, 163, 245, 0.28);
  color: var(--color-text);
}

/* ── 4. Global form inputs ──────────────────────────────────────────── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
[data-theme="dark"] select:not(.hm-search__select),
[data-theme="dark"] textarea {
  background: #1e2538 !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--color-text-muted) !important; }
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(91,163,245,.15) !important;
  outline: none;
}
/* Porto Bootstrap .form-control */
[data-theme="dark"] .form-control {
  background-color: #1e2538 !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .form-control:focus {
  background-color: #1e2538 !important;
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(91,163,245,.15) !important;
}
[data-theme="dark"] .input-group-addon,
[data-theme="dark"] .input-group-text {
  background: #252b3d !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}
/* dist-input (distribuidores, checkout forms) */
[data-theme="dark"] .dist-input {
  background: #1e2538 !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dist-input:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(91,163,245,.15) !important;
}
[data-theme="dark"] .dist-radio-opt,
[data-theme="dark"] .dist-check-item { color: var(--color-text); }
/* Labels */
[data-theme="dark"] label,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .form-label { color: var(--color-text) !important; }

/* ── 5. cs-* (Category Showcase) ───────────────────────────────────── */
[data-theme="dark"] .cs-block { background: var(--color-surface); }
[data-theme="dark"] .cs-col--cats { background: #141824; }
[data-theme="dark"] .cs-cat-list li { border-bottom-color: var(--color-border); }
[data-theme="dark"] .cs-cat-link { color: var(--color-text); }
[data-theme="dark"] .cs-cat-link:hover { color: var(--color-secondary); }

/* cs-prod (tarjetas en el showcase) */
[data-theme="dark"] .cs-prod {
  background: var(--color-surface);
}
[data-theme="dark"] .cs-prod:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  border-color: var(--color-border);
}
[data-theme="dark"] .cs-prod__img-wrap { background: #202536; }
[data-theme="dark"] .cs-prod__badge   { background: rgba(26,30,45,.75); }
[data-theme="dark"] .cs-prod__badge::after { background: rgba(26,30,45,.9); }
[data-theme="dark"] .cs-prod__name    { color: var(--color-text); }
[data-theme="dark"] .cs-prod__stock   { color: #4ade80; }
[data-theme="dark"] .cs-prod__stock--out { color: #f87171; }

/* cs-skeleton */
[data-theme="dark"] .cs-skeleton__col {
  background: #252b3d;
  background-image: linear-gradient(90deg, #252b3d 25%, #2d3448 50%, #252b3d 75%);
  background-size: 200% 100%;
}

/* ── 6. wl-* (Wishlist) ─────────────────────────────────────────────── */
[data-theme="dark"] .wl-section-header { border-bottom-color: var(--color-border); }
[data-theme="dark"] .wl-section-title  { color: var(--color-secondary); }
[data-theme="dark"] .wl-section-count  { color: var(--color-text-muted); }

[data-theme="dark"] .wl-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .wl-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .wl-card__remove {
  background: rgba(26,30,45,.9);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .wl-card__img-wrap  { background: #202536; }
[data-theme="dark"] .wl-card__name      { color: var(--color-text); }
[data-theme="dark"] .wl-card__name:hover { color: var(--color-secondary); }
[data-theme="dark"] .wl-card__price     { color: var(--color-accent); }
[data-theme="dark"] .wl-card__stock--in  { background: #1a3020; color: #4ade80; }
[data-theme="dark"] .wl-card__stock--out { background: #2a1520; color: #f87171; }
[data-theme="dark"] .wl-card__footer    { border-top-color: var(--color-border); }
[data-theme="dark"] .wl-card__add-btn   { background: var(--color-primary); }
[data-theme="dark"] .wl-card__add-btn:hover:not(:disabled) { background: #4a8fd4; }

[data-theme="dark"] .wl-empty { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .wl-empty__icon-wrap { background: #2a1520; }
[data-theme="dark"] .wl-empty__title { color: var(--color-text); }
[data-theme="dark"] .wl-empty__sub   { color: var(--color-text-muted); }
[data-theme="dark"] .wl-empty__cta   { background: var(--color-primary); color: #fff; }

[data-theme="dark"] .wl-share { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .wl-share__label { color: var(--color-text); }
[data-theme="dark"] .wl-share__desc  { color: var(--color-text-muted); }
[data-theme="dark"] .wl-share__url-input { background: #1a1e2e; border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .wl-share__hint { color: var(--color-text-muted); }
[data-theme="dark"] .wlsh-readonly-banner { background: #2a2010; border-color: #5a4010; color: #d4a820; }
[data-theme="dark"] .wlsh-error__title { color: var(--color-text); }
[data-theme="dark"] .wlsh-error__sub   { color: var(--color-text-muted); }

/* ── 7. sp-* (Solution Products) ────────────────────────────────────── */
[data-theme="dark"] .sp-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sp-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); }
[data-theme="dark"] .sp-card__img-wrap { background: #202536; }
[data-theme="dark"] .sp-sk-img,
[data-theme="dark"] .sp-sk-line {
  background: #252b3d;
  background-image: linear-gradient(90deg, #252b3d 25%, #2d3448 50%, #252b3d 75%);
  background-size: 200% 100%;
}

/* ── 8. sb-* (Solution Bundle home) ─────────────────────────────────── */
[data-theme="dark"] .sb-bundle { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sb-prod-card { background: #1a1f2e; border-color: var(--color-border); }
[data-theme="dark"] .sb-prod-card__img-wrap { background: #202536; }
[data-theme="dark"] .sb-prod-card--optional .sb-prod-card__img-wrap { background: #1e2332; }
[data-theme="dark"] .sb-prod-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.5); }
[data-theme="dark"] .sb-prod-badge--recomendado { background: #1b3a1f; color: #81c784; border-color: #388e3c; }
[data-theme="dark"] .sb-prod-badge--opcional { background: #3e2f00; color: #ffd54f; border-color: #f57f17; }
[data-theme="dark"] .sb-cta { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sb-cta__btn { background: #e0e0e0; color: #0a0f1e; }
[data-theme="dark"] .sb-cta__btn:hover:not(:disabled) { background: var(--color-accent); color: var(--color-primary); }
[data-theme="dark"] .sb-products { border-left-color: var(--color-border); }
[data-theme="dark"] .sb-panel--sk { background: #252b3d; }
[data-theme="dark"] .sb-sk-img,
[data-theme="dark"] .sb-sk-line,
[data-theme="dark"] .sb-cta--sk {
  background: #252b3d;
  background-image: linear-gradient(90deg, #252b3d 25%, #2d3448 50%, #252b3d 75%);
  background-size: 200% 100%;
}

/* ── 9. cm-* (Category Menu sidebar + chips) ────────────────────────── */
[data-theme="dark"] .cm-sidebar { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .cm-sidebar__item { border-bottom-color: var(--color-border); }
[data-theme="dark"] .cm-sidebar__link:hover { background: #252b3d; }
[data-theme="dark"] .cm-sidebar__num { background: #252b3d; color: var(--color-text); }
[data-theme="dark"] .cm-sidebar__link:hover .cm-sidebar__num {
  background: var(--color-accent);
  color: var(--color-primary);
}
[data-theme="dark"] .cm-cat-chip {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .cm-cat-chip:hover,
[data-theme="dark"] .cm-cat-chip:active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── 9. co-* (Checkout) ─────────────────────────────────────────────── */
[data-theme="dark"] .co-step          { color: #3d4a60; }
[data-theme="dark"] .co-step--done    { color: var(--color-secondary); }
[data-theme="dark"] .co-step--active  { color: var(--color-text); }
[data-theme="dark"] .co-step__num     { background: var(--color-surface); }
[data-theme="dark"] .co-step--active .co-step__num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .co-step--done   .co-step__num { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
[data-theme="dark"] .co-step__connector { background: var(--color-border); }

[data-theme="dark"] .co-section        { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .co-section__header { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .co-section__icon  { background: var(--color-primary); }
[data-theme="dark"] .co-section__title { color: var(--color-secondary); }
[data-theme="dark"] .co-section--payment { border-top-color: var(--color-border); }
[data-theme="dark"] .co-section--payment .co-section__header { background: var(--color-surface); }

[data-theme="dark"] .co-summary        { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .co-summary__header { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .co-summary__title { color: var(--color-secondary); }
[data-theme="dark"] .co-summary__count { color: var(--color-text-muted); }
[data-theme="dark"] .co-summary__item-img-wrap { background: #202536; border-color: var(--color-border); }
[data-theme="dark"] .co-summary__item-name { color: var(--color-text); }
[data-theme="dark"] .co-summary__item-calc  { color: var(--color-text-muted); }
[data-theme="dark"] .co-summary__totals     { border-top-color: var(--color-border); }
[data-theme="dark"] .co-summary__row        { color: var(--color-text-muted); }
[data-theme="dark"] .co-summary__free       { color: var(--color-secondary); }
[data-theme="dark"] .co-summary__total-row  { background: #141824; border-top-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .co-summary__total-value { color: var(--color-accent); }
[data-theme="dark"] .co-payment-note        { color: var(--color-text-muted); }
[data-theme="dark"] .co-summary__footer     { background: #141824; border-top-color: var(--color-border); }

[data-theme="dark"] .co-gateway-option        { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .co-gateway-option:hover  { border-color: var(--color-secondary); background: #1e2538; }
[data-theme="dark"] .co-gateway-option--active { border-color: var(--color-primary); background: #1a2540; }
[data-theme="dark"] .co-gateway-option__label  { color: var(--color-text); }
[data-theme="dark"] .co-gateway-option__sub    { color: var(--color-text-muted); }

[data-theme="dark"] .co-empty           { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .co-empty__icon-wrap { background: #1a2540; }
[data-theme="dark"] .co-empty__title    { color: var(--color-text); }
[data-theme="dark"] .co-empty__sub      { color: var(--color-text-muted); }
[data-theme="dark"] .co-empty__cta      { background: var(--color-primary); color: #fff; }

/* ── 10. so-* (Service Orders) ──────────────────────────────────────── */
[data-theme="dark"] .so-table-wrap     { background: var(--color-surface); }
[data-theme="dark"] .so-table__row     { border-bottom-color: var(--color-border); }
[data-theme="dark"] .so-table__row:hover { background: #252b3d; }
[data-theme="dark"] .so-table td       { color: var(--color-text); }
[data-theme="dark"] .so-btn--outline   { background: var(--color-surface); }
[data-theme="dark"] .so-empty          { background: var(--color-surface); }
[data-theme="dark"] .so-filters__input  { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .so-filter-btn      { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .so-skeleton-wrap   { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .so-skeleton-cell   { background: linear-gradient(90deg, #2a2f3d 25%, #323848 50%, #2a2f3d 75%); background-size: 800px 100%; }

[data-theme="dark"] .so-info-card      { background: var(--color-surface); }
[data-theme="dark"] .so-info-row       { border-bottom-color: var(--color-border); }
[data-theme="dark"] .so-info-row__icon { background: #1a2540; }
[data-theme="dark"] .so-info-row__value { color: var(--color-text); }
[data-theme="dark"] .so-info-row__value--desc { color: var(--color-text-muted); }
[data-theme="dark"] .so-info-card__footer {
  background: #2a2210;
  border-top-color: #4a3800;
}
[data-theme="dark"] .so-info-card__pay-note { color: #f0c060; }

[data-theme="dark"] .so-summary-card   { background: var(--color-surface); }
[data-theme="dark"] .so-summary-card__header { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .so-total-row      { color: var(--color-text); border-bottom-color: var(--color-border); }
[data-theme="dark"] .so-summary-card__pdf { border-top-color: var(--color-border); }
[data-theme="dark"] .so-pdf-btn        { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .so-pdf-btn:hover  { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .so-pdf-btn:hover i { color: #fff; }

/* ── 11. qt-* (Cotizaciones) ────────────────────────────────────────── */
[data-theme="dark"] .qt-table-wrap,
[data-theme="dark"] .qt-prod-card      { background: var(--color-surface); }
[data-theme="dark"] .qt-table__row,
[data-theme="dark"] .qt-prod-table__row { border-bottom-color: var(--color-border); }
[data-theme="dark"] .qt-table__row:hover,
[data-theme="dark"] .qt-prod-table__row:hover { background: #252b3d; }
[data-theme="dark"] .qt-table td,
[data-theme="dark"] .qt-prod-table td  { color: var(--color-text); }
[data-theme="dark"] .qt-badge--paid    { background: #1a3020; color: #4ade80; }
[data-theme="dark"] .qt-badge--pending { background: #2a2210; color: #f0c060; }

/* ── 12. pd-skel-* (Product detail skeleton) ────────────────────────── */
[data-theme="dark"] .pd-skel__img,
[data-theme="dark"] .pd-skel__thumb {
  background: #252b3d;
  background-image: linear-gradient(90deg, #252b3d 25%, #2d3448 50%, #252b3d 75%);
  background-size: 200% 100%;
}

/* ── 13. Product images — subtle brightness on white-bg PNGs ─────────── */
[data-theme="dark"] .bb-card__img,
[data-theme="dark"] .pc-card__img,
[data-theme="dark"] .wl-card__img,
[data-theme="dark"] .cs-prod__img,
[data-theme="dark"] .sp-card__img,
[data-theme="dark"] .tb-card__img,
[data-theme="dark"] .product-default figure img {
  filter: brightness(0.9) contrast(1.05);
}

/* ── 14. @media print — forzar modo claro ───────────────────────────── */
@media print {
  html[data-theme="dark"] {
    --color-bg:          #fff;
    --color-surface:     #fff;
    --color-text:        #000;
    --color-text-muted:  #555;
    --color-border:      #e0e0e0;
  }
  html[data-theme="dark"] body,
  html[data-theme="dark"] .hm-header,
  html[data-theme="dark"] .hm-mid,
  html[data-theme="dark"] .footer-middle,
  html[data-theme="dark"] .footer-bottom {
    background-color: #fff !important;
    color: var(--color-text) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE — COBERTURA COMPLETA PÁGINA POR PÁGINA (2026-05-21)
   Cubre: sc-*, pp-*, lg-*, pol-*, ic-*, pur-*, quo-*, sos-*, dev-*
   + fixes pd-tab-content--desc, co-shipping, co-toggle, thumbnails
══════════════════════════════════════════════════════════════════════ */

/* ── A. Fixes puntuales en secciones ya existentes ──────────────────── */

/* pd-tab-content descripción */
[data-theme="dark"] .pd-tab-content--desc { color: var(--color-text); }
[data-theme="dark"] .pd-tab-empty         { color: var(--color-text-muted); }

/* checkout: shipping + toggle */
[data-theme="dark"] .co-shipping-option            { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .co-shipping-option:hover      { border-color: var(--color-secondary); background: #1e2538; }
[data-theme="dark"] .co-shipping-option--active    { border-color: var(--color-primary); background: #1a2540; }
[data-theme="dark"] .co-toggle-prompt              { color: var(--color-text); }
[data-theme="dark"] .co-toggle-hint                { color: var(--color-text-muted); }

/* checkout: address card */
[data-theme="dark"] .co-addr-card__name            { color: var(--color-text); }

/* Thumbnails del producto — fondo */
[data-theme="dark"] .prod-thumbnail .owl-dot img   { background: #202536 !important; }

/* ── B. sc-* (Carrito de compras) ───────────────────────────────────── */
[data-theme="dark"] .sc-table-card        { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sc-table-header      { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .sc-table-header__count { color: var(--color-secondary); }
[data-theme="dark"] .sc-clear-btn         { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); }

[data-theme="dark"] .sc-item              { border-bottom-color: var(--color-border); }
[data-theme="dark"] .sc-item:hover        { background: #252b3d; }
[data-theme="dark"] .sc-item__img-wrap    { background: #202536; border-color: var(--color-border); }
[data-theme="dark"] .sc-item__name        { color: var(--color-text); }
[data-theme="dark"] .sc-item__name:hover  { color: var(--color-secondary); }
[data-theme="dark"] .sc-item__price       { color: var(--color-text); }
[data-theme="dark"] .sc-item__subtotal    { color: var(--color-accent); }
[data-theme="dark"] .sc-item__label       { color: var(--color-text-muted); }
[data-theme="dark"] .sc-item__remove      { color: var(--color-text-muted); }

[data-theme="dark"] .sc-table-footer      { border-top-color: var(--color-border); }
[data-theme="dark"] .sc-continue-btn      { color: var(--color-secondary); }
[data-theme="dark"] .sc-continue-btn:hover { color: var(--color-primary); }

[data-theme="dark"] .sc-summary           { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sc-summary__header   { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .sc-summary__title    { color: var(--color-secondary); }
[data-theme="dark"] .sc-summary__label    { color: var(--color-text-muted); }
[data-theme="dark"] .sc-summary__value    { color: var(--color-text); }
[data-theme="dark"] .sc-summary__total-row { background: #141824; border-top-color: var(--color-border); }
[data-theme="dark"] .sc-summary__total-label { color: var(--color-text); }
[data-theme="dark"] .sc-summary__total-value { color: var(--color-accent); }
[data-theme="dark"] .sc-keep-shopping     { color: var(--color-text-muted); }
[data-theme="dark"] .sc-keep-shopping:hover { color: var(--color-secondary); }

[data-theme="dark"] .sc-empty             { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sc-empty__icon-wrap  { background: #1a2540; }
[data-theme="dark"] .sc-empty__icon       { color: var(--color-secondary); }
[data-theme="dark"] .sc-empty__title      { color: var(--color-text); }
[data-theme="dark"] .sc-empty__sub        { color: var(--color-text-muted); }
[data-theme="dark"] .sc-empty__cta        { background: var(--color-primary); color: #fff; }

/* ── C. pp-* (Perfil de usuario) ────────────────────────────────────── */
[data-theme="dark"] .pp-sidebar {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .pp-toc-header         { border-bottom-color: var(--color-border); }
[data-theme="dark"] .pp-toc-header__icon   { color: var(--color-secondary); }
[data-theme="dark"] .pp-toc-header__label  { color: var(--color-secondary); }
[data-theme="dark"] .pp-toc-nav__link      { color: var(--color-text); }
[data-theme="dark"] .pp-toc-nav__link:hover { background: #252b3d; color: var(--color-primary); }
[data-theme="dark"] .pp-toc-nav__num       { background: #1a2540; color: var(--color-secondary); }

[data-theme="dark"] .pp-highlights {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .pp-highlights__heading { color: var(--color-secondary); }
[data-theme="dark"] .pp-highlight-item      { background: #141824; }
[data-theme="dark"] .pp-highlight-item__text { color: var(--color-text); }

[data-theme="dark"] .pp-content-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .pp-section            { border-bottom-color: var(--color-border); }
[data-theme="dark"] .pp-section__title     { color: var(--color-text); }
[data-theme="dark"] .pp-section__subtitle  { color: var(--color-text-muted); }
[data-theme="dark"] .pp-section__link      { color: var(--color-secondary); }
[data-theme="dark"] .pp-section__link:hover { color: var(--color-primary); }
[data-theme="dark"] .pp-info-box {
  background: #141824;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .pp-info-box strong { color: var(--color-text); }
[data-theme="dark"] .pp-info-box a      { color: var(--color-secondary); }

/* ── D. lg-* (Login / Signup) ───────────────────────────────────────── */
[data-theme="dark"] .lg-page        { background: #0a0e1a; }
[data-theme="dark"] .lg-card        { box-shadow: 0 8px 40px rgba(0,0,0,.6); }
[data-theme="dark"] .lg-form-panel  { background: var(--color-surface); }
[data-theme="dark"] .lg-form__title    { color: var(--color-secondary); }
[data-theme="dark"] .lg-form__subtitle { color: var(--color-text-muted); }
[data-theme="dark"] .lg-form__register { color: var(--color-text-muted); }
[data-theme="dark"] .lg-field__label   { color: var(--color-text); }
[data-theme="dark"] .lg-field__icon    { color: var(--color-text-muted); }
[data-theme="dark"] .lg-field__input {
  background: #141824;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .lg-field__input:focus {
  background: #1a1f30;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(91,163,245,.15);
}
[data-theme="dark"] .lg-field__eye  { color: var(--color-text-muted); }
[data-theme="dark"] .lg-field__eye:hover { color: var(--color-secondary); }
[data-theme="dark"] .lg-link--muted { color: var(--color-text-muted); }
/* react-tel-input en login */
[data-theme="dark"] .lg-phone-wrap .react-tel-input .form-control {
  background: #141824 !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .lg-phone-wrap .react-tel-input .flag-dropdown {
  background: #1e2538 !important;
  border-color: var(--color-border) !important;
}

/* ── E. pol-* (Políticas / páginas informativas) ────────────────────── */
[data-theme="dark"] .pol-sidebar            { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pol-sidebar__heading   { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .pol-sidebar__link      { color: var(--color-text); border-bottom-color: var(--color-border); }
[data-theme="dark"] .pol-sidebar__link:hover { background: #252b3d; color: var(--color-primary); }
[data-theme="dark"] .pol-sidebar__link--active { background: #1a2540; color: var(--color-secondary); border-left-color: var(--color-secondary); }
[data-theme="dark"] .pol-sidebar__link-icon { color: var(--color-secondary); }

[data-theme="dark"] .pol-content-card       { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .pol-content            { color: var(--color-text); }
[data-theme="dark"] .pol-content h1,
[data-theme="dark"] .pol-content h2,
[data-theme="dark"] .pol-content h3,
[data-theme="dark"] .pol-content h4         { color: var(--color-secondary); }
[data-theme="dark"] .pol-content h2         { border-bottom-color: var(--color-border); }
[data-theme="dark"] .pol-content strong,
[data-theme="dark"] .pol-content b          { color: var(--color-text); }
[data-theme="dark"] .pol-content a          { color: var(--color-secondary); }
[data-theme="dark"] .pol-content table      { border-color: var(--color-border); }
[data-theme="dark"] .pol-content table th,
[data-theme="dark"] .pol-content table td   { border-color: var(--color-border); }
[data-theme="dark"] .pol-content table th   { background: #141824; color: var(--color-text); }
[data-theme="dark"] .pol-content table tr:hover td { background: #252b3d; }
[data-theme="dark"] .pol-content blockquote { background: #141824; border-left-color: var(--color-secondary); color: var(--color-text); }
[data-theme="dark"] .pol-content hr         { border-color: var(--color-border); }

/* ── F. ic-* (Info de cuenta) ───────────────────────────────────────── */
[data-theme="dark"] .ic-sidebar            { background: var(--color-surface); }
[data-theme="dark"] .ic-sidebar__link      { color: var(--color-text); }
[data-theme="dark"] .ic-sidebar__link:hover { background: #252b3d; }
[data-theme="dark"] .ic-sidebar__link--active { background: #1a2540; color: var(--color-primary); }
[data-theme="dark"] .ic-content-card       { background: var(--color-surface); }
[data-theme="dark"] .ic-content            { color: var(--color-text); }
[data-theme="dark"] .ic-content strong,
[data-theme="dark"] .ic-content b          { color: var(--color-text); }
[data-theme="dark"] .ic-content h2         { border-bottom-color: var(--color-border); }

/* ── G. pur-* (Historial de compras) ────────────────────────────────── */
[data-theme="dark"] .pur-section__icon-wrap { background: var(--color-primary); }
[data-theme="dark"] .pur-section__title     { color: var(--color-secondary); }
[data-theme="dark"] .pur-section__subtitle  { color: var(--color-text-muted); }

[data-theme="dark"] .pur-search__input {
  background: #1e2538;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .pur-search__icon { color: var(--color-text-muted); }

[data-theme="dark"] .pur-table-wrap   { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .pur-table__row   { border-bottom-color: var(--color-border); }
[data-theme="dark"] .pur-table__row:hover { background: #252b3d; }
[data-theme="dark"] .pur-table__row td { color: var(--color-text); }
[data-theme="dark"] .pur-table__amount { color: var(--color-accent); }

[data-theme="dark"] .pur-empty        { color: var(--color-text-muted); }

/* detalle de compra */
[data-theme="dark"] .pur-payments,
[data-theme="dark"] .pur-products     { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }

[data-theme="dark"] .pur-pay-table thead tr { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .pur-pay-table thead th { color: var(--color-secondary); }
[data-theme="dark"] .pur-pay-table__row     { border-bottom-color: var(--color-border); }
[data-theme="dark"] .pur-pay-table__row:hover { background: #252b3d; }
[data-theme="dark"] .pur-pay-table__row td  { color: var(--color-text); }
[data-theme="dark"] .pur-pay-table__id      { color: var(--color-text-muted); }

[data-theme="dark"] .pur-prod-table thead tr { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .pur-prod-table thead th { color: var(--color-secondary); }
[data-theme="dark"] .pur-prod-table__row     { border-bottom-color: var(--color-border); }
[data-theme="dark"] .pur-prod-table__row:hover { background: #252b3d; }
[data-theme="dark"] .pur-prod-table__row td  { color: var(--color-text); }
[data-theme="dark"] .pur-prod-table__img     { background: #202536; border-color: var(--color-border); }
[data-theme="dark"] .pur-prod-table__name    { color: var(--color-text); }
[data-theme="dark"] .pur-prod-table__total   { color: var(--color-accent); }

[data-theme="dark"] .pur-totals             { border-top-color: var(--color-border); }
[data-theme="dark"] .pur-totals__row        { color: var(--color-text); }
[data-theme="dark"] .pur-totals__label      { color: var(--color-text-muted); }
[data-theme="dark"] .pur-totals__row--total { color: var(--color-secondary); border-top-color: var(--color-secondary); }
[data-theme="dark"] .pur-totals__row--total .pur-totals__label { color: var(--color-secondary); }

/* ── H. quo-* (Cotizaciones) ────────────────────────────────────────── */
[data-theme="dark"] .quo-section__icon-wrap { background: var(--color-primary); }
[data-theme="dark"] .quo-section__title     { color: var(--color-secondary); }
[data-theme="dark"] .quo-section__subtitle  { color: var(--color-text-muted); }

[data-theme="dark"] .quo-search__input {
  background: #1e2538;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .quo-search__icon { color: var(--color-text-muted); }

[data-theme="dark"] .quo-table-wrap   { background: var(--color-surface); border-color: var(--color-border); box-shadow: none; }
[data-theme="dark"] .quo-table__row   { border-bottom-color: var(--color-border); }
[data-theme="dark"] .quo-table__row:hover { background: #252b3d; }
[data-theme="dark"] .quo-table__row td { color: var(--color-text); }
[data-theme="dark"] .quo-table__amount { color: var(--color-accent); }
[data-theme="dark"] .quo-table__date   { color: var(--color-text-muted); }
[data-theme="dark"] .quo-table__btn--receipt { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }

[data-theme="dark"] .quo-empty        { color: var(--color-text-muted); }
[data-theme="dark"] .quo-badge--neutral { background: #252b3d; color: var(--color-text-muted); }

/* detalle cotización */
[data-theme="dark"] .quo-card__header  { background: var(--color-primary); }
[data-theme="dark"] .quo-prod-table thead tr { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .quo-prod-table thead th { color: var(--color-secondary); }
[data-theme="dark"] .quo-prod-table__row     { border-bottom-color: var(--color-border); }
[data-theme="dark"] .quo-prod-table__row:hover { background: #252b3d; }
[data-theme="dark"] .quo-prod-table__row td  { color: var(--color-text); }
[data-theme="dark"] .quo-prod-table__name    { color: var(--color-text); }
[data-theme="dark"] .quo-prod-table__total   { color: var(--color-accent); }

[data-theme="dark"] .quo-totals__row        { color: var(--color-text); }
[data-theme="dark"] .quo-totals__label      { color: var(--color-text-muted); }
[data-theme="dark"] .quo-totals__value      { color: var(--color-text); }
[data-theme="dark"] .quo-totals__row--total { color: var(--color-secondary); border-top-color: var(--color-secondary); }

/* ── I. sos-* (Soporte / órdenes de servicio variante) ──────────────── */
[data-theme="dark"] .sos-section__icon-wrap { background: var(--color-primary); }
[data-theme="dark"] .sos-section__title     { color: var(--color-secondary); }
[data-theme="dark"] .sos-section__subtitle  { color: var(--color-text-muted); }

[data-theme="dark"] .sos-search__input {
  background: #1e2538;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .sos-search__icon { color: var(--color-text-muted); }

[data-theme="dark"] .sos-table-wrap   { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sos-table__row   { border-bottom-color: var(--color-border); }
[data-theme="dark"] .sos-table__row:hover { background: #252b3d; }
[data-theme="dark"] .sos-table td     { color: var(--color-text); }

[data-theme="dark"] .sos-empty        { background: var(--color-surface); }
[data-theme="dark"] .sos-info-card    { background: var(--color-surface); }

[data-theme="dark"] .sos-sidebar__card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sos-sidebar__card-header { background: #141824; border-bottom-color: var(--color-border); }
[data-theme="dark"] .sos-sidebar__card-body   { color: var(--color-text); }

[data-theme="dark"] .sos-totals__row   { color: var(--color-text); border-bottom-color: var(--color-border); }
[data-theme="dark"] .sos-totals__label { color: var(--color-text-muted); }
[data-theme="dark"] .sos-totals__value { color: var(--color-text); }
[data-theme="dark"] .sos-totals__row--total { color: var(--color-secondary); }

[data-theme="dark"] .sos-pdf-btn       { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .sos-pdf-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── J. dev-* (Dispositivos / notificaciones) ───────────────────────── */
[data-theme="dark"] .dev-section__icon-wrap  { background: var(--color-primary); }
[data-theme="dark"] .dev-section__title      { color: var(--color-secondary); }
[data-theme="dark"] .dev-section__subtitle   { color: var(--color-text-muted); }

[data-theme="dark"] .dev-search__input {
  background: #1e2538;
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .dev-search__icon { color: var(--color-text-muted); }

[data-theme="dark"] .dev-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .dev-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .dev-card__img-wrap    { background: #202536; }
[data-theme="dark"] .dev-card__device-name { color: var(--color-secondary); }
[data-theme="dark"] .dev-card__owner       { color: var(--color-text-muted); }

[data-theme="dark"] .dev-notif__table-wrap { background: var(--color-surface); }
[data-theme="dark"] .dev-notif__row        { border-bottom-color: var(--color-border); }
[data-theme="dark"] .dev-notif__row:hover  { background: #252b3d; }
[data-theme="dark"] .dev-notif__row td     { color: var(--color-text); }
[data-theme="dark"] .dev-notif__desc       { color: var(--color-text); }
[data-theme="dark"] .dev-detail-card      { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .dev-detail-card__img-wrap { background: #202536; }
[data-theme="dark"] .dev-detail-card__name    { color: var(--color-secondary); }
[data-theme="dark"] .dev-detail-card__value   { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════
   Quick View Modal  qv-*
════════════════════════════════════════════════════════════════════ */
.qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: qvFadeIn .18s ease;
}

@keyframes qvFadeIn { from { opacity:0; } to { opacity:1; } }

.qv-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: qvSlideUp .24s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}

@keyframes qvSlideUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.qv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-bg);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  z-index: 2;
  transition: background .15s, color .15s;
}

.qv-close:hover { background: var(--color-danger); color: #fff; }

.qv-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Imagen */
.qv-image {
  position: relative;
  background: #fafafa;
  border-radius: 12px 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-height: 320px;
}

.qv-img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.qv-discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-danger);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 3px;
  letter-spacing: .3px;
}

.qv-out-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px 0 0 12px;
  backdrop-filter: blur(1px);
}

.qv-out-overlay__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
  padding: 5px 14px;
  border-radius: 4px;
  background: rgba(255,255,255,.9);
  transform: rotate(-8deg);
}

/* Info */
.qv-info {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qv-brand {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-secondary);
  margin: 0;
}

.qv-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0;
}

.qv-model {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

.qv-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.qv-stock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qv-stock--in  { color: #1a7a3c; }
.qv-stock--in  .qv-stock__dot { background: #28a745; }
.qv-stock--out { color: var(--color-danger); }
.qv-stock--out .qv-stock__dot { background: var(--color-danger); }

/* Precio */
.qv-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.qv-price-old {
  font-size: 13px;
  color: #9aa0a6;
  text-decoration: line-through;
}

.qv-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}

.qv-price-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Acciones */
.qv-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.qv-btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
  font-family: inherit;
}

.qv-btn-cart:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.qv-btn-cart--disabled {
  background: #e0e3e9;
  color: #9aa0a6;
  cursor: not-allowed;
}

.qv-btn-login {
  display: block;
  text-align: center;
  padding: 12px 0;
  border: 1.5px solid var(--color-secondary);
  border-radius: 4px;
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.qv-btn-login:hover { background: var(--color-secondary); color: #fff; }

.qv-btn-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--color-bg);
  margin-top: 4px;
  transition: color .15s;
}

.qv-btn-detail:hover { color: var(--color-primary); }

/* Responsive */
@media (max-width: 640px) {
  .qv-inner                { grid-template-columns: 1fr; }
  .qv-image                { border-radius: 12px 12px 0 0; min-height: 200px; padding: 20px; }
  .qv-out-overlay          { border-radius: 12px 12px 0 0; }
  .qv-info                 { padding: 20px 18px 24px; }
  .qv-price                { font-size: 24px; }
}

/* Dark mode */
[data-theme="dark"] .qv-modal         { background: var(--color-surface); }
[data-theme="dark"] .qv-close         { background: #2d3448; color: var(--color-text-muted); }
[data-theme="dark"] .qv-close:hover   { background: var(--color-danger); color: #fff; }
[data-theme="dark"] .qv-image         { background: #202536; }
[data-theme="dark"] .qv-out-overlay   { background: rgba(10,14,30,.75); }
[data-theme="dark"] .qv-out-overlay__label { background: rgba(10,14,30,.9); color: #f04060; border-color: #f04060; }
[data-theme="dark"] .qv-brand         { color: var(--color-secondary); }
[data-theme="dark"] .qv-title         { color: var(--color-text); }
[data-theme="dark"] .qv-model         { color: var(--color-text-muted); }
[data-theme="dark"] .qv-price         { color: var(--color-accent); }
[data-theme="dark"] .qv-price-old     { color: var(--color-text-muted); }
[data-theme="dark"] .qv-price-label   { color: var(--color-text-muted); }
[data-theme="dark"] .qv-btn-cart--disabled { background: #252b3d; color: var(--color-text-muted); }
[data-theme="dark"] .qv-btn-login     { border-color: var(--color-secondary); color: var(--color-secondary); }
[data-theme="dark"] .qv-btn-login:hover { background: var(--color-secondary); color: #fff; }
[data-theme="dark"] .qv-btn-detail    { border-top-color: var(--color-border); color: var(--color-secondary); }
[data-theme="dark"] .qv-btn-detail:hover { color: #c5d9f0; }
[data-theme="dark"] .qv-stock--in  { color: #4ade80; }
[data-theme="dark"] .qv-stock--in  .qv-stock__dot { background: #4ade80; }

/* ════════════════════════════════════════════════════════════════════
   Sticky Cart Bar — psd-sticky-*  (ficha de producto)
════════════════════════════════════════════════════════════════════ */
.psd-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-primary);
  border-top: 3px solid var(--color-accent);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 1000;
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -4px 24px rgba(0,0,0,.22);
}

.psd-sticky-bar--visible { transform: translateY(0); }

.psd-sticky-bar__info {
  flex: 1;
  min-width: 0;
}

.psd-sticky-bar__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

.psd-sticky-bar__price {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1.2;
}

.psd-sticky-bar__currency {
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
}

.psd-sticky-bar__btn {
  flex-shrink: 0;
  padding: 10px 28px;
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .15s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.psd-sticky-bar__btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.psd-sticky-bar__btn--disabled {
  background: #4a617a;
  color: rgba(255,255,255,.6);
  cursor: not-allowed;
}

/* Dark mode */
[data-theme="dark"] .psd-sticky-bar          { background: #0d1625; }
[data-theme="dark"] .psd-sticky-bar__title   { color: rgba(220,227,238,.8); }
[data-theme="dark"] .psd-sticky-bar__btn--disabled { background: #252b3d; color: var(--color-text-muted); }

/* ════════════════════════════════════════════════════════════════════
   Section Wave Separators  wave-sep--*
════════════════════════════════════════════════════════════════════ */
.wave-sep {
  display: block;
  line-height: 0;
  overflow: hidden;
}

.wave-sep__svg {
  display: block;
  width: 100%;
}

/* white section → page background (var(--color-bg)) */
.wave-sep--light-to-bg              { background: #ffffff; }
.wave-sep--light-to-bg .wave-sep__path { fill: var(--color-bg); }

/* page background → OfferProducts navy */
.wave-sep--bg-to-navy              { background: var(--color-bg); }
.wave-sep--bg-to-navy .wave-sep__path { fill: var(--color-primary); }

/* Dark mode */
[data-theme="dark"] .wave-sep--light-to-bg              { background: #1a1e2d; }
[data-theme="dark"] .wave-sep--light-to-bg .wave-sep__path { fill: #0f1117; }

[data-theme="dark"] .wave-sep--bg-to-navy              { background: #0f1117; }
[data-theme="dark"] .wave-sep--bg-to-navy .wave-sep__path { fill: #001e38; }

/* ============================================================
   fv-* — Focus rings accesibles (:focus-visible)
   ============================================================
   Suprime el outline del navegador en todo elemento interactivo
   y lo reemplaza con un anillo de marca SÓLO cuando el usuario
   navega con teclado (focus-visible). Los usuarios de mouse/touch
   no ven ningún cambio visual.
   ============================================================ */

/* 1. Suprimir outline por defecto en focus (mouse/touch) */
*:focus { outline: none; }

/* 2. Anillo visible para navegación por teclado — light mode */
*:focus-visible {
   outline        : 2px solid var(--color-secondary);
   outline-offset : 3px;
   border-radius  : 3px;
}

/* 3. Sobreescribir con amarillo para elementos sobre fondo oscuro */
/* Header / nav (fondo navy) */
.hm-top *:focus-visible,
.hm-middle *:focus-visible,
.hm-bottom *:focus-visible,
.header *:focus-visible,
nav *:focus-visible {
   outline-color: var(--color-accent);
}

/* Botones primarios (fondo navy/azul) */
.bb-btn-primary:focus-visible,
.btn-primary:focus-visible,
.psd-sticky-bar__btn:focus-visible,
.bb-hero__btn:focus-visible {
   outline-color: var(--color-accent);
}

/* Botones y controles dentro del banner de ofertas (fondo navy) */
.op-container *:focus-visible {
   outline-color: var(--color-accent);
}

/* SkipToContent ya tiene su propio estilo, reforzamos */
.skip-to-content:focus-visible {
   outline       : 3px solid var(--color-accent);
   outline-offset: 2px;
}

/* 4. Dark mode — invertir colores */
[data-theme="dark"] *:focus-visible {
   outline-color: var(--color-accent);
}

/* Sobre fondo claro en dark mode (cards, inputs) */
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] select:focus-visible {
   outline-color : var(--color-accent);
   outline-offset: 2px;
}

/* 5. Inputs y selects — también mostrar borde de marca al enfocarse */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
   outline       : 2px solid var(--color-secondary);
   outline-offset: 0;
   border-color  : var(--color-secondary) !important;
   box-shadow    : 0 0 0 3px rgba(4, 87, 160, 0.15);
}

/* 6. Deshabilitar outline en elementos que ya tienen un estado visual propio */
/* (radio, checkbox — el estado checked es suficiente señal visual) */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
   outline        : 2px solid var(--color-secondary);
   outline-offset : 3px;
   box-shadow     : none;
}

/* ============================================================
   cmp-* — Comparador de productos
   ============================================================ */

/* ── Botón comparar en pc-body ── */
.pc-compare {
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 6px;
   width          : 100%;
   padding        : 7px 12px;
   margin-top     : 8px;
   background     : transparent;
   border         : 1px solid var(--color-border);
   border-radius  : 6px;
   color          : var(--color-text-muted);
   font-size      : 12px;
   font-weight    : 600;
   cursor         : pointer;
   transition     : border-color .15s, color .15s, background .15s;
}
.pc-compare:hover:not(:disabled) {
   border-color: var(--color-secondary);
   color       : var(--color-secondary);
   background  : rgba(4,87,160,.05);
}
.pc-compare--active {
   background  : var(--color-secondary);
   border-color: var(--color-secondary);
   color       : #fff;
}
.pc-compare--active:hover:not(:disabled) {
   background  : #034a8a;
   border-color: #034a8a;
}
.pc-compare:disabled {
   opacity: .4;
   cursor : not-allowed;
}

/* ── Barra flotante ── */
.cmp-bar {
   position  : fixed;
   bottom    : 0;
   left      : 0;
   right     : 0;
   z-index   : 2000;
   background: var(--color-primary);
   border-top: 3px solid var(--color-accent);
   display   : flex;
   align-items: center;
   gap       : 16px;
   padding   : 10px 24px;
   box-shadow: 0 -4px 20px rgba(0,0,0,.3);
   animation : cmp-bar-in .25s ease;
}
@keyframes cmp-bar-in {
   from { transform: translateY(100%); }
   to   { transform: translateY(0); }
}

.cmp-bar__label {
   display    : flex;
   flex-direction: column;
   align-items: center;
   gap        : 4px;
   color      : var(--color-accent);
   font-size  : 11px;
   font-weight: 700;
   flex-shrink: 0;
   min-width  : 40px;
}
.cmp-bar__label i { font-size: 18px; }

.cmp-bar__slots {
   display  : flex;
   gap      : 12px;
   flex     : 1;
   overflow-x: auto;
}

.cmp-bar__slot {
   position  : relative;
   width     : 64px;
   flex-shrink: 0;
   text-align: center;
}
.cmp-bar__thumb {
   width        : 56px;
   height       : 56px;
   object-fit   : contain;
   border-radius: 6px;
   background   : #fff;
   display      : block;
   margin       : 0 auto;
}
.cmp-bar__name {
   font-size  : 10px;
   color      : rgba(255,255,255,.75);
   margin     : 3px 0 0;
   overflow   : hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width  : 64px;
}
.cmp-bar__remove {
   position  : absolute;
   top       : -6px;
   right     : -4px;
   width     : 18px;
   height    : 18px;
   border-radius: 50%;
   background: #e53e3e;
   color     : #fff;
   border    : none;
   font-size : 12px;
   line-height: 1;
   cursor    : pointer;
   display   : flex;
   align-items: center;
   justify-content: center;
}

.cmp-bar__slot--empty {
   width       : 64px;
   height      : 56px;
   border      : 2px dashed rgba(255,255,255,.3);
   border-radius: 6px;
   display     : flex;
   flex-direction: column;
   align-items : center;
   justify-content: center;
   gap         : 4px;
   color       : rgba(255,255,255,.4);
   font-size   : 11px;
}
.cmp-bar__slot--empty i { font-size: 16px; }

.cmp-bar__actions {
   display    : flex;
   flex-direction: column;
   gap        : 6px;
   flex-shrink: 0;
}
.cmp-bar__btn {
   background : var(--color-accent);
   color      : var(--color-primary);
   border     : none;
   padding    : 8px 18px;
   border-radius: 6px;
   font-size  : 13px;
   font-weight: 700;
   cursor     : pointer;
   display    : flex;
   align-items: center;
   gap        : 6px;
   transition : background .15s, transform .1s;
   white-space: nowrap;
}
.cmp-bar__btn:hover:not(:disabled) { background: #ffd700; transform: scale(1.02); }
.cmp-bar__btn:disabled { opacity: .45; cursor: not-allowed; }
.cmp-bar__clear {
   background: transparent;
   color     : rgba(255,255,255,.65);
   border    : 1px solid rgba(255,255,255,.2);
   padding   : 5px 12px;
   border-radius: 6px;
   font-size : 12px;
   cursor    : pointer;
   text-align: center;
   transition: color .15s, border-color .15s;
}
.cmp-bar__clear:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* ── Modal overlay ── */
.cmp-overlay {
   position  : fixed;
   inset     : 0;
   background: rgba(0,0,0,.65);
   z-index   : 2100;
   display   : flex;
   align-items: flex-start;
   justify-content: center;
   padding   : 24px 16px;
   overflow-y: auto;
}

.cmp-modal {
   background   : var(--color-surface);
   border-radius: 12px;
   width        : 100%;
   max-width    : 960px;
   box-shadow   : 0 24px 64px rgba(0,0,0,.3);
   display      : flex;
   flex-direction: column;
   max-height   : calc(100vh - 48px);
   overflow     : hidden;
}

.cmp-modal__header {
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   padding        : 16px 24px;
   border-bottom  : 1px solid var(--color-border);
   flex-shrink    : 0;
}
.cmp-modal__title {
   font-size  : 18px;
   font-weight: 700;
   color      : var(--color-primary);
   display    : flex;
   align-items: center;
   gap        : 8px;
   margin     : 0;
}
.cmp-modal__title i { color: var(--color-accent); }
.cmp-modal__close {
   width       : 32px;
   height      : 32px;
   border      : none;
   background  : var(--color-bg);
   border-radius: 50%;
   cursor      : pointer;
   font-size   : 14px;
   color       : var(--color-text);
   display     : flex;
   align-items : center;
   justify-content: center;
   transition  : background .15s;
}
.cmp-modal__close:hover { background: #e2e8f0; }

.cmp-modal__body {
   overflow  : auto;
   flex      : 1;
}

/* ── Tabla comparativa ── */
.cmp-table {
   width           : 100%;
   border-collapse : collapse;
   table-layout    : fixed;
}
.cmp-table__col-label { width: 130px; }

.cmp-table__th {
   padding        : 12px 16px;
   background     : var(--color-bg);
   text-align     : center;
   border-bottom  : 2px solid var(--color-accent);
   vertical-align : middle;
}
.cmp-table__th--label { background: transparent; }

.cmp-table__remove {
   background  : transparent;
   border      : 1px solid #e53e3e;
   color       : #e53e3e;
   padding     : 4px 10px;
   border-radius: 4px;
   font-size   : 11px;
   cursor      : pointer;
   display     : inline-flex;
   align-items : center;
   gap         : 4px;
   transition  : background .15s, color .15s;
}
.cmp-table__remove:hover { background: #e53e3e; color: #fff; }

.cmp-table__row:nth-child(even) .cmp-table__cell,
.cmp-table__row:nth-child(even) .cmp-table__label {
   background: var(--color-bg);
}
.cmp-table__label {
   padding    : 14px 16px;
   font-size  : 12px;
   font-weight: 700;
   color      : var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: .5px;
   border-right: 1px solid var(--color-border);
   vertical-align: middle;
}
.cmp-table__cell {
   padding   : 14px 16px;
   text-align: center;
   border-right: 1px solid var(--color-border);
   vertical-align: middle;
   font-size : 13px;
   color     : var(--color-text);
}
.cmp-table__cell:last-child,
.cmp-table__label:last-child { border-right: none; }

/* Imagen */
.cmp-modal__img-link { display: block; }
.cmp-modal__img {
   width        : 120px;
   height       : 120px;
   object-fit   : contain;
   margin       : 0 auto;
   border-radius: 6px;
}

/* Nombre */
.cmp-modal__name {
   font-weight    : 600;
   color          : var(--color-primary);
   text-decoration: none;
   font-size      : 13px;
   display        : block;
   line-height    : 1.4;
}
.cmp-modal__name:hover { color: var(--color-secondary); text-decoration: underline; }

/* Precio */
.cmp-modal__price-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cmp-modal__price-old  { font-size: 12px; color: var(--color-text-muted); text-decoration: line-through; }
.cmp-modal__price      { font-size: 18px; font-weight: 800; color: var(--color-primary); }
.cmp-modal__price-label{ font-size: 11px; color: var(--color-text-muted); }
.cmp-modal__no-price   { font-size: 12px; color: var(--color-text-muted); font-style: italic; }

/* Stock */
.cmp-modal__stock      { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.cmp-modal__stock-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #a0aec0; }
.cmp-modal__stock--in  { color: #22543d; }
.cmp-modal__stock--in  .cmp-modal__stock-dot  { background: #48bb78; }
.cmp-modal__stock--out { color: #742a2a; }
.cmp-modal__stock--out .cmp-modal__stock-dot  { background: #fc8181; }

/* Responsive */
@media (max-width: 640px) {
   .cmp-bar        { flex-wrap: wrap; gap: 10px; padding: 8px 12px; }
   .cmp-bar__slots { order: -1; width: 100%; }
   .cmp-bar__actions { flex-direction: row; width: 100%; }
   .cmp-bar__btn   { flex: 1; justify-content: center; }
   .cmp-bar__clear { flex: 1; }
   .cmp-table__col-label { width: 90px; }
   .cmp-modal__img { width: 80px; height: 80px; }
}

/* Dark mode */
[data-theme="dark"] .cmp-bar { background: #001e38; }
[data-theme="dark"] .cmp-modal { background: var(--color-surface); }
[data-theme="dark"] .cmp-modal__header { border-color: var(--color-border); }
[data-theme="dark"] .cmp-modal__title  { color: var(--color-text); }
[data-theme="dark"] .cmp-modal__close  { background: #252b3d; color: var(--color-text); }
[data-theme="dark"] .cmp-modal__close:hover { background: #1a1e2d; }
[data-theme="dark"] .cmp-table__th     { background: #1a1e2d; }
[data-theme="dark"] .cmp-table__row:nth-child(even) .cmp-table__cell,
[data-theme="dark"] .cmp-table__row:nth-child(even) .cmp-table__label { background: #141824; }
[data-theme="dark"] .cmp-table__label  { color: var(--color-text-muted); border-color: var(--color-border); }
[data-theme="dark"] .cmp-table__cell   { color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .cmp-modal__name   { color: var(--color-text); }
[data-theme="dark"] .cmp-modal__price  { color: var(--color-text); }
[data-theme="dark"] .cmp-modal__stock--in  { color: #9ae6b4; }
[data-theme="dark"] .cmp-modal__stock--out { color: #feb2b2; }
[data-theme="dark"] .pc-compare         { border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .pc-compare:hover:not(:disabled) { border-color: var(--color-secondary); color: var(--color-secondary); background: rgba(4,87,160,.12); }
[data-theme="dark"] .pc-compare--active { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }


/* ══════════════════════════════════════════════════════════════════════
   VARIANTES DE PRODUCTCARD POR TEMA
   ══════════════════════════════════════════════════════════════════════ */

/* ── Electrode (pc-card--el) ─────────────────────────────────────── */
.pc-card--el {
   box-shadow : none;
   border     : 1px solid var(--color-border);
   border-radius: var(--radius-base);
}
.pc-card--el .pc-img-wrap { border-bottom: 1px solid var(--color-border); }
.pc-card--el .pc-title    { font-size: 13px; font-weight: 500; }
.pc-card--el .pc-price--sale { color: var(--color-price-sale); font-weight: 800; font-size: 18px; }
.pc-badge--el-discount {
   display       : inline-block;
   padding       : 2px 7px;
   margin-bottom : 6px;
   border-radius : var(--radius-sm);
   background    : var(--color-secondary);
   color         : #fff;
   font-size     : 11px;
   font-weight   : 700;
}
.pc-el-actions {
   display    : flex;
   gap        : 8px;
   margin-top : 10px;
   align-items: center;
}
.pc-btn-cart--dark {
   background  : var(--color-btn-primary-bg);
   color       : var(--color-btn-primary-text);
   flex        : 1;
}
.pc-btn-cart--dark:hover:not(:disabled) { opacity: .88; }
.pc-wish--el {
   background    : transparent;
   border        : 1px solid var(--color-border);
   border-radius : var(--radius-sm);
   padding       : 7px 10px;
   color         : var(--color-text-muted);
   font-size     : 16px;
   cursor        : pointer;
   transition    : color .2s, border-color .2s;
}
.pc-wish--el:hover, .pc-wish--el.pc-wish--active { color: var(--color-danger); border-color: var(--color-danger); }

/* ── Minimal (pc-card--min) ──────────────────────────────────────── */
.pc-card--min {
   border-radius : var(--radius-lg);
   box-shadow    : var(--shadow-card);
   border        : none;
   overflow      : hidden;
}
.pc-card--min .pc-img-wrap { position: relative; overflow: hidden; }
.pc-card--min .pc-img      { transition: transform .4s ease; }
.pc-card--min:hover .pc-img { transform: scale(1.04); }
.pc-badge--min-discount {
   position      : absolute;
   top           : 10px;
   left          : 10px;
   padding       : 3px 9px;
   border-radius : var(--radius-base);
   background    : var(--color-accent);
   color         : var(--color-text);
   font-size     : 11px;
   font-weight   : 700;
}
.pc-min-actions {
   position        : absolute;
   bottom          : 0;
   left            : 0; right: 0;
   display         : flex;
   justify-content : center;
   gap             : 8px;
   padding         : 12px;
   background      : linear-gradient(to top, rgba(0,0,0,.35), transparent);
   opacity         : 0;
   transform       : translateY(6px);
   transition      : opacity .25s, transform .25s;
}
.pc-card--min:hover .pc-min-actions { opacity: 1; transform: translateY(0); }
.pc-min-btn {
   width         : 36px;
   height        : 36px;
   border-radius : 50%;
   background    : #fff;
   color         : var(--color-text);
   border        : none;
   cursor        : pointer;
   font-size     : 14px;
   display       : flex;
   align-items   : center;
   justify-content: center;
   transition    : background .2s, color .2s;
}
.pc-min-btn:hover          { background: var(--color-primary); color: #fff; }
.pc-min-btn--active        { color: var(--color-danger); }
.pc-body--min              { padding: 12px 14px 16px; }
.pc-card--min .pc-title    { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.pc-card--min .pc-price    { font-size: 17px; }
.pc-min-out { font-size: 11px; color: var(--color-danger); margin-top: 4px; display: block; }

/* ── Header Minimal (sin HeaderTop) ─────────────────────────────── */
.hm-header--minimal .hm-top { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   DISTRIBUTOR STRIP — tira horizontal CTA estilo minimal
   ═══════════════════════════════════════════════════════════════════ */
.dist-strip {
  background: var(--color-primary);
  padding: 0;
  margin: 48px 0 0;
}

.dist-strip__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 12px 0;
}

/* Badge izquierdo — bloque sólido invertido */
.dist-strip__tag {
  flex-shrink: 0;
  background: #fff;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 8px 16px;
  white-space: nowrap;
}

/* Separador vertical */
.dist-strip__divider {
  flex-shrink: 0;
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.25);
}

/* Texto principal */
.dist-strip__headline {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -.2px;
}

/* Nota secundaria */
.dist-strip__note {
  flex-shrink: 0;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

/* Botón derecho — outlined blanco */
.dist-strip__btn {
  flex-shrink: 0;
  display: inline-block;
  padding: 10px 22px;
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.dist-strip__btn:hover {
  background: #fff;
  color: var(--color-primary);
}

/* Overrides por tema — el fondo cambia según el color primario de cada tema */

/* Electrode: azul pizarrón */
[data-color-scheme="electrode"] .dist-strip { background: var(--color-primary); }

/* Minimal: negro puro */
[data-color-scheme="minimal"] .dist-strip { background: #000; }
[data-color-scheme="minimal"] .dist-strip__tag { background: var(--color-accent); color: #fff; }
[data-color-scheme="minimal"] .dist-strip__btn { border-color: rgba(255,255,255,.7); }

/* Mercado: azul ML */
[data-color-scheme="mercado"] .dist-strip { background: var(--color-primary); }
[data-color-scheme="mercado"] .dist-strip__tag { background: var(--color-accent); color: #333; }

/* DarkTech: negro profundo + acento neon */
[data-color-scheme="darktech"] .dist-strip {
  background: #0d0d14;
  border-top: 1px solid rgba(0,212,255,.15);
  border-bottom: 1px solid rgba(0,212,255,.15);
}
[data-color-scheme="darktech"] .dist-strip__tag {
  background: #00d4ff;
  color: #0a0a0f;
}
[data-color-scheme="darktech"] .dist-strip__headline { color: #e2e8f0; }
[data-color-scheme="darktech"] .dist-strip__btn {
  border-color: rgba(0,212,255,.5);
  color: #00d4ff;
}
[data-color-scheme="darktech"] .dist-strip__btn:hover {
  background: #00d4ff;
  color: #0a0a0f;
}

/* Responsive */
@media (max-width: 767px) {
  .dist-strip__inner { gap: 14px; flex-wrap: wrap; min-height: unset; padding: 16px 0; }
  .dist-strip__headline { font-size: 15px; order: 3; flex-basis: 100%; }
  .dist-strip__btn { order: 2; margin-left: auto; }
  .dist-strip__divider { display: none; }
}
@media (max-width: 480px) {
  .dist-strip__btn { width: 100%; text-align: center; order: 4; }
  .dist-strip__headline { font-size: 14px; }
}