/* PUIG skin · global. Loaded after puig.css; visual only. */

/* --- Typography: to use Lettera, drop LetteraTextLL-Light/-Regular/-Medium.woff2 (300/400/500) into
   static/skins/puig/fonts/ and add url('fonts/LetteraTextLL-<Weight>.woff2') before Space Grotesk.
   Files that are not referenced are never requested, so missing fonts cause no 404s. */
@font-face { font-family: 'PUIG Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: local('Lettera Text LL Light'), local('LetteraTextLL-Light'),
       url('fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'PUIG Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: local('Lettera Text LL'), local('LetteraTextLL-Regular'),
       url('fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'PUIG Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: local('Lettera Text LL Medium'), local('LetteraTextLL-Medium'),
       url('fonts/space-grotesk-latin.woff2') format('woff2'); }

/* --- Status: dot + text, no box (colour only for what needs attention) --- */
html body .badge:is(.b-ok, .b-ready, .b-done, .b-analizado, .b-retouched, .b-final, .b-needs_retouch, .b-retouch_review,
  .b-ko_regen, .b-ko_manual, .b-warn, .b-failed, .b-error_analisis, .b-err, .b-review, .b-nuevo, .b-not_chosen):not(.st-live):not(.is-count) {
  background: transparent; color: var(--ink); border: 0; border-radius: 0; padding: 0; display: inline-flex; align-items: center;
  gap: 7px; font-size: 14px; line-height: 18px; font-weight: 400; white-space: nowrap; vertical-align: baseline; }
html body .badge:is(.b-ok, .b-ready, .b-done, .b-analizado, .b-retouched, .b-final, .b-needs_retouch, .b-retouch_review,
  .b-ko_regen, .b-ko_manual, .b-warn, .b-failed, .b-error_analisis, .b-err, .b-review, .b-nuevo, .b-not_chosen):not(.st-live):not(.is-count):not(:has(> .ico))::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; box-sizing: border-box; background: #2E9B61; }
html body .badge:is(.b-needs_retouch, .b-retouch_review, .b-ko_regen, .b-ko_manual, .b-warn, .b-review):not(.st-live)::before { background: #F1C488; }
html body .badge:is(.b-failed, .b-error_analisis, .b-err):not(.st-live)::before { background: var(--ds-critical-strong, #910D19); }
html body .badge:is(.b-nuevo, .b-not_chosen):not(.st-live)::before { background: transparent; border: 1px solid #000; }
html body .badge:is(.b-not_chosen):not(.st-live) { color: var(--ds-fg-subtle); }
/* with its own icon (⚠ → warning icon): the icon acts as the dot, in ochre */
html body .badge:is(.b-needs_retouch, .b-warn, .b-retouch_review, .b-ko_regen, .b-ko_manual):not(.st-live) > .ico { color: #8B5309; }
html body .badge:is(.b-failed, .b-error_analisis, .b-err):not(.st-live) > .ico { color: var(--ds-critical-strong, #910D19); }
/* counters (just a number): neutral number, no dot or box */
html body .badge.is-count:not(.st-live) { background: transparent; color: var(--ds-fg-subtle); padding: 0 0 0 4px; border: 0;
  font-weight: 400; font-size: inherit; font-variant-numeric: tabular-nums; }
html body .badge.is-count::before { content: none; }
html body h2 > .badge, html body h1 > .badge { background: transparent; color: var(--ds-fg-subtle); padding: 0 0 0 6px; font-weight: 300; }
html body h2 > .badge::before, html body h1 > .badge::before { content: none; }

/* --- Help texts: behind an (i) next to the title; inline only when the screen is empty --- */
html body .r2-help-host { position: relative; }
html body .r2-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0;
  padding: 0; margin-left: 10px; vertical-align: middle; border: 0; border-radius: 50%; background: transparent; color: var(--ds-fg-subtle);
  cursor: help; box-shadow: none; position: relative; top: -4px; }
html body .r2-help-btn:hover, html body .r2-help-btn[aria-expanded="true"] { color: var(--ink); background: var(--ds-hover); }
html body .r2-help-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
html body .r2-help-btn .ico { width: 16px; height: 16px; vertical-align: 0; }
html body .r2-help-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; max-width: min(520px, calc(100vw - 32px));
  background: #000; color: #fff; font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: 0; padding: 12px 14px;
  border-radius: 4px; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .5); animation: r2-pop .14s ease-out; }
html body .r2-help-pop[hidden] { display: none; }
html body .r2-help-pop a { color: #fff; }
html body p.r2-help-src { display: none; }
html body p.r2-help-src.r2-inline { display: block; }
@keyframes r2-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- Motion: soft fade-ins and grey placeholders while photos load --- */
html body main > :not(script):not(style):not(template) { animation: r2-in .18s ease-out backwards; }
html body main > :nth-child(2) { animation-delay: 25ms; } html body main > :nth-child(3) { animation-delay: 50ms; }
html body main > :nth-child(4) { animation-delay: 75ms; } html body main > :nth-child(5) { animation-delay: 100ms; }
html body main > :nth-child(n+6) { animation-delay: 120ms; }
@keyframes r2-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* no entrance animation when returning to the same page (after approving, commenting, reloading…) */
html.r2-same body main > * { animation: none; }
html body img.r2-loading { background-color: #E4E3DF;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%; background-repeat: no-repeat; animation: r2-sk 1.2s linear 3; }
/* the loading shimmer runs 3 times and stops: an infinite one kept below-the-fold lazy images
   forcing style recalculation 60 times per second */
@keyframes r2-sk { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* --- «Te toca»: home strip with pending work, most urgent first --- */
html body .todo-l { font-size: 14px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; margin: 4px 0 12px; }
html body .todo-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
html body a.todo-c { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px;
  padding: 18px 20px; border: 0; outline: 0; border-radius: 12px; background: var(--ds-tint); color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
html body a.todo-c:hover { background: rgba(0, 0, 0, .05); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); }
html body a.todo-c.hot { background: #000; color: #fff; outline: 0; }
html body a.todo-c.hot:hover { background: #1a1a1a; }
html body a.todo-c .n { font-size: 48px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; }
html body a.todo-c > span:last-child { font-size: 14px; line-height: 1.3; padding-right: 22px; }
html body a.todo-c::after { content: ''; position: absolute; right: 18px; bottom: 20px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease; }
html body a.todo-c:hover::after { transform: translateX(3px); }
html body .todo-calm { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 12px; background: var(--ds-tint);
  margin: 0 0 32px; color: var(--ds-fg-subtle); }
html body .todo-calm .empty-state.sm { margin: 0; color: var(--ds-fg-subtle); }
@media (max-width: 760px) {
  html body .todo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
  html body a.todo-c { min-height: 100px; padding: 14px; gap: 12px; }
  html body a.todo-c .n { font-size: 36px; }
  html body a.todo-c::after { right: 12px; bottom: 14px; }
}

/* inline swap glyph (⇆) */
html body .ico.ico-line { fill: none; }

@media (prefers-reduced-motion: reduce) {
  html body main > *, html body .r2-help-pop { animation: none; }
  html body img.r2-loading { animation: none; background-image: none; }
  html body a.todo-c, html body a.todo-c::after { transition: none; }
  html body a.todo-c:hover { transform: none; }
}
@media print { html body p.r2-help-src { display: block; } html body .r2-help-btn { display: none; } }

/* a status with its own icon gets no extra dot, and counters next to the title are just the number */
html body main .badge:has(> svg.ico)::before, html body main h1 > .badge::before, html body main h2 > .badge::before { content: none !important; display: none !important; }

/* dark only for the enlarged video lightbox; pages stay light */
html body #vlightbox > .lb-bar, html body #vlightbox > .vlb-body { background: #12110F; color: #FFFFFF; }
html body #vlightbox .lb-name { color: #B2B1A5; }
html body #vlightbox .lb-btn { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); }
html body #vlightbox #vlb-close { color: #FFFFFF; border-color: transparent; }
html body #vlightbox .lb-btn:hover { background: rgba(255, 255, 255, .10); }
html body #vlb-video { background: #000000; }
html body #vlb-panel { border-left-color: rgba(255, 255, 255, .12); color: #FFFFFF; }
html body #vlb-panel input, html body #vlb-panel textarea { background: #1B1A17; color: #FFFFFF; border-color: rgba(255, 255, 255, .3); }

/* --- Pairs look the same across the app ---
   Like the pair editor: portrait photo with the «Inicio · v10» / «Final · v11» / «Rush» label over it, and a 40 px
   circle between start and end. In the editor the circle is the ⇄ swap button; read-only views show start → end. */
html body .pair-cell { position: relative; }
html body .pair-cell > .ap-lbl, html body .review-frames .viewcard .vc-caption {
  position: absolute; top: 6px; left: 6px; z-index: 1; margin: 0; background: rgba(255, 255, 255, .94); border-radius: 4px;
  padding: 2px 6px; font-size: 12px; line-height: 15.6px; color: #000; white-space: nowrap; pointer-events: none; }
html body .review-frames .viewcard .vc-caption .vc-title { font-weight: 400; font-size: 12px; }
html body .review-frames .viewcard { position: relative; }
/* circle between start and end */
html body .ap-row > .ap-arrow, html body .review-frames > .arrow {
  width: 40px; height: 40px; border: 1px solid var(--ds-border-subtle, rgba(0, 0, 0, .3)); border-radius: 50%;
  padding: 0 10px; box-sizing: border-box; background-origin: content-box; background-clip: content-box; }
html body .ap-row > .ap-arrow { margin: 36px 0 0; }
html body .ap-row > .ap-arrow::before, html body .review-frames > .arrow::before { left: 10px; }
html body .ap-row > .ap-arrow::after, html body .review-frames > .arrow::after { right: 10px; }
html body .ap-row > .ap-arrow > .flow-dot, html body .review-frames > .arrow > .flow-dot { left: 10px; width: calc(100% - 30px); }   /* keep the dot inside the circle */
/* long status text (e.g. «Se compartirá con la marca…») wraps on mobile instead of overflowing */
html body main .badge:not(.st-live) { max-width: 100%; white-space: normal !important; }

/* all lightboxes look the same and dark (photos, before/after compare and videos) */
html body #lightbox > .lb-bar, html body #lightbox > .lb-body,
html body #cmpbox > .lb-bar, html body #cmpbox > .cmp-stage { background: #12110F; color: #FFFFFF; }
html body #lightbox .lb-name, html body #cmpbox .lb-name,
html body #lightbox .lb-fig figcaption, html body #cmpbox .cmp-fig figcaption { color: #B2B1A5; }
html body #lightbox .lb-btn, html body #cmpbox .lb-btn { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); background: transparent; }
html body #lightbox .lb-btn:hover, html body #cmpbox .lb-btn:hover { background: rgba(255, 255, 255, .10); }
html body #lightbox .lb-btn.active, html body #cmpbox .lb-btn.active { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
html body #lightbox #lb-close, html body #cmpbox #cmp-close { color: #FFFFFF; border-color: transparent; }
html body #cmpbox .cmp-lab { background: rgba(255, 255, 255, .94); color: #000000; border-color: transparent; }