/* «La voz de los jugadores» — portada, muro, ideas, formulario y moderación.
   Cálido y cercano (corazones y globos de conversación), sin parecer un anuncio:
   el mismo papel, la misma tinta y el rojo ENIGMA solo en la acción principal. */

:root {
  --voz-peach-1: #FFF7EF;
  --voz-peach-2: #FCEBDD;
  --voz-peach-line: #F3DCC7;
  --voz-hand: #E0782F;
  --voz-blue: #3E7BE0;
  --voz-blue-weak: #E6EEFC;
  --voz-gold: #E9A425;
  --voz-gold-weak: #FDF1D8;
  --voz-purple: #6A55D8;
  --voz-purple-weak: #EEEAFC;
  --voz-green: #2F8A5B;
  --voz-green-weak: #E3F2E8;
  --voz-green-line: #CDE6D6;
  --voz-star: #F2B01E;
}
:root[data-theme="dark"] {
  --voz-peach-1: #262019;
  --voz-peach-2: #2B221B;
  --voz-peach-line: #3A3027;
  --voz-hand: #F0A066;
  --voz-blue: #82AEF5;
  --voz-blue-weak: #1E2A3D;
  --voz-gold: #EBC064;
  --voz-gold-weak: #352B17;
  --voz-purple: #AFA2F5;
  --voz-purple-weak: #2A2541;
  --voz-green: #7CC69A;
  --voz-green-weak: #1B2E22;
  --voz-green-line: #2A4433;
  --voz-star: #F2C14E;
}

/* ---------- cabecera ---------- */
.voz-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); align-items: center;
  gap: clamp(12px, 2.5vw, 32px);
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 36px);
  border-radius: var(--r-xl);
  border: 1px solid var(--voz-peach-line);
  background:
    radial-gradient(55% 90% at 12% 40%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%),
    linear-gradient(115deg, var(--voz-peach-1) 0%, var(--voz-peach-2) 100%);
  box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 18px 40px -26px rgba(200, 90, 40, .35);
}
.voz-hero-art { position: relative; align-self: center; }
.voz-hero-art img { display: block; width: 100%; height: auto; animation: voz-bob 6s ease-in-out infinite; transform-origin: 50% 80%; }
.voz-float { position: absolute; display: grid; place-items: center; color: var(--accent); opacity: .0; animation: voz-rise 7s ease-in-out infinite; pointer-events: none; }
.voz-float svg { width: 14px; height: 14px; }
.voz-float-1 { left: 8%; bottom: 10%; animation-delay: .5s; }
.voz-float-2 { right: 6%; bottom: 22%; animation-delay: 3s; color: color-mix(in srgb, var(--accent) 70%, #F5A3A0); }
.voz-float-3 { left: 46%; top: 2%; animation-delay: 5s; color: var(--voz-blue); }
.voz-float-3 svg { width: 16px; height: 16px; }
@keyframes voz-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes voz-rise {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  20% { opacity: .85; }
  60% { opacity: .6; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.05); }
}
.voz-hero-copy { min-width: 0; }
.voz-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.voz-kicker svg { width: 14px; height: 14px; color: var(--accent); }
.voz-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); }
.voz-tagline { margin: 6px 0 0; font-weight: 600; font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem); color: var(--ink-2); }
.voz-lede { margin: 8px 0 0; max-width: 56ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); }
.voz-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--ink-2); }
.voz-points li { display: inline-flex; align-items: center; gap: 7px; }
.vp { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.vp svg { width: 15px; height: 15px; }
.vp-heart { background: var(--accent-weak); color: var(--accent); }
.vp-bulb { background: var(--voz-gold-weak); color: var(--voz-gold); }
.vp-gear { background: var(--voz-blue-weak); color: var(--voz-blue); }
.vp-users { background: var(--voz-purple-weak); color: var(--voz-purple); }
.voz-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.voz-actions .btn svg { width: 18px; height: 18px; }
.voz-cta { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.voz-cta, .voz-cta-2 { gap: 9px; min-height: 52px; padding-inline: 24px; font-size: var(--t-md); }
.voz-cta-2 { --btn-bg: var(--surface); }
.voz-cta-2 .ico-bulb { color: var(--voz-gold); }
.voz-hand {
  position: absolute; top: 14px; right: 22px; margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; line-height: 1.05;
  color: var(--voz-hand); transform: rotate(-8deg); text-align: center; pointer-events: none;
}
.voz-hand::after { content: ""; display: block; height: 6px; margin: 4px 6px 0; border-bottom: 2px solid currentColor; border-radius: 0 0 60% 40%; opacity: .75; }
@media (max-width: 1180px) { .voz-hand { display: none; } }
@media (max-width: 640px) {
  .voz-hero { grid-template-columns: minmax(0, 1fr); text-align: left; padding-top: 12px; }
  .voz-hero-art { width: 150px; margin: 0 auto -4px; }
  .voz-points { gap: 6px 14px; font-size: .82rem; }
  .voz-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- sub-secciones ---------- */
.voz-home { margin-top: clamp(30px, 3vw, 44px); }
.voz-sub { margin-top: 22px; }
.voz-sub-head { flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 12px; }
.voz-sub-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); color: var(--ink); }
.voz-sub-title > svg { width: 22px; height: 22px; color: var(--voz-blue); flex: none; }
.voz-sub-done > svg { box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--voz-green); color: #fff; stroke-width: 2.6; }
.voz-sub-lede { margin: -4px 0 14px; color: var(--ink-2); font-size: var(--t-sm); }
.voz-count { margin-left: 4px; font-family: var(--font-num); font-size: var(--t-xs); font-weight: 500; color: var(--muted); }
.voz-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--line-2); color: var(--ink-2); font-size: var(--t-sm); }
.voz-note svg { width: 18px; height: 18px; flex: none; color: var(--voz-green); }

/* ---------- tarjetas ---------- */
.voz-grid { display: grid; gap: 14px; }
.voz-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voz-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 960px) { .voz-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .voz-grid-3, .voz-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.voz-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.voz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.voz-card:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-md); }
.voz-card.is-featured { border-color: color-mix(in srgb, var(--voz-star) 45%, var(--line)); }
.voz-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voz-cat, .voz-feat, .voz-idea {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; line-height: 1.6;
}
.voz-cat-opinion { background: var(--accent-weak); color: var(--accent-ink); }
.voz-cat-juego { background: var(--voz-gold-weak); color: color-mix(in srgb, var(--voz-gold) 55%, var(--ink)); }
.voz-cat-mejora { background: var(--voz-blue-weak); color: color-mix(in srgb, var(--voz-blue) 70%, var(--ink)); }
.voz-cat-problema { background: var(--surface-2); color: var(--ink-2); }
.voz-feat { background: var(--voz-gold-weak); color: color-mix(in srgb, var(--voz-gold) 55%, var(--ink)); }
.voz-feat svg, .voz-idea svg { width: 12px; height: 12px; }
.voz-feat svg { fill: currentColor; }
.voz-idea { background: var(--surface-2); color: var(--ink-2); }
.voz-idea-evaluacion { background: var(--voz-purple-weak); color: color-mix(in srgb, var(--voz-purple) 75%, var(--ink)); }
.voz-idea-desarrollo { background: var(--voz-blue-weak); color: color-mix(in srgb, var(--voz-blue) 70%, var(--ink)); }
.voz-idea-implementada { background: var(--voz-green-weak); color: var(--voz-green); }
.voz-quote { margin: 0; }
.voz-quote p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.voz-quote p::before { content: "“"; }
.voz-quote p::after { content: "”"; }
.voz-card.is-compact .voz-quote p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.voz-stars { display: inline-flex; align-self: flex-start; gap: 2px; margin: 0; }
.voz-stars svg { width: 18px; height: 18px; fill: var(--surface-3); }
.voz-stars svg.is-on { fill: var(--voz-star); }
.voz-stars.is-sm { vertical-align: -3px; }
.voz-stars.is-sm svg { width: 14px; height: 14px; }
.voz-who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.voz-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 700; font-size: 1rem; }
.voz-avatar svg { width: 17px; height: 17px; }
.voz-avatar-0 { background: var(--voz-purple-weak); color: var(--voz-purple); }
.voz-avatar-1 { background: var(--voz-green-weak); color: var(--voz-green); }
.voz-avatar-2 { background: var(--voz-blue-weak); color: var(--voz-blue); }
.voz-avatar-3 { background: var(--accent-weak); color: var(--accent); }
.voz-who-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.voz-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.voz-who time { font-size: var(--t-xs); color: var(--muted); }
/* respuestas del equipo: un poco más destacadas que el mensaje, colgando de él */
.voz-replies { display: grid; gap: 8px; margin-top: 2px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.voz-reply {
  position: relative; padding: 11px 13px 12px; border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), color-mix(in srgb, var(--accent) 4%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 10%, transparent);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.voz-reply::before { content: ""; position: absolute; left: -15px; top: 18px; width: 13px; border-top: 2px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.voz-reply:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.voz-reply-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font-size: var(--t-xs); color: var(--muted); }
.voz-reply-who { font-weight: 700; font-size: var(--t-sm); color: var(--accent-ink); letter-spacing: .01em; }
.voz-reply-heart { font-size: .95em; }
.voz-reply-tag { padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--accent-ink); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.voz-reply-txt { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.voz-card.is-compact .voz-replies { padding-left: 10px; }
.voz-card.is-compact .voz-reply::before { left: -11px; width: 9px; }
.voz-card.is-compact .voz-reply-txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.voz-done { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; padding: 4px 11px; border-radius: var(--r-pill); background: var(--voz-green-weak); color: var(--voz-green); font-size: .78rem; font-weight: 600; }
.voz-done svg { width: 14px; height: 14px; color: var(--accent); }

/* ideas hechas realidad */
.voz-done-wrap { padding: clamp(14px, 2vw, 22px); border-radius: var(--r-xl); background: color-mix(in srgb, var(--voz-green-weak) 55%, var(--bg)); border: 1px solid var(--voz-green-line); }
.voz-done-wrap .voz-note { background: var(--surface); border-color: var(--voz-green-line); }
.voz-done-card { display: flex; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.voz-done-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--voz-blue-weak); color: var(--voz-blue); }
.voz-done-ico svg { width: 24px; height: 24px; }
.voz-done-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.voz-done-title { margin: 0; font-size: var(--t-md); font-weight: 650; }
.voz-done-title a { color: inherit; }
.voz-done-quote { margin: 0; }
.voz-done-quote p { margin: 0; font-style: italic; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.voz-done-quote p::before { content: "“"; }
.voz-done-quote p::after { content: "”"; }
.voz-done-by { margin: 0; font-size: var(--t-xs); color: var(--muted); }

/* invitación cuando aún no hay opiniones */
.voz-empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line-2));
}
.voz-empty > div { flex: 1 1 260px; min-width: 0; }
.voz-empty-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); }
.voz-empty-ico svg { width: 26px; height: 26px; animation: voz-beat 3.6s ease-in-out infinite; }
.voz-empty-t { margin: 0; font-weight: 600; color: var(--ink); }
.voz-empty-s { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
@keyframes voz-beat { 0%, 62%, 100% { transform: scale(1); } 70% { transform: scale(1.12); } 78% { transform: scale(.98); } 86% { transform: scale(1.06); } }

/* ---------- muro ---------- */
.voz-published { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.voz-published svg { width: 18px; height: 18px; flex: none; }
.voz-published a { margin-left: auto; color: inherit; font-weight: 600; }
.voz-page { max-width: 1120px; }
.voz-top { margin-top: 4px; }
.voz-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.voz-filter { padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--t-sm); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.voz-filter:hover { color: var(--ink); border-color: var(--line-2); }
.voz-filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.voz-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 18px; }
.voz-pager > :last-child { justify-self: end; }
.voz-pager-n { font-size: var(--t-sm); color: var(--muted); }
.voz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: voz; }
.voz-steps li { counter-increment: voz; position: relative; padding: 14px 16px 14px 52px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.voz-steps li::before { content: counter(voz); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-weak); color: var(--accent-ink); font-weight: 700; font-size: .85rem; }
.voz-steps strong { color: var(--ink); }
@media (max-width: 760px) { .voz-steps { grid-template-columns: minmax(0, 1fr); } }
.voz-privacy { margin: 14px 0 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; max-width: 80ch; }

/* ---------- formulario ---------- */
.voz-form-page { max-width: 760px; }
.voz-form-head { display: flex; align-items: center; gap: 8px 20px; margin: 4px 0 18px; }
.voz-form-art { flex: none; width: 150px; height: auto; animation: voz-bob 6s ease-in-out infinite; }
.voz-form-title { margin: 6px 0 6px; }
.voz-form-head .lede { margin: 0; }
.voz-form-head .kicker a, .voz-ideas-head .kicker a { color: inherit; text-decoration: none; }
@media (max-width: 560px) { .voz-form-head { flex-direction: column; align-items: flex-start; } .voz-form-art { width: 120px; } }
.voz-form { padding: clamp(18px, 3vw, 28px); }
.voz-field { margin: 0 0 var(--s-5); padding: 0; border: 0; min-width: 0; }
.voz-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .voz-cats { grid-template-columns: minmax(0, 1fr); } }
.voz-cat-opt {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px;
  border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.voz-cat-opt:hover { border-color: var(--line-2); transform: translateY(-1px); }
.voz-cat-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voz-cat-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent-weak) 60%, var(--surface)); }
.voz-cat-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.voz-cat-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.voz-cat-ico svg { width: 20px; height: 20px; }
.voz-cat-opt-opinion .voz-cat-ico { background: var(--accent-weak); color: var(--accent); }
.voz-cat-opt-juego .voz-cat-ico { background: var(--voz-gold-weak); color: var(--voz-gold); }
.voz-cat-opt-mejora .voz-cat-ico { background: var(--voz-blue-weak); color: var(--voz-blue); }
.voz-cat-opt-problema .voz-cat-ico { background: var(--surface-2); color: var(--ink-2); }
.voz-cat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.voz-cat-name { font-weight: 600; color: var(--ink); }
.voz-cat-hint { font-size: var(--t-xs); color: var(--muted); }
.voz-field.has-error .voz-cat-opt { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.voz-private-note { display: flex; gap: 10px; align-items: flex-start; margin: -8px 0 var(--s-5); padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); }
.voz-private-note[hidden] { display: none; }
.voz-private-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.voz-rating[hidden] { display: none; }
.voz-rate { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.voz-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voz-rate label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.voz-rate svg { width: 32px; height: 32px; fill: var(--surface-3); stroke: color-mix(in srgb, var(--voz-star) 40%, var(--line-2)); stroke-width: 1; transition: transform var(--dur) var(--ease), fill var(--dur) var(--ease); }
.voz-rate input:checked ~ label svg, .voz-rate label:hover svg, .voz-rate label:hover ~ label svg { fill: var(--voz-star); stroke: var(--voz-star); }
.voz-rate label:hover svg { transform: scale(1.12); }
.voz-rate input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }
.voz-norate { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: var(--t-sm); color: var(--muted); cursor: pointer; vertical-align: super; }
.voz-norate input { accent-color: var(--accent); }
.voz-hint { display: flex; justify-content: space-between; gap: 10px; }
.voz-counter { font-family: var(--font-num); }
.voz-moderation { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--s-5); padding: 12px 14px; border-radius: var(--r-md); background: var(--voz-green-weak); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.voz-moderation p { margin: 0; }
.voz-moderation strong { color: var(--ink); }
.voz-moderation svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--voz-green); color: #fff; stroke-width: 2.6; box-sizing: border-box; }
.voz-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.voz-form-actions .btn svg { width: 18px; height: 18px; }
.voz-form-actions .btn.is-busy { opacity: .75; pointer-events: none; }

/* ---------- gracias ---------- */
.voz-thanks { max-width: 640px; margin: 8px auto 0; padding: clamp(24px, 4vw, 40px); text-align: center; }
.voz-thanks h1 { margin: 12px 0 10px; outline: none; }
.voz-thanks .lede { margin: 0 auto 10px; }
.voz-thanks-more { margin: 0 auto; max-width: 52ch; font-size: var(--t-sm); color: var(--ink-2); }
.voz-thanks-heart { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.voz-thanks-heart svg { width: 38px; height: 38px; animation: voz-beat 3.2s ease-in-out infinite; }
.voz-thanks-actions { justify-content: center; }

/* ---------- moderación (admin) ---------- */
.vz-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0; font-size: var(--t-sm); }
.vz-dl dt { color: var(--ink-2); }
.vz-dl dd { margin: 0; text-align: right; }
.vz-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-sm); }
.vz-filters select, .vz-filters button, .vz-actions button, .vz-box button, .vz-idea-form select, .vz-idea-form input {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-xs);
}
.vz-filters button, .vz-actions button, .vz-box button { font-weight: 600; cursor: pointer; }
.vz-actions button:hover, .vz-box button:hover { border-color: var(--line-2); background: var(--surface-2); }
.vz-actions button.is-ok { background: var(--voz-green); border-color: var(--voz-green); color: #fff; }
.vz-actions button.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.vz-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.vz-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); scroll-margin-top: calc(var(--header-h) + 12px); }
.vz-item.is-pendiente { border-left: 3px solid var(--voz-gold); }
.vz-item.is-aprobada { border-left: 3px solid var(--voz-green); }
.vz-item.is-rechazada, .vz-item.is-eliminada { opacity: .8; }
.vz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-sm); }
.vz-date { color: var(--muted); font-family: var(--font-num); }
.vz-mod { padding: 2px 9px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.vz-mod-pendiente { background: var(--voz-gold-weak); color: color-mix(in srgb, var(--voz-gold) 55%, var(--ink)); }
.vz-mod-aprobada { background: var(--voz-green-weak); color: var(--voz-green); }
.vz-mod-rechazada, .vz-mod-eliminada { background: var(--danger-weak); color: var(--danger); }
.vz-who { margin: 8px 0 0; font-size: var(--t-sm); }
.vz-msg { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); line-height: 1.5; }
.vz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--t-sm); }
.vz-actions form { margin: 0; }
.vz-box { margin-top: 10px; font-size: var(--t-sm); }
.vz-box summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.vz-box form { display: grid; gap: 8px; margin-top: 8px; }
.vz-box textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); }
.vz-box button { justify-self: start; }
.vz-idea-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.vz-idea-form label { display: grid; gap: 4px; font-size: var(--t-xs); color: var(--muted); }
.vz-idea-form input { border-radius: var(--r-sm); width: 100%; }
/* respuestas del equipo en el panel */
.vz-replies { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; display: grid; gap: 8px; border-left: 2px solid color-mix(in srgb, var(--accent) 25%, var(--line)); font-size: var(--t-sm); }
.vz-reply { padding: 9px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); scroll-margin-top: calc(var(--header-h) + 12px); }
.vz-reply:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.vz-reply-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.vz-reply-h strong { color: var(--accent-ink); }
.vz-reply-txt { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.vz-reply-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px; }
.vz-reply-tools > form { margin: 0; }
.vz-inline { font-size: var(--t-sm); }
.vz-inline > summary { list-style: none; display: inline-block; }
.vz-inline > summary::-webkit-details-marker { display: none; }
.vz-inline[open] { flex-basis: 100%; }
.vz-reply-new { margin-top: 10px; }
.vz-btn, .vz-reply-form button { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; }
.vz-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
.vz-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.vz-btn.is-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.vz-btn.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.vz-reply-form { display: grid; gap: 8px; margin-top: 8px; }
.vz-reply-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); }
.vz-reply-form button { justify-self: start; }
.vz-reply-form button.is-ok { background: var(--voz-green); border-color: var(--voz-green); color: #fff; }
@media (max-width: 760px) { .vz-idea-form { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .voz-hero-art img, .voz-float, .voz-empty-ico svg, .voz-thanks-heart svg, .voz-form-art { animation: none; }
  .voz-float { display: none; }
  .voz-card, .voz-cat-opt { transition: none; }
  .voz-card:hover, .voz-cat-opt:hover { transform: none; }
}
@media print { .voz-home, .voz-actions, .voz-float { display: none; } }