/* =========================================================
   GOOGLE REVIEWS WIDGET — estilos
   Componente reutilizable, independiente de cualquier web.
   Todo está bajo el prefijo .grw para no chocar con estilos
   del sitio donde se incluya.

   PERSONALIZACIÓN RÁPIDA:
   Puedes sobrescribir estas variables en tu propio CSS
   (después de cargar este archivo) o pasarlas por JS con
   la opción `theme` al montar el widget. Ejemplo en CSS:

     #google-reviews-widget{
       --grw-accent:#5C3A26;
       --grw-radius:14px;
     }
   ========================================================= */

.grw{
  --grw-accent:#2A6DF4;         /* color principal de botones/enlaces */
  --grw-star:#F2B400;           /* color de las estrellas rellenas */
  --grw-star-bg:#E3E1DD;        /* color de las estrellas vacías */
  --grw-bg:transparent;         /* fondo de la sección completa */
  --grw-card-bg:#ffffff;        /* fondo de cada tarjeta */
  --grw-text:#1d1d1f;           /* color de texto principal */
  --grw-muted:#6b6b6b;          /* color de texto secundario */
  --grw-border:rgba(0,0,0,0.08);
  --grw-radius:16px;
  --grw-font:inherit;

  font-family:var(--grw-font);
  color:var(--grw-text);
  background:var(--grw-bg);
  box-sizing:border-box;
}
.grw *, .grw *::before, .grw *::after{ box-sizing:inherit; }

.grw-header{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; margin-bottom:22px;
}
.grw-rating-block{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.grw-g-logo{ width:28px; height:28px; flex-shrink:0; }
.grw-score-wrap{ display:flex; flex-direction:column; gap:2px; }
.grw-score-row{ display:flex; align-items:baseline; gap:8px; }
.grw-score{ font-size:26px; font-weight:700; line-height:1; }
.grw-count{ font-size:13.5px; color:var(--grw-muted); }

/* Estrellas: técnica de doble capa (fondo vacío + relleno recortado) */
.grw-stars{
  position:relative; display:inline-block;
  font-family:Arial, "Helvetica Neue", sans-serif; /* fuente segura para el glifo ★ */
  letter-spacing:2px; white-space:nowrap; line-height:1;
}
.grw-stars.size-lg{ font-size:19px; }
.grw-stars.size-sm{ font-size:14px; }
.grw-stars::before{
  content:"★★★★★"; color:var(--grw-star-bg);
}
.grw-stars::after{
  content:"★★★★★"; color:var(--grw-star);
  position:absolute; top:0; left:0; overflow:hidden;
  width:var(--grw-pct, 0%);
}

.grw-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.grw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:100px; font-weight:600; font-size:14px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}
.grw-btn:active{ transform:scale(0.97); }
.grw-btn-primary{ background:var(--grw-accent); color:#fff; }
.grw-btn-ghost{ background:transparent; color:var(--grw-text); border-color:var(--grw-border); }

/* Carrusel de tarjetas: scroll horizontal en móvil, grid en escritorio */
.grw-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; margin:0 -2px;
  -webkit-overflow-scrolling:touch;
}
.grw-track::-webkit-scrollbar{ height:6px; }
.grw-track::-webkit-scrollbar-thumb{ background:var(--grw-border); border-radius:10px; }

@media(min-width:760px){
  .grw-track{
    display:grid; grid-template-columns:repeat(3, 1fr); overflow:visible;
  }
}

.grw-card{
  scroll-snap-align:start;
  flex:0 0 82%; max-width:320px;
  background:var(--grw-card-bg);
  border:1px solid var(--grw-border);
  border-radius:var(--grw-radius);
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
}
@media(min-width:760px){
  .grw-card{ flex:none; max-width:none; }
}

.grw-card-top{ display:flex; align-items:center; gap:10px; }
.grw-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
}
.grw-name-wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.grw-name{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grw-card-g{ margin-left:auto; width:18px; height:18px; flex-shrink:0; opacity:0.9; }

.grw-text{ font-size:14px; color:var(--grw-text); line-height:1.5; margin:0; }
.grw-more{
  background:none; border:none; padding:0; margin-top:2px;
  color:var(--grw-accent); font-weight:600; font-size:13.5px; cursor:pointer;
  align-self:flex-start;
}
.grw-time{ font-size:12.5px; color:var(--grw-muted); margin-top:auto; }

.grw-empty{
  border:1px dashed var(--grw-border); border-radius:var(--grw-radius);
  padding:28px 20px; text-align:center; color:var(--grw-muted); font-size:14.5px;
  grid-column:1/-1;
}

.grw-footnote{
  font-size:12px; color:var(--grw-muted); margin-top:14px; text-align:right;
}