/*
 * LegalClaro — Estilos de /valoracion/ (formulario de valoración del cliente)
 * y de la sección «Lo que dicen quienes ya lo usan» de la home (ES y DE).
 *
 * Usa exclusivamente variables de design-system.css — sin hex/px nuevos.
 * Cargar después de design-system.css (+ main.css / home.css / de.css según la página).
 */

/* ─── Utilidad: solo para lectores de pantalla (el design system no la trae) ─── */

.val-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Intro y perfil ─── */

.val-intro {
  font-size: var(--text-lg);
  color: var(--color-ink);
  max-width: 60ch;
}

.val-perfil {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  min-height: 1.5em;
}

/* ─── Formulario ─── */

#form-valoracion {
  max-width: 36rem;
  margin-block-start: var(--space-6);
}

#form-valoracion .campo {
  margin-block: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#form-valoracion label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.val-ayuda {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0;
}

#form-valoracion input[type="text"],
#form-valoracion textarea {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

#form-valoracion textarea {
  resize: vertical;
  min-height: 8rem;
}

#form-valoracion input[type="text"]:focus,
#form-valoracion textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--claro-100);
}

.val-contador {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ─── Estrellas (radios accesibles) ───
   El DOM va de 5 a 1 y la fila se pinta en orden inverso: así «las estrellas anteriores a la
   elegida» son hermanos posteriores en el DOM y se iluminan con el combinador ~, sin JS.
   Selectores con #form-valoracion a propósito: la regla genérica `#form-valoracion label`
   (tamaño y color de etiqueta) tiene más especificidad y, sin el id, pisaba las estrellas. */

.val-estrellas {
  border: 0;
  padding: 0;
  margin: var(--space-6) 0;
  min-width: 0;
}

.val-estrellas legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  padding: 0;
  margin-bottom: var(--space-2);
}

.val-estrellas__fila {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--space-1);
}

#form-valoracion .val-estrellas__fila label {
  cursor: pointer;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-border-strong);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

#form-valoracion .val-estrellas__fila label:hover,
#form-valoracion .val-estrellas__fila label:hover ~ label,
#form-valoracion .val-estrellas__fila input:checked ~ label {
  color: var(--color-warning);
}

#form-valoracion .val-estrellas__fila label:active {
  transform: scale(0.96);
}

#form-valoracion .val-estrellas__fila input:focus-visible + label {
  outline: 3px solid var(--navy-300);
  outline-offset: 2px;
}

.val-estrellas__leyenda {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: var(--space-2) 0 0;
  min-height: 1.5em;
}

/* ─── Consentimiento ─── */

#form-valoracion .campo--consentimiento {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

#form-valoracion .campo--consentimiento input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
  accent-color: var(--claro-600);
}

#form-valoracion .campo--consentimiento label {
  font-weight: var(--weight-regular);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

#form-valoracion .campo--consentimiento a {
  color: var(--navy-700);
}

/* ─── Nota de revisión previa ─── */

.val-nota {
  font-size: var(--text-sm);
  color: var(--navy-900);
  background-color: var(--navy-50);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}

#form-valoracion .acciones-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

#form-status {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  min-height: 1.5em;
}

/* ─── Gracias ─── */

.val-gracias {
  background-color: var(--claro-50);
  border: 1px solid var(--claro-300);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.val-gracias h2 {
  margin: 0;
  font-size: var(--text-2xl);
}

.val-gracias p {
  margin: 0;
  max-width: 60ch;
}

/* ─── Home: «Lo que dicen quienes ya lo usan» (ES y DE) ───
   La sección nace con el atributo hidden y solo se muestra cuando el endpoint público
   devuelve al menos una valoración aprobada: sin datos no ocupa ni un píxel. */

.lc-valoraciones__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5);
}

.lc-valoraciones__lista figure {
  margin: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.lc-valoraciones__estrellas {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--color-warning);
  line-height: 1;
}

.lc-valoraciones__lista blockquote {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  flex-grow: 1;
  overflow-wrap: anywhere;
}

.lc-valoraciones__lista blockquote p {
  margin: 0;
  max-width: 100%;
}

.lc-valoraciones__lista figcaption {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.lc-valoraciones__nombre {
  font-weight: var(--weight-semibold);
  color: var(--navy-800);
}

.lc-valoraciones__nota {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: var(--space-8) auto 0;
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  .val-estrellas__fila label,
  #form-valoracion input[type="text"],
  #form-valoracion textarea {
    transition: none;
  }
}

/* ─── Baja de las peticiones de valoración (/valoracion/baja/, 24/10/2026) ─── */

.val-baja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-6);
}