/*!
 * FestivalVoz — estilos públicos (votación, participantes, resultados).
 *
 * Antes cada shortcode imprimía su propio bloque <style> en el cuerpo de la
 * página: se duplicaba si el shortcode aparecía dos veces y no se podía cachear.
 * Ahora todo vive aquí y se encola con wp_enqueue_style.
 *
 * Pensado para móvil primero: la mayoría vota desde el teléfono, de pie y con
 * poca luz. De ahí los objetivos de toque grandes y el contraste alto.
 */

.fv-scope{
  --fv-accent:      #2563eb;
  --fv-accent-dark: #1d4ed8;
  --fv-ink:         #0f172a;
  --fv-dim:         #64748b;
  --fv-line:        #e2e8f0;
  --fv-surface:     #ffffff;
  --fv-bg-soft:     #f8fafc;
  --fv-ok:          #15803d;
  --fv-ok-bg:       #f0fdf4;
  --fv-err:         #b91c1c;
  --fv-err-bg:      #fef2f2;
  --fv-radius:      14px;
  --fv-shadow:      0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
}

/* ============================================================ VOTACIÓN == */
.fv-vote{
  max-width: 640px; margin: 24px auto; padding: 22px;
  background: var(--fv-surface);
  border: 1px solid var(--fv-line);
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow);
  color: var(--fv-ink);
}
/* [hidden] debe ganarle a los display de las tarjetas (votación por turno). */
.fv-scope [hidden]{ display: none !important; }

/* Votación por turno: nadie en escena */
.fv-closed{ text-align: center; padding: 22px 12px 10px; }
.fv-closed__icon{
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  background: var(--fv-bg-soft); color: var(--fv-accent);
}
.fv-closed__title{ font-weight: 800; font-size: 1.15em; margin-bottom: 6px; }
.fv-closed__text{ color: var(--fv-dim); line-height: 1.5; }
.fv-note{ margin: 0 0 14px; color: var(--fv-dim); background: var(--fv-bg-soft); border-radius: 9px; padding: 10px 13px; }

/* Nota del 1 al 7 */
.fv-grades{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fv-grade__opt{ position: relative; display: block; }
.fv-grade__opt input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fv-grade__opt span{
  display: grid; place-items: center; min-height: 52px; cursor: pointer;
  border: 2px solid var(--fv-line); border-radius: 12px; background: var(--fv-surface);
  font-size: 1.3em; font-weight: 800;
}
.fv-grade__opt input:checked + span{ border-color: var(--fv-accent); background: var(--fv-accent); color: #fff; }
.fv-grade__opt input:focus-visible + span{ outline: 3px solid color-mix(in srgb, var(--fv-accent) 45%, transparent); outline-offset: 2px; }
.fv-opt.is-voted{ opacity: .45; }
.fv-opt.is-voted .fv-opt__card{ cursor: default; }

.fv-kicker{
  display: block; margin-bottom: 6px;
  font-size: .72em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fv-accent);
}
.festival-results__ph{
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800;
  background: var(--fv-bg-soft); color: var(--fv-dim);
}
.festival-results__song{ color: var(--fv-dim); font-size: .8em; margin: -3px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-vote__title{ margin: 0 0 4px; font-size: 1.4em; font-weight: 800; letter-spacing: -.01em; }
.fv-vote__steps{ margin: 0 0 18px; color: var(--fv-dim); font-size: .95em; }

.fv-field{ margin: 0 0 18px; }
.fv-field > label{
  display: block; font-weight: 700; margin-bottom: 7px; font-size: .95em;
}
.fv-field input[type=text]{
  width: 100%; padding: 13px 14px;
  border: 1.5px solid #cbd5e1; border-radius: 10px;
  font-size: 1.05em; color: var(--fv-ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.fv-field input[type=text]:focus{
  outline: none; border-color: var(--fv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fv-accent) 18%, transparent);
}
.fv-field input.fv-invalid{ border-color: var(--fv-err); background: var(--fv-err-bg); }
.fv-hint{ font-weight: 400; color: var(--fv-dim); font-size: .84em; margin-top: 6px; line-height: 1.45; }

/* ---- Selector de participante en tarjetas ---- */
.fv-pick{
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 0; padding: 0; border: 0;
}
.fv-pick legend{
  display: block; font-weight: 700; margin-bottom: 7px; font-size: .95em; padding: 0;
}
.fv-opt{ position: relative; display: block; }
/* El radio real queda accesible al teclado y a lectores de pantalla, solo se
   oculta visualmente; la tarjeta es su etiqueta. */
.fv-opt input{
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.fv-opt__card{
  display: block; cursor: pointer; height: 100%;
  background: var(--fv-surface);
  border: 2px solid var(--fv-line); border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.fv-opt__card:hover{ border-color: #cbd5e1; transform: translateY(-1px); }
.fv-opt input:focus-visible + .fv-opt__card{
  outline: 3px solid color-mix(in srgb, var(--fv-accent) 45%, transparent); outline-offset: 2px;
}
.fv-opt input:checked + .fv-opt__card{
  border-color: var(--fv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fv-accent) 16%, transparent);
}
.fv-opt__media{
  position: relative; aspect-ratio: 1 / 1; background: var(--fv-bg-soft);
  display: block; overflow: hidden;
}
.fv-opt__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-opt__ph{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #94a3b8; font-size: 1.9em; font-weight: 800;
}
.fv-opt__check{
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 2px solid var(--fv-line);
  display: grid; place-items: center;
  color: transparent; font-size: 15px; font-weight: 900; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.fv-opt input:checked + .fv-opt__card .fv-opt__check{
  background: var(--fv-accent); border-color: var(--fv-accent); color: #fff;
}
.fv-opt__body{ padding: 9px 11px 11px; }
.fv-opt__code{
  display: inline-block; font-size: .72em; font-weight: 800; letter-spacing: .03em;
  color: var(--fv-accent); background: color-mix(in srgb, var(--fv-accent) 10%, transparent);
  padding: 2px 7px; border-radius: 999px; margin-bottom: 4px;
}
.fv-opt__name{ font-weight: 700; line-height: 1.25; font-size: .97em; }
.fv-opt__song{ color: var(--fv-dim); font-size: .82em; margin-top: 2px; line-height: 1.3; }

/* Fallback: si hay muchísimos participantes, el desplegable sigue disponible. */
.fv-field select{
  width: 100%; padding: 13px 14px;
  border: 1.5px solid #cbd5e1; border-radius: 10px;
  font-size: 1.05em; background: #fff; color: var(--fv-ink);
}

.fv-actions{ margin-top: 20px; }
.fv-btn{
  width: 100%; padding: 15px 20px;
  background: var(--fv-accent); color: #fff;
  border: none; border-radius: 11px;
  font-size: 1.06em; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
}
.fv-btn:hover:not([disabled]){ background: var(--fv-accent-dark); }
.fv-btn:active:not([disabled]){ transform: scale(.99); }
.fv-btn[disabled]{ opacity: .55; cursor: not-allowed; }
.fv-btn.is-sending{ position: relative; color: transparent; }
.fv-btn.is-sending::after{
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: fv-spin .7s linear infinite;
}
@keyframes fv-spin{ to{ transform: rotate(360deg); } }

.fv-msg{ margin-top: 12px; min-height: 22px; font-size: .96em; line-height: 1.45; }
.fv-msg.error{
  color: var(--fv-err); background: var(--fv-err-bg);
  border: 1px solid #fecaca; border-radius: 9px; padding: 11px 13px;
}
.fv-msg.ok{
  color: var(--fv-ok); background: var(--fv-ok-bg);
  border: 1px solid #bbf7d0; border-radius: 9px; padding: 11px 13px; font-weight: 600;
}

/* Confirmación: reemplaza el formulario, para que nadie dude de si votó. */
.fv-done{
  text-align: center; padding: 26px 20px;
  animation: fv-fade .4s ease both;
}
.fv-done__icon{
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--fv-ok-bg); color: var(--fv-ok);
  display: grid; place-items: center; font-size: 30px; font-weight: 900;
  border: 2px solid #bbf7d0;
}
.fv-done__title{ font-size: 1.25em; font-weight: 800; margin-bottom: 6px; }
.fv-done__text{ color: var(--fv-dim); line-height: 1.5; }
@keyframes fv-fade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; } }

/* ======================================================= PARTICIPANTES == */
.fv-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(var(--fv-cols, 3), minmax(0, 1fr));
}
.fv-card{
  background: var(--fv-surface); border: 1px solid var(--fv-line);
  border-radius: var(--fv-radius); overflow: hidden;
  box-shadow: var(--fv-shadow);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.fv-card:hover{ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15,23,42,.08), 0 14px 32px rgba(15,23,42,.1); }
.fv-card__media{ aspect-ratio: 4 / 3; background: var(--fv-bg-soft); overflow: hidden; }
.fv-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-card__body{ padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.fv-badge{
  align-self: flex-start; font-size: .74em; font-weight: 800;
  color: var(--fv-accent); background: color-mix(in srgb, var(--fv-accent) 10%, transparent);
  border-radius: 999px; padding: 3px 9px; margin-bottom: 6px;
}
.fv-card__title{ font-weight: 800; font-size: 1.06em; line-height: 1.25; margin-bottom: 3px; }
.fv-card__song{ color: var(--fv-dim); font-size: .9em; line-height: 1.35; }
.fv-card__foot{
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fv-line);
}
.fv-card__foot .fv-btn{ width: auto; flex: 1; padding: 11px 16px; font-size: .97em; text-align: center; text-decoration: none; display: block; }
.fv-card__foot .fv-btn:hover{ color: #fff; }
.fv-qr{ flex: 0 0 auto; text-align: center; }
.fv-qr canvas, .fv-qr img{ width: 74px; height: 74px; display: block; border-radius: 6px; }
.fv-qr-note{ color: var(--fv-dim); font-size: .7em; margin-top: 3px; }

/* ========================================================== RESULTADOS == */
.festival-results{
  border: 1px solid var(--fv-line); border-radius: var(--fv-radius);
  padding: 18px 20px; background: var(--fv-surface); box-shadow: var(--fv-shadow);
  color: var(--fv-ink);
}
.festival-results h3{ margin: 0 0 4px; font-size: 1.2em; font-weight: 800; }
.festival-results__total{ color: var(--fv-dim); font-size: .9em; margin-bottom: 14px; }
.festival-results__row{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--fv-line);
}
.festival-results__row:last-child{ border-bottom: none; }
.festival-results__rank{
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8em; font-weight: 800;
  background: var(--fv-bg-soft); color: var(--fv-dim);
  font-variant-numeric: tabular-nums;
}
.festival-results__row--lead .festival-results__rank{ background: var(--fv-accent); color: #fff; }
.festival-results img.thumb{ flex: 0 0 auto; object-fit: cover; border-radius: 10px; background: var(--fv-bg-soft); }
.festival-results__who{ display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.festival-results__meta{ flex: 1; min-width: 0; }
.festival-results__name{
  font-weight: 700; line-height: 1.3; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.festival-results__name .code{
  font-size: .76em; font-weight: 800; color: var(--fv-accent); margin-right: 6px;
}
.festival-results__bar{ height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.festival-results__bar > div{
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--fv-accent), #60a5fa);
  transition: width .8s cubic-bezier(.22,.61,.36,1);
}
.festival-results__score{ flex: 0 0 auto; text-align: right; min-width: 68px; }
.festival-results__votes{ font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.festival-results__pct{ color: var(--fv-dim); font-size: .8em; font-variant-numeric: tabular-nums; }
.festival-results__empty{ color: var(--fv-dim); padding: 10px 0; }

/* ============================================================== QR ====== */
.festival-qr{ text-align: center; }
.festival-qr__title{ margin-bottom: 8px; font-weight: 700; }
.festival-qr__subtitle{ margin-bottom: 8px; color: var(--fv-dim); }
.festival-qr__url{ margin-top: 8px; font-size: .85em; color: var(--fv-dim); word-break: break-all; }

/* ============================================================== MÓVIL === */
@media (max-width: 600px){
  .fv-vote{ margin: 12px auto; padding: 16px; border-radius: 12px; }
  .fv-pick{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fv-grid{ grid-template-columns: 1fr !important; }
  .festival-results{ padding: 14px; }
  .festival-results__score{ min-width: 56px; }
  /* En pantallas pequeñas el botón acompaña al pulgar. */
  .fv-actions{ position: sticky; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .fv-opt__card, .fv-card, .festival-results__bar > div, .fv-done{
    transition: none; animation: none;
  }
}