/* Marketplace.do — Sistema de diseño (bandera RD)
 * Tailwind v3 via CDN se carga en includes/partials/head.php
 * Estos vars + utilities extienden a Tailwind.
 */

:root {
  /* Bandera RD — Pantone oficiales */
  --rd-blue:        #002D62;   /* Pantone 286 C — primario */
  --rd-blue-dark:   #001E45;
  --rd-blue-light:  #1E4D8B;
  --rd-blue-50:     #EBF1FB;   /* fondos suaves */
  --rd-blue-100:    #D6E2F5;
  --rd-red:         #CE1126;   /* Pantone 186 C — acentos / alertas */
  --rd-red-dark:    #A50E1F;
  --rd-red-light:   #E63946;
  --rd-white:       #FFFFFF;
  --rd-gray-50:     #F8FAFC;
  --rd-gray-100:    #F1F5F9;
  --rd-gray-200:    #E2E8F0;
  --rd-gray-500:    #64748B;
  --rd-gray-700:    #334155;
  --rd-gray-900:    #0F172A;

  /* Trust badges */
  --trust-blue:   var(--rd-blue);
  --trust-gold:   #CA8A04;
  --trust-green:  #16A34A;
  --trust-red:    var(--rd-red);
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--rd-gray-900);
  background: var(--rd-white);
}

h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing: -0.015em; }

/* Container 90% del viewport hasta 1440 */
.container-rd { width: 92%; max-width: 1440px; margin-inline: auto; }
@media (min-width: 1024px) { .container-rd { width: 90%; } }

/* Franja decorativa bandera (azul-rojo-azul) */
.flag-stripe {
  height: 3px;
  background: linear-gradient(
    to right,
    var(--rd-blue) 0 33.33%,
    var(--rd-red)  33.33% 66.66%,
    var(--rd-blue) 66.66% 100%
  );
}

/* Botones primarios */
.btn-primary {
  background: var(--rd-blue);
  color: var(--rd-white);
  padding: 0.625rem 1.125rem;
  border-radius: 0.625rem;
  font-weight: 600;
  transition: background .15s ease;
}
.btn-primary:hover { background: var(--rd-blue-dark); }

.btn-secondary {
  background: var(--rd-white);
  color: var(--rd-blue);
  border: 1.5px solid var(--rd-blue);
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  font-weight: 600;
}
.btn-secondary:hover { background: var(--rd-blue-50); }

.btn-danger {
  background: var(--rd-red);
  color: var(--rd-white);
  padding: 0.625rem 1.125rem;
  border-radius: 0.625rem;
  font-weight: 600;
}
.btn-danger:hover { background: var(--rd-red-dark); }

/* Card de anuncio */
.listing-card {
  background: var(--rd-white);
  border: 1px solid var(--rd-gray-200);
  border-radius: 0.875rem;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.listing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(0, 45, 98, 0.15);
  border-color: var(--rd-blue-100);
}
.listing-card .thumb {
  aspect-ratio: 1 / 1;
  background: var(--rd-gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--rd-gray-500);
  font-size: 3rem;
}
.listing-card .body { padding: 0.875rem 1rem 1rem; }
.listing-card .price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--rd-blue);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.listing-card .title {
  font-size: 0.95rem;
  color: var(--rd-gray-900);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 0.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.65em;
}
.listing-card .meta {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem;
  color: var(--rd-gray-500);
  margin-top: .5rem;
}

/* Trust badges en cards */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: var(--rd-blue-50);
  color: var(--rd-blue);
}
.trust-pill.gold { background: #FEF3C7; color: #92400E; }
.trust-pill.green { background: #DCFCE7; color: #166534; }
.trust-pill.red   { background: #FEE2E2; color: var(--rd-red-dark); }

/* Categoría chip */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--rd-white);
  color: var(--rd-gray-700);
  border: 1px solid var(--rd-gray-200);
  padding: .5rem .875rem;
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.cat-chip:hover { background: var(--rd-blue-50); color: var(--rd-blue); border-color: var(--rd-blue-100); }
.cat-chip.active { background: var(--rd-blue); color: var(--rd-white); border-color: var(--rd-blue); }

/* Search bar */
.search-bar {
  display: flex; align-items: center;
  background: var(--rd-white);
  border: 1.5px solid var(--rd-gray-200);
  border-radius: 0.75rem;
  padding: .25rem .25rem .25rem 1rem;
  transition: border-color .15s ease;
}
.search-bar:focus-within { border-color: var(--rd-blue); }
.search-bar input {
  flex: 1; border: 0; outline: 0; font-size: 0.95rem; background: transparent;
}

/* Hero compacto con bandera */
.hero-rd {
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(206, 17, 38, 0.06), transparent 60%),
    linear-gradient(180deg, var(--rd-blue-50) 0%, var(--rd-white) 100%);
}

/* Responsive grid de listings: máximo 4 cols (cards más grandes y legibles)
   Mobile 2 → Tablet 3 → Desktop 4 */
.grid-listings {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .grid-listings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .grid-listings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }

/* Scroll de categorías horizontal en mobile */
.cat-scroll {
  display: flex; gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.cat-scroll::-webkit-scrollbar { display: none; }

/* Top bar */
.topbar {
  background: var(--rd-white);
  border-bottom: 1px solid var(--rd-gray-200);
  position: sticky; top: 0; z-index: 30;
}

/* Logo "Marketplace.do" con punto rojo */
.logo-rd {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--rd-blue);
  letter-spacing: -0.02em;
}
.logo-rd .dot { color: var(--rd-red); }

/* Estado vacío del feed */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--rd-gray-500);
}
.empty-state .emoji { font-size: 3rem; }