/* ── CW-Reviews — Frontend Styles ───────────────────────────────────── */

.rw-widget-container {
  --rw-bg:          #ffffff;
  --rw-bg2:         #f7f7f5;
  --rw-bg3:         #f0ede8;
  --rw-text1:       #111111;
  --rw-text2:       #555555;
  --rw-text3:       #999999;
  --rw-border:      rgba(0,0,0,0.10);
  --rw-border2:     rgba(0,0,0,0.18);
  --rw-radius:      12px;
  --rw-radius-sm:   8px;
  --rw-google:      #4285F4;
  --rw-google-bg:   #E8F0FE;
  --rw-google-txt:  #1a56c4;
  --rw-yelp:        #D32323;
  --rw-yelp-bg:     #FDECEA;
  --rw-yelp-txt:    #a51b1b;
  --rw-facebook:    #1877F2;
  --rw-facebook-bg: #E7F3FF;
  --rw-facebook-txt:#0c5dc7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rw-text1);
}

/* Dark mode automático */
@media (prefers-color-scheme: dark) {
  .rw-widget-container:not([data-rw-theme="light"]) {
    --rw-bg:      #1e1e1e;
    --rw-bg2:     #2a2a2a;
    --rw-bg3:     #333333;
    --rw-text1:   #f0f0f0;
    --rw-text2:   #aaaaaa;
    --rw-text3:   #666666;
    --rw-border:  rgba(255,255,255,0.10);
    --rw-border2: rgba(255,255,255,0.20);
  }
}
.rw-widget-container[data-rw-theme="dark"] {
  --rw-bg:      #1e1e1e;
  --rw-bg2:     #2a2a2a;
  --rw-bg3:     #333333;
  --rw-text1:   #f0f0f0;
  --rw-text2:   #aaaaaa;
  --rw-text3:   #666666;
  --rw-border:  rgba(255,255,255,0.10);
  --rw-border2: rgba(255,255,255,0.20);
}

/* ── Layout ── */
.rw-widget { padding: 1rem 0; }

.rw-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2rem;
  color: var(--rw-text3);
  font-size: 14px;
}

.rw-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--rw-border2);
  border-top-color: var(--rw-text2);
  border-radius: 50%;
  animation: rw-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }

/* ── Header ── */
.rw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}
.rw-rating-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rw-avg-score {
  font-size: 26px;
  font-weight: 600;
  color: var(--rw-text1);
}
.rw-stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.rw-review-count { font-size: 12px; color: var(--rw-text3); }
.rw-page-context { font-size: 12px; color: var(--rw-text3); }
.rw-page-context strong { color: var(--rw-text2); }

/* ── Controls ── */
.rw-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}
.rw-platform-filters,
.rw-view-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rw-pill {
  padding: 4px 13px;
  font-size: 12px;
  border-radius: 20px;
  border: 0.5px solid var(--rw-border);
  background: var(--rw-bg);
  color: var(--rw-text2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.rw-pill:hover    { border-color: var(--rw-border2); color: var(--rw-text1); }
.rw-pill-active   { background: var(--rw-bg3); color: var(--rw-text1); font-weight: 500; border-color: var(--rw-border2); }

.rw-view-switcher {
  border: 0.5px solid var(--rw-border);
  border-radius: var(--rw-radius-sm);
  overflow: hidden;
  gap: 0;
}
.rw-view-btn {
  padding: 5px 13px;
  font-size: 12px;
  background: var(--rw-bg);
  border: none;
  border-right: 0.5px solid var(--rw-border);
  color: var(--rw-text2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.rw-view-btn:last-child { border-right: none; }
.rw-view-btn:hover      { background: var(--rw-bg2); }
.rw-view-btn-active     { background: var(--rw-bg3); color: var(--rw-text1); font-weight: 500; }

/* ── Grid de tarjetas ── */
.rw-grid {
  display: grid;
  gap: 12px;
  align-items: stretch;
}
.rw-cols-1 { grid-template-columns: 1fr; }
.rw-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rw-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rw-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive: mobile */
@media (max-width: 580px) {
  .rw-cols-2, .rw-cols-3, .rw-cols-4 { grid-template-columns: 1fr !important; }
  .rw-controls { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 581px) and (max-width: 860px) {
  .rw-cols-3, .rw-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Tarjeta individual ── */
.rw-card {
  background: var(--rw-bg);
  border: 0.5px solid var(--rw-border);
  border-radius: var(--rw-radius);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.rw-card:hover { border-color: var(--rw-border2); }

.rw-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.rw-author { display: flex; gap: 9px; align-items: center; }
.rw-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--rw-bg2);
  border: 0.5px solid var(--rw-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--rw-text2);
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.rw-author-name  { display: block; font-weight: 500; font-size: 13px; color: var(--rw-text1); }
.rw-review-date  { display: block; font-size: 11px; color: var(--rw-text3); }

.rw-review-text {
  margin: 0;
  padding: 0;
  border: none;
  flex: 1;
}
.rw-review-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--rw-text2);
  font-style: italic;
}
.rw-review-text p::before { content: '\201C'; }
.rw-review-text p::after  { content: '\201D'; }

.rw-card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 0.5px solid var(--rw-border);
}

.rw-source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rw-text3);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  border: 0.5px solid var(--rw-border);
  background: var(--rw-bg2);
  transition: all 0.15s;
  white-space: nowrap;
}
.rw-source-link:hover {
  background: var(--rw-bg3);
  border-color: var(--rw-border2);
  color: var(--rw-text1);
  text-decoration: none;
}
.rw-plat-logo      { flex-shrink: 0; display: block; }
.rw-external-icon  { flex-shrink: 0; opacity: 0.5; }

/* ── Badges de plataforma ── */
.rw-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rw-badge-google   { background: var(--rw-google-bg);   color: var(--rw-google-txt); }
.rw-badge-yelp     { background: var(--rw-yelp-bg);     color: var(--rw-yelp-txt); }
.rw-badge-facebook { background: var(--rw-facebook-bg); color: var(--rw-facebook-txt); }

/* ── Paginación ── */
.rw-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}
.rw-page-btn {
  padding: 5px 13px;
  font-size: 12px;
  background: var(--rw-bg);
  border: 0.5px solid var(--rw-border);
  color: var(--rw-text2);
  border-radius: var(--rw-radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.rw-page-btn:hover:not(:disabled)  { border-color: var(--rw-border2); color: var(--rw-text1); }
.rw-page-btn:disabled { opacity: 0.35; cursor: default; }

.rw-dots { display: flex; gap: 5px; align-items: center; }
.rw-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rw-border2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.rw-dot:hover     { transform: scale(1.3); }
.rw-dot-active    { background: var(--rw-text1); }

/* ── Footer ── */
.rw-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 0.5px solid var(--rw-border);
}
.rw-footer-label { font-size: 11px; color: var(--rw-text3); margin-right: auto; }

/* ── Empty / Error ── */
.rw-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--rw-text3);
  font-size: 13px;
}

/* ── Demo note ── */
.rw-demo-note {
  background: #FFF9E6;
  border: 0.5px solid #F0C050;
  border-radius: var(--rw-radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: #7A5A00;
  margin-bottom: 1rem;
}
.rw-demo-note a { color: #7A5A00; font-weight: 500; }

/* ── CreationWebs Brand Footer ── */
.cwr-brand-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 0.5rem;
  font-size: 10px;
  color: var(--rw-text3);
  letter-spacing: 0.02em;
}
.cwr-brand-footer a {
  color: var(--rw-text3);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.cwr-brand-footer a:hover { color: var(--rw-text2); text-decoration: underline; }
.cwr-brand-dot { opacity: 0.35; font-size: 7px; }