/*
 * Página de Catálogo de Ofertas y Canal de Reportes (v0.15.0)
 * Namespace .cda-catalogo-*, .cda-solapas-*, .cda-chip-*, .cda-oferta-*, .cda-reporte-*
 */

:root {
  --cda-font: 'Poppins', 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --cda-bg: #ffffff;
  --cda-surface: #ffffff;
  --cda-surface-alt: #f7f7f8;
  --cda-border: #e5e7eb;
  --cda-border-strong: #d1d5db;

  --cda-text: #0f0f0f;
  --cda-text-soft: #555555;
  --cda-text-muted: #888888;

  --cda-accent: #00a650;
  --cda-accent-hover: #008f45;

  --cda-chip-bg: #f2f2f2;
  --cda-chip-text: #0f0f0f;
  --cda-chip-hover: #e5e5e5;
  --cda-chip-active-bg: #0f0f0f;
  --cda-chip-active-text: #ffffff;

  --cda-radius-card: 10px;
  --cda-radius-chip: 10px;
  --cda-radius-badge: 6px;
  --cda-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --cda-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cda-bg: #141414;
    --cda-surface: #1e1e1e;
    --cda-surface-alt: #282828;
    --cda-border: #333333;
    --cda-border-strong: #444444;

    --cda-text: #f0f0f0;
    --cda-text-soft: #aaaaaa;
    --cda-text-muted: #777777;

    --cda-chip-bg: #2d2d2d;
    --cda-chip-text: #f0f0f0;
    --cda-chip-hover: #3a3a3a;
    --cda-chip-active-bg: #f0f0f0;
    --cda-chip-active-text: #0f0f0f;
  }
}

/* ============================================================
   1. CONTENEDOR PRINCIPAL
   ============================================================ */
.cda-catalogo-container,
.cda-catalogo-container * {
  box-sizing: border-box;
}

.cda-catalogo-container {
  font-family: var(--cda-font);
  color: var(--cda-text);
  line-height: 1.4;
  margin: 20px auto;
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  -webkit-font-smoothing: antialiased;
}

.cda-catalogo__header {
  margin-bottom: 20px;
}

.cda-catalogo__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--cda-text);
  margin: 0;
}

/* ============================================================
   2. BOTONERA DE SOLAPAS Y CHIPS (Container Query)
   ============================================================ */
.cda-solapas-wrapper {
  container-type: inline-size;
  margin-bottom: 24px;
  width: 100%;
  min-width: 0;
}

.cda-solapas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* En angosto/touch, la fila de solapas (Todas / Bajaron de precio / Más vistas /
   Destacadas) debe deslizar de costado igual que la tira de categorías de abajo,
   no partirse en una segunda línea. Pedido de Aldo, 2026-08-31: "debería verse
   igual la línea de arriba". */
@container (max-width: 700px) {
  .cda-solapas {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cda-solapas::-webkit-scrollbar {
    display: none;
  }
  .cda-solapas > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.cda-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cda-chip-bg);
  color: var(--cda-chip-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--cda-radius-chip);
  /* !important: la mayoría de los temas ponen `text-decoration: underline` en `a` con más
     especificidad que una sola clase (p.ej. `.entry-content a`) -- sin esto, el subrayado
     del tema se cuela igual. Pedido de Aldo, 2026-08-30: "quitar el underline en los botones". */
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cda-chip:hover,
.cda-chip:focus,
.cda-chip:visited {
  background-color: var(--cda-chip-hover);
  color: var(--cda-chip-text);
  text-decoration: none !important;
}

.cda-chip--active:visited {
  color: var(--cda-chip-active-text) !important;
}

.cda-chip--active {
  background-color: var(--cda-chip-active-bg) !important;
  color: var(--cda-chip-active-text) !important;
  font-weight: 600;
}

.cda-chip--sm {
  font-size: 13px;
  padding: 6px 12px;
}

.cda-select-cat-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.cda-select-cat {
  font-family: var(--cda-font);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--cda-radius-chip);
  background-color: var(--cda-chip-bg);
  color: var(--cda-chip-text);
  border: 1px solid var(--cda-border);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}

.cda-select-cat:hover,
.cda-select-cat:focus {
  border-color: var(--cda-border-strong);
}

/* Solo aparece con <noscript> -- el submit visible que reemplaza al `change` de JS. */
.cda-select-cat__ir {
  font-family: var(--cda-font);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--cda-radius-chip);
  background-color: var(--cda-chip-bg);
  color: var(--cda-chip-text);
  border: 1px solid var(--cda-border-strong);
  cursor: pointer;
}

.cda-cat-strip-touch {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cda-cat-strip-touch::-webkit-scrollbar {
  display: none;
}

.cda-cat-strip-touch > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* En touch / móvil angosto (< 700px) */
@container (max-width: 700px) {
  .cda-select-cat-wrap {
    display: none;
  }
  .cda-cat-strip-touch {
    display: flex;
  }
}

/* Con mouse, el desplegable SIEMPRE gana -- aunque el contenedor sea angosto (una columna
   de un tema de 3 columnas, por ejemplo). Va DESPUÉS de la regla de arriba a propósito,
   para poder pisarla: una tira que scrollea de costado no se descubre con el mouse.
   Pedido explícito de Aldo, 2026-08-30. Encontrado en auditoría: esta regla faltaba por
   completo -- sin ella, la columna angosta mostraba la tira igual, mouse o no. */
@media (hover: hover) and (pointer: fine) {
  .cda-select-cat-wrap {
    display: inline-flex !important;
  }
  .cda-cat-strip-touch {
    display: none !important;
  }
}

/* ============================================================
   3. GRILLA DE OFERTAS
   ============================================================ */
.cda-catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

@media (max-width: 480px) {
  .cda-catalogo-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
}

/* ============================================================
   4. FICHA DE OFERTA (.cda-oferta-card) — Componente NUEVO
   ============================================================ */
.cda-oferta-card {
  position: relative;
  background-color: var(--cda-surface);
  border: 1px solid var(--cda-border);
  border-radius: var(--cda-radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cda-oferta-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cda-shadow-hover);
  border-color: var(--cda-border-strong);
}

.cda-oferta-card__head {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

.cda-oferta-badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: var(--cda-radius-badge);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.cda-oferta-badge--descuento {
  background-color: var(--cda-accent);
  color: #ffffff;
}

.cda-oferta-badge--envio {
  background-color: var(--cda-accent);
  color: #ffffff;
}

.cda-oferta-card__media {
  margin: 0;
  padding: 12px;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-bottom: 1px solid var(--cda-border);
}

.cda-oferta-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.cda-oferta-card__ph {
  width: 100%;
  height: 100%;
  background-color: var(--cda-surface-alt);
}

.cda-oferta-card__body {
  /* padding-top a 0: con 6px seguía quedando espacio en blanco visible entre el
     borde inferior de la imagen y el título. Reportado en vivo, 2026-08-31 (2do aviso). */
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
}

.cda-oferta-card__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--cda-text);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-height, NO height fija: con una altura fija que no coincide EXACTO con
     2 líneas * line-height, el navegador recorta la 3ra línea a la mitad, tapando
     también el "…" que el propio line-clamp agrega -- se ve cortado a lo bruto en
     vez de terminar en puntos suspensivos. Encontrado en vivo, 2026-08-30 (captura
     de Aldo: "Celular Nubia Music 2 de / 128 GB y 4 GB RAM en" sin puntos). Con
     min-height la caja puede ser exactamente 2 líneas y el recorte + "…" los pone
     el propio `line-clamp`, no un límite de alto en conflicto con él. */
  min-height: calc(12px * 1.35 * 2);
}

.cda-oferta-card__prices {
  /* Apilado vertical (precio tachado arriba, precio real abajo), no en fila:
     en fila, dos precios largos (ej. "$ 289.999,00" + "$ 229.998,99") no entran
     en el ancho de la tarjeta y el precio real -- el dato que más importa -- podía
     recortarse o empujarse fuera de la vista. Reportado en vivo, 2026-08-31. */
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

.cda-oferta-card__price-old {
  font-size: 12px;
  line-height: 1.2;
  color: var(--cda-text-muted);
  text-decoration: line-through;
}

.cda-oferta-card__price {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--cda-accent);
}

.cda-oferta-card__installments {
  font-size: 12px;
  color: var(--cda-accent);
  font-weight: 600;
  margin: 0;
}

.cda-oferta-card__oportunidad {
  font-size: 12px;
  font-weight: 600;
  color: var(--cda-accent);
  margin: 2px 0 0;
}

.cda-oferta-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.cda-oferta-card__btn-comprar {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cda-chip-bg);
  color: var(--cda-chip-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: var(--cda-radius-chip);
  text-decoration: none !important;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cda-oferta-card__btn-comprar:hover,
.cda-oferta-card__btn-comprar:visited {
  background-color: var(--cda-chip-hover);
  color: var(--cda-chip-text);
  text-decoration: none !important;
}

.cda-oferta-card__btn-reportar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--cda-border);
  background-color: transparent;
  color: var(--cda-text-muted);
  border-radius: var(--cda-radius-chip);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cda-oferta-card__btn-reportar:hover {
  background-color: var(--cda-chip-bg);
  color: var(--cda-text);
  border-color: var(--cda-border-strong);
}

.cda-oferta-card__icon-flag {
  pointer-events: none;
}

/* ============================================================
   5. ESTADOS VACÍOS
   ============================================================ */
.cda-estado-vacio {
  background-color: var(--cda-surface-alt);
  border: 1px dashed var(--cda-border);
  border-radius: var(--cda-radius-card);
  padding: 40px 20px;
  text-align: center;
  margin: 30px 0;
}

.cda-estado-vacio__texto {
  font-size: 15px;
  color: var(--cda-text-soft);
  margin: 0;
}

/* ============================================================
   6. PAGINACIÓN
   ============================================================ */
.cda-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--cda-border);
}

.cda-paginacion__enlace,
.cda-paginacion__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--cda-radius-chip);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--cda-text);
  background-color: var(--cda-chip-bg);
  transition: background-color 0.15s ease;
}

.cda-paginacion__enlace:hover,
.cda-paginacion__numero:hover,
.cda-paginacion__enlace:visited,
.cda-paginacion__numero:visited {
  background-color: var(--cda-chip-hover);
  text-decoration: none !important;
  color: var(--cda-text);
}

.cda-paginacion__numero--actual {
  background-color: var(--cda-chip-active-bg);
  color: var(--cda-chip-active-text);
  font-weight: 600;
}

.cda-paginacion__puntos {
  color: var(--cda-text-muted);
  padding: 0 4px;
}

/* ============================================================
   7. MODAL DE REPORTE (<dialog>)
   ============================================================ */
.cda-reporte-dialog {
  border: 1px solid var(--cda-border);
  border-radius: 12px;
  background-color: var(--cda-surface);
  color: var(--cda-text);
  padding: 0;
  max-width: 480px;
  width: 90vw;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  margin: auto;
}

.cda-reporte-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.cda-reporte-dialog__content {
  position: relative;
  padding: 24px;
}

.cda-reporte-dialog__btn-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--cda-text-muted);
  cursor: pointer;
  padding: 4px;
}

.cda-reporte-dialog__btn-cerrar:hover {
  color: var(--cda-text);
}

.cda-reporte-dialog__titulo {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--cda-text);
}

.cda-reporte-dialog__item-preview {
  background-color: var(--cda-surface-alt);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--cda-border);
}

.cda-reporte-dialog__item-label {
  font-size: 11px;
  color: var(--cda-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.cda-reporte-dialog__item-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--cda-text);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cda-reporte-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 16px;
}

.cda-reporte-legend {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--cda-text);
}

.cda-reporte-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cda-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cda-text);
  cursor: pointer;
}

.cda-radio-label input[type="radio"] {
  cursor: pointer;
  accent-color: var(--cda-accent);
}

.cda-reporte-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.cda-reporte-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cda-text);
}

.cda-reporte-textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--cda-font);
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--cda-border);
  background-color: var(--cda-surface);
  color: var(--cda-text);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.cda-reporte-textarea:focus {
  border-color: var(--cda-accent);
}

.cda-reporte-counter-wrap {
  text-align: right;
}

.cda-char-counter {
  font-size: 11px;
  color: var(--cda-text-muted);
}

.cda-reporte-error {
  background-color: #fde8e8;
  color: #c81e1e;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 14px;
}

.cda-reporte-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.cda-btn {
  font-family: var(--cda-font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--cda-radius-chip);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.cda-btn--primary {
  background-color: var(--cda-chip-active-bg);
  color: var(--cda-chip-active-text);
}

.cda-btn--primary:hover {
  opacity: 0.88;
}

.cda-btn--secondary {
  background-color: var(--cda-chip-bg);
  color: var(--cda-chip-text);
}

.cda-btn--secondary:hover {
  background-color: var(--cda-chip-hover);
}

.cda-reporte-exito {
  text-align: center;
  padding: 30px 10px;
}

.cda-reporte-exito__texto {
  font-size: 16px;
  color: var(--cda-accent);
  margin: 0;
}