/* =========================================================
   WPQ Votes Design System
   Tokens · Componentes base · Utilidades (prefix vw-)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
/* Extra families used ONLY by the per-contest voting-gallery skin (.vwg-*):
   DM Serif Display (serif), Space Grotesk (geo), Sora (contemporánea). */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;600;700;800&display=swap');

/* ---------- TOKENS ---------- */
:root {
  --vw-accent: 6 182 212;
  --vw-accent-strong: 8 145 178;
  --vw-accent-soft: 165 243 252;

  --vw-success: 34 197 94;
  --vw-success-strong: 22 163 74;
  --vw-warning: 245 158 11;
  --vw-warning-strong: 217 119 6;
  --vw-danger: 244 63 94;
  --vw-danger-strong: 225 29 72;

  --vw-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --vw-radius-xs: 6px;
  --vw-radius-sm: 8px;
  --vw-radius: 12px;
  --vw-radius-lg: 16px;
  --vw-radius-xl: 20px;
  --vw-radius-2xl: 28px;
  --vw-radius-pill: 999px;

  --vw-ease: cubic-bezier(.2,.7,.2,1);
  --vw-ease-out: cubic-bezier(.16,1,.3,1);

  --vw-shadow-sm: 0 1px 2px rgb(0 0 0 / .12);
  --vw-shadow: 0 4px 16px -2px rgb(0 0 0 / .18), 0 2px 6px -1px rgb(0 0 0 / .12);
  --vw-shadow-lg: 0 18px 40px -10px rgb(0 0 0 / .35), 0 6px 14px -4px rgb(0 0 0 / .22);
  --vw-shadow-float: 0 20px 50px -12px rgb(0 0 0 / .55), 0 8px 18px -4px rgb(0 0 0 / .35);
}

/* ---------- THEMES ---------- */
[data-vw-theme="dark"], :root {
  --vw-bg:        9 10 16;
  --vw-bg-deep:   5 6 11;
  --vw-surface:   17 19 28;
  --vw-elevated:  24 27 38;
  --vw-elevated-2: 32 36 50;
  --vw-border:    255 255 255;
  --vw-border-a:  0.07;
  --vw-border-strong-a: 0.14;
  --vw-text:      245 246 250;
  --vw-text-soft: 175 181 200;
  --vw-text-mute: 113 119 138;
  --vw-overlay:   0 0 0 / 0.65;
  --vw-image-tint: 255 255 255 / 0.04;
}

[data-vw-theme="light"] {
  --vw-bg:        246 248 252;
  --vw-bg-deep:   239 242 248;
  --vw-surface:   255 255 255;
  --vw-elevated:  248 250 253;
  --vw-elevated-2: 241 245 251;
  --vw-border:    15 23 42;
  --vw-border-a:  0.08;
  --vw-border-strong-a: 0.18;
  --vw-text:      15 23 42;
  --vw-text-soft: 71 85 105;
  --vw-text-mute: 148 163 184;
  --vw-overlay:   15 23 42 / 0.55;
  --vw-image-tint: 15 23 42 / 0.04;
}

/* ---------- ACCENT PALETTE (8) ---------- */
[data-vw-accent="indigo"]  { --vw-accent: 99 102 241;  --vw-accent-strong: 79 70 229;   --vw-accent-soft: 199 210 254; }
[data-vw-accent="sky"]     { --vw-accent: 14 165 233;  --vw-accent-strong: 2 132 199;   --vw-accent-soft: 186 230 253; }
[data-vw-accent="teal"]    { --vw-accent: 20 184 166;  --vw-accent-strong: 13 148 136;  --vw-accent-soft: 153 246 228; }
[data-vw-accent="amber"]   { --vw-accent: 245 158 11;  --vw-accent-strong: 217 119 6;   --vw-accent-soft: 253 230 138; }
[data-vw-accent="rose"]    { --vw-accent: 244 63 94;   --vw-accent-strong: 225 29 72;   --vw-accent-soft: 254 205 211; }
[data-vw-accent="purple"]  { --vw-accent: 168 85 247;  --vw-accent-strong: 147 51 234;  --vw-accent-soft: 233 213 255; }
[data-vw-accent="pink"]    { --vw-accent: 236 72 153;  --vw-accent-strong: 219 39 119;  --vw-accent-soft: 251 207 232; }
[data-vw-accent="cyan"]    { --vw-accent: 6 182 212;   --vw-accent-strong: 8 145 178;   --vw-accent-soft: 165 243 252; }
[data-vw-accent="sage"]    { --vw-accent: 109 142 122; --vw-accent-strong: 78 109 92;   --vw-accent-soft: 200 215 207; }

/* ---------- BASE ---------- */
/* Scoped to the plugin's own surfaces so embedding a shortcode/Elementor widget on a
   host page NEVER restyles the host's box model, fonts or text selection. The CSS is
   enqueued page-wide, so unscoped `*`, `html`, `body` rules used to leak onto the
   whole theme. Roots = standalone portals (body.wpqv-portal), embed wrappers
   (.wpqv-spa-wrap / .wpqv-embed) and the overlays the SPA appends to the host <body>
   (modals, lightbox, toasts, datepicker popover). font-family inherits, so the root
   rule is enough for it; box-sizing does NOT inherit, hence the descendant selectors. */
body.wpqv-portal,
.wpqv-spa-wrap,
.wpqv-embed,
.vw-leaderboard,
.wpqv-vote-counter-widget,
.vw-modal-backdrop,
.vw-lightbox,
.vw-toasts,
.vw-datepick-pop {
  font-family: var(--vw-font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.wpqv-portal { margin: 0; }
body.wpqv-portal, body.wpqv-portal *, body.wpqv-portal *::before, body.wpqv-portal *::after,
.wpqv-spa-wrap, .wpqv-spa-wrap *, .wpqv-spa-wrap *::before, .wpqv-spa-wrap *::after,
.wpqv-embed, .wpqv-embed *, .wpqv-embed *::before, .wpqv-embed *::after,
.vw-leaderboard, .vw-leaderboard *, .vw-leaderboard *::before, .vw-leaderboard *::after,
.wpqv-vote-counter-widget, .wpqv-vote-counter-widget *, .wpqv-vote-counter-widget *::before, .wpqv-vote-counter-widget *::after,
.vw-modal-backdrop, .vw-modal-backdrop *, .vw-modal-backdrop *::before, .vw-modal-backdrop *::after,
.vw-lightbox, .vw-lightbox *, .vw-lightbox *::before, .vw-lightbox *::after,
.vw-toasts, .vw-toasts *, .vw-toasts *::before, .vw-toasts *::after,
.vw-datepick-pop, .vw-datepick-pop *, .vw-datepick-pop *::before, .vw-datepick-pop *::after {
  box-sizing: border-box;
}
/* Paint the page background + text color ONLY on the plugin's own surfaces: the
   standalone portals (which own the whole page, marked body.wpqv-portal) and the
   embed wrappers. Previously this was an unscoped `body { background: … }`, which
   painted the HOST theme's <body> with the plugin's dark background — turning normal
   site pages black wherever a widget/shortcode loaded the plugin CSS. An embed stays
   a self-contained themed box (set its theme per-widget via Apariencia); the host
   page keeps its own background. */
body.wpqv-portal,
.wpqv-spa-wrap,
.wpqv-embed {
  background: rgb(var(--vw-bg));
  color: rgb(var(--vw-text));
}
/* Modals + lightbox are appended to <body> (outside the wrappers), so they used to
   inherit their text color from the global body rule. Give it to them explicitly so
   they render correctly when opened from an embed on a host theme page. Their own
   backgrounds (overlay / surface / black) are set in their own rules. */
.vw-modal-backdrop,
.vw-lightbox {
  color: rgb(var(--vw-text));
}
/* Selection color scoped to plugin surfaces only (don't recolor host-page selection). */
body.wpqv-portal ::selection,
.wpqv-spa-wrap ::selection,
.wpqv-embed ::selection,
.vw-modal-backdrop ::selection,
.vw-lightbox ::selection { background: rgb(var(--vw-accent) / .35); color: rgb(var(--vw-text)); }

/* Scrollbars */
.vw-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.vw-scroll::-webkit-scrollbar-thumb { background: rgb(var(--vw-border) / 0.18); border-radius: 999px; }
.vw-scroll::-webkit-scrollbar-thumb:hover { background: rgb(var(--vw-border) / 0.28); }

/* ---------- TEXT ---------- */
.vw-h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.vw-h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.vw-h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.vw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--vw-text-mute)); }
.vw-soft { color: rgb(var(--vw-text-soft)); }
.vw-mute { color: rgb(var(--vw-text-mute)); }
.vw-mono { font-family: var(--vw-mono); }

/* ---------- SURFACES ---------- */
.vw-card {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  transition: border-color .25s var(--vw-ease), transform .25s var(--vw-ease), box-shadow .25s var(--vw-ease);
}
.vw-card-hover:hover {
  border-color: rgb(var(--vw-accent) / .55);
  transform: translateY(-2px);
  box-shadow: var(--vw-shadow);
}
.vw-elev { background: rgb(var(--vw-elevated)); }
.vw-elev-2 { background: rgb(var(--vw-elevated-2)); }
.vw-divider { border-top: 1px solid rgb(var(--vw-border) / var(--vw-border-a)); }

/* ---------- BUTTONS ---------- */
.vw-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 14px; border-radius: var(--vw-radius-sm);
  font-family: var(--vw-font); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  appearance: none; -webkit-appearance: none;
  background-color: transparent;
  transition: transform .12s var(--vw-ease), background-color .2s var(--vw-ease), border-color .2s var(--vw-ease), color .2s var(--vw-ease), box-shadow .2s var(--vw-ease);
  white-space: nowrap;
}
.vw-btn:active { transform: translateY(1px); }
.vw-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--vw-accent) / .35); }
.vw-btn .ti { font-size: 16px; }

.vw-btn-primary {
  background: rgb(var(--vw-accent));
  color: white;
}
.vw-btn-primary:hover { background: rgb(var(--vw-accent-strong)); }

.vw-btn-ghost {
  background: transparent;
  color: rgb(var(--vw-text));
  border-color: rgb(var(--vw-border) / var(--vw-border-strong-a));
}
.vw-btn-ghost:hover { background: rgb(var(--vw-border) / 0.06); border-color: rgb(var(--vw-accent) / .55); }

.vw-btn-subtle {
  background: rgb(var(--vw-border) / 0.06);
  color: rgb(var(--vw-text));
}
.vw-btn-subtle:hover { background: rgb(var(--vw-border) / 0.12); }

.vw-btn-success { background: rgb(var(--vw-success)); color: white; }
.vw-btn-success:hover { background: rgb(var(--vw-success-strong)); }

.vw-btn-danger  { background: rgb(var(--vw-danger)); color: white; }
.vw-btn-danger:hover { background: rgb(var(--vw-danger-strong)); }

.vw-btn-icon {
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--vw-radius-sm);
}

.vw-btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: var(--vw-radius-xs); }
.vw-btn-lg { padding: 13px 20px; font-size: 15px; border-radius: var(--vw-radius); }

/* ---------- INPUTS ---------- */
.vw-input, .vw-select, .vw-textarea {
  width: 100%;
  background: rgb(var(--vw-elevated));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  color: rgb(var(--vw-text));
  font-family: var(--vw-font); font-size: 14px;
  padding: 10px 12px; border-radius: var(--vw-radius-sm);
  transition: border-color .2s var(--vw-ease), box-shadow .2s var(--vw-ease), background-color .2s var(--vw-ease);
}
.vw-input:focus, .vw-select:focus, .vw-textarea:focus {
  outline: none;
  border-color: rgb(var(--vw-accent) / .8);
  box-shadow: 0 0 0 3px rgb(var(--vw-accent) / .22);
}
.vw-input::placeholder, .vw-textarea::placeholder { color: rgb(var(--vw-text-mute)); }
.vw-textarea { min-height: 110px; resize: vertical; font-family: var(--vw-font); }

.vw-input-icon { position: relative; }
.vw-input-icon .ti { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--vw-text-mute)); font-size: 17px; pointer-events: none; }
.vw-input-icon .vw-input { padding-left: 38px; }

.vw-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: rgb(var(--vw-text-soft)); }
.vw-help { font-size: 12px; color: rgb(var(--vw-text-mute)); margin-top: 6px; }

/* ---------- TOGGLE / SWITCH ---------- */
.vw-toggle {
  --w: 40px; --h: 22px;
  position: relative; display: inline-block; width: var(--w); height: var(--h);
  background: rgb(var(--vw-border) / 0.22);
  border-radius: 999px; cursor: pointer;
  transition: background-color .25s var(--vw-ease);
}
.vw-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
  background: white; border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: transform .25s var(--vw-ease);
}
.vw-toggle[aria-checked="true"] { background: rgb(var(--vw-accent)); }
.vw-toggle[aria-checked="true"]::after { transform: translateX(calc(var(--w) - var(--h))); }

/* ---------- BADGES & CHIPS ---------- */
.vw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--vw-radius-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  background: rgb(var(--vw-border) / 0.08);
  color: rgb(var(--vw-text-soft));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
}
.vw-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .85;
}
.vw-badge.vw-no-dot::before { display: none; }

.vw-badge-accent  { background: rgb(var(--vw-accent) / .14);  color: rgb(var(--vw-accent));  border-color: rgb(var(--vw-accent) / .25); }
.vw-badge-success { background: rgb(var(--vw-success) / .14); color: rgb(var(--vw-success)); border-color: rgb(var(--vw-success) / .25); }
.vw-badge-warning { background: rgb(var(--vw-warning) / .16); color: rgb(var(--vw-warning)); border-color: rgb(var(--vw-warning) / .3); }
.vw-badge-danger  { background: rgb(var(--vw-danger)  / .14); color: rgb(var(--vw-danger));  border-color: rgb(var(--vw-danger) / .28); }
.vw-badge-mute    { background: rgb(var(--vw-border) / .08);  color: rgb(var(--vw-text-mute)); }

/* Count badge (red on icon) */
.vw-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: rgb(var(--vw-danger));
  color: white; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- AVATAR (iniciales) ---------- */
.vw-avatar {
  width: 36px; height: 36px; border-radius: var(--vw-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: white;
  background: linear-gradient(135deg, rgb(var(--vw-accent)) 0%, rgb(var(--vw-accent-strong)) 100%);
  flex-shrink: 0;
}
.vw-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.vw-avatar-lg { width: 48px; height: 48px; font-size: 16px; }

/* ---------- SIDEBAR (admin/auditor) ---------- */
.vw-sidebar {
  width: 256px; flex-shrink: 0;
  background: rgb(var(--vw-surface));
  border-right: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
  transition: width .25s var(--vw-ease);
}
.vw-sidebar-section { padding: 14px 14px 8px; }
.vw-sidebar-section-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(var(--vw-text-mute)); padding: 0 8px 6px;
}
.vw-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: var(--vw-radius-sm);
  color: rgb(var(--vw-text-soft));
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background-color .18s var(--vw-ease), color .18s var(--vw-ease);
  text-decoration: none;
  position: relative;
}
.vw-nav-item .ti { font-size: 19px; flex-shrink: 0; }
.vw-nav-item:hover { background: rgb(var(--vw-border) / 0.06); color: rgb(var(--vw-text)); }
.vw-nav-item.vw-active {
  background: rgb(var(--vw-accent) / 0.14);
  color: rgb(var(--vw-accent));
  font-weight: 600;
}
.vw-nav-item .vw-nav-count {
  margin-left: auto;
  background: rgb(var(--vw-border) / 0.1);
  color: rgb(var(--vw-text-soft));
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.vw-nav-item.vw-active .vw-nav-count {
  background: rgb(var(--vw-accent) / .25);
  color: rgb(var(--vw-accent));
}

/* Tablet: collapse to icons only */
.vw-sidebar.vw-collapsed { width: 72px; }
.vw-sidebar.vw-collapsed .vw-nav-label,
.vw-sidebar.vw-collapsed .vw-nav-count,
.vw-sidebar.vw-collapsed .vw-sidebar-section-title,
.vw-sidebar.vw-collapsed .vw-sidebar-user-info,
.vw-sidebar.vw-collapsed .vw-sidebar-brand-text { display: none; }
.vw-sidebar.vw-collapsed .vw-nav-item { justify-content: center; padding: 11px 0; }

/* ---------- MOBILE FLOATING NAV ---------- */
.vw-mobile-nav {
  position: fixed; left: 14px; right: 14px; bottom: 14px;
  background: rgb(var(--vw-surface) / 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-strong-a));
  border-radius: var(--vw-radius-2xl);
  box-shadow: var(--vw-shadow-float);
  padding: 9px;
  display: none;
  z-index: 60;
}
.vw-mobile-nav-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.vw-mobile-nav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: var(--vw-radius);
  color: rgb(var(--vw-text-mute));
  cursor: pointer; transition: color .2s var(--vw-ease), background-color .2s var(--vw-ease);
}
.vw-mobile-nav-item .ti { font-size: 22px; }
.vw-mobile-nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
.vw-mobile-nav-item.vw-active { color: rgb(var(--vw-accent)); }
.vw-mobile-nav-item.vw-active::before {
  content: ""; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: rgb(var(--vw-accent));
  box-shadow: 0 0 8px rgb(var(--vw-accent) / .8);
}
.vw-mobile-nav-item .vw-count {
  position: absolute; top: 2px; right: 14%;
}

/* ---------- TABLE ---------- */
.vw-table-wrap {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  overflow: hidden;
}
.vw-table-scroll { overflow-x: auto; }
.vw-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.vw-table thead th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgb(var(--vw-text-mute));
  padding: 12px 16px;
  background: rgb(var(--vw-elevated));
  border-bottom: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  white-space: nowrap;
}
.vw-table tbody td {
  padding: 14px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  vertical-align: middle;
}
.vw-table tbody tr:last-child td { border-bottom: none; }
.vw-table tbody tr { transition: background-color .15s var(--vw-ease); }
.vw-table tbody tr:hover { background: rgb(var(--vw-border) / 0.04); }
.vw-row-pending { background: rgb(var(--vw-accent) / 0.04); }
.vw-row-pending td:first-child { box-shadow: inset 3px 0 0 0 rgb(var(--vw-accent)); }
.vw-row-suspicious { background: rgb(var(--vw-danger) / 0.07); }
.vw-row-suspicious td:first-child { box-shadow: inset 3px 0 0 0 rgb(var(--vw-danger)); }
.vw-suspicious-status { min-width: 220px; max-width: 340px; }
.vw-suspicious-reason {
  display: block;
  margin-top: 6px;
  color: rgb(var(--vw-text-mute));
  font-size: 11.5px;
  line-height: 1.4;
}
.vw-suspicious-reason strong { color: rgb(var(--vw-text)); }

/* ---------- IMAGE PLACEHOLDERS ---------- */
.vw-img {
  position: relative; overflow: hidden;
  border-radius: var(--vw-radius);
  background: rgb(var(--vw-elevated));
}
.vw-img-thumb { width: 56px; height: 56px; border-radius: var(--vw-radius-sm); }
.vw-img-label {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--vw-mono); font-size: 10px; font-weight: 500;
  background: rgb(0 0 0 / .55); color: white;
  padding: 3px 7px; border-radius: var(--vw-radius-xs);
  letter-spacing: 0.02em;
}

/* ---------- PAGE LAYOUT ---------- */
.vw-page {
  padding: 28px 32px 44px;
  animation: vw-page-in .42s var(--vw-ease-out);
}
.vw-page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.vw-page-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.vw-page-sub { color: rgb(var(--vw-text-soft)); font-size: 14px; margin-top: 4px; }

@keyframes vw-page-in {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}

/* ---------- METRIC CARDS ---------- */
.vw-metric {
  padding: 18px;
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s var(--vw-ease), transform .25s var(--vw-ease);
}
.vw-metric:hover { border-color: rgb(var(--vw-accent) / .4); transform: translateY(-2px); }
.vw-metric-icon {
  width: 36px; height: 36px; border-radius: var(--vw-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--vw-accent) / .14); color: rgb(var(--vw-accent));
  font-size: 19px;
}
.vw-metric-icon .ti { font-size: 19px; }
.vw-metric-label { font-size: 12.5px; color: rgb(var(--vw-text-soft)); font-weight: 500; }
.vw-metric-value { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.vw-metric-delta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.vw-metric-delta.vw-up   { color: rgb(var(--vw-success)); }
.vw-metric-delta.vw-warn { color: rgb(var(--vw-warning)); }
.vw-metric-delta.vw-down { color: rgb(var(--vw-danger)); }

/* Number flash bounce */
.vw-num-flash { animation: vw-flash .8s var(--vw-ease-out); }
@keyframes vw-flash {
  0%   { transform: scale(1); color: inherit; }
  35%  { transform: scale(1.18); color: rgb(var(--vw-accent)); }
  100% { transform: scale(1); color: inherit; }
}

/* ---------- CONTEST CARDS ---------- */
.vw-contest {
  border-radius: var(--vw-radius-lg);
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s var(--vw-ease), transform .25s var(--vw-ease), box-shadow .25s var(--vw-ease);
}
.vw-contest:hover { border-color: rgb(var(--vw-accent) / .55); transform: translateY(-3px); box-shadow: var(--vw-shadow); }
.vw-contest-cover { aspect-ratio: 16/10; position: relative; }
.vw-contest-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.vw-contest-new {
  border: 1.5px dashed rgb(var(--vw-border) / 0.22);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; cursor: pointer; color: rgb(var(--vw-text-soft));
  transition: all .25s var(--vw-ease);
}
.vw-contest-new:hover { border-color: rgb(var(--vw-accent)); color: rgb(var(--vw-accent)); background: rgb(var(--vw-accent) / 0.04); }

/* ---------- SUBMISSION CARDS (auditor queue) ---------- */
.vw-sub-card {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s var(--vw-ease), transform .25s var(--vw-ease), opacity .35s var(--vw-ease), box-shadow .25s var(--vw-ease);
}
.vw-sub-card:hover { border-color: rgb(var(--vw-accent) / .55); transform: translateY(-2px); box-shadow: var(--vw-shadow); }
.vw-sub-card.vw-focused { border-color: rgb(var(--vw-accent)); box-shadow: 0 0 0 3px rgb(var(--vw-accent) / .22); }
.vw-sub-card.vw-removing { transform: scale(.92); opacity: 0; }
.vw-sub-cover { aspect-ratio: 4/3; position: relative; cursor: zoom-in; }
.vw-sub-cover .vw-badge { position: absolute; top: 10px; left: 10px; backdrop-filter: blur(8px); }
.vw-sub-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.vw-sub-meta { display: flex; align-items: center; gap: 10px; }
.vw-sub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- MODAL ---------- */
.vw-modal-backdrop {
  position: fixed; inset: 0;
  background: rgb(var(--vw-overlay));
  backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  z-index: 80; padding: 16px;
  animation: vw-fade-in .2s var(--vw-ease);
}
.vw-modal-backdrop.vw-open { display: flex; }
.vw-modal {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-strong-a));
  border-radius: var(--vw-radius-xl);
  width: 100%; max-width: 540px;
  box-shadow: var(--vw-shadow-lg);
  animation: vw-modal-in .3s var(--vw-ease-out);
  overflow: hidden;
}
.vw-modal-head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.vw-modal-body { padding: 4px 22px 18px; }
.vw-modal-foot { padding: 16px 22px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid rgb(var(--vw-border) / var(--vw-border-a)); }

@keyframes vw-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vw-modal-in {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- LIGHTBOX ---------- */
.vw-lightbox {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.85);
  backdrop-filter: blur(22px);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100;
  animation: vw-fade-in .25s var(--vw-ease);
}
.vw-lightbox.vw-open { display: flex; }
.vw-lightbox-stage {
  flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 64px;
  position: relative;
}
.vw-lightbox-stage:focus { outline: none; }
.vw-lightbox-img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--vw-radius);
  box-shadow: 0 30px 80px -10px rgb(0 0 0 / .6);
  aspect-ratio: 4/3;
  width: min(900px, 100%);
  cursor: zoom-in;
}
.vw-lightbox-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(to top, rgb(0 0 0 / .85), transparent);
  color: white;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.vw-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 999px;
  background: rgb(0 0 0 / 0.45); color: white;
  border: 1px solid rgb(255 255 255 / 0.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s var(--vw-ease);
}
.vw-lightbox-nav:hover { background: rgb(0 0 0 / 0.7); transform: translateY(-50%) scale(1.06); }
.vw-lightbox-nav.vw-prev { left: 16px; }
.vw-lightbox-nav.vw-next { right: 16px; }
.vw-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: white; border: 1px solid rgb(255 255 255 / 0.18);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 2;
}
.vw-lightbox-clean {
  position: absolute; top: 16px; right: 64px;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: white; border: 1px solid rgb(255 255 255 / 0.18);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 2;
}
.vw-lightbox-pos {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--vw-mono); font-size: 12px; color: white;
  background: rgb(0 0 0 / 0.5); padding: 5px 10px; border-radius: 999px;
}
.vw-lightbox.vw-clean { background: rgb(0 0 0); backdrop-filter: none; }
.vw-lightbox.vw-clean .vw-lightbox-stage {
  width: 100vw; height: 100vh; height: 100dvh; flex: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.vw-lightbox.vw-clean .vw-lightbox-img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  aspect-ratio: auto; border-radius: 0; box-shadow: none; cursor: zoom-out;
}
.vw-lightbox.vw-clean .vw-lightbox-info,
.vw-lightbox.vw-clean .vw-lightbox-nav,
.vw-lightbox.vw-clean .vw-lightbox-close,
.vw-lightbox.vw-clean .vw-lightbox-clean,
.vw-lightbox.vw-clean .vw-lightbox-pos {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* ---------- TOASTS ---------- */
.vw-toasts {
  position: fixed; right: 20px; bottom: 24px; z-index: 90;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
  /* Toasts are mounted on <body>, outside the themed plugin surface. Never
     inherit the host theme's text color; use the configured toast theme. */
  color: rgb(var(--vw-text));
}
.vw-toast {
  pointer-events: auto;
  width: 360px; max-width: 100%;
  background: rgb(var(--vw-elevated) / 0.94);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-strong-a));
  border-radius: var(--vw-radius);
  box-shadow: var(--vw-shadow-lg);
  overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  position: relative;
  animation: vw-toast-in .35s var(--vw-ease-out);
  cursor: pointer;
}
.vw-toast.vw-toast-out { animation: vw-toast-out .25s var(--vw-ease) forwards; }
.vw-toast-icon {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: var(--vw-radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.vw-toast-msg { flex: 1; font-size: 13.5px; font-weight: 500; color: rgb(var(--vw-text)); }
.vw-toast-close {
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--vw-text-mute)); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.vw-toast-close:hover { background: rgb(var(--vw-border) / 0.1); color: rgb(var(--vw-text)); }
.vw-toast-bar {
  position: absolute; left: 0; bottom: 0; height: 2.5px;
  background: currentColor;
  animation: vw-toast-bar linear forwards;
}
.vw-toast-success .vw-toast-icon, .vw-toast-success .vw-toast-bar { color: rgb(var(--vw-success)); }
.vw-toast-success .vw-toast-icon { background: rgb(var(--vw-success) / .15); }
.vw-toast-warning .vw-toast-icon, .vw-toast-warning .vw-toast-bar { color: rgb(var(--vw-warning)); }
.vw-toast-warning .vw-toast-icon { background: rgb(var(--vw-warning) / .15); }
.vw-toast-error .vw-toast-icon, .vw-toast-error .vw-toast-bar { color: rgb(var(--vw-danger)); }
.vw-toast-error .vw-toast-icon { background: rgb(var(--vw-danger) / .15); }
.vw-toast-info .vw-toast-icon, .vw-toast-info .vw-toast-bar { color: rgb(var(--vw-accent)); }
.vw-toast-info .vw-toast-icon { background: rgb(var(--vw-accent) / .15); }

@keyframes vw-toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vw-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes vw-toast-bar { from { width: 100%; } to { width: 0%; } }

/* ---------- VIEWPORT RESPONSIVE ---------- */
.vw-viewport[data-size="mobile"] .vw-sidebar { display: none; }
.vw-viewport[data-size="mobile"] .vw-mobile-nav { display: block; }
.vw-viewport[data-size="mobile"] .vw-page { padding: 18px 16px 110px; }
.vw-viewport[data-size="mobile"] .vw-page-head { flex-direction: column; align-items: stretch; }
.vw-viewport[data-size="mobile"] .vw-page-title { font-size: 22px; }
.vw-viewport[data-size="mobile"] .vw-grid-metrics { grid-template-columns: 1fr 1fr; }
.vw-viewport[data-size="mobile"] .vw-grid-contests { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-grid-subs { grid-template-columns: 1fr; }

.vw-viewport[data-size="tablet"] .vw-sidebar { width: 72px; }
.vw-viewport[data-size="tablet"] .vw-nav-label,
.vw-viewport[data-size="tablet"] .vw-nav-count,
.vw-viewport[data-size="tablet"] .vw-sidebar-section-title,
.vw-viewport[data-size="tablet"] .vw-sidebar-user-info,
.vw-viewport[data-size="tablet"] .vw-sidebar-brand-text { display: none; }
.vw-viewport[data-size="tablet"] .vw-sidebar .vw-nav-item { justify-content: center; padding: 11px 0; }
.vw-viewport[data-size="tablet"] .vw-sidebar-foot .vw-btn { width: 44px; padding: 0; height: 44px; }
.vw-viewport[data-size="tablet"] .vw-grid-metrics { grid-template-columns: 1fr 1fr; }
.vw-viewport[data-size="tablet"] .vw-grid-contests { grid-template-columns: 1fr 1fr; }
.vw-viewport[data-size="tablet"] .vw-grid-subs { grid-template-columns: 1fr 1fr; }

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- AUDITOR THEME OVERLAY ---------- */
[data-vw-portal="auditor"] {
  /* Subtle green accent on logo/role; keeps user's accent for system feedback */
}
.vw-auditor-mark { color: rgb(var(--vw-success)); }
.vw-portal-badge { background: rgb(var(--vw-success) / .15); color: rgb(var(--vw-success)); border-color: rgb(var(--vw-success) / .3); }

/* ---------- LOGIN ---------- */
.vw-login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(800px 480px at 80% -10%, rgb(var(--vw-accent) / .12), transparent 60%),
    radial-gradient(600px 400px at 10% 110%, rgb(var(--vw-accent) / .08), transparent 60%);
}
.vw-login-card {
  width: 100%; max-width: 440px;
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-xl);
  padding: 32px 30px;
  box-shadow: var(--vw-shadow-lg);
}

/* ---------- IMAGE PLACEHOLDERS (deterministic gradients) ---------- */
.vw-img[data-seed] { background-size: cover; background-position: center; }
.vw-img-stripe {
  background-image:
    repeating-linear-gradient(45deg, rgb(var(--vw-image-tint)) 0 12px, transparent 12px 24px),
    var(--vw-img-grad, linear-gradient(135deg, #1e293b, #0f172a));
}

/* ---------- ANIMATIONS ---------- */
.vw-fade-in { animation: vw-fade-slide .42s var(--vw-ease-out) both; }
@keyframes vw-fade-slide {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
.vw-pulse-dot::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; margin-right: 6px;
  animation: vw-pulse 1.6s ease-in-out infinite;
}
@keyframes vw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

/* ---------- TOOLBAR ---------- */
.vw-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius);
  padding: 10px 12px;
  margin-bottom: 16px;
}
.vw-toolbar .vw-input-icon { flex: 1; min-width: 200px; }

/* ---------- GRIDS ---------- */
.vw-grid-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* --vw-cols / --vw-col-min let the Elementor "Landing" widget force a column count
   without touching the auto-fill default (both vars unset → identical to before).
   The tablet/mobile overrides above win by selector specificity, so an explicit
   desktop count never breaks small-screen layout. */
.vw-grid-contests { display: grid; grid-template-columns: repeat(var(--vw-cols, auto-fill), minmax(var(--vw-col-min, 260px), 1fr)); gap: 16px; }
.vw-grid-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- ACCENT SWATCH ---------- */
.vw-accent-swatch {
  width: 36px; height: 36px; border-radius: 999px;
  cursor: pointer; transition: transform .2s var(--vw-ease), box-shadow .2s var(--vw-ease);
  border: 2px solid transparent;
  background-clip: content-box;
  padding: 3px;
}
.vw-accent-swatch::after {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 999px;
  background: var(--swatch);
}
.vw-accent-swatch.vw-active { border-color: rgb(var(--vw-text)); transform: scale(1.06); }
.vw-accent-swatch:hover { transform: scale(1.08); }

/* ---------- SETTINGS SECTIONS ---------- */
.vw-settings-section {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  margin-bottom: 16px;
}
.vw-settings-head {
  padding: 16px 20px;
  border-bottom: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  display: flex; align-items: center; gap: 12px;
}
.vw-settings-body { padding: 18px 20px; }
.vw-settings-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
}
.vw-settings-row:last-child { border-bottom: none; }
.vw-settings-row-title { font-weight: 600; font-size: 14px; }
.vw-settings-row-sub { font-size: 12.5px; color: rgb(var(--vw-text-soft)); margin-top: 2px; }

/* ---------- FOCUS RING ---------- */
:focus-visible { outline: 2px solid rgb(var(--vw-accent)); outline-offset: 2px; border-radius: 4px; }

/* =========================================================
   PARTICIPANT PORTAL (público)
   ========================================================= */
.vw-participant-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: rgb(var(--vw-bg));
}
.vw-participant-header {
  position: sticky; top: 0; z-index: 20;
  background: rgb(var(--vw-surface) / 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
}
.vw-participant-header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.vw-participant-brand {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  color: rgb(var(--vw-text));
  text-decoration: none;
  cursor: pointer;
  max-width: 280px;
}
.vw-participant-brand-name {
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  white-space: nowrap;
}
.vw-participant-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: 8px;
}
.vw-participant-nav-link {
  padding: 7px 12px; border-radius: var(--vw-radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: rgb(var(--vw-text-soft));
  cursor: pointer;
  transition: background-color .15s var(--vw-ease), color .15s var(--vw-ease);
}
.vw-participant-nav-link:hover { background: rgb(var(--vw-border) / 0.06); color: rgb(var(--vw-text)); }
.vw-participant-header-inner > .vw-btn { margin-left: auto; }

.vw-participant-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 60px;
}
.vw-participant-section { margin-top: 48px; }
.vw-participant-section:first-of-type { margin-top: 32px; }

.vw-hero {
  background:
    radial-gradient(700px 360px at 50% -10%, rgb(var(--vw-accent) / .18), transparent 60%),
    linear-gradient(180deg, rgb(var(--vw-elevated)), transparent);
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-2xl);
  padding: 56px 32px 48px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.vw-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgb(var(--vw-border) / 0.025) 0 16px, transparent 16px 32px);
  pointer-events: none;
}
.vw-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.vw-hero-title {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 18px 0 14px;
  text-wrap: balance;
}
.vw-hero-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgb(var(--vw-text-soft));
  line-height: 1.55;
  text-wrap: pretty;
}

.vw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vw-how-card {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  padding: 22px 20px;
  position: relative;
}
.vw-how-number {
  position: absolute; top: 18px; right: 20px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.05em;
  color: rgb(var(--vw-border) / 0.18);
  font-family: var(--vw-font);
  line-height: 1;
}

.vw-contest-public { cursor: default; }

.vw-participant-foot {
  border-top: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  background: rgb(var(--vw-surface));
}
.vw-participant-foot-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* ---------- SUBMIT FLOW ---------- */
.vw-submit-shell {
  display: grid; grid-template-columns: 320px 1fr; gap: 32px;
  margin-top: 16px;
  align-items: start;
  /* Grid default align-content is `normal` (= stretch): if the grid ever ends up
     taller than its content, the `auto` rows grow and leave dead space below the
     button. Pin rows to the top so they always size to content. */
  align-content: start;
}
.vw-submit-side {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  padding: 20px;
  position: sticky; top: 80px;
  align-self: start;
}
.vw-submit-meta {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
}
.vw-meta-row {
  display: flex; align-items: center; gap: 10px;
}
.vw-submit-form {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  padding: 28px 28px 24px;
  align-self: start;
}
.vw-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.vw-field { display: flex; flex-direction: column; }

.vw-link {
  color: rgb(var(--vw-accent));
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}

.vw-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5;
  color: rgb(var(--vw-text-soft));
  cursor: pointer;
  user-select: none;
}
.vw-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgb(var(--vw-border) / 0.32);
  background: rgb(var(--vw-elevated));
  cursor: pointer; flex-shrink: 0;
  margin-top: 1px;
  transition: all .15s var(--vw-ease);
  position: relative;
}
.vw-check input[type="checkbox"]:checked {
  background: rgb(var(--vw-accent));
  border-color: rgb(var(--vw-accent));
}
.vw-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; left: 4px; top: 0;
  width: 6px; height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- DROPZONE ---------- */
.vw-dropzone {
  display: block;
  border: 1.5px dashed rgb(var(--vw-border) / 0.28);
  border-radius: var(--vw-radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--vw-ease);
  background: rgb(var(--vw-elevated) / .6);
}
.vw-dropzone:hover, .vw-dropzone.vw-dz-over {
  border-color: rgb(var(--vw-accent));
  background: rgb(var(--vw-accent) / 0.05);
}
.vw-dz-empty { display: block; }
.vw-dz-filled { padding: 4px; }

/* ---------- SUCCESS ---------- */
.vw-success {
  max-width: 720px; margin: 40px auto 0;
  text-align: center;
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-xl);
  padding: 48px 32px 40px;
}
.vw-success-icon {
  width: 72px; height: 72px; border-radius: 999px;
  background: rgb(var(--vw-success) / 0.16); color: rgb(var(--vw-success));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 36px;
  position: relative;
}
.vw-success-icon::before {
  content: ""; position: absolute; inset: -10px; border-radius: 999px;
  background: rgb(var(--vw-success) / 0.08);
  z-index: -1;
  animation: vw-success-pulse 2s ease-out infinite;
}
.vw-success-icon .ti { font-size: 36px; }
@keyframes vw-success-pulse {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.vw-success-next {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 32px;
  text-align: left;
}
.vw-success-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgb(var(--vw-elevated));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius);
  padding: 14px;
}

/* =========================================================
   CREATE CONTEST MODAL
   ========================================================= */
.vw-modal-lg { max-width: 720px; }
.vw-cc-body { min-height: 320px; padding: 18px 22px 8px; }

.vw-cc-stepper {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px;
  padding: 14px 22px 18px;
  border-bottom: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  margin: 0 0 4px;
  position: relative;
}
.vw-cc-dot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  position: relative;
}
.vw-cc-dot:not(:last-child)::after {
  content: ""; position: absolute;
  top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px);
  height: 1.5px; background: rgb(var(--vw-border) / 0.18);
  z-index: 0;
}
.vw-cc-dot.vw-done:not(:last-child)::after { background: rgb(var(--vw-accent)); }
.vw-cc-dot-circle {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgb(var(--vw-elevated)); color: rgb(var(--vw-text-mute));
  border: 1.5px solid rgb(var(--vw-border) / 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; z-index: 1;
  transition: all .25s var(--vw-ease);
}
.vw-cc-dot-circle .ti { font-size: 15px; }
.vw-cc-dot-label {
  font-size: 11.5px; font-weight: 600;
  color: rgb(var(--vw-text-mute));
}
.vw-cc-dot.vw-active .vw-cc-dot-circle {
  background: rgb(var(--vw-accent) / 0.14);
  border-color: rgb(var(--vw-accent));
  color: rgb(var(--vw-accent));
  transform: scale(1.05);
}
.vw-cc-dot.vw-active .vw-cc-dot-label { color: rgb(var(--vw-accent)); }
.vw-cc-dot.vw-done .vw-cc-dot-circle {
  background: rgb(var(--vw-accent));
  border-color: rgb(var(--vw-accent));
  color: white;
}

.vw-cc-cover { display: flex; gap: 14px; align-items: flex-start; }

.vw-cc-timeline {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  background: rgb(var(--vw-elevated));
  border-radius: var(--vw-radius);
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
}
.vw-cc-tl-phase {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  color: rgb(var(--vw-text-soft));
}
.vw-cc-tl-dot { width: 9px; height: 9px; border-radius: 999px; }
.vw-cc-tl-line { flex: 1; height: 1.5px; background: rgb(var(--vw-border) / 0.18); }

/* ---------- CHIP PICK (multi-select) ---------- */
.vw-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-chip-pick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: var(--vw-radius-pill);
  background: rgb(var(--vw-elevated));
  border: 1.5px solid rgb(var(--vw-border) / var(--vw-border-a));
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  color: rgb(var(--vw-text-soft));
  transition: all .15s var(--vw-ease);
  user-select: none;
}
.vw-chip-pick input { display: none; }
.vw-chip-pick:has(input:checked) {
  background: rgb(var(--vw-accent) / 0.12);
  border-color: rgb(var(--vw-accent) / 0.4);
  color: rgb(var(--vw-accent));
}
.vw-chip-pick:has(input:checked) .vw-avatar {
  outline: 2px solid rgb(var(--vw-accent));
  outline-offset: 1px;
}

/* ---------- RESPONSIVE TWEAKS ---------- */
.vw-viewport[data-size="mobile"] .vw-participant-nav { display: none; }
.vw-viewport[data-size="mobile"] .vw-submit-shell { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-submit-side { position: static; }
.vw-viewport[data-size="mobile"] .vw-form-grid { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-grid-3 { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-success-next { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-cc-stepper { padding-left: 12px; padding-right: 12px; }
.vw-viewport[data-size="mobile"] .vw-cc-dot-label { font-size: 10.5px; }

.vw-viewport[data-size="tablet"] .vw-submit-shell { grid-template-columns: 280px 1fr; }
.vw-viewport[data-size="tablet"] .vw-grid-3 { grid-template-columns: 1fr; }
.vw-viewport[data-size="tablet"] .vw-success-next { grid-template-columns: 1fr; }

/* Embedded contexts (Elementor widget / [wpqv_submit] shortcode) render the submit
   view OUTSIDE #vw-app, so they never get the .vw-viewport[data-size] sizing above
   and wouldn't collapse on small screens (the form overflowed on mobile). These real
   viewport media queries mirror those breakpoints (mobile <768, tablet <1200) so the
   embedded form is responsive everywhere; in the standalone portal they just agree
   with the data-size rules. */
@media (max-width: 1199px) {
  .vw-submit-shell { grid-template-columns: 280px 1fr; }
}
@media (max-width: 767px) {
  .vw-submit-shell { grid-template-columns: 1fr; }
  .vw-submit-side { position: static; }
  .vw-form-grid { grid-template-columns: 1fr; }
  .vw-grid-3 { grid-template-columns: 1fr; }
  .vw-success-next { grid-template-columns: 1fr; }
}

/* Container queries: the embedded views also respond to their CONTAINER width, so a
   narrow Elementor column on a WIDE screen collapses too (the @media above only sees
   the viewport). `container-type: inline-size` on the embed wrapper makes it a query
   container; the rules below are declared AFTER the @media block so the container width
   wins for embeds. The standalone portal has no .wpqv-embedded ancestor, so it keeps
   using @media + the .vw-viewport[data-size] rules. */
.wpqv-embedded { container-type: inline-size; }
/* A sticky aside isn't needed inside an embed, and container-type can interact oddly
   with position:sticky descendants — keep it static in embedded contexts. */
.wpqv-embedded .vw-submit-side { position: static; top: auto; }
/* In embedded contexts the host page provides the background — remove the card chrome
   from the form and sidebar so the Elementor/theme background shows through. */
.wpqv-embedded .vw-submit-form,
body.vw-embedded .vw-submit-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.wpqv-embedded .vw-submit-side,
body.vw-embedded .vw-submit-side {
  background: transparent;
  border: none;
}
@container (max-width: 1199px) {
  .vw-submit-shell { grid-template-columns: 280px 1fr; }
}
@container (max-width: 767px) {
  .vw-submit-shell { grid-template-columns: 1fr; }
  .vw-submit-side { position: static; }
  .vw-form-grid { grid-template-columns: 1fr; }
  .vw-grid-3 { grid-template-columns: 1fr; }
  .vw-success-next { grid-template-columns: 1fr; }
}

/* CLS: reserve vertical space while the SPA boots so the "Cargando…" → content swap
   doesn't shove the rest of the page down. Most embedded forms/galleries are taller
   than this, so min-height is just a floor (no empty gap); it absorbs the bulk of the
   loading layout shift. */
.wpqv-embed { min-height: 50vh; }
/* The submit form is mounted statically (no async gallery fetch), so it has no
   loading swap to reserve for. Drop the 50vh floor here so a short form (few
   fields) doesn't leave dead space below the button. Gallery/landing embeds keep
   the reserve. data-step is set on the wrapper in shortcodes.php. */
.wpqv-embed[data-step="submit"] { min-height: 0; }

/* =========================================================
   GALERÍA DE VOTACIÓN
   ========================================================= */
.vw-gallery-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-xl);
  padding: 18px;
  margin-top: 6px;
}
.vw-gallery-hero-cover {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--vw-radius-lg);
  position: relative;
}
.vw-gallery-hero-body { padding: 8px 8px 8px 0; }
.vw-gallery-stats {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.vw-stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--vw-radius-pill);
  background: rgb(var(--vw-elevated));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  font-size: 12.5px; font-weight: 600;
  color: rgb(var(--vw-text-soft));
}
.vw-stat-pill .ti { color: rgb(var(--vw-accent)); font-size: 14px; }

.vw-gallery-section { margin-top: 28px; }
.vw-gallery-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}

/* ---------- SEGMENT ---------- */
.vw-segment {
  display: inline-flex;
  background: rgb(var(--vw-elevated));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  padding: 3px; border-radius: var(--vw-radius);
  gap: 2px;
}
.vw-segment-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: transparent; border: none;
  font-family: var(--vw-font); font-size: 12.5px; font-weight: 600;
  color: rgb(var(--vw-text-soft));
  cursor: pointer; user-select: none;
  transition: background-color .18s var(--vw-ease), color .18s var(--vw-ease);
  appearance: none; -webkit-appearance: none;
}
.vw-segment-opt .ti { font-size: 14px; }
.vw-segment-opt:hover { color: rgb(var(--vw-text)); }
.vw-segment-opt.vw-active {
  background: rgb(var(--vw-surface));
  color: rgb(var(--vw-text));
  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}

/* ---------- LEADERBOARD ---------- */
.vw-leaderboard {
  background: linear-gradient(180deg, rgb(var(--vw-accent) / 0.07), transparent 80%);
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.vw-leader-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
  border-radius: var(--vw-radius);
  cursor: pointer;
  transition: background-color .15s var(--vw-ease);
}
.vw-leader-row:hover { background: rgb(var(--vw-border) / 0.06); }
.vw-leader-pos { font-size: 22px; line-height: 1; }
.vw-leader-thumb {
  width: 56px; height: 42px;
  border-radius: var(--vw-radius-sm);
  flex-shrink: 0;
}
.vw-leader-votes {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13.5px;
  color: rgb(var(--vw-text));
  font-variant-numeric: tabular-nums;
}

/* ---------- GALLERY GRID ---------- */
.vw-grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.vw-gallery-card {
  background: rgb(var(--vw-surface));
  border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
  border-radius: var(--vw-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s var(--vw-ease), transform .25s var(--vw-ease), box-shadow .25s var(--vw-ease);
}
.vw-gallery-card:hover {
  border-color: rgb(var(--vw-accent) / .5);
  transform: translateY(-3px);
  box-shadow: var(--vw-shadow);
}
.vw-gallery-card.vw-voted { border-color: rgb(var(--vw-danger) / 0.45); }
.vw-gallery-cover {
  aspect-ratio: 4/3;
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
}
.vw-gallery-zoom-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  background: rgb(0 0 0 / 0.4);
  color: white;
  font-size: 13px; font-weight: 600;
  opacity: 0;
  transition: opacity .2s var(--vw-ease);
}
.vw-gallery-cover:hover .vw-gallery-zoom-hint { opacity: 1; }
.vw-gallery-zoom-hint .ti { font-size: 18px; }
.vw-gallery-body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.vw-vote-row {
  display: flex; align-items: center; gap: 8px;
}
.vw-vote-row .vw-vote-btn { flex: 1; }

/* ---------- VOTE BUTTON ---------- */
.vw-vote-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px;
  border-radius: var(--vw-radius);
  background: rgb(var(--vw-elevated));
  border: 1.5px solid rgb(var(--vw-border) / var(--vw-border-a));
  color: rgb(var(--vw-text));
  font-family: var(--vw-font); font-size: 13px; font-weight: 700;
  cursor: pointer;
  user-select: none;
  appearance: none; -webkit-appearance: none;
  overflow: visible;
  transition: all .22s var(--vw-ease);
}
.vw-vote-btn:hover {
  border-color: rgb(var(--vw-danger) / 0.4);
  background: rgb(var(--vw-danger) / 0.06);
  transform: translateY(-1px);
}
.vw-vote-btn .vw-vote-icon {
  font-size: 18px;
  color: rgb(var(--vw-text-mute));
  transition: color .2s var(--vw-ease), transform .25s var(--vw-ease);
}
.vw-vote-btn:hover .vw-vote-icon { color: rgb(var(--vw-danger)); }
.vw-vote-btn .vw-vote-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.vw-vote-btn .vw-vote-label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgb(var(--vw-text-soft));
  margin-left: 2px;
}
.vw-vote-btn:active { transform: translateY(0) scale(0.97); }

.vw-vote-btn.vw-voted {
  background: rgb(var(--vw-danger) / 0.14);
  border-color: rgb(var(--vw-danger) / 0.5);
  color: rgb(var(--vw-danger));
}
.vw-vote-btn.vw-voted .vw-vote-icon { color: rgb(var(--vw-danger)); }
.vw-vote-btn.vw-voted .vw-vote-label { color: rgb(var(--vw-danger)); }

/* Heart pop animation on click */
.vw-heart-pop {
  animation: vw-heart-pop .56s var(--vw-ease-out);
}
@keyframes vw-heart-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.55) rotate(-8deg); }
  55%  { transform: scale(0.9); }
  80%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Live count pulse — a vote from ANOTHER viewer landed via the gallery poll */
.vw-count-bump {
  display: inline-block;
  animation: vw-count-bump .5s var(--vw-ease-out);
}
@keyframes vw-count-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); color: rgb(var(--vw-danger)); }
  100% { transform: scale(1); }
}

/* Sparkle particles */
.vw-heart-spark {
  position: absolute;
  left: 22px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgb(var(--vw-danger));
  pointer-events: none;
  animation: vw-spark .65s var(--vw-ease-out) forwards;
}
@keyframes vw-spark {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}

/* Lightbox vote button */
.vw-vote-btn-lb {
  padding: 11px 18px;
  background: rgb(255 255 255 / 0.16);
  border: 1.5px solid rgb(255 255 255 / 0.18);
  color: white;
  border-radius: var(--vw-radius);
  position: relative;
}
.vw-vote-btn-lb .vw-vote-icon { color: white; font-size: 19px; }
.vw-vote-btn-lb:hover { background: rgb(var(--vw-danger)); border-color: rgb(var(--vw-danger)); }
.vw-vote-btn-lb:hover .vw-vote-icon { color: white; }
.vw-vote-btn-lb.vw-voted {
  background: rgb(var(--vw-danger));
  border-color: rgb(var(--vw-danger));
}
.vw-vote-btn-lb.vw-voted .vw-vote-icon { color: white; }
.vw-vote-btn-lb .vw-vote-label, .vw-vote-btn-lb.vw-voted .vw-vote-label { color: white; }

/* Responsive */
.vw-viewport[data-size="mobile"] .vw-gallery-hero { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-gallery-hero-cover { aspect-ratio: 16/9; }
.vw-viewport[data-size="mobile"] .vw-grid-gallery { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-gallery-toolbar { flex-direction: column; align-items: stretch; }
.vw-viewport[data-size="mobile"] .vw-segment { width: 100%; }
.vw-viewport[data-size="mobile"] .vw-segment-opt { flex: 1; justify-content: center; }

.vw-viewport[data-size="tablet"] .vw-gallery-hero { grid-template-columns: 200px 1fr; }

/* =========================================================
   EMBEDDED MODE (para Elementor / landings custom)
   El chrome del participante se oculta tanto por la clase del WRAPPER
   (.wpqv-embedded, presente en el HTML del shortcode/widget — NO depende de JS)
   como por body.vw-embedded (legacy). Usar el wrapper evita que el header/footer
   "parpadee" o se quede visible si el JS de Elementor tarda en montar la SPA.
   ========================================================= */
.wpqv-embedded .vw-participant-header,
body.vw-embedded .vw-participant-header { display: none; }
.wpqv-embedded .vw-participant-foot,
body.vw-embedded .vw-participant-foot { display: none; }
/* In embedded mode there is no landing to go back to, so hide every control that
   would navigate to it (gallery "volver", submit "Otros concursos"/"Cancelar",
   success "Ver otros concursos") — otherwise the embed would render the landing
   inside itself. */
.wpqv-embedded [data-action="participant-home"],
body.vw-embedded [data-action="participant-home"] { display: none; }
.wpqv-embedded .vw-participant-main,
body.vw-embedded .vw-participant-main {
	padding: 0;
	max-width: 100%;
	/* The base rule sets flex:1 so the main fills the full-height standalone portal.
	   In an embed there's no full-height shell to fill, so let it hug its content —
	   otherwise a stretched ancestor (e.g. an Elementor flex container) would grow
	   the main and leave dead space below the form. */
	flex: none;
}
.wpqv-embedded .vw-participant-shell,
body.vw-embedded .vw-participant-shell {
	min-height: auto;
	background: transparent;
}
.wpqv-embedded .vw-gallery-section,
body.vw-embedded .vw-gallery-section { margin-top: 0; }

/* =========================================================
   DATE PICKER (estilizado al diseño — reemplaza el type=date nativo)
   ========================================================= */
.vw-datepick { position: relative; }
.vw-datepick-trigger {
	display: flex; align-items: center; gap: 9px;
	width: 100%; text-align: left; cursor: pointer;
}
.vw-datepick-text { font-size: 13.5px; color: rgb(var(--vw-text)); }
.vw-datepick-text.vw-datepick-ph { color: rgb(var(--vw-text-mute)); }

.vw-datepick-pop {
	position: absolute; z-index: 100000;
	width: 256px; padding: 12px;
	background: rgb(var(--vw-surface));
	border: 1px solid rgb(var(--vw-border) / var(--vw-border-a));
	border-radius: 14px;
	box-shadow: 0 18px 50px -12px rgb(0 0 0 / .45), 0 0 0 1px rgb(var(--vw-border) / .06);
}
.vw-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vw-dp-title { font-size: 13.5px; font-weight: 700; color: rgb(var(--vw-text)); }
.vw-dp-nav {
	width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: rgb(var(--vw-border) / .08); color: rgb(var(--vw-text-soft));
	border: none; font-size: 16px;
}
.vw-dp-nav:hover { background: rgb(var(--vw-accent) / .14); color: rgb(var(--vw-accent)); }
.vw-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.vw-dp-dow {
	text-align: center; font-size: 10.5px; font-weight: 600; padding: 4px 0 6px;
	color: rgb(var(--vw-text-mute)); text-transform: uppercase; letter-spacing: .03em;
}
.vw-dp-day {
	aspect-ratio: 1; border: none; cursor: pointer; border-radius: 8px;
	background: transparent; color: rgb(var(--vw-text-soft)); font-size: 12.5px;
	display: flex; align-items: center; justify-content: center;
}
.vw-dp-day:hover { background: rgb(var(--vw-accent) / .14); color: rgb(var(--vw-accent)); }
.vw-dp-day.vw-dp-sel { background: rgb(var(--vw-accent)); color: #fff; font-weight: 700; }

/* Lock background scroll while a modal or the lightbox is open. */
body:has(.vw-modal-backdrop.vw-open),
body:has(.vw-lightbox.vw-open) { overflow: hidden; }

/* =========================================================
   RESPONSIVE ADDITIONS — TABLET
   ========================================================= */
.vw-viewport[data-size="tablet"] .vw-page { padding: 22px 24px 36px; }
.vw-viewport[data-size="tablet"] .vw-participant-main { padding: 24px 20px 50px; }
.vw-viewport[data-size="tablet"] .vw-hero { padding: 44px 28px 38px; }
.vw-viewport[data-size="tablet"] .vw-grid-gallery { grid-template-columns: repeat(2, 1fr); }
.vw-viewport[data-size="tablet"] .vw-grid-2 { grid-template-columns: 1fr 1fr; }
.vw-viewport[data-size="tablet"] .vw-modal-lg { max-width: 90vw; }
.vw-viewport[data-size="tablet"] .vw-page-head { gap: 12px; }

/* =========================================================
   RESPONSIVE ADDITIONS — MOBILE
   ========================================================= */

/* Page & layout */
.vw-viewport[data-size="mobile"] .vw-grid-2 { grid-template-columns: 1fr; }
.vw-viewport[data-size="mobile"] .vw-page-head { gap: 10px; }

/* Participant portal */
.vw-viewport[data-size="mobile"] .vw-participant-header-inner { padding: 10px 16px; gap: 10px; }
.vw-viewport[data-size="mobile"] .vw-participant-main { padding: 18px 16px 80px; }
.vw-viewport[data-size="mobile"] .vw-hero { padding: 32px 20px 28px; }
.vw-viewport[data-size="mobile"] .vw-participant-foot-inner { flex-direction: column; gap: 8px; text-align: center; }

/* Toolbar */
.vw-viewport[data-size="mobile"] .vw-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
.vw-viewport[data-size="mobile"] .vw-toolbar .vw-input-icon { min-width: 0; }

/* Login */
.vw-viewport[data-size="mobile"] .vw-login-card { padding: 24px 20px; }

/* Toasts — full width, above floating nav */
.vw-viewport[data-size="mobile"] .vw-toasts { right: 12px; left: 12px; bottom: 88px; }
.vw-viewport[data-size="mobile"] .vw-toast  { width: 100%; }

/* Modal → bottom sheet */
.vw-viewport[data-size="mobile"] .vw-modal-backdrop { align-items: flex-end; padding: 0; }
.vw-viewport[data-size="mobile"] .vw-modal {
  border-radius: var(--vw-radius-xl) var(--vw-radius-xl) 0 0;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  animation: vw-modal-sheet-in .3s var(--vw-ease-out);
}
@keyframes vw-modal-sheet-in {
  from { transform: translateY(100%); opacity: .5; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Create contest modal on mobile */
.vw-viewport[data-size="mobile"] .vw-cc-body { padding: 14px 16px 8px; }
.vw-viewport[data-size="mobile"] .vw-modal-head { padding: 14px 18px; }
.vw-viewport[data-size="mobile"] .vw-modal-foot { padding: 12px 18px; }
.vw-viewport[data-size="mobile"] .vw-cc-cover { flex-direction: column; }
.vw-viewport[data-size="mobile"] .vw-modal-body { padding: 4px 18px 14px; }

/* Lightbox */
.vw-viewport[data-size="mobile"] .vw-lightbox-stage { padding: 52px 8px 20px; }
.vw-viewport[data-size="mobile"] .vw-lightbox-nav   { width: 38px; height: 38px; }
.vw-viewport[data-size="mobile"] .vw-lightbox-nav.vw-prev { left: 6px; }
.vw-viewport[data-size="mobile"] .vw-lightbox-nav.vw-next { right: 6px; }
.vw-viewport[data-size="mobile"] .vw-lightbox-info { padding: 12px 16px; font-size: 13px; }
/* The shared lightbox is mounted on <body>, outside .vw-viewport. */
@media (max-width: 600px) {
  .vw-lightbox-stage { padding: 52px 8px 20px; }
  .vw-lightbox-nav { width: 38px; height: 38px; }
  .vw-lightbox-nav.vw-prev { left: 6px; }
  .vw-lightbox-nav.vw-next { right: 6px; }
  .vw-lightbox-info { padding: 12px 16px; font-size: 13px; }
  .vw-lightbox-clean { top: 12px; right: 60px; }
  .vw-lightbox-close { top: 12px; right: 12px; }
}

/* Gallery */
.vw-viewport[data-size="mobile"] .vw-grid-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Submission card actions stacked */
.vw-viewport[data-size="mobile"] .vw-sub-actions { grid-template-columns: 1fr; }

/* Leaderboard — compact */
.vw-viewport[data-size="mobile"] .vw-leader-thumb { width: 44px; height: 33px; }

/* Hero section stats */
.vw-viewport[data-size="mobile"] .vw-gallery-stats { gap: 6px; }
.vw-viewport[data-size="mobile"] .vw-stat-pill { font-size: 11.5px; padding: 5px 10px; }

/* Settings rows on mobile */
.vw-viewport[data-size="mobile"] .vw-settings-row { grid-template-columns: 1fr; gap: 8px; }

/* Metrics: keep 2 col but tighter */
.vw-viewport[data-size="mobile"] .vw-metric { padding: 14px; }
.vw-viewport[data-size="mobile"] .vw-metric-value { font-size: 24px; }

/* =========================================================
   AUDIT LOG TABLE
   ========================================================= */
.vw-al-row { transition: background-color .15s var(--vw-ease); }
.vw-al-row:hover { background: rgb(var(--vw-border) / 0.05); }

/* Print-only / Print-hide utilities */
.vw-print-only { display: none; }
.vw-print-hide { }

/* =========================================================
   PRINT MODE — Audit log PDF
   ========================================================= */
@media print {
  /* Hide everything except the audit log page */
  .vw-sidebar,
  .vw-mobile-nav,
  .vw-toasts,
  .vw-print-hide,
  .vw-page-head .vw-btn,
  .vw-toolbar { display: none !important; }

  /* Show print-only elements */
  .vw-print-only { display: block !important; }

  /* Reset backgrounds and colors for print */
  body, #vw-app {
    background: #ffffff !important;
    color: #0f172a !important;
  }
  .vw-page { padding: 0 !important; }
  .vw-page-head { margin-bottom: 6px !important; }
  .vw-page-title { font-size: 20px !important; color: #0f172a !important; }
  .vw-page-sub   { color: #475569 !important; font-size: 12px !important; }

  /* Metric cards */
  .vw-metric {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    break-inside: avoid;
  }
  .vw-metric-label { color: #64748b !important; }
  .vw-metric-value { color: #0f172a !important; }

  /* Table */
  .vw-audit-table-wrap { border: 1px solid #e2e8f0 !important; }
  .vw-audit-table { min-width: 0 !important; }
  .vw-audit-table thead th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-size: 10px !important;
    padding: 8px 10px !important;
  }
  .vw-audit-table tbody td {
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    color: #0f172a !important;
  }
  .vw-al-row:hover { background: transparent !important; }

  /* Badges */
  .vw-badge {
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    background: transparent !important;
    font-size: 10px !important;
  }
  .vw-badge-success { border-color: #16a34a !important; color: #15803d !important; }
  .vw-badge-danger  { border-color: #dc2626 !important; color: #b91c1c !important; }
  .vw-badge-accent  { border-color: #0891b2 !important; color: #0e7490 !important; }

  /* Avatar */
  .vw-avatar {
    background: #e2e8f0 !important;
    color: #334155 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Print header */
  .vw-audit-print-header {
    margin-bottom: 20px;
  }

  /* Page breaks */
  .vw-audit-table tbody tr { break-inside: avoid; }

  /* Remove box shadows */
  * { box-shadow: none !important; }

  /* Force color rendering */
  .vw-badge-success,
  .vw-badge-danger,
  .vw-badge-accent,
  .vw-avatar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Manager appearance picker (per-contest gallery look) — single-select chips with
   a clear selected/hover/active state (the generic .vw-btn had no selected style,
   so clicks looked like they did nothing). Uses the staff --vw-* tokens. */
.vw-fba-opts{display:flex;flex-wrap:wrap;gap:8px}
.vw-fba-opt{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:1.5px solid rgb(var(--vw-border)/var(--vw-border-strong-a));background:rgb(var(--vw-elevated));color:rgb(var(--vw-text-soft));font-family:var(--vw-font);font-size:12.5px;font-weight:600;cursor:pointer;user-select:none;appearance:none;-webkit-appearance:none;transition:border-color .15s var(--vw-ease),background-color .15s var(--vw-ease),color .15s var(--vw-ease),transform .1s var(--vw-ease)}
.vw-fba-opt:hover{border-color:rgb(var(--vw-accent)/.55);color:rgb(var(--vw-text))}
.vw-fba-opt:active{transform:scale(.96)}
.vw-fba-opt.vw-active{border-color:rgb(var(--vw-accent));background:rgb(var(--vw-accent)/.14);color:rgb(var(--vw-text))}
.vw-fba-sw{width:13px;height:13px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgb(0 0 0 /.18)}
.vw-fba-opt.vw-active .vw-fba-sw{box-shadow:0 0 0 2px rgb(var(--vw-surface)),0 0 0 3px rgb(var(--vw-accent))}

/* =========================================================================
   VOTING GALLERY SKIN (.vwg-*) — per-contest redesign ("VoteWave / galería")
   Self-contained LIGHT editorial skin. The look is chosen per contest by the
   manager (form_config.appearance) and stamped as data attributes on .vwg-root:
     data-vwg-appearance = editorial | moderno | flotante
     data-vwg-palette    = bosque | oceano | atardecer | monocromo | caribe
     data-vwg-font       = serif | geo | sora
   The public visitor cannot change it (no fx panel). All classes are namespaced
   and scoped under .vwg-root so they never collide with the theme / Elementor.
   ========================================================================= */
.vwg-root {
  --vwg-font-display:'DM Serif Display',serif;
  --vwg-font-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --vwg-accent:#0d6b53; --vwg-accent-d:#0a5140; --vwg-accent2:#d98a1f; --vwg-amber:#f0a83c;
  --vwg-ink:#1c2540; --vwg-c-deep:#10233f; --vwg-c-mid:#0e3a4e; --vwg-radius:20px;
  --vwg-hero-grad:linear-gradient(135deg,var(--vwg-c-deep),var(--vwg-c-mid) 55%,var(--vwg-accent));
  flex:1; display:flex; flex-direction:column; background:#f3f4fb; color:var(--vwg-ink);
  font-family:var(--vwg-font-sans);
}
.vwg-root *{box-sizing:border-box}
/* ---- fonts ---- */
.vwg-root[data-vwg-font="geo"]{--vwg-font-display:'Space Grotesk',sans-serif;--vwg-font-sans:'Space Grotesk',sans-serif}
.vwg-root[data-vwg-font="sora"]{--vwg-font-display:'Sora',sans-serif;--vwg-font-sans:'Plus Jakarta Sans',sans-serif}
/* ---- palettes ---- */
.vwg-root[data-vwg-palette="oceano"]{--vwg-accent:#1d7a8c;--vwg-accent-d:#155e6c;--vwg-accent2:#f4a259;--vwg-amber:#ffb877;--vwg-ink:#10323f;--vwg-c-deep:#0b2a3a;--vwg-c-mid:#0e4657}
.vwg-root[data-vwg-palette="atardecer"]{--vwg-accent:#c1466b;--vwg-accent-d:#9d3556;--vwg-accent2:#f4a259;--vwg-amber:#ffb877;--vwg-ink:#3a2230;--vwg-c-deep:#3a1f2b;--vwg-c-mid:#6d2b45}
.vwg-root[data-vwg-palette="monocromo"]{--vwg-accent:#3a4250;--vwg-accent-d:#2a313c;--vwg-accent2:#8a93a6;--vwg-amber:#aab2c2;--vwg-ink:#1a1d24;--vwg-c-deep:#1a1d24;--vwg-c-mid:#2b303a}
.vwg-root[data-vwg-palette="caribe"]{--vwg-accent:#00566d;--vwg-accent-d:#003f52;--vwg-accent2:#dbe028;--vwg-amber:#e8ed4f;--vwg-ink:#0b2b36;--vwg-c-deep:#00394a;--vwg-c-mid:#00566d}
/* ---- appearances ---- */
.vwg-root[data-vwg-appearance="moderno"]{--vwg-radius:12px;--vwg-hero-grad:var(--vwg-c-deep)}
.vwg-root[data-vwg-appearance="moderno"] .vwg-hero{border-top:5px solid var(--vwg-accent2)}
.vwg-root[data-vwg-appearance="moderno"] .vwg-hero h1{letter-spacing:-.02em}
.vwg-root[data-vwg-appearance="flotante"] .vwg-gstat,
.vwg-root[data-vwg-appearance="flotante"] .vwg-countdown{box-shadow:0 16px 32px -16px rgba(0,0,0,.55);transform:translateY(-2px)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-tstep{background:#fff;border:1px solid rgba(20,30,60,.05);border-radius:16px;padding:18px 16px;box-shadow:0 18px 40px -22px rgba(20,30,60,.45)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-tstep::after{display:none}
.vwg-root[data-vwg-appearance="flotante"] .vwg-tnum{box-shadow:0 10px 20px -6px rgba(0,0,0,.3)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-search,
.vwg-root[data-vwg-appearance="flotante"] .vwg-sort,
.vwg-root[data-vwg-appearance="flotante"] .vwg-views{border-color:transparent;box-shadow:0 12px 26px -12px rgba(20,30,60,.38)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-ph{box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.4),0 22px 46px -20px rgba(20,30,60,.5)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-tile:hover{transform:translateY(-7px)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-pod{box-shadow:0 18px 38px -20px rgba(20,30,60,.42)}
.vwg-root[data-vwg-appearance="flotante"] .vwg-notice{background:#fff;border-color:transparent;box-shadow:0 20px 44px -24px rgba(20,30,60,.5)}
.vwg-root[data-vwg-appearance="moderno"] .vwg-notice{border-top:4px solid var(--vwg-accent);border-radius:10px}

/* ---- layout / cards ---- */
.vwg-root a{color:var(--vwg-accent)}
.vwg-combo{background:#fff;border-bottom:1px solid rgba(20,30,60,.07)}
/* HERO */
.vwg-hero{position:relative;display:flex;gap:34px;align-items:center;padding:40px 40px 38px;background:var(--vwg-hero-grad);color:#fff;overflow:hidden}
.vwg-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 130% at 100% -10%,rgba(240,168,60,.2),transparent 46%);pointer-events:none}
.vwg-hero>*{position:relative;z-index:1}
.vwg-hero-art{flex:none;width:196px;height:238px;border-radius:var(--vwg-radius);background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:rgba(255,255,255,.55);box-shadow:0 20px 45px -20px rgba(0,0,0,.6);overflow:hidden;background-size:cover;background-position:center}
.vwg-hero-art img{width:100%;height:100%;object-fit:cover}
.vwg-hero-body{flex:1;min-width:0}
.vwg-pill{display:inline-flex;align-items:center;gap:7px;font:800 12px var(--vwg-font-sans);letter-spacing:.02em;color:var(--vwg-ink);background:var(--vwg-amber);padding:7px 14px;border-radius:999px}
.vwg-pill.vwg-pill-open{background:#fff;color:var(--vwg-accent-d)}
.vwg-pill.vwg-pill-ended{background:rgba(255,255,255,.16);color:#fff}
.vwg-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;animation:vwg-pulse 1.6s ease-in-out infinite}
@keyframes vwg-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.vwg-hero h1{margin:16px 0 6px;font:400 46px/1.02 var(--vwg-font-display);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.vwg-hero .vwg-edi{font:400 15px/1.5 var(--vwg-font-sans);color:rgba(255,255,255,.8);max-width:600px;text-wrap:pretty}
.vwg-status-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:24px}
.vwg-countdown{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:11px 20px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.vwg-countdown .lbl{font:600 10px var(--vwg-font-sans);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.vwg-countdown .val{font:800 22px/1 var(--vwg-font-sans);color:var(--vwg-amber)}
.vwg-gstat{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font:700 14px var(--vwg-font-sans);color:#fff}
.vwg-gstat svg{stroke:rgba(255,255,255,.75)}
/* HOW-TO / TIMELINE */
.vwg-howto{padding:32px 40px 36px;background:#fff}
.vwg-sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vwg-sec-head h2{margin:0;font:400 24px/1 var(--vwg-font-display)}
.vwg-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:26px}
.vwg-tstep{position:relative;z-index:1}
.vwg-tstep:not(.last)::after{content:'';position:absolute;top:20px;left:44px;right:-26px;height:2px;background:var(--vwg-accent);z-index:0}
.vwg-tstep:nth-child(3)::after{background:linear-gradient(90deg,var(--vwg-accent),var(--vwg-accent2))}
.vwg-tnum{width:40px;height:40px;border-radius:50%;background:var(--vwg-accent);color:#fff;display:grid;place-items:center;font:800 15px var(--vwg-font-sans);box-shadow:0 0 0 6px #fff;margin-bottom:15px;position:relative;z-index:1}
.vwg-tstep.last .vwg-tnum{background:var(--vwg-accent2)}
.vwg-tstep h3{margin:0 0 5px;font:700 15px var(--vwg-font-sans);color:var(--vwg-ink);display:flex;align-items:center;gap:8px}
.vwg-tstep p{margin:0;font:400 13px/1.5 var(--vwg-font-sans);color:#7a8199}
/* GALLERY */
.vwg-gal{margin-top:22px;background:#fff;border-top:1px solid rgba(20,30,60,.06);overflow:hidden;box-shadow:0 14px 44px -26px rgba(20,30,60,.45)}
.vwg-gal-head{padding:28px 32px 20px}
.vwg-eyebrow{font:600 10.5px/1 var(--vwg-font-sans);letter-spacing:.22em;color:var(--vwg-accent);text-transform:uppercase}
.vwg-gal-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:9px;flex-wrap:wrap}
.vwg-gal-bar h2{margin:0;font:400 30px/1.02 var(--vwg-font-display);letter-spacing:-.01em}
.vwg-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vwg-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(20,30,60,.1);border-radius:12px;padding:11px 13px;width:240px;box-shadow:0 1px 2px rgba(20,30,60,.05)}
.vwg-search input{border:none;outline:none;font:400 13px var(--vwg-font-sans);color:var(--vwg-ink);width:100%;background:transparent}
.vwg-sort{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(20,30,60,.1);border-radius:999px;padding:5px;box-shadow:0 1px 2px rgba(20,30,60,.05)}
.vwg-sort button{font:600 12px var(--vwg-font-sans);border:none;background:transparent;color:#7a8199;border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .12s ease}
.vwg-sort button:hover:not(.active){background:rgba(20,30,60,.06);color:var(--vwg-ink)}
.vwg-sort button:active{transform:scale(.95)}
.vwg-sort button.active{background:var(--vwg-ink);color:#fff}
.vwg-views{display:flex;background:#fff;border:1px solid rgba(20,30,60,.1);border-radius:999px;padding:5px;gap:2px;box-shadow:0 1px 2px rgba(20,30,60,.05)}
.vwg-views button{display:flex;align-items:center;gap:6px;font:600 12px var(--vwg-font-sans);border:none;background:transparent;color:#7a8199;border-radius:999px;padding:8px 11px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .12s ease}
.vwg-views button:hover:not(.active){background:rgba(20,30,60,.06);color:var(--vwg-ink)}
.vwg-views button:active{transform:scale(.95)}
.vwg-views button.active{background:var(--vwg-ink);color:#fff}
/* Tooltips propios (portados del diseño) — para botones de orden, vista y controles
   de la tarjeta. Namespaced a .vwg-root; usan data-vwg-tip. */
.vwg-root [data-vwg-tip]{position:relative}
.vwg-root [data-vwg-tip]::after{content:attr(data-vwg-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--vwg-ink);color:#fff;font:600 11px var(--vwg-font-sans);white-space:nowrap;padding:6px 10px;border-radius:7px;pointer-events:none;opacity:0;z-index:40;box-shadow:0 8px 18px -6px rgba(0,0,0,.45);transition:opacity .18s ease,transform .18s ease}
.vwg-root [data-vwg-tip]::before{content:'';position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(-4px);border:5px solid transparent;border-bottom-color:var(--vwg-ink);pointer-events:none;opacity:0;z-index:40;transition:opacity .18s ease,transform .18s ease}
.vwg-root [data-vwg-tip]:hover::after,.vwg-root [data-vwg-tip]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
/* Controles sobre la foto: tooltip alineado a la derecha, sin flecha (queda dentro
   del recorte de la foto). */
.vwg-ctl [data-vwg-tip]::after{left:auto;right:-4px;transform:translateY(-4px)}
.vwg-ctl [data-vwg-tip]:hover::after{transform:translateY(0)}
.vwg-ctl [data-vwg-tip]::before{display:none}
.vwg-grid{padding:4px 30px 30px;transition:opacity .2s ease,transform .2s ease}
.vwg-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.vwg-view-grid .vwg-ph{aspect-ratio:4/5!important}
.vwg-view-masonry{column-width:270px;column-gap:16px}
.vwg-view-masonry .vwg-tile{margin-bottom:16px;break-inside:avoid}
.vwg-view-masonry .vwg-ph{aspect-ratio:4/5}
.vwg-view-masonry .vwg-tile:nth-child(4n+1) .vwg-ph{aspect-ratio:3/4}
.vwg-view-masonry .vwg-tile:nth-child(4n+2) .vwg-ph{aspect-ratio:1/1}
.vwg-view-masonry .vwg-tile:nth-child(4n+4) .vwg-ph{aspect-ratio:3/5}
.vwg-view-bento{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-auto-rows:200px;grid-auto-flow:dense;gap:12px}
.vwg-view-bento .vwg-tile{height:100%}
.vwg-view-bento .vwg-ph{height:100%;aspect-ratio:auto}
.vwg-view-bento .vwg-tile:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.vwg-view-bento .vwg-tile:nth-child(6n+2){grid-row:span 2}
.vwg-view-bento .vwg-tile:nth-child(6n+4){grid-column:span 2}
.vwg-tile{display:flex;flex-direction:column;gap:11px;animation:vwg-fadeIn .45s ease both;transition:transform .22s ease}
.vwg-tile:hover{transform:translateY(-4px)}
@keyframes vwg-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vwg-ph{aspect-ratio:4/5;border-radius:16px;position:relative;box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.4);cursor:zoom-in;overflow:hidden;transition:box-shadow .22s ease,transform .25s ease;background-color:#c3cbe6;background-size:cover;background-position:center;background-repeat:no-repeat}
.vwg-tile:hover .vwg-ph{transform:scale(1.015);box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.4),0 18px 40px -14px rgba(0,0,0,.45)}
.vwg-ph-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;align-items:center;gap:7px;background:rgba(10,14,26,.62);backdrop-filter:blur(3px);color:#fff;font:700 12px var(--vwg-font-sans);padding:9px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.vwg-tile:hover .vwg-ph-hint{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vwg-ctl{position:absolute;top:9px;right:9px;display:flex;gap:6px;opacity:.85;transition:opacity .2s ease}
.vwg-tile:hover .vwg-ctl{opacity:1}
.vwg-ctl button{width:32px;height:32px;border:none;border-radius:10px;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;transition:.15s;color:var(--vwg-ink)}
.vwg-ctl button:hover{background:#fff;transform:scale(1.06)}
.vwg-ctl button.vwg-sh:hover{background:var(--vwg-accent);color:#fff}
.vwg-ph-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 13px 13px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(0deg,rgba(6,9,18,.86),rgba(6,9,18,.18) 62%,transparent)}
.vwg-ti{font:700 15px/1.15 var(--vwg-font-sans);color:#fff}
.vwg-au{font:500 12px var(--vwg-font-sans);color:rgba(255,255,255,.82);margin-top:2px}
.vwg-vote{position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;gap:8px;font:700 13px var(--vwg-font-sans);border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);color:#fff;border-radius:11px;padding:11px;cursor:pointer;transition:.15s}
.vwg-vote:disabled{cursor:default}
.vwg-vote:hover{background:rgba(255,255,255,.26)}
.vwg-vote:active{transform:scale(.97)}
.vwg-vote .vw-vote-icon{font-size:16px;line-height:1}
.vwg-tile.vw-voted .vwg-vote,.vwg-vote.vw-voted{border-color:var(--vwg-accent);background:var(--vwg-accent);color:#fff}
.vwg-tile.vw-voted .vwg-vote:hover{background:var(--vwg-accent-d)}
.vwg-vote[aria-disabled="true"]{opacity:.7;cursor:default}
.vwg-empty{grid-column:1/-1;text-align:center;padding:40px;color:#9aa0b5;font:500 14px var(--vwg-font-sans)}
.vwg-view-masonry .vwg-empty,.vwg-view-bento .vwg-empty{grid-column:auto}
/* STATUS / PODIUM */
.vwg-status{padding:0 30px 24px}
.vwg-notice{background:linear-gradient(180deg,#f6f7fb,#eef0f7);border:1px solid rgba(20,30,60,.06);border-radius:16px;padding:32px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.vwg-notice>svg{color:var(--vwg-accent)}
.vwg-n-title{font:600 18px var(--vwg-font-sans);color:var(--vwg-ink);margin-top:10px}
.vwg-n-sub{font:400 13px var(--vwg-font-sans);color:#7a8199;margin-top:4px}
.vwg-n-sub b{color:#455072}
.vwg-lead{background:#fff;border:1px solid rgba(20,30,60,.07);border-radius:16px;padding:22px 24px;box-shadow:0 10px 30px -20px rgba(20,30,60,.4)}
.vwg-lead-h{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.vwg-lead-sub{font:400 13px var(--vwg-font-sans);color:#7a8199}
.vwg-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vwg-pod{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(20,30,60,.08);border-radius:14px;cursor:pointer;transition:.15s;background:#fbfaf7}
.vwg-pod:hover{border-color:var(--vwg-accent)}
.vwg-pod.first{background:#fff8ea;border-color:rgba(230,180,34,.4)}
.vwg-pod-thumb{position:relative;width:64px;height:64px;flex:none;border-radius:10px;background-size:cover;background-position:center}
.vwg-medal{position:absolute;top:-6px;left:-6px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#fff;font:800 11px var(--vwg-font-sans);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.vwg-pod-ti{font:700 14px/1.15 var(--vwg-font-sans);color:var(--vwg-ink)}
.vwg-pod-au{font:400 12px var(--vwg-font-sans);color:#928b82;margin-top:2px}
.vwg-pod-votes{font:800 12px var(--vwg-font-sans);color:var(--vwg-accent);margin-top:6px}
/* "load more" + back button */
.vwg-more{text-align:center;padding:2px 30px 26px}
.vwg-more button{font:700 13px var(--vwg-font-sans);border:1.5px solid rgba(20,30,60,.14);background:#fff;color:var(--vwg-ink);border-radius:12px;padding:12px 20px;cursor:pointer;transition:.15s}
.vwg-more button:hover{border-color:var(--vwg-accent);color:var(--vwg-accent)}
.vwg-back{display:inline-flex;align-items:center;gap:7px;margin:18px 0 -6px 40px;font:600 13px var(--vwg-font-sans);background:none;border:none;cursor:pointer;color:#5a6280}
.vwg-back:hover{color:var(--vwg-accent)}
/* FOOTER (portado del diseño; hereda la paleta del concurso). margin-top:auto lo
   empuja al fondo cuando el contenido es corto (sticky footer) y queda pegado al
   contenido cuando es largo — sin franjas claras del fondo antes/después. */
.vwg-foot{margin-top:auto;background:var(--vwg-c-deep);color:#fff}
.vwg-foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:34px 40px}
.vwg-foot-brand{display:flex;align-items:center;gap:14px}
.vwg-foot-logo{width:42px;height:42px;flex:none;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:var(--vwg-amber);overflow:hidden}
.vwg-foot-logo img{width:100%;height:100%;object-fit:contain}
.vwg-foot-name{font:400 19px var(--vwg-font-display)}
.vwg-foot-tag{font:italic 400 12px var(--vwg-font-display);color:rgba(255,255,255,.6);margin-top:2px}
.vwg-foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.vwg-foot-nav a{font:600 13px var(--vwg-font-sans);color:rgba(255,255,255,.78);text-decoration:none;cursor:pointer;transition:color .15s}
.vwg-foot-nav a:hover{color:var(--vwg-amber)}
.vwg-foot-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 40px;border-top:1px solid rgba(255,255,255,.12);font:500 12px var(--vwg-font-sans);color:rgba(255,255,255,.55)}
.vwg-foot-up{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--vwg-font-sans);color:rgba(255,255,255,.78);text-decoration:none;cursor:pointer;background:none;border:none;transition:color .15s}
.vwg-foot-up:hover{color:var(--vwg-amber)}
/* LIGHTBOX (.vwg-lb) — portado del diseño. Se monta dentro de .vwg-root y hereda la
   paleta (--vwg-accent, etc.). Usa <img> (object-fit:contain) para respetar el
   tamaño real de cada foto sobre el marco oscuro. */
.vwg-lb{position:fixed;inset:0;z-index:120;background:rgba(10,14,26,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:30px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.vwg-lb.open{opacity:1;visibility:visible;pointer-events:auto}
.vwg-lb-stage{position:relative;display:flex;flex-direction:column;max-width:min(94vw,1050px);max-height:90vh;transform:scale(.955);transition:transform .34s cubic-bezier(.2,.85,.25,1)}
.vwg-lb-stage:focus{outline:none}
.vwg-lb.open .vwg-lb-stage{transform:scale(1)}
.vwg-lb-photo{position:relative;display:flex;border-radius:16px;overflow:hidden;background:#0b1020;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);opacity:0;transition:opacity .28s ease;min-width:280px;min-height:200px}
.vwg-lb-photo img{display:block;max-width:min(94vw,1050px);max-height:88vh;width:auto;height:auto;object-fit:contain;margin:auto;cursor:zoom-in}
.vwg-lb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:34px 24px 20px;background:linear-gradient(0deg,rgba(6,9,18,.92),rgba(6,9,18,.35) 55%,rgba(6,9,18,0));color:#fff}
.vwg-lb-meta{flex:1;min-width:220px}
.vwg-lb-meta .vwg-eyebrow{color:#7fe0c4}
.vwg-lb-bar h3{margin:8px 0 3px;font:400 28px/1.05 var(--vwg-font-display);color:#fff;text-wrap:balance}
.vwg-lb-au{font:500 13px var(--vwg-font-sans);color:rgba(255,255,255,.82)}
.vwg-lb-desc{margin:10px 0 0;font:400 13px/1.55 var(--vwg-font-sans);color:rgba(255,255,255,.86);max-width:640px}
.vwg-lb-btns{display:flex;gap:10px;flex-wrap:wrap}
.vwg-lb-vote{display:flex;align-items:center;gap:9px;font:800 14px var(--vwg-font-sans);border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:13px 20px;cursor:pointer;transition:.15s}
.vwg-lb-vote:hover{background:rgba(255,255,255,.22)}
.vwg-lb-vote:disabled{opacity:.75;cursor:default}
.vwg-lb-vote.on{border-color:var(--vwg-accent);background:var(--vwg-accent);color:#fff}
.vwg-lb-vote.on:hover{background:var(--vwg-accent-d)}
.vwg-lb-share{display:flex;align-items:center;gap:8px;font:700 13px var(--vwg-font-sans);border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:13px 18px;cursor:pointer;transition:.15s}
.vwg-lb-share:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.vwg-lb-close{position:absolute;top:-15px;right:-15px;width:38px;height:38px;border:none;border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);z-index:2;transition:transform .15s ease}
.vwg-lb-close:hover{transform:scale(1.06)}
.vwg-lb-clean{position:absolute;top:-15px;right:32px;width:38px;height:38px;border:none;border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);z-index:2;transition:transform .15s ease}
.vwg-lb-clean:hover{transform:scale(1.06)}
.vwg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);border:none;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);transition:background .18s ease,transform .18s ease}
.vwg-lb-nav:hover{background:#fff}
.vwg-lb-prev{left:-16px}
.vwg-lb-prev:hover{transform:translateY(-50%) translateX(-2px)}
.vwg-lb-next{right:-16px}
.vwg-lb-next:hover{transform:translateY(-50%) translateX(2px)}
.vwg-lb.is-clean{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#05070d;-webkit-backdrop-filter:none;backdrop-filter:none}
.vwg-lb.is-clean .vwg-lb-stage{width:100%;height:100%;max-width:none;max-height:none;transform:none}
.vwg-lb.is-clean .vwg-lb-photo{width:100%;height:100%;min-width:0;min-height:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none}
.vwg-lb.is-clean .vwg-lb-photo img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out}
.vwg-lb.is-clean .vwg-lb-bar,
.vwg-lb.is-clean .vwg-lb-nav,
.vwg-lb.is-clean .vwg-lb-clean,
.vwg-lb.is-clean .vwg-lb-close{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:1024px){
  .vwg-lb-bar h3{font-size:22px}
  .vwg-lb-bar{padding-top:44px}
  .vwg-lb-prev{left:6px}
  .vwg-lb-next{right:6px}
}
@media(max-width:600px){
  .vwg-lb{padding:14px}
  .vwg-lb-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 16px 16px}
  .vwg-lb-btns{width:100%}
  .vwg-lb-vote{flex:1;justify-content:center}
  .vwg-lb-close{top:-14px;right:0}
  .vwg-lb-clean{top:-14px;right:48px}
  .vwg-lb.is-clean{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
}

/* ---- embedded (Elementor "grid" element): just the gallery block ---- */
.vwg-root.vwg-embedded{background:transparent;padding-bottom:0}
.vwg-root.vwg-embedded .vwg-gal{margin-top:0;box-shadow:none;border-top:none;background:transparent}
.vwg-root.vwg-embedded .vwg-gal-head{padding:0 0 18px}
.vwg-root.vwg-embedded .vwg-grid{padding:4px 0 20px}
.vwg-root.vwg-embedded .vwg-status{padding:0 0 22px}
.vwg-root.vwg-embedded .vwg-more{padding:2px 0 8px}

/* ---- responsive ---- */
@media(max-width:1024px){
  .vwg-hero{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:22px 24px;padding:34px 32px}
  .vwg-hero-art{width:104px;height:104px;border-radius:20px}
  .vwg-hero h1{margin-top:12px;font-size:31px}
  .vwg-status-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:22px}
  .vwg-countdown{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;padding:15px 20px}
  .vwg-gstat{justify-content:center;padding:13px 12px}
  .vwg-howto{padding:28px 26px}
  .vwg-gal-head{padding:26px 28px 18px}
  .vwg-tools{width:100%;flex-wrap:wrap;gap:10px}
  .vwg-search{flex:1 1 220px;width:auto}
  .vwg-sort,.vwg-views{flex:0 0 auto}
  .vwg-grid{padding:4px 18px 24px}
  .vwg-view-grid{grid-template-columns:1fr 1fr}
  .vwg-view-masonry{column-count:2}
  .vwg-view-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .vwg-view-bento .vwg-tile:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
  .vwg-view-bento .vwg-tile:nth-child(6n+2){grid-column:span 1;grid-row:span 1}
  .vwg-view-bento .vwg-tile:nth-child(6n+4){grid-column:span 2;grid-row:span 1}
  .vwg-status{padding:0 18px 22px}
  .vwg-back{margin-left:24px}
}
@media(max-width:820px){
  .vwg-howto{padding:22px 18px}
  .vwg-timeline{display:flex;flex-direction:column;gap:14px}
  .vwg-tstep{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;background:#fbfaf7;border:1px solid rgba(20,30,60,.06);border-radius:14px;padding:20px 18px}
  .vwg-tstep::after{display:none!important}
  .vwg-tstep .vwg-tnum{grid-row:1/3;margin:0;box-shadow:none}
  .vwg-tstep h3{margin:2px 0 4px}
}
@media(max-width:600px){
  .vwg-hero{flex-direction:column;align-items:flex-start;gap:16px;padding:30px 24px 32px}
  .vwg-hero-art{width:84px;height:84px;border-radius:17px}
  .vwg-hero h1{font-size:27px;margin-top:10px}
  .vwg-status-row{margin-top:18px;gap:10px}
  .vwg-countdown .val{font-size:20px}
  .vwg-gal-head{padding:20px 16px 14px}
  .vwg-gal-bar{flex-direction:column;align-items:stretch;gap:14px}
  .vwg-gal-bar h2{font-size:24px}
  .vwg-search{flex:1 1 100%;width:auto}
  .vwg-sort,.vwg-views{flex:1 1 auto;justify-content:center}
  .vwg-grid{padding:4px 14px 22px}
  .vwg-status{padding:0 14px 20px}
  .vwg-podium{grid-template-columns:1fr}
  .vwg-back{margin-left:16px}
  .vwg-foot-in{padding:26px 22px;flex-direction:column;align-items:flex-start;gap:18px}
  .vwg-foot-bar{padding:14px 22px;flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:520px){
  .vwg-view-grid{grid-template-columns:1fr}
  .vwg-view-masonry{column-count:1}
  .vwg-view-bento{grid-template-columns:1fr;grid-auto-rows:220px}
  .vwg-view-bento .vwg-tile{grid-column:span 1!important;grid-row:span 1!important}
}
@media(prefers-reduced-motion:reduce){.vwg-root *{animation-duration:.01ms!important;transition-duration:.01ms!important}}