.utx-rating{max-width:900px;margin:24px auto;padding:18px;border:1px solid rgba(0,0,0,.12);border-radius:14px}
.utx-rating__header{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.utx-rating__title{margin:0;font-size:20px}
.utx-rating__sub{margin:6px 0 0;opacity:.8}
.utx-rating__summary{text-align:right}
.utx-rating__stars{font-size:22px;letter-spacing:2px}
.utx-rating__meta{margin-top:6px;opacity:.85}
.utx-rating__dot{margin:0 8px}
.utx-rating__form{margin-top:14px;display:grid;gap:12px}
.utx-rating__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.utx-rating__row{grid-template-columns:1fr}.utx-rating__summary{text-align:left}}
.utx-rating__label{display:block;font-size:13px;margin-bottom:6px;opacity:.9}
.utx-rating__input,.utx-rating__textarea{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.18);border-radius:10px;font:inherit}
.utx-rating__textarea{min-height:90px;resize:vertical}
.utx-rating__hint{font-size:12px;opacity:.75;margin-top:6px}
.utx-rating__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.utx-rating__btn{padding:10px 14px;border:0;border-radius:10px;cursor:pointer;font:inherit}
.utx-rating__status{opacity:.85}
.utx-rating__list{margin-top:16px}
.utx-rating__listTitle{margin:0 0 10px;font-size:16px}
.utx-review{padding:10px 12px;border-top:1px solid rgba(0,0,0,.10)}
.utx-review__top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.utx-review__name{font-weight:600}
.utx-review__stars{letter-spacing:2px}
.utx-review__date{opacity:.7;font-size:12px}
.utx-review__comment{margin:6px 0 0;white-space:pre-wrap;opacity:.9}
.utx-stars{display:inline-flex;flex-direction:row-reverse;gap:6px}
.utx-stars input{position:absolute;opacity:0}
.utx-stars label{font-size:26px;cursor:pointer;opacity:.35;user-select:none}
.utx-stars input:checked ~ label{opacity:1}
.utx-stars label:hover,.utx-stars label:hover ~ label{opacity:.75}

/* ===== Floating dock rating (dark-friendly, visible) ===== */
:root{
  --utx-gold: #f5c518;
  --utx-dock-bg: rgba(18,18,18,.92);
  --utx-dock-text: rgba(255,255,255,.92);
  --utx-dock-muted: rgba(255,255,255,.65);
  --utx-dock-border: rgba(255,255,255,.14);
  --utx-dock-shadow: 0 18px 70px rgba(0,0,0,.55);
}

/* Dock base */
#utx-rating.utx-rating--dock{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  width: min(420px, calc(100vw - 32px));
  margin: 0 !important;
  max-width: none !important;

  background: var(--utx-dock-bg) !important;
  color: var(--utx-dock-text) !important;
  border: 1px solid var(--utx-dock-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--utx-dock-shadow);

  /* look pro */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* Asegura que textos internos no hereden blancos/negros raros */
#utx-rating.utx-rating--dock .utx-rating__title,
#utx-rating.utx-rating--dock .utx-rating__label,
#utx-rating.utx-rating--dock .utx-rating__meta,
#utx-rating.utx-rating--dock .utx-review__name,
#utx-rating.utx-rating--dock .utx-review__comment{
  color: var(--utx-dock-text) !important;
}
#utx-rating.utx-rating--dock .utx-rating__sub,
#utx-rating.utx-rating--dock .utx-rating__hint,
#utx-rating.utx-rating--dock .utx-review__date{
  color: var(--utx-dock-muted) !important;
}

/* Inputs: que se vean sobre fondo oscuro */
#utx-rating.utx-rating--dock .utx-rating__input,
#utx-rating.utx-rating--dock .utx-rating__textarea{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--utx-dock-text) !important;
}
#utx-rating.utx-rating--dock .utx-rating__input::placeholder,
#utx-rating.utx-rating--dock .utx-rating__textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Botón */
#utx-rating.utx-rating--dock .utx-rating__btn{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--utx-dock-text) !important;
}
#utx-rating.utx-rating--dock .utx-rating__btn:hover{
  background: rgba(255,255,255,.14) !important;
}

/* Estrellas amarillas */
#utx-rating.utx-rating--dock .utx-rating__stars{ color: var(--utx-gold) !important; }
#utx-rating.utx-rating--dock .utx-stars label{ color: var(--utx-gold) !important; opacity: .35 !important; }
#utx-rating.utx-rating--dock .utx-stars input:checked ~ label{ opacity: 1 !important; }
#utx-rating.utx-rating--dock .utx-stars label:hover,
#utx-rating.utx-rating--dock .utx-stars label:hover ~ label{ opacity: .75 !important; }

/* ---------- COLAPSADO: título + 5 estrellas visibles ---------- */
#utx-rating.utx-rating--dock.utx-rating--collapsed{
  padding: 14px 14px 12px !important;
  overflow: hidden;
}

/* Header compacto */
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__header{
  display: block !important;
}
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__title{
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

/* Ocultar resumen/subtitle en colapsado */
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__sub,
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__summary{
  display: none !important;
}

/* Form: solo estrellas */
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__form{
  margin-top: 8px !important;
  display: block !important;
}
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__row{
  display: block !important;
}
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__label,
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__field:not(:first-child),
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__textarea,
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__hint,
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__actions,
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-rating__list{
  display: none !important;
}

/* Estrellas grandes en el recuadro pequeño */
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-stars{
  display: inline-flex !important;
  gap: 8px !important;
}
#utx-rating.utx-rating--dock.utx-rating--collapsed .utx-stars label{
  font-size: 30px !important;
  line-height: 1 !important;
}

/* ---------- EXPANDIDO: scroll interno ---------- */
#utx-rating.utx-rating--dock.utx-rating--expanded{
  padding: 18px !important;
  max-height: min(74vh, 760px);
  overflow: auto;
}

/* Mobile */
@media (max-width: 520px){
  #utx-rating.utx-rating--dock{
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    border-radius: 14px !important;
  }
}