{
  "version": 3,
  "sources": ["src/app/features/compare/compare-page.component.css"],
  "sourcesContent": ["/* ==========================================================================\n   ComparePage — layout + tabla de comparación\n   Tokens exclusivamente; sin hex hardcoded (salvo resalte de celda diff, doc).\n   ========================================================================== */\n\n.compare-page {\n  max-width: var(--grid-max-width);\n  margin: 0 auto;\n  padding: var(--space-10) var(--grid-margin) var(--space-20);\n}\n\n/* Utility accesible: texto solo para lectores de pantalla. Local al\n   componente; si en el futuro se usa en otros sitios se promoverá a\n   styles globales. */\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ── Header ───────────────────────────────────────────────── */\n.compare-page__header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin-bottom: var(--space-8);\n  flex-wrap: wrap;\n}\n\n.compare-page__back {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-text-secondary);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  text-decoration: none;\n  transition: color var(--transition-fast);\n}\n\n.compare-page__back:hover {\n  color: var(--color-action-primary);\n}\n\n.compare-page__title {\n  flex: 1 1 auto;\n  margin: 0;\n  font-family: var(--font-family-heading);\n  font-size: var(--text-size-3xl);\n  font-weight: var(--font-weight-heading-bold);\n  color: var(--color-text-primary);\n  line-height: var(--leading-tight);\n}\n\n.compare-page__clear {\n  padding: var(--space-2) var(--space-3);\n  background-color: transparent;\n  border: 1px solid var(--color-border-primary);\n  color: var(--color-text-secondary);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  cursor: pointer;\n  border-radius: var(--radius-button);\n  transition:\n    color var(--transition-fast),\n    border-color var(--transition-fast);\n}\n\n.compare-page__clear:hover {\n  color: var(--color-action-danger);\n  border-color: var(--color-action-danger);\n}\n\n/* ── Estados (loading/error/empty) ────────────────────────── */\n.compare-page__state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: var(--space-4);\n  padding: var(--space-16) var(--space-4);\n  background-color: var(--color-surface-secondary);\n}\n\n.compare-page__state--error {\n  color: var(--color-state-error);\n}\n\n.compare-page__mascot {\n  max-width: 120px;\n  height: auto;\n  margin-bottom: var(--space-2);\n}\n\n.compare-page__empty-title {\n  margin: 0;\n  font-family: var(--font-family-heading);\n  font-size: var(--text-size-xl);\n  font-weight: var(--font-weight-heading);\n  color: var(--color-text-primary);\n}\n\n.compare-page__empty-text {\n  margin: 0;\n  max-width: 32rem;\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  color: var(--color-text-secondary);\n  line-height: var(--leading-relaxed);\n}\n\n.compare-page__empty-cta {\n  color: inherit;\n  text-decoration: none;\n}\n\n.compare-page__retry {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-1) 0;\n}\n\n/* Skeleton loader */\n.compare-page__skeleton {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n\n.compare-page__skeleton-head {\n  height: 180px;\n  background: linear-gradient(\n    90deg,\n    var(--color-skeleton-base) 25%,\n    var(--color-skeleton-shine) 50%,\n    var(--color-skeleton-base) 75%\n  );\n  background-size: 200% 100%;\n  animation: compare-shimmer 1.5s ease-in-out infinite;\n}\n\n.compare-page__skeleton-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n\n.compare-page__skeleton-row {\n  height: 36px;\n  background: linear-gradient(\n    90deg,\n    var(--color-skeleton-base) 25%,\n    var(--color-skeleton-shine) 50%,\n    var(--color-skeleton-base) 75%\n  );\n  background-size: 200% 100%;\n  animation: compare-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes compare-shimmer {\n  0% { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .compare-page__skeleton-head,\n  .compare-page__skeleton-row {\n    animation: none;\n  }\n}\n\n/* ── Banners ──────────────────────────────────────────────── */\n.compare-page__banner {\n  padding: var(--space-3) var(--space-4);\n  margin-bottom: var(--space-3);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  border-left: 3px solid;\n}\n\n.compare-page__banner--warning {\n  background-color: color-mix(in srgb, var(--color-state-warning) 10%, transparent);\n  border-color: var(--color-state-warning);\n  color: var(--color-text-primary);\n}\n\n.compare-page__banner--error {\n  background-color: color-mix(in srgb, var(--color-state-error) 10%, transparent);\n  border-color: var(--color-state-error);\n  color: var(--color-text-primary);\n}\n\n/* ── Tabla ────────────────────────────────────────────────── */\n.compare-page__table-wrap {\n  width: 100%;\n  overflow-x: auto;\n  border: 1px solid var(--color-border-primary);\n}\n\n.compare-table {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 720px;\n}\n\n.compare-table__corner {\n  width: 12rem;\n  background-color: var(--color-surface-secondary);\n  border-right: 1px solid var(--color-border-primary);\n  border-bottom: 1px solid var(--color-border-primary);\n}\n\n.compare-table__product-head {\n  position: relative;\n  padding: var(--space-5) var(--space-4);\n  min-width: 14rem;\n  text-align: left;\n  vertical-align: top;\n  border-right: 1px solid var(--color-border-primary);\n  border-bottom: 1px solid var(--color-border-primary);\n  background-color: var(--color-surface-primary);\n}\n\n.compare-table__product-head:last-child {\n  border-right: none;\n}\n\n.compare-table__remove {\n  position: absolute;\n  top: var(--space-2);\n  right: var(--space-2);\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--color-border-primary);\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  border-radius: var(--radius-full);\n  transition: color var(--transition-fast), border-color var(--transition-fast);\n}\n\n.compare-table__remove:hover {\n  color: var(--color-action-danger);\n  border-color: var(--color-action-danger);\n}\n\n.compare-table__thumb-link {\n  display: block;\n  margin-bottom: var(--space-3);\n}\n\n.compare-table__thumb {\n  width: 100%;\n  max-width: 140px;\n  aspect-ratio: 3 / 4;\n  object-fit: contain;\n  padding: var(--space-2);\n}\n\n.compare-table__eyebrow {\n  display: block;\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-xs);\n  color: var(--color-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 2px;\n}\n\n.compare-table__category {\n  display: block;\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-xs);\n  color: var(--color-text-secondary);\n  margin-bottom: var(--space-1);\n}\n\n.compare-table__name {\n  display: block;\n  margin-bottom: var(--space-2);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  font-weight: var(--font-weight-body-medium);\n  color: var(--color-text-primary);\n  text-decoration: none;\n  line-height: var(--leading-snug);\n}\n\n.compare-table__name:hover {\n  color: var(--color-action-primary);\n}\n\n.compare-table__price-block {\n  display: flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin-bottom: var(--space-2);\n}\n\n.compare-table__price {\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-lg);\n  font-weight: var(--font-weight-heading);\n  font-variant-numeric: var(--font-variant-numeric);\n  color: var(--color-text-price);\n}\n\n.compare-table__price-original {\n  font-size: var(--text-size-xs);\n  font-variant-numeric: var(--font-variant-numeric);\n  color: var(--color-text-secondary);\n  text-decoration: line-through;\n}\n\n.compare-table__discount {\n  font-size: var(--text-size-xs);\n  font-weight: var(--font-weight-body-medium);\n  color: var(--color-action-danger);\n}\n\n.compare-table__stock {\n  display: block;\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-xs);\n  color: var(--color-text-secondary);\n  margin-bottom: var(--space-2);\n}\n\n.compare-table__stock--warning {\n  color: var(--color-state-warning);\n  font-weight: var(--font-weight-body-medium);\n}\n\n.compare-table__stock--error {\n  color: var(--color-state-error);\n  font-weight: var(--font-weight-body-medium);\n}\n\n.compare-table__row-label {\n  position: sticky;\n  left: 0;\n  z-index: 1;\n  padding: var(--space-3) var(--space-4);\n  background-color: var(--color-surface-secondary);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  font-weight: var(--font-weight-body-medium);\n  color: var(--color-text-secondary);\n  text-align: left;\n  border-right: 1px solid var(--color-border-primary);\n  border-bottom: 1px solid var(--color-border-primary);\n  vertical-align: top;\n  width: 12rem;\n}\n\n.compare-table__cell {\n  padding: var(--space-3) var(--space-4);\n  font-family: var(--font-family-body);\n  font-size: var(--text-size-sm);\n  color: var(--color-text-primary);\n  border-right: 1px solid var(--color-border-primary);\n  border-bottom: 1px solid var(--color-border-primary);\n  vertical-align: top;\n  line-height: var(--leading-snug);\n}\n\n.compare-table__cell:last-child {\n  border-right: none;\n}\n\n/* Resalte de celda con valor distinto al menos de otra columna.\n   Se usa color literal rgba porque no hay token equivalente para el\n   tono translúcido del naranja primary al 8%; crear un token nuevo\n   excede el scope del sprint. Mantiene contraste AAA sobre texto primary. */\n.compare-table__cell--diff {\n  background-color: rgba(245, 154, 40, 0.08);\n}\n\n/* ── Responsive ───────────────────────────────────────────── */\n@media (max-width: 767px) {\n  .compare-page {\n    padding: var(--space-6) var(--space-3) var(--space-16);\n  }\n\n  .compare-page__title {\n    font-size: var(--text-size-2xl);\n  }\n\n  .compare-table__product-head {\n    min-width: 12rem;\n    padding: var(--space-3);\n  }\n\n  .compare-table__row-label {\n    width: 9rem;\n    padding: var(--space-2) var(--space-3);\n  }\n\n  .compare-table__cell {\n    padding: var(--space-2) var(--space-3);\n  }\n}\n"],
  "mappings": "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",
  "names": []
}