/* =============================================================
   Agora Media — cuestionarios de cliente
   -------------------------------------------------------------
   Se carga DESPUÉS de styles.css y sólo añade lo que los
   formularios necesitan. No redefine ningún token ni toca los
   componentes del sitio, así styles.css puede seguir cambiando
   sin romper esto (y sin tener que mover su marcador ?v=).
   ============================================================= */

/* ---------- Encabezado de página ---------- */
.q-head {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.q-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 18ch; }
.q-head .lede { margin-top: 1.1rem; }

.q-intro {
  margin-top: 1.8rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  color: var(--cream-2);
  font-size: 0.93rem;
  max-width: 56ch;
}
.q-intro strong { color: var(--cream); font-weight: 600; }

/* ---------- Secciones ---------- */
.q-section { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.q-section-head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.q-letter {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bg);
  background: var(--gold);
  border-radius: 4px;
  padding: .1rem .42rem;
  flex-shrink: 0;
}
.q-section-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  flex: 1;
  line-height: 1.2;
}
.q-section-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--cream-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---------- Pregunta ---------- */
.q-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(244,236,225,0.06); }
.q-item:last-child { border-bottom: 0; }
.q-label {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--cream);
}
.q-help {
  margin-top: .3rem;
  font-size: 0.87rem;
  color: var(--cream-3);
  max-width: 60ch;
}
.q-flag {
  display: inline-block;
  margin-left: .45rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-soft);
  border-radius: 100px;
  padding: .1rem .5rem;
  vertical-align: .15em;
  white-space: nowrap;
}

.q-control { margin-top: .9rem; }

/* ---------- Campos de texto ---------- */
.q-input, .q-textarea {
  width: 100%;
  padding: .75rem .95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.97rem;
  line-height: 1.5;
  transition: border-color .3s;
}
.q-textarea { min-height: 5.2rem; resize: vertical; }
.q-input::placeholder, .q-textarea::placeholder { color: var(--cream-3); opacity: .75; }
.q-input:focus, .q-textarea:focus { border-color: var(--gold); outline: none; }

.q-three { display: grid; gap: .6rem; grid-template-columns: 1fr; }

/* ---------- Opciones (una o varias) ---------- */
.q-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.q-opt {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--cream-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .55rem 1.05rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s, color .25s, background .25s;
}
.q-opt:hover { border-color: var(--gold-soft); color: var(--cream); }
.q-opt[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--wine), var(--wine-2));
  border-color: var(--wine);
  color: var(--cream);
}

/* ---------- Escala de 5 ---------- */
.q-scale { display: flex; align-items: center; gap: .7rem; }
.q-pole {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--cream-3);
}
.q-pole:last-child { text-align: right; }
.q-dots { display: flex; gap: .45rem; flex-shrink: 0; }
.q-dot {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-3);
  cursor: pointer;
  padding: 0;
  transition: border-color .25s, background .25s, transform .25s var(--ease-soft);
}
.q-dot:hover { border-color: var(--gold-soft); }
.q-dot[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--wine), var(--wine-2));
  border-color: var(--gold);
  transform: scale(1.1);
}

/* ---------- Muestras de color ---------- */
.q-swatches { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.q-swatch {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--cream-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .6rem .75rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .25s, color .25s;
}
.q-swatch:hover { border-color: var(--gold-soft); color: var(--cream); }
.q-swatch[aria-pressed="true"] { border-color: var(--gold); color: var(--cream); }
.q-chips { display: flex; gap: .22rem; flex-shrink: 0; }
.q-chips i {
  display: block;
  width: .9rem; height: .9rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25);
}

/* ---------- Horario por día ---------- */
.q-days { display: grid; gap: .45rem; }
.q-day { display: grid; grid-template-columns: 5.6rem 1fr; gap: .6rem; align-items: center; }
.q-day > span { font-size: 0.88rem; color: var(--cream-2); }
.q-day .q-input { padding: .55rem .8rem; font-size: 0.92rem; }

/* ---------- Barra inferior ---------- */
.q-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  background: rgba(20,13,15,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom));
}
.q-bar-inner { display: flex; align-items: center; gap: .7rem; }
.q-progress {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--cream-3);
  font-variant-numeric: tabular-nums;
}
.q-bar .btn { padding: .8rem 1.5rem; font-size: 0.9rem; }

/* ---------- Estados ---------- */
.q-error {
  display: none;
  margin-top: .9rem;
  padding: .85rem 1.05rem;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--wine);
  color: var(--cream-2);
  font-size: 0.87rem;
  line-height: 1.55;
}
.q-error.is-visible { display: block; }
.q-error a { color: var(--gold); text-decoration: underline; }

.q-sent {
  display: none;
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: 18px;
  background: linear-gradient(160deg, var(--wine-3), var(--bg-3));
  border: 1px solid var(--gold-soft);
}
.q-sent.is-visible { display: block; }
.q-sent h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--gold); }
.q-sent p { margin-top: .8rem; color: var(--cream-2); max-width: 52ch; }

.q-form.is-sent { display: none; }

/* El respaldo por si el envío falla: el texto queda listo para copiar. */
.q-fallback {
  display: none;
  width: 100%;
  margin-top: .9rem;
  min-height: 11rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--cream-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  resize: vertical;
}
.q-fallback.is-visible { display: block; }

/* ---------- Ajustes responsivos ---------- */
@media (min-width: 640px) {
  .q-three { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  /* Dos filas para que los botones nunca se salgan a lo ancho. */
  .q-bar-inner { flex-wrap: wrap; row-gap: .55rem; }
  .q-progress { flex: 1 0 100%; }
  .q-bar .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }
  .q-scale { flex-direction: column; align-items: stretch; gap: .5rem; }
  .q-pole, .q-pole:last-child { text-align: left; }
  .q-dots { justify-content: space-between; }
  .q-dot { flex: 1; max-width: 3rem; }
  .q-day { grid-template-columns: 1fr; gap: .25rem; }
  .q-day > span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); }
}

/* El formulario necesita el cursor normal, así que estas páginas no
   cargan el cursor personalizado del sitio (no incluyen su marcado). */

/* .btn declara display:inline-flex y le gana al atributo [hidden], que sólo
   trae la hoja del navegador. Sin esto, el botón de respaldo se ve siempre. */
[hidden] { display: none !important; }

/* Enlace entre los dos cuestionarios: cada uno apunta al otro, porque
   el pie del sitio sólo alcanza al primero. */
.q-switch {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--cream-3);
}
.q-switch a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.q-switch a:hover { color: var(--cream); }
.q-sent a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}