/* ==========================================================================
   Webforms — diseño 2026. Scopeado a body.path-webform.
   Cards por pregunta, opciones tipo chip de calificación, botón marca.
   ========================================================================== */

body.path-webform .webform-submission-form {
  max-width: 820px;
  margin-inline: auto;
  padding: var(--sm-sp-5) var(--sm-sp-3) var(--sm-sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sm-sp-4);
}

/* Título de la encuesta (no se renderiza como h1 en el tema) */
body.path-webform .webform-submission-encuesta-de-satisfaccion-form::before {
  content: "Encuesta de satisfacción";
  display: block;
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-h1);
  font-weight: 800;
  letter-spacing: var(--sm-tracking-tight);
  line-height: var(--sm-leading-tight);
  color: var(--sm-ink-950);
  margin-bottom: var(--sm-sp-2);
}

/* ---- Card por pregunta (fieldset de radios) ---- */
body.path-webform .webform-type-radios.radios--wrapper {
  background: var(--sm-paper-000);
  border: 1px solid var(--sm-border);
  border-radius: var(--bs-border-radius-lg);
  padding: var(--sm-sp-4);
  margin: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.path-webform .webform-type-radios.radios--wrapper:focus-within {
  border-color: var(--sm-green-300);
  box-shadow: 0 6px 20px rgba(9, 9, 11, .06);
}
body.path-webform .fieldset-legend {
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-h3);
  font-weight: 700;
  letter-spacing: var(--sm-tracking-tight);
  line-height: var(--sm-leading-tight);
  color: var(--sm-ink-950);
  margin-bottom: var(--sm-sp-3);
  display: block;
}
body.path-webform .fieldset-legend.form-required::after { color: var(--sm-green-700); }

/* ---- Opciones lado a lado tipo chip ---- */
body.path-webform .webform-options-display-side-by-side {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0;
}
body.path-webform .webform-options-display-side-by-side .form-check,
body.path-webform .webform-options-display-side-by-side .js-form-type-radio {
  margin: 0;
  padding: 0;
}
body.path-webform .webform-options-display-side-by-side .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 2px solid var(--sm-border);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: var(--sm-fs-small);
  color: var(--sm-ink-900);
  cursor: pointer;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
  margin: 0;
}
body.path-webform .webform-options-display-side-by-side .form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
body.path-webform .webform-options-display-side-by-side .form-check-label:hover {
  border-color: var(--sm-green-300);
  background: var(--sm-green-050);
  color: var(--sm-green-700);
}
/* Estado seleccionado (radio :checked) */
body.path-webform .webform-options-display-side-by-side .form-check:has(input:checked) .form-check-label,
body.path-webform .webform-options-display-side-by-side .js-form-type-radio:has(input:checked) .form-check-label {
  background: var(--sm-green-700);
  border-color: var(--sm-green-700);
  color: #fff;
}
/* Foco accesible (el input está oculto → anillo en el label) */
body.path-webform .webform-options-display-side-by-side .form-check-input:focus-visible + .form-check-label {
  outline: var(--sm-focus-ring);
  outline-offset: var(--sm-focus-offset);
}

/* ---- Botón Enviar (Bootstrap azul → marca) ---- */
body.path-webform .webform-button--submit {
  width: auto;
  align-self: flex-start;
  padding: 1rem 2.2rem;
  font-family: var(--sm-font-display);
  font-weight: 700;
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  color: var(--sm-paper-000);
  background: var(--sm-ink-950);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--sm-dur-base) var(--sm-ease-out), transform .15s ease;
}
body.path-webform .webform-button--submit:hover {
  background: var(--sm-green-700);
  transform: translateY(-1px);
}
body.path-webform .webform-button--submit:focus-visible {
  outline: var(--sm-focus-ring);
  outline-offset: var(--sm-focus-offset);
}

/* ---- Enlace a resultados ---- */
body.path-webform .webform-submission-form .form-type-processed-text {
  font-size: var(--sm-fs-small);
  color: var(--sm-ink-500);
}
body.path-webform .webform-submission-form .form-type-processed-text a {
  color: var(--sm-green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}