/* Páginas públicas (registro y familia): extras sobre app.css. Sin estilos inline (CSP). */

.hw-stack { display: flex; flex-direction: column; gap: 12px; }
.hw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.hw-actions .hw-btn { width: 100%; }
.hw-lead { font-size: 1.2rem; font-weight: 800; }
.hw-btn--small { min-height: 48px; padding: 8px 16px; font-size: 0.95rem; }
.hw-btn.is-disabled { opacity: 0.55; pointer-events: none; box-shadow: none; filter: grayscale(0.4); }
.hw-bigicon { display: block; margin: 0 auto 8px; }

/* título de tarjeta con ícono */
.hw-card__title { display: flex; align-items: center; gap: 0.4em; }
.hw-card__title--center { justify-content: center; }
.hw-card__title .hw-i { width: 1em; height: 1em; vertical-align: 0; }

/* línea de texto con ícono (avisos, estados, ayudas) */
.hw-hint { display: flex; align-items: flex-start; gap: 0.5em; margin: 0 0 14px; font-size: 0.95rem; color: var(--hw-muted); }
.hw-hint .hw-i { margin-top: 0.15em; }
.hw-hint--center { justify-content: center; align-items: center; text-align: center; }
.hw-hint--center .hw-i { margin-top: 0; }
.hw-lead.hw-hint { font-size: 1.2rem; color: var(--hw-text); }
.hw-lead.hw-hint--center { flex-direction: column; gap: 0.3em; }
.hw-error.hw-hint { color: #ffd6d6; font-size: 1rem; }
.hw-card > .hw-hint:last-child { margin-bottom: 0; }

/* ---- pasos del registro (indicador) ------------------------------------------------------------------- */
.hw-steps { position: relative; margin: 0 0 22px; }
.hw-steps > li { position: relative; gap: 8px; }
.hw-steps > li::before { content: none; }
.hw-steps > li.is-done::before { content: none; }
.hw-step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--hw-muted);
  background: var(--hw-surface-2);
  border: 2px solid var(--hw-border);
  border-radius: 50%;
}
.hw-step__dot .hw-i { width: 1.3rem; height: 1.3rem; vertical-align: 0; }
.hw-step__done { display: none; }
.hw-steps > li.is-active .hw-step__dot {
  color: #1a0d00;
  background: var(--hw-orange);
  border-color: #ffb36b;
  box-shadow: var(--hw-glow-orange);
}
.hw-steps > li.is-done .hw-step__dot { color: #0d2a08; background: var(--hw-green); border-color: #b6ffac; }
.hw-steps > li.is-done .hw-step__main { display: none; }
.hw-steps > li.is-done .hw-step__done { display: inline-block; stroke-width: 3; }
/* conector entre un paso y el anterior */
.hw-steps > li + li::after {
  content: '';
  position: absolute;
  top: 21px;
  right: calc(50% + 26px);
  left: calc(-50% + 26px);
  height: 3px;
  background: var(--hw-border);
  border-radius: 2px;
}
.hw-steps > li.is-done + li::after { background: var(--hw-green); }

/* ---- teléfono ------------------------------------------------------------------------------------------ */
.hw-phone { display: flex; align-items: center; gap: 8px; }
.hw-flag {
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--hw-green);
  background: #120d1c;
  border: 2px solid var(--hw-border);
  border-radius: 50%;
}
.hw-flag .hw-i { vertical-align: 0; }
.hw-prefix { flex: 0 0 84px; width: 84px; text-align: center; padding-left: 8px; padding-right: 8px; }
.hw-phone .hw-input:last-child { flex: 1 1 auto; min-width: 0; }

/* ---- personas ------------------------------------------------------------------------------------------ */
.hw-person {
  margin: 0 0 16px;
  padding: 14px;
  min-width: 0;
  border: 2px dashed var(--hw-border);
  border-radius: var(--hw-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hw-person__title { display: flex; align-items: center; gap: 0.4em; padding: 0 8px; margin: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 800; letter-spacing: 0; color: var(--hw-green); }
.hw-person__title .hw-i { width: 1.1em; height: 1.1em; }
/* «Quitar» es secundario: compacto y a la derecha, no un botón ancho que compita con «Siguiente» */
.hw-person > .hw-btn--small { align-self: flex-end; color: var(--hw-muted); border-color: rgba(139, 92, 246, 0.45); }
.hw-person > .hw-btn--small:hover { color: #ffd6d6; border-color: #f87171; background: rgba(220, 38, 38, 0.15); }
.hw-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 800;
  color: var(--hw-text);
  background: #120d1c;
  border: 2px solid var(--hw-border);
  border-radius: var(--hw-radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hw-type__icon { width: 1.6rem; height: 1.6rem; vertical-align: 0; color: #a78bfa; }
.hw-type:hover { border-color: var(--hw-purple); }
.hw-type[aria-pressed='true'] {
  color: #0d2a08;
  background: var(--hw-green);
  border-color: #b6ffac;
  box-shadow: var(--hw-glow-green);
}
.hw-type[aria-pressed='true'] .hw-type__icon { color: #0d2a08; }

/* círculo con el ícono del tipo de persona */
.hw-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.22);
  border: 2px solid var(--hw-border);
  border-radius: 50%;
}
.hw-avatar .hw-i { width: 1.4rem; height: 1.4rem; vertical-align: 0; }
.hw-avatar--small { width: 32px; height: 32px; }
.hw-avatar--small .hw-i { width: 1.05rem; height: 1.05rem; }

.hw-plain { margin: 0 0 16px; padding: 0; list-style: none; font-weight: 800; }
.hw-plain li { display: flex; align-items: center; gap: 12px; padding: 6px 0; min-width: 0; }
.hw-plain__name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.hw-plain__type { flex: 0 0 auto; font-size: 0.9rem; font-weight: 400; }

/* ---- disfraces ----------------------------------------------------------------------------------------- */
.hw-person-costume { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hw-border); }
.hw-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.hw-switch-label { flex: 1 1 auto; font-weight: 800; word-break: break-word; }
.hw-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 36px;
  margin: 0;
  background: #120d1c;
  border: 2px solid var(--hw-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.hw-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: var(--hw-muted);
  border-radius: 50%;
}
.hw-switch:checked { background: rgba(124, 255, 107, 0.25); border-color: var(--hw-green); }
.hw-switch:checked::after { left: 31px; background: var(--hw-green); box-shadow: var(--hw-glow-green); }

.hw-costume {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(139, 92, 246, 0.12);
  border: 2px solid var(--hw-border);
  border-radius: var(--hw-radius);
}
.hw-costume--bad { border-color: #f87171; }
.hw-costume h3 { margin: 0; }
.hw-costume > .hw-label { margin: 6px 0 -4px; }
.hw-costume__title { display: flex; align-items: center; gap: 0.4em; }
.hw-costume__title .hw-i { width: 1em; height: 1em; vertical-align: 0; }
.hw-costume__photo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.hw-costume__photo > .hw-stack { gap: 10px; }
.hw-costume__photo > .hw-stack > .hw-btn {
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
  padding: 8px 10px;
  font-size: 0.95rem;
  border-radius: var(--hw-radius-sm);
}
.hw-costume__photo > .hw-stack > .hw-btn .hw-i { width: 1.5em; height: 1.5em; }
.hw-preview {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 112px;
  height: 150px;
  object-fit: cover;
  background: #120d1c;
  border: 2px dashed var(--hw-border);
  border-radius: var(--hw-radius-sm);
}
.hw-preview--empty { color: var(--hw-muted); font-size: 0.8rem; font-weight: 800; text-align: center; }
.hw-preview--empty .hw-i { vertical-align: 0; color: #a78bfa; }
img.hw-preview { border-style: solid; }
.hw-checks { display: flex; flex-direction: column; gap: 4px; }
.hw-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 800; }
.hw-check input { width: 24px; height: 24px; accent-color: var(--hw-green); flex: 0 0 auto; }

/* ---- subida y resumen ---------------------------------------------------------------------------------- */
.hw-uploads { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hw-upload { display: flex; gap: 14px; align-items: flex-start; padding: 6px; margin: -6px; border-radius: var(--hw-radius-sm); }
.hw-upload.is-new { background: rgba(124, 255, 107, 0.1); box-shadow: 0 0 0 2px var(--hw-green); }
.hw-upload.is-dropped .hw-thumb--empty { color: #ffb4b4; border-color: #f87171; }
.hw-upload__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; word-break: break-word; }
.hw-upload__body .hw-hint { margin: 0; }
.hw-upload__name { font-size: 1.1rem; }
.hw-upload__body > .hw-btn { align-self: flex-start; }
.hw-upload__body > .hw-row { margin-top: 4px; }
.hw-upload__body > .hw-row > .hw-btn { flex: 1 1 auto; }
.hw-thumbwrap { position: relative; flex: 0 0 auto; }
.hw-thumb { flex: 0 0 auto; width: 84px; height: 112px; object-fit: cover; border: 2px solid var(--hw-border); border-radius: var(--hw-radius-sm); background: #120d1c; }
.hw-thumb--empty { display: grid; place-items: center; color: var(--hw-muted); }
.hw-badge-num--small { top: 5px; left: 5px; min-width: 0; height: 30px; padding: 0 8px; font-size: 1.05rem; border-width: 1.5px; }
.hw-status { margin: 0; font-weight: 800; }
.hw-status--ok { display: flex; align-items: center; gap: 0.4em; color: var(--hw-green); font-size: 1.2rem; }
.hw-status--bad { color: #ffb4b4; }
.hw-summary__cat { display: flex; align-items: center; gap: 8px; }
.hw-uploading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hw-progress { flex: 1 1 120px; height: 14px; accent-color: var(--hw-orange); }

.hw-linkbox {
  margin: 0;
  padding: 12px;
  font-weight: 800;
  text-align: center;
  word-break: break-all;
  user-select: all;
  background: #120d1c;
  border: 2px dashed var(--hw-green);
  border-radius: var(--hw-radius-sm);
}

/* ---- lista de personas para votar ---------------------------------------------------------------------- */
.hw-person-btn { display: flex; width: 100%; min-height: 64px; justify-content: space-between; gap: 12px; text-align: left; }
.hw-person-btn__who { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 1.15rem; }
.hw-person-btn__name { min-width: 0; word-break: break-word; }
.hw-person-btn__act { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.5em; font-size: 0.95rem; }
.hw-person-btn .hw-avatar { color: #1a0d00; background: rgba(26, 13, 0, 0.14); border-color: rgba(26, 13, 0, 0.35); }
.hw-person-btn.is-voted { opacity: 0.9; }
.hw-person-btn.is-voted .hw-avatar { color: #0d2a08; border-color: rgba(13, 42, 8, 0.4); }

/* ---- boleta -------------------------------------------------------------------------------------------- */
.hw-header--ballot { margin-bottom: 16px; }
.hw-header--ballot .hw-cat-icon { margin: 4px auto 4px; display: block; }
.hw-header--ballot h2 { margin-bottom: 0.2em; }
.hw-voter { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; color: var(--hw-text); }
.hw-header .hw-voter { color: var(--hw-text); }
.hw-step-count { margin: 6px 0 4px; font-size: 0.9rem; }
.hw-dots { display: flex; justify-content: center; gap: 6px; margin: 0 auto; max-width: 320px; }
.hw-dot { flex: 1 1 0; height: 8px; max-width: 48px; background: var(--hw-surface-2); border: 1px solid var(--hw-border); border-radius: 999px; }
.hw-dot.is-done { background: var(--hw-green); border-color: #b6ffac; }
.hw-dot.is-active { background: var(--hw-orange); border-color: #ffb36b; box-shadow: var(--hw-glow-orange); }

/* check de la foto elegida (ícono real, en lugar del carácter de app.css) */
.hw-photo--selected::after { content: none; }
.hw-photo__check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #0d2a08;
  background: var(--hw-green);
  border: 2px solid #b6ffac;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.hw-photo__check .hw-i { width: 1.4rem; height: 1.4rem; vertical-align: 0; stroke-width: 3.2; }
.hw-photo--selected .hw-photo__check { display: grid; }
.hw-photo:focus-visible { outline-offset: 2px; border-color: var(--hw-green); }
.hw-chosen { min-height: 1.6em; margin: 0 0 10px; }

.hw-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 8px calc(var(--hw-gutter) * -1) 0;
  padding: 24px var(--hw-gutter) max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(13, 10, 20, 0) 0, rgba(13, 10, 20, 0.94) 22px, rgba(13, 10, 20, 0.98) 100%);
}

.hw-actions--ballot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hw-actions--ballot > :first-child { grid-column: 1 / -1; }
.hw-actions--sticky .hw-btn--ghost { background: var(--hw-surface); }
.hw-actions--sticky .hw-btn--ghost:hover { background: #2c2147; }
.hw-page--compact .hw-logo { width: min(44%, 170px); margin: 0 auto 10px; }

/* celebración al terminar de votar */
.hw-celebrate { background: radial-gradient(circle at 50% 18%, rgba(255, 122, 26, 0.28) 0%, rgba(26, 19, 37, 0) 55%), linear-gradient(160deg, var(--hw-surface) 0%, var(--hw-surface-2) 100%); }
.hw-celebrate__art { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; }
.hw-trophy--big { width: 150px; height: auto; margin: 0; filter: drop-shadow(0 0 22px rgba(255, 190, 40, 0.65)); }
.hw-celebrate__spark { flex: 0 0 auto; }

/* el foco programático en los títulos no necesita aro */
[tabindex='-1']:focus { outline: none; }

.hw-notice { border-color: var(--hw-green); }
.hw-notice h3 { margin-bottom: 0.3em; }
.hw-uploads + .hw-btn, .hw-uploads + .hw-costume { margin-top: 16px; }
.hw-status--ok[role='status'] { margin-bottom: 12px; }

/* avisos breves: ícono + texto */
.hw-toast { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hw-toast--ok .hw-i { color: var(--hw-green); }
.hw-toast--error .hw-i { color: #ffb4b4; }

@media (prefers-reduced-motion: no-preference) {
  .hw-celebrate__spark { animation: hw-twinkle 1.8s ease-in-out infinite; }
  .hw-celebrate__spark--r { animation-delay: -0.9s; }
}
@keyframes hw-twinkle {
  0%, 100% { opacity: 0.5; transform: scale(0.9) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(8deg); }
}

@media (max-width: 380px) {
  .hw-person-btn__who { font-size: 1.05rem; }
  .hw-costume__photo { grid-template-columns: 96px minmax(0, 1fr); }
  .hw-preview { width: 96px; height: 132px; }
  .hw-thumb { width: 72px; height: 96px; }
}

/* ---- código de registro ---------------------------------------------------------------------------------- */
.hw-code {
  margin: 4px 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--hw-orange);
  user-select: all;
}
.hw-code--inline { display: inline; margin: 0; font-size: 1.4rem; }
.hw-code-input { text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }