/* PUIG skin: final videos and Edición. Loaded after puig.css; visual only.
   Dark review mode, status as dot + text, and video cards with poster frame, hover playback and minimal controls. */

/* --- Video card (.pv wrapper added by r2-finals.js) --- */
html body .grid > .card:has(> .pv) { display: flex; flex-direction: column; }
html body .grid > .card:has(> .pv) > h3 { order: 0; margin-bottom: 12px; min-height: 46px; align-content: flex-start; }
html body .grid > .card:has(> .pv) > .pv { order: 1; }
html body .grid > .card:has(> .pv) > * { order: 2; }
html body .grid > .card:has(> .pv) > .pv + div { margin-bottom: 8px; }
html body .pv { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: #EFEFEF; flex: none; }
html body .pv > video { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; background: #EFEFEF;
  border-radius: 0; aspect-ratio: auto; cursor: pointer; }
html body .pv-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 0 10px 12px; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
html body .pv:hover .pv-ctl, html body .pv:focus-within .pv-ctl, html body .pv.playing .pv-ctl, html body .pv.touch .pv-ctl { opacity: 1; pointer-events: auto; }
html body .pv-ctl .pv-sp { flex: 1; }
html body button.pv-b { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(255, 255, 255, .92); color: #000; border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
html body button.pv-b:hover { background: #FFFFFF; color: #000; border: 0; }
html body button.pv-b:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
html body button.pv-b svg { width: 16px; height: 16px; display: block; }
html body .pv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(0, 0, 0, .12); cursor: pointer; }
html body .pv-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; }   /* taller click area */
html body .pv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #000; }
@media (prefers-reduced-motion: reduce) { html body .pv-ctl { transition: none; } }
@media (max-width: 760px) { html body button.pv-b { width: 40px; height: 40px; } }