/* vote.css — pantalla de votar (pila de tarjetas) y hoja de resultado. */

/* La pantalla ocupa justo el alto visible: la pila se encoge para que los botones no queden bajo la barra. */
.vote-screen { display: flex; flex-direction: column; height: 100dvh; min-height: 560px; }
.vote-progress { font-size: var(--fs-13); color: var(--text-muted); margin: var(--space-1) var(--space-1) 0; min-height: 20px; }

.deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  max-height: 560px;
  margin-top: var(--space-4);
}

.vote-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
  transition: transform var(--dur-move) var(--ease-out), opacity var(--dur-move);
  overflow: hidden;
}
.vote-card.dragging { transition: none; cursor: grabbing; }
.vote-card:focus { outline: none; }
.vote-card.behind {
  transform: translateY(12px) scale(.955);
  opacity: .7;
  pointer-events: none;
  box-shadow: var(--shadow-card);
}
.vote-card.fly-yes { transform: translate(140%, -4%) rotate(18deg) !important; opacity: 0; }
.vote-card.fly-no { transform: translate(-140%, -4%) rotate(-18deg) !important; opacity: 0; }
.vote-card.fly-skip { transform: translateY(-120%) scale(.9) !important; opacity: 0; }

.vote-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.vote-card-date { font-size: var(--fs-13); color: var(--text-muted); white-space: nowrap; }
.vote-card-title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty;
}
.vote-card-title.long { font-size: 1.2rem; -webkit-line-clamp: 8; }
.vote-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-13); color: var(--text-secondary); font-weight: 600; }
.vote-card-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.vote-card-bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.vote-card-question { font-size: var(--fs-17); font-weight: 700; }
.vote-card-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary);
}

.stamp {
  position: absolute; top: 28px;
  padding: 6px 14px; border-radius: 12px; border: 3px solid currentColor;
  font-weight: 800; font-size: var(--fs-20); letter-spacing: .04em;
  background: var(--surface);
  opacity: 0; pointer-events: none;
}
.stamp-yes { left: 22px; color: var(--yes); transform: rotate(-12deg); opacity: var(--yes-o, 0); }
.stamp-no { right: 22px; color: var(--no); transform: rotate(12deg); opacity: var(--no-o, 0); }

.deck .empty-state, .deck .deck-error {
  position: absolute; inset: 0;
  justify-content: center;
  background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-card);
}
.deck-skeleton { position: absolute; inset: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-card); }

.vote-actions {
  display: flex; align-items: flex-end; justify-content: center; gap: var(--space-6);
  margin-top: var(--space-6);
}
.vote-btn {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem;
  background: var(--surface); box-shadow: var(--shadow-card);
  border: 2px solid var(--border);
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-press);
}
.vote-btn:active { transform: scale(.92); }
.vote-btn.no { color: var(--no); }
.vote-btn.yes { color: var(--yes); }
.vote-btn.skip { width: 52px; height: 52px; font-size: 1.2rem; color: var(--text-secondary); }
@media (hover: hover) {
  .vote-btn.no:hover { background: var(--no-soft); }
  .vote-btn.yes:hover { background: var(--yes-soft); }
  .vote-btn.skip:hover { background: var(--surface-2); }
}
.vote-btn:disabled { opacity: .5; cursor: default; transform: none; }
.vote-btn-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: center; margin-top: 6px; }
.vote-action { display: flex; flex-direction: column; align-items: center; }

.vote-hint {
  margin-top: var(--space-4); text-align: center;
  font-size: var(--fs-13); color: var(--text-muted);
}

@media (max-height: 720px) {
  .deck { margin-top: var(--space-2); }
  .vote-card { padding: var(--space-4); gap: var(--space-3); }
  .vote-card-title { font-size: 1.25rem; -webkit-line-clamp: 5; }
  .vote-card-title.long { font-size: 1.1rem; -webkit-line-clamp: 6; }
  .vote-card-question { font-size: var(--fs-15); }
  .vote-actions { margin-top: var(--space-4); }
  .vote-hint { display: none; }
}

/* ---- Filtro ---- */
.filter-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); cursor: pointer; }
.filter-row .row-main { gap: 0; }

/* ---- Resultado ---- */
.result-head { display: flex; flex-direction: column; gap: var(--space-3); }
.outcome {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  font-weight: 800; font-size: var(--fs-15);
  background: var(--neutral-soft); color: var(--text);
}
.outcome.passed { background: var(--yes-soft); color: var(--yes); }
.outcome.failed { background: var(--no-soft); color: var(--no); }
.result-title { font-size: var(--fs-20); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; text-wrap: pretty; }
.result-meta { font-size: var(--fs-13); color: var(--text-muted); }

.tally { margin-top: var(--space-4); }
.tally-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); gap: 2px; }
.tally-bar > span { display: block; height: 100%; transform-origin: left; animation: grow 700ms var(--ease-out) backwards; }
.seg-yes { background: var(--yes); }
.seg-no { background: var(--no); }
.seg-abstain { background: var(--abstain); }
.tally-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: var(--fs-13); color: var(--text-secondary); font-weight: 600; }
.tally-legend b { font-weight: 800; color: var(--text); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.tally-note { font-size: var(--fs-13); color: var(--text-muted); margin-top: var(--space-1); }

.your-choice {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--surface); border-radius: var(--radius-control); box-shadow: var(--shadow-card);
  font-weight: 600;
}

.party-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 60px; }
.party-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.party-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-counts { font-size: var(--fs-12); color: var(--text-muted); font-weight: 600; }
.mini-bar { display: flex; height: 6px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); max-width: 180px; }
.party-end { display: flex; align-items: center; gap: var(--space-2); }
.match { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; }
.match.agree { color: var(--yes); background: var(--yes-soft); }
.match.disagree { color: var(--no); background: var(--no-soft); }
.match.half { color: var(--text-secondary); background: var(--surface-2); }

.points { display: flex; flex-direction: column; gap: var(--space-2); }
.point { background: var(--surface); border-radius: var(--radius-control); box-shadow: var(--shadow-card); }
.point summary {
  display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-4);
  cursor: pointer; list-style: none; font-weight: 700;
}
.point summary::-webkit-details-marker { display: none; }
.point summary .bi { margin-left: auto; transition: transform var(--dur-move); color: var(--text-muted); }
.point[open] summary .bi { transform: rotate(180deg); }
.point-body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.point-party { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 600; }

.result-links { display: flex; flex-direction: column; margin-top: var(--space-5); }
.result-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }