/* Valoraciones de colchon en la ficha (bajo la descripcion corta). El anillo se llena hasta la nota al cargar. */
.fd-scores { container-type: inline-size; margin: 1rem 0 0; }

.fd-scores__list {
  background: var(--fd-surface, #f3eee7);
  border: 1px solid var(--fd-line, #e6ded3);
  border-radius: 1rem;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 1rem 1.125rem;
}

.fd-scores__item { align-items: center; display: flex; gap: .75rem; min-width: 0; }

.fd-scores__ring {
  color: var(--fd-ink, #1e1915);
  display: grid;
  flex: none;
  height: 2.75rem;
  place-items: center;
  position: relative;
  width: 2.75rem;
}

.fd-scores__ring svg { fill: none; inset: 0; position: absolute; stroke-width: 3.5; transform: rotate(-90deg); }
.fd-scores__ring circle { stroke: var(--fd-line, #e6ded3); }
.fd-scores__ring .fd-scores__arc {
  animation: fd-score-fill 1s cubic-bezier(.22, 1, .36, 1) .15s both;
  stroke: var(--fd-accent, #c2552b);
  stroke-dasharray: 10;
  stroke-dashoffset: calc(10 - var(--fd-score, 0));
  stroke-linecap: round;
}

@keyframes fd-score-fill { from { stroke-dashoffset: 10; } }

@media (prefers-reduced-motion: reduce) {
  .fd-scores__ring .fd-scores__arc { animation: none; }
}

.fd-scores__value { font-size: .9375rem; font-weight: 700; line-height: 1; position: relative; }
.fd-scores__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fd-scores__name { color: var(--fd-text, #3f3832); font-size: .875rem; overflow-wrap: anywhere; }
.fd-scores__level { color: var(--fd-ink, #1e1915); font-size: .9375rem; font-weight: 600; }

/* Panel estrecho (movil o columna de compra estrecha): anillo encima del texto */
@container (max-width: 30rem) {
  .fd-scores__list { gap: .5rem; padding: .875rem .75rem; }
  .fd-scores__item { flex-direction: column; gap: .5rem; text-align: center; }
  .fd-scores__name { font-size: .8125rem; }
  .fd-scores__level { font-size: .875rem; }
}

/* Muy estrecho: una nota por linea */
@container (max-width: 15rem) {
  .fd-scores__list { grid-template-columns: minmax(0, 1fr); }
  .fd-scores__item { flex-direction: row; text-align: left; }
}