/* ============================================
   PUBLIC CATALOG — Explorar catálogo maestro
   Consistent with POS design system
   ============================================ */

/* ---------- PUBLIC CATALOG OVERLAY ---------- */
#publicCatalogOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-rgba);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: var(--space-4);
  animation: modal-overlay-in var(--transition-normal) ease-out;
}

#publicCatalogOverlay[hidden] {
  display: none !important;
}

#publicCatalogOverlay:not([hidden]) {
  display: flex !important;
}

#publicCatalogOverlay .modal-box.full {
  max-width: 95vw;
  max-height: 90vh;
  height: calc(100vh - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- HEADER ---------- */
.public-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.public-catalog-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-lg);
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.public-catalog-title svg {
  color: var(--color-electric-blue);
}

.public-catalog-subtitle {
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  margin: 0;
  flex-basis: 100%;
}

/* ---------- SEARCH & CATEGORIES ---------- */
.public-catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-bottom: var(--space-3);
}

.public-catalog-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.public-catalog-search {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-base);
  outline: none;
  min-height: var(--control-h-lg);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-3) center;
}

.public-catalog-search:focus {
  border-color: var(--color-electric-blue);
  box-shadow: var(--ring-focus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230077FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.public-catalog-search::placeholder {
  color: var(--color-text-placeholder);
}

.public-catalog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}

.public-catalog-category-chip {
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  min-height: var(--control-h-sm);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
}

.public-catalog-category-chip:hover {
  border-color: var(--color-electric-blue);
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.public-catalog-category-chip.active {
  background: var(--color-electric-blue);
  border-color: var(--color-electric-blue);
  color: #fff;
}

.public-catalog-category-chip svg {
  font-size: 10px;
}

/* ---------- RESULTS ---------- */
.public-catalog-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}

.public-catalog-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.public-catalog-count {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.public-catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.public-catalog-empty svg {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.public-catalog-empty-title {
  font-family: var(--font-mono);
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.public-catalog-empty-sub {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  margin: 0;
}

/* ---------- PRODUCT GRID ---------- */
.public-catalog-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (min-width: 480px) {
  .public-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (min-width: 768px) {
  .public-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (min-width: 1024px) {
  .public-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ---------- PRODUCT CARD ---------- */
.public-catalog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.public-catalog-card:hover {
  border-color: var(--color-electric-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.public-catalog-card.already-added {
  border-color: var(--color-success-green);
  background: var(--color-success-bg);
}

.public-catalog-card.already-added:hover {
  border-color: var(--color-success-green);
  box-shadow: 0 0 0 1px var(--color-success-green);
}

/* Thumbnail */
.public-catalog-thumb {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.public-catalog-thumb-placeholder {
  width: 100%;
  height: 140px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 32px;
  border-bottom: 1px solid var(--color-border);
}

/* Card content */
.public-catalog-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: var(--space-2);
  min-width: 0;
}

.public-catalog-name {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.public-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.public-catalog-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.public-catalog-category svg {
  font-size: 9px;
}

.public-catalog-presentation {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.public-catalog-barcode {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
}

/* Already added badge */
.public-catalog-added-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-success-green);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-green);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.public-catalog-added-badge svg {
  font-size: 10px;
}

/* Card actions */
.public-catalog-card-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-hover);
}

.public-catalog-add-btn {
  flex: 1;
  min-height: var(--control-h-md);
  background: var(--color-electric-blue);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-xs);
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.public-catalog-add-btn:hover:not(:disabled) {
  background: var(--color-electric-blue-light);
  box-shadow: var(--shadow-glow-blue);
  transform: scale(1.02);
}

.public-catalog-add-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.public-catalog-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-text-muted);
}

.public-catalog-add-btn svg {
  font-size: 14px;
}

.public-catalog-view-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: var(--control-h-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.public-catalog-view-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-electric-blue);
}

.public-catalog-view-btn svg {
  font-size: 16px;
}

/* ---------- LOADING STATE ---------- */
.public-catalog-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  gap: var(--space-3);
}

.public-catalog-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-electric-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ---------- ERROR STATE ---------- */
.public-catalog-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-error);
  gap: var(--space-3);
}

.public-catalog-error svg {
  font-size: 48px;
}

.public-catalog-error-title {
  font-family: var(--font-mono);
  font-size: var(--font-base);
  font-weight: 700;
  margin: 0;
}

.public-catalog-error-sub {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  margin: 0;
}

.public-catalog-retry-btn {
  min-height: var(--control-h-md);
  background: var(--color-electric-blue);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-xs);
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  transition: background var(--transition-normal);
}

.public-catalog-retry-btn:hover {
  background: var(--color-electric-blue-light);
}

/* ---------- ADD TO STORE MODAL ---------- */
#addToStoreOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-rgba);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  padding: var(--space-4);
  animation: modal-overlay-in var(--transition-normal) ease-out;
}

#addToStoreOverlay[hidden] {
  display: none !important;
}

#addToStoreOverlay:not([hidden]) {
  display: flex !important;
}

#addToStoreOverlay .modal-box {
  max-width: 420px;
}

.add-to-store-product-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--font-base);
  color: var(--color-text-primary);
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.add-to-store-field {
  margin-bottom: var(--space-3);
}

.add-to-store-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.add-to-store-field input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-base);
  outline: none;
  min-height: var(--control-h-md);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  box-sizing: border-box;
}

.add-to-store-field input:focus {
  border-color: var(--color-electric-blue);
  box-shadow: var(--ring-focus);
}

.add-to-store-field input::placeholder {
  color: var(--color-text-placeholder);
}

.add-to-store-field input:invalid {
  border-color: var(--color-error);
}

.add-to-store-field input:invalid:focus {
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

.add-to-store-hint {
  font-family: var(--font-ui);
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.add-to-store-type-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  padding: var(--space-2);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.add-to-store-type-info svg {
  font-size: 14px;
  color: var(--color-info);
}

/* ---------- OFFLINE / NO CONNECTION ---------- */
.public-catalog-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-warning);
  gap: var(--space-3);
}

.public-catalog-offline svg {
  font-size: 48px;
}

.public-catalog-offline-title {
  font-family: var(--font-mono);
  font-size: var(--font-base);
  font-weight: 700;
  margin: 0;
}

.public-catalog-offline-sub {
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  margin: 0;
  max-width: 320px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .public-catalog-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .public-catalog-toolbar {
    gap: var(--space-2);
  }

  .public-catalog-search {
    min-height: var(--control-h-md);
  }

  .public-catalog-category-chip {
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    font-size: 10px;
  }

  .public-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .public-catalog-thumb,
  .public-catalog-thumb-placeholder {
    height: 120px;
  }

  .public-catalog-name {
    font-size: var(--font-xs);
  }

  .public-catalog-card-actions {
    flex-direction: column;
  }

  .public-catalog-view-btn {
    min-width: 100%;
  }
}

@media (max-width: 480px) {
  .public-catalog-grid {
    grid-template-columns: 1fr;
  }

  .public-catalog-thumb,
  .public-catalog-thumb-placeholder {
    height: 140px;
  }
}

/* ---------- PRINT STYLES ---------- */
@media print {
  #publicCatalogOverlay,
  #addToStoreOverlay {
    display: none !important;
  }
}