/* PUIG skin, from the "PUIG Design System for Internal Tools" (values in docs/DS_PUIG.md).
   Loaded after style.css only when ui.skin = "puig"; overrides variables and the same selectors, no HTML changes.
   Lettera Text LL and Paralelo_V2 are used when available; Space Grotesk (OFL) is the closest-width fallback. */

@font-face { font-family: 'PUIG Sans'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: local('Lettera Text LL'), local('LetteraTextLL-Regular'),
       url('puig/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'PUIG Sans'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: local('Lettera Text LL'), url('puig/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* DS semantic colours (light mode) */
  --ds-page: #EDECE9;            /* background-page */
  --ds-surface-1: #F4F3F0;       /* background-surface-1-default */
  --ds-surface-2: #F9F9F7;       /* background-surface-2-default */
  --ds-surface-3: #FFFFFF;       /* background-surface-3-default */
  --ds-info: #DDD7D2;            /* background-info-default */
  --ds-fg: #000000;              /* foreground-default */
  --ds-fg-subtle: #68675B;       /* foreground-subtle */
  --ds-border: #000000;          /* border-default */
  --ds-border-subtle: rgba(0,0,0,.30);
  --ds-border-subtler: rgba(0,0,0,.10);
  --ds-secondary: #87867A; --ds-secondary-hover: #9C9B8F; --ds-secondary-active: #68675B;
  --ds-critical-strong: #910D19;
  --ds-hover: rgba(0,0,0,.10);   /* action-quinary-hover */
  --ds-tint: rgba(0,0,0,.03);    /* Card «Tinted» */
  --ds-badge: rgba(0,0,0,.05);   /* Badge Default */
  --ds-font: 'PUIG Sans', 'Lettera Text LL', 'Space Grotesk', system-ui, sans-serif;
  --ds-display: 'Paralelo_V2', 'Paralelo', Georgia, 'Times New Roman', serif;
  --ds-mono: 'JetBrains Mono', Consolas, monospace;

  /* app variables -> DS (the brand turquoise becomes the DS black primary action) */
  --brand: #000000;
  --brand-dark: #000000;
  --brand-deep: #1E1E19;
  --brand-50: var(--ds-surface-1);
  --brand-100: var(--ds-border-subtler);
  --bg: var(--ds-page);
  --panel: var(--ds-surface-2);
  --line: var(--ds-border-subtler);
  --line-strong: var(--ds-border-subtle);
  --ink: var(--ds-fg);
  --muted: var(--ds-fg-subtle);
  --faint: var(--ds-fg-subtle);
  --ok: #006831;     --ok-bg: #BAE6CF;      /* safe */
  --warn: #8B5309;   --warn-bg: #F7D9B1;    /* notice */
  --err: #B5101F;    --err-bg: #FFD0D6;     /* critical */
  --info: #000000;   --info-bg: var(--ds-info);
  --violet: #4A493E;
  --gold: #8B5309;
  --radius: 4px;     /* DS components: radius 4 */
  --r-btn: 4px;
  --shadow: none;    /* the DS uses no shadows: surface layers instead */
  --shadow-hover: none;
}

body { font-family: var(--ds-font); font-size: 14px; line-height: 1.3; background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; }
b, strong { font-weight: 500; }
::selection { background: var(--ds-info); }

/* --- Typography (headline 300, subheadline 500, no uppercase) --- */
h1 { font-size: 32px; line-height: 35.2px; font-weight: 300; letter-spacing: 0; margin: 4px 0 8px; }
.page-sub { font-size: 14px; line-height: 18.2px; color: var(--muted); }
h2 { font-size: 18px; line-height: 23.4px; font-weight: 500; color: var(--ink); text-transform: none;
  letter-spacing: 0; margin: 32px 0 12px; }
h3 { font-size: 14px; line-height: 18.2px; font-weight: 500; letter-spacing: 0; }
.sub { font-size: 12px; line-height: 15.6px; color: var(--muted); }
.back-link { font-weight: 400; color: var(--muted); font-size: 14px; }
.back-link:hover { color: var(--ink); text-decoration: underline; }
label { font-size: 14px; line-height: 18.2px; font-weight: 400; color: var(--muted); text-transform: none;
  letter-spacing: 0; margin: 16px 0 4px; }
.check label { font-size: 14px; font-weight: 400; color: var(--ink); }
.stat-big { font-size: 44px; line-height: 48.4px; font-weight: 300; letter-spacing: 0; }
details summary { font-weight: 500; font-size: 14px; }

/* --- Shell: side menu + header --- */
.sidebar { background: var(--ds-surface-1); border-right: 1px solid var(--line); }
.sb-logo { padding: 24px 24px 16px; }
.sb-logo img { height: 14px; }
.sb-logo .divider { background: var(--line-strong); }
.sb-logo .app-name { font-size: 14px; font-weight: 400; color: var(--ink); }
.sb-section { font-size: 12px; line-height: 15.6px; font-weight: 400; letter-spacing: 0; color: var(--muted);
  padding: 16px 24px 4px; text-transform: none; }
.sb-nav { padding: 0 12px; }
/* NavigationMenuItem: text 14, no background, 32 high, radius 4; active/hover = leading dot */
.sb-nav a { position: relative; gap: 10px; padding: 8px 8px 8px 24px; min-height: 32px; border-radius: 4px;
  font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: 0; }
.sb-nav a svg { width: 16px; height: 16px; color: var(--ink); stroke-width: 1.5; }
.sb-nav a:hover { background: var(--ds-hover); }
.sb-nav a:hover svg { color: var(--ink); }
.sb-nav a::before { content: ''; position: absolute; left: 10px; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--ink); opacity: 0; }
.sb-nav a:hover::before { opacity: .5; }
.sb-nav a[aria-current="page"]::before { opacity: 1; }
.sb-nav a[aria-current="page"] { font-weight: 500; }
.sb-balance { background: var(--ds-fg); color: #fff; border-radius: 4px; padding: 12px 16px; }
.sb-balance .lbl { font-size: 12px; font-weight: 400; opacity: .8; }
.sb-balance .num { font-size: 24px; line-height: 26.4px; font-weight: 300; }
.sb-balance .num small { font-size: 12px; font-weight: 400; }
.sb-credit { font-size: 12px; color: var(--muted); }
.sb-credit a { font-weight: 500; }

.topbar { background: var(--ds-page); border-bottom: 1px solid var(--line); padding: 12px 40px; }
.lang-switch { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 2px; }
.lang-switch a { font-size: 12px; font-weight: 400; color: var(--muted); border-radius: 2px; padding: 4px 10px; }
.lang-switch a.active { background: var(--ds-fg); color: #fff; box-shadow: none; }
.credit-chip { background: var(--ds-badge); border: 0; color: var(--ink); border-radius: 4px; padding: 4px 8px;
  font-size: 14px; line-height: 18.2px; font-weight: 400; }
.credit-chip b { font-weight: 500; }
.role-badge { border-radius: 4px; padding: 4px 8px; font-size: 14px; line-height: 18.2px; font-weight: 400; border: 0; }
.role-puig { background: var(--ds-fg); color: #fff; }
.role-marca, .role-fotoempresas { background: var(--ds-badge); color: var(--ink); border: 0; }
.avatar { background: var(--ds-info); color: var(--ink); font-size: 12px; font-weight: 500; width: 32px; height: 32px; }
.logout, button.logout { font-size: 14px; font-weight: 400; color: var(--muted); }
.nav-count { background: var(--ds-fg); color: #fff; border-radius: 4px; padding: 0 6px; font-size: 12px;
  line-height: 18px; font-weight: 400; }
.main > main { padding: 32px 40px 80px; }

/* --- Surfaces --- */
.card, .batchbar, .reflist, details.article, .clip-card, .am-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.card { padding: 24px; }
.clip-card:hover { box-shadow: none; border-color: var(--line-strong); }

/* DS table: no box, header with black rule, rows with subtle rule */
table { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
th, td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 18.2px; }
th { font-weight: 500; color: var(--ink); font-size: 14px; text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--ds-border); }
th:first-child, td:first-child { padding-left: 0; }
table tr:hover td { background: var(--ds-tint); }
.card table th:first-child, .card table td:first-child { padding-left: 0; }

/* --- States: Badge (padding 4 8, radius 4, 14/18.2) with semantic pairs --- */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 14px; line-height: 18.2px; font-weight: 400; }
.b-not_chosen { background: var(--ds-badge); color: var(--muted); }
.b-ok, .b-ready, .b-done, .b-analizado, .b-retouched, .b-final { background: var(--ok-bg); color: var(--ok); }
.b-needs_retouch, .b-retouch_review, .b-ko_regen, .b-ko_manual, .b-warn { background: var(--warn-bg); color: var(--warn); }
.b-failed, .b-error_analisis { background: var(--err-bg); color: var(--err); }
.b-generating, .b-queued, .b-analizando, .b-review, .b-nuevo, .b-retouching { background: var(--ds-info); color: var(--ink); }

/* DS Snackbar for messages */
.flash { border-radius: 4px; padding: 14px 20px; font-size: 14px; line-height: 18.2px; background: var(--ds-info); color: var(--ink); }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-warn { background: var(--warn-bg); color: var(--warn); }
.flash-error { background: var(--err-bg); color: var(--err); }

/* --- Buttons (Compact 32 px by default; Default 48 px for .btn-lg and login) --- */
button, .btn {
  font-family: var(--ds-font); font-size: 14px; line-height: 14px; font-weight: 400;
  background: var(--ds-fg); color: #fff; border: 1px solid var(--ds-fg); border-radius: 4px;
  padding: 8px 12px; min-height: 32px; gap: 8px; box-shadow: none; transition: background .12s ease, color .12s ease; }
button:hover, .btn:hover { background: #1E1E19; border-color: #1E1E19; }
button:active, .btn:active { background: var(--ds-fg); }
button:disabled, .btn[disabled], .btn.disabled { opacity: .3; cursor: not-allowed; }
/* Outlined: black border; hover = filled */
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ds-border); box-shadow: none; }
.btn-ghost:hover { background: var(--ds-fg); color: #fff; border-color: var(--ds-fg); }
/* approve / OK = Filled (primary action) */
.btn-ok { background: var(--ds-fg); border-color: var(--ds-fg); color: #fff; box-shadow: none; }
.btn-ok:hover { background: #1E1E19; border-color: #1E1E19; }
/* regenerate / warning = Tonal */
.btn-warn { background: var(--ds-secondary); border-color: var(--ds-secondary); color: #fff; box-shadow: none; }
.btn-warn:hover { background: var(--ds-secondary-hover); border-color: var(--ds-secondary-hover); }
.btn-warn:active { background: var(--ds-secondary-active); }
/* destructive = Critical */
.btn-err { background: var(--ds-critical-strong); border-color: var(--ds-critical-strong); color: #fff; box-shadow: none; }
.btn-err:hover { background: #B5101F; border-color: #B5101F; }
/* send to editing = Outlined */
.btn-edit { background: transparent; border-color: var(--ds-border); color: var(--ink); box-shadow: none; }
.btn-edit:hover { background: var(--ds-fg); border-color: var(--ds-fg); color: #fff; }
.btn-sm { padding: 8px; font-size: 14px; min-height: 32px; }
.btn-lg { padding: 16px 20px; font-size: 14px; min-height: 48px; }

/* --- Fields (border .10, black hover, 2 px black focus outline) --- */
input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], input[type=search],
select, textarea {
  font-family: var(--ds-font); font-size: 14px; line-height: 18.2px; padding: 6px 12px; min-height: 32px;
  border: 1px solid var(--ds-border-subtler); border-radius: 4px; background: var(--ds-surface-3); color: var(--ink); }
input:hover, select:hover, textarea:hover { border-color: var(--ds-border); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ds-border); outline-offset: 2px;
  border-color: var(--ds-border-subtler); background: var(--ds-surface-3); }
textarea { font-family: var(--ds-font); font-size: 14px; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background: var(--ds-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 12px center; }
input[type=checkbox], input[type=radio] { accent-color: var(--ds-fg); width: 16px; height: 16px; }
.field-error { border-color: var(--err) !important; background: var(--ds-surface-3) !important; }
.ko-hint { color: var(--err); font-size: 12px; line-height: 15.6px; }
.elements-check { font-weight: 400; font-size: 12px; }
.field .res-select { padding: 6px 32px 6px 12px !important; font-size: 14px !important; }
.res-select { padding: 6px 28px 6px 8px !important; font-size: 14px !important; }

/* --- Photography --- */
.thumb, .thumb-sm, .viewcard img, .ref-thumbs img, .pslot .ps-img, .pthumb img { border-radius: 2px; background: var(--ds-info); }
.viewcard img { border-color: var(--line); }
video, .rush-video { border-radius: 2px; }
.vc-title { font-weight: 500; }
.vc-reason, .bg-deviates { color: var(--warn); }
.bg-deviates { font-weight: 500; }

/* --- Reference list, article modal, tabs --- */
.refrow { border-bottom: 1px solid var(--line); }
.refrow:hover { background: var(--ds-tint); }
.refrow .code { font-weight: 500; font-size: 14px; letter-spacing: 0; }
.refrow .meta { font-size: 12px; }
.ref-open { color: var(--ink); font-weight: 400; font-size: 14px; text-decoration: underline; }
.ref-thumbs img { border: 2px solid var(--panel); box-shadow: none; }
details.article > summary .art-code { font-weight: 500; }
.am-backdrop { background: rgba(0,0,0,.25); }   /* Scrim */
.amx { background: var(--ds-surface-1); border-radius: 4px; box-shadow: none; }
.am-head { background: var(--ds-surface-1); border-bottom: 1px solid var(--line); }
.am-head .code { font-size: 24px; line-height: 26.4px; font-weight: 300; }
.am-x { background: transparent; color: var(--ink); border: 1px solid var(--ds-border); border-radius: 4px; }
.am-x:hover { background: var(--ds-fg); color: #fff; }
.am-tabs { background: var(--ds-surface-1); border-bottom: 1px solid var(--line); gap: 24px; }
/* TabsTrigger: 48 high, text 14, active/hover = 1 px black underline */
.am-tab { padding: 16px 0; min-height: 48px; font-weight: 400; font-size: 14px; line-height: 16px; color: var(--ink);
  border: 0; border-bottom: 1px solid transparent; border-radius: 0; margin-bottom: -1px; background: none; }
.am-tab:hover { color: var(--ink); border-bottom-color: var(--ds-border); background: none; }
.am-tab.on { color: var(--ink); border-bottom-color: var(--ds-border); }
.am-panel { padding: 24px; }
.gen-box { background: var(--ds-surface-1); border: 1px solid var(--line); border-radius: 4px; }
.pslot { border: 1px solid var(--line-strong); border-radius: 4px; background: var(--ds-surface-3); }
.pslot.on { border: 2px solid var(--ds-border); box-shadow: none; }
.pslot .plab { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pslot .ps-v { font-weight: 500; font-size: 12px; }
.pthumb { border-radius: 4px; }
.pthumb:hover { background: var(--ds-hover); }
.pthumb span { font-size: 12px; font-weight: 400; }
.pthumb.is-start { border-color: var(--ds-border); }     /* start: black */
.pthumb.is-end { border-color: var(--ok); }              /* end: DS green (kept distinct) */
.vc-tools summary { color: var(--ink); font-weight: 400; text-decoration: underline; }
details.versions summary { font-size: 12px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* --- Review and viewers --- */
.review-media { background: var(--ds-surface-1); border-radius: 4px; }
.review-head h2 { font-size: 24px; line-height: 26.4px; font-weight: 300; }
.review-side .queue-row { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.review-side .queue-row:hover { background: var(--ds-surface-3); }
.review-side .queue-row.active { border-color: var(--ds-border); background: var(--ds-surface-3); }
.review-side .queue-row .now { color: var(--ink); font-weight: 500; font-size: 12px; }
#lightbox, #vlightbox { background: rgba(0,0,0,.92); }
#cmpbox { background: #12110f; }
.lb-btn { background: #2B2A24; color: #F9F9F7; border-radius: 4px; font-weight: 400; font-size: 14px; }
.lb-btn:hover { background: #3A3932; }
.lb-btn.active { background: #F9F9F7; color: #000; }
.lb-name { color: #B2B1A5; }
.lb-fig figcaption { color: #B2B1A5; font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
#vlb-video { border-radius: 2px; }
#vlb-panel { background: var(--ds-surface-1); border-radius: 4px; box-shadow: none; }

/* --- Notices, confirm modal, toasts (DS Snackbar / Dialog) --- */
#refresh-pill { background: var(--ds-fg); border-radius: 4px; padding: 12px 20px; font-weight: 400; font-size: 14px; box-shadow: none; }
#refresh-pill:hover { background: #1E1E19; }
#confirm-modal { background: rgba(0,0,0,.25); }
.cm-box { background: var(--ds-surface-1); border-radius: 4px; box-shadow: none; padding: 24px; }
.cm-ico { background: var(--ds-badge); color: var(--ink); border-radius: 4px; }
.cm-title { font-weight: 500; font-size: 18px; line-height: 23.4px; }
.cm-msg { color: var(--muted); }
.toast { border-radius: 4px; font-weight: 400; box-shadow: none; }
.toast-ok { background: var(--ok-bg); color: var(--ok); }
.toast-error { background: var(--err-bg); color: var(--err); }
.toast-info { background: var(--ds-info); color: var(--ink); }
.toast-warn { background: var(--warn-bg); color: var(--warn); }   /* server notices as snackbar */

/* --- Login: flat page + black block with the wordmark --- */
.login-hero { background: var(--ds-fg); color: #fff; }
.login-hero .lh-logo span { font-weight: 400; opacity: .8; }
.hero-chip { background: rgba(255,255,255,.10); border-radius: 4px; font-weight: 400; }
.hero-chip::before { background: #F9F9F7; }
.login-hero h1 { font-size: 44px; line-height: 48.4px; font-weight: 300; letter-spacing: 0; }
.login-hero p { color: #B2B1A5; font-size: 18px; line-height: 23.4px; }
.login-hero .lh-foot { color: #B2B1A5; }
.login-hero .lh-foot a { font-weight: 500; }
.login-form-side { background: var(--ds-page); }
.login-wrap .eyebrow { color: var(--muted); font-weight: 400; letter-spacing: 0; font-size: 14px; }
.login-wrap h1 { font-size: 32px; line-height: 35.2px; font-weight: 300; }
.login-wrap .hint { background: var(--ds-surface-1); border: 0; border-radius: 4px; }
.login-wrap .hint .hint-lbl { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--muted); }
.login-wrap button { min-height: 48px; padding: 16px; font-size: 14px; }
.login-wrap input[type=text], .login-wrap input[type=password] { min-height: 48px; padding: 8px 16px; }

/* --- Emails / config / credits --- */
.email-body { font-family: var(--ds-mono); font-size: 13px; background: var(--ds-surface-1); border-radius: 4px; }
.email-frame { border-radius: 4px; background: var(--ds-surface-1); }
.dot-on { background: var(--ok); } .dot-off { background: var(--err); }
.delta-pos { color: var(--ok); font-weight: 500; }
.delta-neg { color: var(--err); font-weight: 500; }

/* --- Accessibility: DS focus (2 px black outline, offset 2) --- */
:focus-visible { outline: 2px solid var(--ds-border); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: #C3C2C0; border-radius: 4px; }

/* --- Mobile --- */
.tb-menu { border: 1px solid var(--ds-border); border-radius: 4px; color: var(--ink); background: transparent; }
@media (max-width: 800px) {
  .topbar { padding: 8px 20px; }
  .main > main { padding: 20px 20px 70px; }
  .sidebar { box-shadow: none; border-right: 1px solid var(--line); }
  .shell.nav-open .sb-overlay { background: rgba(0,0,0,.25); }
  h1 { font-size: 24px; line-height: 26.4px; }
}

/* --- Template-local styles (inline <style> wins unless prefixed with html) --- */
/* menu section labels arrive uppercase; the DS uses sentence case */
.sb-section { text-transform: lowercase; }
.sb-section::first-letter { text-transform: uppercase; }

/* Pre-approval / approval (the colour legend is kept as specified) */
html .ap-legend { font-size: 14px; color: var(--muted); }
html .ap-asset { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; padding: 24px; }
html .ap-head { border-bottom: 1px solid var(--ds-border); }
html .ap-head h2 { font-size: 24px; line-height: 26.4px; font-weight: 300; letter-spacing: 0; }
html .ap-lbl { font-size: 12px; line-height: 15.6px; letter-spacing: 0; text-transform: none; color: var(--muted); }
html .ap-box { border-color: var(--line); border-radius: 4px; background: var(--ds-surface-3); font-size: 14px; line-height: 18.2px; }
html .ap-c-brand b { color: var(--ink); }
html .ap-rush video, html .ap-full video { border-radius: 2px; border-color: var(--line); }
html .ap-empty { border-color: var(--line-strong); border-radius: 4px; color: var(--muted); }
html details.ap-tools summary { font-size: 14px; color: var(--ink); }
html .ap-versions { font-size: 14px; }

/* Retouches */
html .rq-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
html .rq-stat .n { font-size: 32px; line-height: 35.2px; font-weight: 300; }
html .rq-stat.ai .n { color: var(--ink); }
html .rq-stat .l { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; }
html .rq-sect { font-size: 18px; line-height: 23.4px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; }
html .rq-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
html .rq-th img { border-radius: 2px; border-color: var(--line); background: var(--ds-info); }
html .rq-th.ia img { border-color: var(--ds-border); }
html .rq-th .chip { background: var(--ds-surface-3); border-radius: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0;
  text-transform: none; padding: 2px 6px; box-shadow: none; }
html .rq-th .fn { font-size: 12px; color: var(--muted); }
html .rq-th .fn a { color: var(--ink); text-decoration: underline; }
html .rq-info h3 { font-size: 18px; line-height: 23.4px; font-weight: 500; }
html .rq-info .who { font-size: 12px; }
html .rq-reason { border-left: 1px solid var(--ds-border); }
html .rq-reason .k { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; }
html .rq-reason .txt { font-size: 14px; }
html .rq-puig { border-left-color: var(--warn); }
html .rq-or { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; }
html .rq-drop { border: 1px dashed var(--ds-border-subtle); border-radius: 4px; background: var(--ds-surface-3); }
html .rq-drop:hover, html .rq-drop.over { border-color: var(--ds-border); background: var(--ds-surface-1); }
html .rq-drop b { font-weight: 500; font-size: 14px; }
html .rq-drop span { font-size: 12px; color: var(--muted); }
html .rq-done { background: var(--ok-bg); border: 0; border-radius: 4px; }
html .rq-done b { font-weight: 500; font-size: 14px; }
html .rq-wip { background: var(--warn-bg); border-radius: 4px; font-weight: 400; font-size: 14px; }
html .rq-refs label { font-weight: 400; }

/* Element review and brief */
html .er-item { border-color: var(--line); border-radius: 4px; background: var(--ds-surface-3); }
html .er-f img, html .er-f video { border-radius: 2px; background: var(--ds-info); }
html .bf-refs img, html .bf-tmp img { border-radius: 2px; background: var(--ds-info); }
html .bf-note { background: var(--ds-surface-1); border-radius: 4px; }
.login-wrap .eyebrow { text-transform: lowercase; }
.login-wrap .eyebrow::first-letter { text-transform: uppercase; }

/* --- DS icon library (static/skins/puig/icons.svg, via ico()) --- */
.ico { width: 16px; height: 16px; fill: currentColor; flex: none; vertical-align: -3px; display: inline-block; }
.sb-nav a .ico { width: 16px; height: 16px; }
.lb-btn .ico, .am-x .ico { vertical-align: -3px; }
.badge .ico, .sub .ico, .bg-deviates .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* Pre-approval status legend in the DS palette (the DS has no yellow) */
html .ap-dot.grey { background: #C3C2C0; }                  /* gray1-400 · pending PUIG */
html .ap-dot.orange { background: #E1870F; }                /* orange-500 · option cancelled */
html .ap-dot.yellow { background: #F1C488; box-shadow: none; } /* orange-200 · waiting for the brand */
html .ap-dot.green { background: #2E9B61; }                 /* green-400 · approved */

/* rush options (choose = approve) */
.rush-opt { border-radius: 4px; background: var(--ds-surface-2, #F9F9F7); border-color: var(--line); }
.rush-opt video { border-radius: 2px; }
.cmp-lab { border-radius: 4px; font-weight: 400; }
.cmp-knob { background: #F9F9F7; color: #000; }
.cmp-fig figcaption { color: #B2B1A5; font-weight: 400; }
input[type=file]::file-selector-button { font-family: var(--ds-font); font-weight: 400; font-size: 14px; border: 1px solid var(--ds-fg);
  border-radius: 4px; background: transparent; color: var(--ds-fg); min-height: 32px; padding: 6px 12px; }
input[type=file]::file-selector-button:hover { background: var(--ds-fg); color: #fff; }
.nb-drop { border-radius: 4px; border-color: var(--line-strong); background: var(--ds-surface-3); }
.nb-drop:hover, .nb-drop:focus-visible, .nb-drop.over { border-color: var(--ds-fg); background: var(--ds-surface-3); }
.nb-drop b { font-weight: 500; }


/* --- Final DS adjustments: black primary action in every state, borderless Tinted card (radius 12),
   flat surfaces, credits icon instead of the glyph --- */

/* Primary action: #000 on hover/active too (DS action-primary) */
button:hover, .btn:hover, .btn-ok:hover, #refresh-pill:hover { background: #000; border-color: #000; }
button:active, .btn:active { background: #000; border-color: #000; }
/* Ghost (no border): hover black-A10, header text actions */
.logout:hover, button.logout:hover { background: none; color: var(--ink); text-decoration: underline; }
/* Default 48 button for main page actions */
.btn-lg, .login-wrap button { font-weight: 500; }

/* Tinted card: rgba(0,0,0,.03), radius 12, no border or shadow */
.card, .batchbar, .reflist, details.article, .clip-card, .gen-box, .review-side .queue-row,
html .ap-asset, html .rq-stat, html .rq-card, html .sku {
  background: var(--ds-tint); border: 0; border-radius: 12px; box-shadow: none; }
.clip-card:hover, .review-side .queue-row:hover { background: var(--ds-hover); border: 0; }
.review-side .queue-row.active { background: var(--ds-surface-3); outline: 1px solid var(--ds-border); outline-offset: -1px; }
/* card contents (inner panels) do not draw a second box */
.card .card, .card table, .am-panel { background: transparent; border: 0; }
html .ap-asset .ap-box { background: transparent; border: 0; padding: 0; }

/* Header and menu: flat, subtle rule, no extra surfaces */
.topbar { background: var(--ds-page); border-bottom: 1px solid var(--ds-border-subtler); }
.sidebar { background: var(--ds-surface-1); border-right: 1px solid var(--ds-border-subtler); }
.sb-logo img { height: 16px; }
.sb-section { color: var(--ds-fg-subtle); }
.nav-count { padding: 0 8px; }

/* Page titles: headline2 32/35.2 300 (headline1 44/48.4 at >= 1280) */
@media (min-width: 1280px) { .main > main > h1:first-of-type { font-size: 44px; line-height: 48.4px; } }
.page-sub { margin-bottom: 24px; }

/* DS progress bar: 1 px line, black-A20 track, black fill */
progress { -webkit-appearance: none; appearance: none; height: 1px; border: 0; background: rgba(0,0,0,.20); }
progress::-webkit-progress-bar { background: rgba(0,0,0,.20); }
progress::-webkit-progress-value { background: #000; }
progress::-moz-progress-bar { background: #000; }
/* batch steps (home): same 1 px line; the active step keeps its colour */
html .lot-steps i { height: 1px; border-radius: 0; background: rgba(0,0,0,.20); }
html .lot-steps .done i { background: #000; }
html .lot-steps .act i { background: var(--warn); }

/* Photos on a neutral surface, no frames */
.thumb, .thumb-sm, .viewcard img, html .ap-row img, html .rq-th img { border-color: transparent; }

/* Credits icon (replaces the glyph in the PUIG skin) */
.ic-cr { width: 16px; height: 16px; vertical-align: -3px; display: inline-block; flex: none; }
.sb-balance .ic-cr { color: #fff; }
.credit-chip { display: inline-flex; align-items: center; gap: 4px; }

/* Waits and AI processes: animated black dots, no spinner */
.b-generating, .b-queued, .b-analizando, .b-retouching { position: relative; padding-left: 26px; }
.b-generating::before, .b-queued::before, .b-analizando::before, .b-retouching::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background:
    radial-gradient(circle, #000 1.6px, transparent 1.7px) 0 0 / 6px 6px;
  animation: puig-orb 1.4s ease-in-out infinite; border-radius: 50%; }
.b-queued::before { animation-duration: 2.2s; opacity: .5; }
.b-analizando::before { animation-name: puig-orb-scan; }
@keyframes puig-orb { 0%,100% { transform: scale(.7) rotate(0); opacity: .45; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes puig-orb-scan { 0%,100% { transform: translateX(-1px); opacity: .5; } 50% { transform: translateX(1px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .b-generating::before, .b-queued::before, .b-analizando::before, .b-retouching::before { animation: none; } }

/* --- Usability adjustments --- */
/* Batch reference = subheading1; metadata = caption; no ad-hoc sizes */
html body .sku-name b { font-size: 18px; line-height: 23.4px; font-weight: 500; }
.kv, .refrow .meta, .review-side .queue-row { font-size: 12px; line-height: 15.6px; }
.kv { align-items: center; }
html body .rq-done span { font-size: 12px; line-height: 15.6px; }
.nb-drop b { font-size: 14px; line-height: 18.2px; }
/* Labelled forms: Default 48 field and submit button */
label + input[type=text], label + input[type=number], label + input[type=email], label + input[type=password],
label + input[type=search], label + input[type=date], label + select { min-height: 48px; padding-left: 16px; padding-right: 16px; }
label + select { padding-right: 40px; background-position: right 16px center; }
form:has(label + input, label + select) button[type=submit] { min-height: 48px; padding: 16px 20px; font-weight: 500; }
/* Batch action bar: a toolbar, not a half-empty card */
.batchbar { background: transparent; padding: 0; margin-bottom: 8px; }
.batchbar .field:has(> form > button:only-child) > label { display: none; }
/* Pre-approval: status dot at 24; "Ver en grande" always Outlined */
.ap-big, .btn.ap-big { background: transparent; color: var(--ink); border: 1px solid var(--ds-border); }
.ap-big:hover, .btn.ap-big:hover { background: #000; color: #fff; border-color: #000; }
td { font-variant-numeric: tabular-nums; }
/* Mobile: do not break the reference code */
@media (max-width: 800px) {
  html body .ap-head { flex-wrap: wrap; row-gap: 8px; }
  html body .ap-head h2 { font-size: 18px; line-height: 23.4px; font-weight: 500; flex: 1 1 100%; }
  html body .ap-head h2 .sub { font-size: 14px !important; }
}
/* Pairs: an image that ends one clip and starts the next is a warning (approvable), so notice orange */
html body .pe-row.rep, html body .pe-slot.rep, html body .pe-img.rep .fr { border-color: var(--warn); }
html body .pe-img .use.rep { color: var(--warn); }
/* Retouch queue: counters are not in warning colour (0 looked like something was pending) */
html body .rq-stat .n, html body .rq-stat.pend .n { color: var(--ink); }
/* Pairs: reorder-only state reuses .b-generating but is not an AI wait, so no animated dots */
html body .pe-row .acts .b-generating { padding-left: 8px; }
html body .pe-row .acts .b-generating::before { content: none; }


/* --- DS conformance: type scale 12/14/18/24/32, weights 300/400/500, radius 4 on components and 12 on cards,
   Compact 32 / Default 48 buttons, tables with black header rule --- */

/* Buttons: a 16 px icon on a 14 px text line grew the button to 34/50 px (Compact 32 / Default 48) */
button > .ico, .btn > .ico { margin-top: -1px; margin-bottom: -1px; }

/* DS type scale for template styles that used off-scale sizes and weight 600 */
html body .todo-c .n { font-size: 32px; line-height: 35.2px; font-weight: 300; }
html body .lot-steps li { font-size: 12px; line-height: 15.6px; }
html body .lot-steps .act { font-weight: 500; }
html body .sku-more > summary, html body .ed-more > summary, html body .rr-other details summary { font-size: 14px; line-height: 18.2px; }
html body .nb-sum, html body .nb-check table, html body .rq-refs, html body .rr-fig label { font-size: 14px; }
html body details.rq-more > summary { font-weight: 500; }
html body .rr-instr .t, html body .pe-in .n { font-size: 18px; line-height: 23.4px; font-weight: 500; }
html body .pe-img .use, html body .pe-img .tag, html body .pe-slot .tag, html body .pe-saving { font-size: 12px; line-height: 15.6px; }
html body .pe-msg, html body .pe-dur span, html body .ap-state, html body label.sub { font-size: 14px; line-height: 18.2px; }
html body .rep-kpis b { font-size: 24px; line-height: 26.4px; font-weight: 300; }
input[type=file] { font-size: 14px; line-height: 18.2px; }

/* Component radius 4 on pieces that still used 6 / 8 / 10 / 12 px */
html body .nb-drop, html body .pe-dur, html body .pe-msg, html body .pe-img .tag, html body .pe-slot .tag,
html body .pe-img .fr, html body .pe-slot, html body .rr-fig .lab, html body .rr-cmp .lab, html body .rr-qi { border-radius: 4px; }
html body .pe-dur { border-color: var(--ds-border-subtler); background: var(--ds-surface-3); }

/* DS table: delivery report header uses the black rule */
html .rep-table th { border-bottom: 1px solid var(--ds-border); }
/* Users: each row form overflowed the table at 1440, so its fields wrap */
html body table td > form { flex-wrap: wrap; }

/* Frameless photos on the same grey as the real photo borders (#EFEFEF; #ECECEC is the studio backdrop),
   so the frame is invisible even when a photo is not 3:4 */
.thumb, .thumb-sm, .viewcard img, .ref-thumbs img, .pslot .ps-img, .pthumb img, html .ap-row img, html .rq-th img, html .rq-th.ia img,
html .er-f img, html .bf-refs img, html .bf-tmp img, html .rep-th img, html body .sku-thumbs img, html body .pe-img .fr,
html body .pe-slot, html body .rr-qi img, html body .rr-other img { background: #EFEFEF; border-color: transparent; }
html .rep-th img { border-radius: 2px; }

/* Pairs and retouch review: a single layer of tinted cards (no boxes inside boxes) */
html body .pe-grid { border: 0; background: transparent; border-radius: 0; overflow: visible; gap: 16px; }
html body .pe-tray { background: var(--ds-tint); border: 0; border-radius: 12px; }
html body .pe-main { background: transparent; padding: 0; }
html body .pe-row { background: var(--ds-tint); border: 1px solid transparent; border-radius: 12px; }
html body .rr-grid { border: 0; background: var(--ds-tint); border-radius: 12px; }
html body .rr-queue { background: transparent; border-right-color: var(--line); border-bottom-color: var(--line); }
html body .rr-stage { background: transparent; }
html body .rr-qi.on { background: var(--ds-surface-3); border-color: var(--ds-border); }

/* Email inbox: rows with rules and the email on the page background (no box inside box) */
html body .card:has(> details > .email-frame), html body .card:has(> details > .email-body) {
  background: transparent; border-radius: 0; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }
html body .email-frame { background: var(--ds-page); border: 0; }

/* Home "pending" cards: hover black-A10, urgent one outlined */
html body .todo-c:hover { background: var(--ds-hover); }
html body .todo-c.hot { outline: 1px solid var(--ds-border); outline-offset: -1px; }

/* Credits: coin icon next to the 44 px figure */
.stat-big .ic-cr { width: 24px; height: 24px; vertical-align: 2px; }

/* --- Mobile usability: minimum 44 px touch targets (<= 640 px only) --- */
@media (max-width: 640px) {
  html body .back-link, html body .lot-name a, html body a[download] { display: inline-flex; align-items: center; min-height: 44px; }
  html body .sku-more > summary, html body .ed-more > summary { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
  html body .card label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  html body input[type=checkbox] { width: 20px; height: 20px; }
}

/* --- Layout alignment fixes ---
   1) Finals: all videos at the same height (video right under the title, variable content below) */
html body .grid > .card:has(> video) { display: flex; flex-direction: column; }
html body .grid > .card:has(> video) > h3 { order: 0; margin-bottom: 12px; min-height: 46px; align-content: flex-start; }
html body .grid > .card:has(> video) > video { order: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #000; border-radius: 4px; }
html body .grid > .card:has(> video) > * { order: 2; }
html body .grid > .card:has(> video) > video + div { margin-bottom: 8px; }
/* 2) Credits: wider balances and movements column, dates on one line, menu card on one line */
@media (min-width: 901px) { html body .credits-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
html body .credits-grid td { vertical-align: top; }
@media (min-width: 901px) { html body .credits-grid td.sub, html body .credits-grid td:first-child { white-space: nowrap; } }
html body .sb-balance { padding: 14px 12px; }
html body .sb-balance .lbl { display: block; font-size: 11.5px; line-height: 15px; letter-spacing: -.01em; }
html body .sb-balance .lbl span + span { display: none; }   /* the icon already sits next to the figure in the header; here it broke the title */
html body .sb-balance .num { margin-top: 6px; }
/* 3) Approval / pre-approval: the full video starts level with the clips and fills its column */
html body .ap-full video { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 3 / 4; object-fit: contain; }
html body .ap-rush video { object-fit: contain; }
/* 4) Batches and other pages use the available width;
      readable batch steps: done = black, current = orange, pending = grey */
html body .main > main { max-width: 1680px; }
@media (min-width: 761px) { html body .lot-row { grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr) auto; } }
html body .lot-steps li { font-size: 12px; line-height: 15.6px; color: var(--ds-fg-subtle); }
html body .lot-steps .done { color: var(--ink); }
html body .lot-steps .act { color: var(--warn); font-weight: 500; }
html body .lot-name a { font-size: 16px; font-weight: 500; }
/* counters next to a title: neutral, not "approved" green */
html body h2 > .badge { background: var(--ds-tint); color: var(--ink); }
/* credits: a single icon (the menu coin) and the large centred figure with its icon */
html body .stat-big { display: flex; align-items: center; gap: 12px; }
html body .stat-big .ic-cr { width: 32px; height: 32px; vertical-align: 0; stroke-width: 1.5; }
html body .ic-cr { stroke-width: 1.75; }

/* --- Before/after comparer as a floating window ---
   Centred light panel (DS dialog: surface-1, radius 4) over a dimmed, blurred page. Closes with X, Esc or outside click. */
html body #cmpbox { background: rgba(18, 17, 15, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5vh 4vw; align-items: center; justify-content: center; animation: cmp-fade .18s ease-out; }
html body #cmpbox > .lb-bar, html body #cmpbox > .cmp-stage { width: min(1180px, 100%); background: var(--ds-surface-1); }
html body #cmpbox > .lb-bar { border-radius: 4px 4px 0 0; padding: 14px 20px 16px; gap: 8px;
  animation: cmp-in .22s ease-out; }
html body #cmpbox > .cmp-stage { border-radius: 0 0 4px 4px; padding: 0 20px 20px; flex: 1 1 auto; max-height: 82vh;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); animation: cmp-in .22s ease-out; }
html body #cmpbox .lb-btn { background: transparent; color: var(--ink); border: 1px solid var(--ds-border); min-height: 32px; padding: 0 14px; }
html body #cmpbox .lb-btn:hover { background: var(--ds-hover); }
html body #cmpbox .lb-btn.active { background: #000; color: #fff; border-color: #000; }
html body #cmpbox #cmp-close { border-color: transparent; padding: 0 8px; }
html body #cmpbox .lb-name { color: var(--ds-fg-subtle); font-size: 14px; }
html body #cmpbox .cmp-fig figcaption { color: var(--ds-fg-subtle); }
html body #cmpbox .cmp-slider, html body #cmpbox .cmp-fig img { background: #EFEFEF; }
html body #cmpbox .cmp-lab { background: #fff; color: #000; border: 1px solid var(--ds-border-subtler); }
@keyframes cmp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmp-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { html body #cmpbox { padding: 12px; } html body #cmpbox > .cmp-stage { padding: 0 10px 10px; flex: 0 0 auto;
  height: min(calc((100vw - 44px) * 4 / 3 + 10px), calc(100vh - 170px)); max-height: none; } }   /* 3:4 photos: the panel fits the photo */
@media (prefers-reduced-motion: reduce) { html body #cmpbox, html body #cmpbox > * { animation: none; } }
@media (max-width: 640px) {   /* True side by side on mobile too: two (or three) columns inside the panel */
  html body #cmpbox .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 100%; gap: 8px; }
  html body #cmpbox .cmp-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body #cmpbox .cmp-fig img { flex: 1; height: auto; min-height: 0; }
  html body #cmpbox > .cmp-stage { overflow: hidden; }
}

/* --- Live states with orbs ---
   AgentStatus-style pill: animated orb (canvas, base.html) + shimmering text. Done / pending / error keep their badges. */
html body .badge.st-live { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0;
  background: transparent; color: var(--ink); border: 0; position: static; }   /* no box or background, orb + text */
html body .badge.st-live::before { content: none; }
html body .badge.st-live .orb { flex: none; display: block; }
html body .st-live .st-txt { background: linear-gradient(90deg, #000 0%, #000 38%, #9C9B8F 50%, #000 62%, #000 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: st-sheen 2.6s linear infinite; }
@keyframes st-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { html body .st-live .st-txt { animation: none; color: var(--ink); background: none; } }

/* Batch steps as connected nodes: done = black node, current = orb, pending = outline */
html body .lot-steps { gap: 0; }
html body .lot-steps li { position: relative; padding-top: 20px; gap: 0; }
html body .lot-steps li i { position: absolute; top: 9px; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, .18); border-radius: 0; }
html body .lot-steps li.done i { background: #000; }
html body .lot-steps li::before { content: ''; position: absolute; top: 5px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ds-page); border: 1px solid rgba(0, 0, 0, .35); box-sizing: border-box; z-index: 1; }
html body .lot-steps li.done::before { background: #000; border-color: #000; }
html body .lot-steps li.has-orb::before { content: none; }
html body .lot-steps li .orb { position: absolute; top: 0; left: -4px; z-index: 1; background: var(--ds-page); border-radius: 50%; }
html body .card .lot-steps li::before, html body .card .lot-steps li .orb { background-color: #E6E5E2; }
html body .card .lot-steps li.done::before { background-color: #000; }

/* Empty screens: breathing orb + message */
html body .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 40px 24px; color: var(--ds-fg-subtle); }
html body .empty-state.sm { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0; text-align: left; }

/* ScanFrame (PUIG black): the AI is looking at this photo */
html body .scan-frame { position: relative; display: inline-block; line-height: 0; }
html body .scan-frame .sf-c { position: absolute; width: 8px; height: 8px; border: 0 solid #000; pointer-events: none; }
html body .scan-frame .sf-c.tl { top: -4px; left: -4px; border-top-width: 1px; border-left-width: 1px; }
html body .scan-frame .sf-c.tr { top: -4px; right: -4px; border-top-width: 1px; border-right-width: 1px; }
html body .scan-frame .sf-c.bl { bottom: -4px; left: -4px; border-bottom-width: 1px; border-left-width: 1px; }
html body .scan-frame .sf-c.br { bottom: -4px; right: -4px; border-bottom-width: 1px; border-right-width: 1px; }
/* The scan line moves with transform (GPU) instead of animating top, which relaid the page every frame.
   Same travel: 2 % to 98 % of the photo. */
html body .scan-frame .sf-line { position: absolute; left: 0; right: 0; top: 2%; height: 96%; pointer-events: none;
  animation: sf-scan 2.2s ease-in-out infinite alternate; will-change: transform; }
html body .scan-frame .sf-line::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #000;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.7), 0 0 6px rgba(0,0,0,.35); }
@keyframes sf-scan { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { html body .scan-frame .sf-line { display: none; } }
@media print { html body .scan-frame .sf-line { display: none; } }
html body .scan-frame .sku-thumbs, html body .scan-frame.sku-wrap { line-height: normal; }
html body .scan-frame:has(> .sku-thumbs) { display: inline-flex; padding: 4px; }

/* --- Nodes instead of arrows ---
   Start -> end of each clip: two nodes joined by a thin line with a travelling dot instead of the arrow glyph.
   The element stays in the DOM; only the glyph is hidden. */
html body .ap-arrow, html body .review-frames > .arrow, html body .wf-pair .wf-arrow, html body .wf-pairctx > span:not(.sub) {
  font-size: 0; line-height: 0; color: transparent; position: relative; display: block; flex: none; align-self: center;
  width: 44px; height: 10px; padding: 0; margin: 0 auto; overflow: visible;
  background: linear-gradient(#000, #000) no-repeat center / calc(100% - 12px) 1px; }
/* The travelling dot is its own element (base.html adds <i class="flow-dot">) moved with transform;
   animating background-position repainted every connector each frame. */
html body .flow-dot { position: absolute; left: 0; top: 50%; margin-top: -5px; width: calc(100% - 10px); height: 10px; pointer-events: none;
  background: radial-gradient(circle at 5px 50%, #000 0 1.6px, rgba(0, 0, 0, .18) 2.4px, transparent 4.5px) no-repeat;
  animation: puig-flow 1.8s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; }
html body .ap-arrow::before, html body .review-frames > .arrow::before, html body .wf-pair .wf-arrow::before,
html body .wf-pairctx > span:not(.sub)::before,
html body .ap-arrow::after, html body .review-frames > .arrow::after, html body .wf-pair .wf-arrow::after,
html body .wf-pairctx > span:not(.sub)::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; box-sizing: border-box; }
html body .ap-arrow::before, html body .review-frames > .arrow::before, html body .wf-pair .wf-arrow::before,
html body .wf-pairctx > span:not(.sub)::before { left: 0; background: #000; }                         /* start node: filled */
html body .ap-arrow::after, html body .review-frames > .arrow::after, html body .wf-pair .wf-arrow::after,
html body .wf-pairctx > span:not(.sub)::after { right: 0; border: 1px solid #000; background: var(--ds-surface-1, #F4F3F0); }  /* end: ring */
html body .wf-pairctx > span:not(.sub) { width: 28px; margin: 0; }
@keyframes puig-flow { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { html body .flow-dot { animation: none; transform: translateX(50%); } }
@media (max-width: 640px) { html body .ap-arrow { display: none; } }

/* Dropdown triangles -> thin chevron (base.html adds the class only where the browser draws the default triangle) */
html body summary.puig-chev { list-style: none; }
html body summary.puig-chev::-webkit-details-marker { display: none; }
html body summary.puig-chev::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  background: currentColor; transition: transform .15s ease;
  -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
html body details[open] > summary.puig-chev::before { transform: rotate(90deg); }

/* --- "Ver en grande" as a floating window ---
   Photos (#lightbox) and videos (#vlightbox) open like the comparer: a centred light panel over a dimmed,
   blurred page, sized to the media. Closes with X, Esc or outside click. */
html body #lightbox, html body #vlightbox { background: rgba(18, 17, 15, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5vh 4vw; display: grid; grid-template-columns: fit-content(min(1180px, 100%)); justify-content: center; align-content: center;
  animation: cmp-fade .18s ease-out; }
html body #lightbox[hidden], html body #vlightbox[hidden] { display: none; }
html body #lightbox > .lb-bar, html body #vlightbox > .lb-bar { background: var(--ds-surface-1); border-radius: 4px 4px 0 0;
  padding: 14px 20px 16px; gap: 8px; min-width: min(420px, 100%); animation: cmp-in .22s ease-out; }
html body #lightbox > .lb-body, html body #vlightbox > .vlb-body { background: var(--ds-surface-1); border-radius: 0 0 4px 4px;
  padding: 0 20px 20px; max-height: calc(90vh - 62px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); animation: cmp-in .22s ease-out; }
html body #lightbox .lb-btn, html body #vlightbox .lb-btn { background: transparent; color: var(--ink); border: 1px solid var(--ds-border);
  min-height: 32px; padding: 0 14px; border-radius: 4px; font-weight: 400; font-size: 14px; }
html body #lightbox .lb-btn:hover, html body #vlightbox .lb-btn:hover { background: var(--ds-hover); }
html body #lightbox .lb-btn.active { background: #000; color: #fff; border-color: #000; }
html body #lightbox #lb-close, html body #vlightbox #vlb-close { border-color: transparent; padding: 0 8px; }
html body #lightbox .lb-name, html body #vlightbox .lb-name { color: var(--ds-fg-subtle); font-size: 14px; }
html body #lightbox .lb-body img { max-width: min(1140px, calc(92vw - 40px)); max-height: calc(90vh - 82px); background: #EFEFEF; border-radius: 2px; }
html body #lightbox .lb-fig figcaption { color: var(--ds-fg-subtle); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }
html body #lightbox.lb-dual .lb-body { padding: 0 20px 20px; }
html body #lightbox.lb-dual .lb-body img { max-width: calc(min(1180px, 92vw) / 2 - 40px); max-height: calc(90vh - 110px); }
html body #lightbox.lb-mode-100 .lb-body { width: min(1180px, 92vw); height: calc(90vh - 62px); overflow: auto; }
html body #lightbox.lb-mode-100 .lb-body img, html body #lightbox.lb-dual.lb-mode-100 .lb-body img { max-width: none; max-height: none; margin: 0 auto; }
html body #vlightbox .vlb-body { gap: 20px; align-items: flex-start; flex-wrap: nowrap; overflow: auto; }
html body #vlb-video { max-height: calc(90vh - 82px); max-width: min(62vw, 900px); border-radius: 2px; background: #EFEFEF; }
html body #vlb-panel { background: transparent; border-left: 1px solid var(--ds-border-subtler); border-radius: 0; padding: 0 0 0 20px; width: 300px; box-shadow: none; }
@media (max-width: 760px) {
  html body #lightbox, html body #vlightbox { padding: 12px; grid-template-columns: minmax(0, 1fr); }
  html body #lightbox > .lb-bar, html body #vlightbox > .lb-bar { padding: 10px 12px 12px; min-width: 0; }
  html body #lightbox > .lb-body, html body #vlightbox > .vlb-body { padding: 0 10px 10px; max-height: calc(100vh - 90px); }
  html body #lightbox .lb-body img { max-width: 100%; max-height: calc(100vh - 120px); }
  html body #lightbox.lb-dual .lb-body { gap: 8px; } html body #lightbox.lb-dual .lb-body img { max-width: 100%; }
  html body #lightbox.lb-mode-100 .lb-body { width: auto; height: calc(100vh - 90px); }
  html body #vlightbox .vlb-body { flex-wrap: wrap; justify-content: center; }
  html body #vlb-video { max-width: 100%; max-height: calc(100vh - 130px); }
  html body #vlb-panel { border-left: 0; padding: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html body #lightbox, html body #vlightbox, html body #lightbox > *, html body #vlightbox > * { animation: none; } }

/* --- Emails as a two-pane inbox ---
   List on the left (recipient, time, subject, status), open email on the right, at window height. */
html body .mailbox { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 0; margin-top: 8px;
  border-top: 1px solid var(--ds-border-subtler); min-height: calc(100vh - 220px); }
html body .mb-list { border-right: 1px solid var(--ds-border-subtler); overflow-y: auto; max-height: calc(100vh - 220px);
  position: sticky; top: 16px; align-self: start; }
html body button.mb-item { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; width: 100%; text-align: left; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ds-border-subtler); border-radius: 0; padding: 14px 18px 14px 20px; cursor: pointer;
  font: inherit; font-weight: 400; min-height: 0; position: relative; box-shadow: none; transition: background .15s; }
html body button.mb-item:hover { background: rgba(0, 0, 0, .03); }
html body button.mb-item[aria-selected="true"] { background: var(--ds-surface-1); }
html body .mb-item[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #000; }
html body .mb-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ds-fg-subtle); }
html body .mb-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .mb-top time { flex: none; font-variant-numeric: tabular-nums; }
html body .mb-subj { font-size: 14px; line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .mb-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-fg-subtle); }
html body .mb-state i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #000; flex: none; }
html body .mb-state.ok i { background: var(--ds-success, #2E9B61); border-color: transparent; }
html body .mb-view { min-width: 0; padding: 22px 0 0 32px; }
html body .mb-mail { display: flex; flex-direction: column; gap: 16px; animation: cmp-fade .18s ease-out; }
html body .mb-mail[hidden] { display: none; }
html body .mb-head h2 { font-size: 22px; font-weight: 400; margin: 0 0 6px; }
html body .mb-head .sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
html body .mb-head .ico { width: 14px; height: 14px; vertical-align: 0; }
html body .mb-frame { width: 100%; height: 420px; border: 0; border-radius: 4px; background: var(--ds-page); display: block; }   /* real height is set by emails.html */
@media (max-width: 900px) {
  html body .mailbox { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html body .mb-list { position: static; max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--ds-border-subtler); }
  html body .mb-item { min-height: 44px; padding: 12px 14px; }
  html body .mb-view { padding: 18px 0 0; scroll-margin-top: 70px; }
}
@media (prefers-reduced-motion: reduce) { html body .mb-mail { animation: none; } }

/* --- Batches with photos ---
   One row per batch: strip with one uncropped photo per reference, name and data, current phase large
   (orb while AI works) and steps as nodes. */
html body .lot-list { gap: 12px; }
html body .lot-row.lot-rich { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 16px 20px; transition: box-shadow .2s, transform .2s; }
html body .lot-row.lot-rich:hover { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); transform: translateY(-1px); }
html body .lot-strip { display: flex; gap: 4px; text-decoration: none; }
html body .lot-strip img, html body .lot-strip .ph, html body .lot-strip .more { width: 68px; height: 90px; border-radius: 2px; flex: none; }
html body .lot-strip img { object-fit: contain; background: #EFEFEF; display: block; border: 0; }
html body .lot-strip .ph { background: rgba(0, 0, 0, .025); }
html body .lot-strip .more { background: rgba(0, 0, 0, .06); display: flex; align-items: center; justify-content: center;
  color: var(--ds-fg-subtle); font-size: 13px; }
html body .lot-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html body .lot-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
html body .lot-top a { color: var(--ink); text-decoration: none; }
html body .lot-top b { font-size: 20px; font-weight: 500; }
html body .lot-top .sub { font-size: 12px; }
html body .lot-phase { font-size: 16px; min-height: 32px; display: flex; align-items: center; }
html body .lot-phase .badge.st-live { font-size: 16px; }
html body .lot-phase .lp { display: inline-flex; align-items: center; gap: 10px; }
html body .lp-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #000; flex: none; }
html body .lp-dot.wait { background: #F1C488; border-color: transparent; }
html body .lp-dot.ok { background: #2E9B61; border-color: transparent; }
html body .lot-rich .lot-steps { margin-top: 2px; }
html body .lot-rich .lot-steps .act { color: var(--ink); }
@media (max-width: 760px) {
  html body .lot-row.lot-rich { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  html body .lot-strip img, html body .lot-strip .ph, html body .lot-strip .more { width: calc((100% - 12px) / 4); height: auto; aspect-ratio: 3 / 4; }
  html body .lot-strip { width: 100%; }
  html body .lot-top b { font-size: 18px; }
  html body .lot-row.lot-rich > .btn { justify-self: start; }
  html body .lot-rich .lot-steps { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }   /* a single row of nodes; the phase is already written */
  html body .lot-rich .lot-steps li { font-size: 0; padding-top: 14px; }
  html body .lot-rich .lot-steps li.act { font-size: 11px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html body .lot-row.lot-rich { transition: none; } html body .lot-row.lot-rich:hover { transform: none; } }

/* Batches: the segment leading to the current (or next) phase has the same travelling dot as the
   start-end connectors in Approval. */
html body .lot-steps li.done:has(+ li.act) > i, html body .lot-steps li.done:has(+ li.todo) > i { overflow: visible; }
html body .lot-steps li.done:has(+ li.act) > i::after, html body .lot-steps li.done:has(+ li.todo) > i::after {
  content: ''; position: absolute; top: -5px; left: 3px; width: calc(100% - 14px); height: 11px; pointer-events: none;
  /* Same 5 px ringed dot drawn at the left of a segment-wide box moved with transform,
     instead of animating left (which relaid the page every frame) */
  background: radial-gradient(circle at 5.5px 50%, #000 0 2.5px, rgba(0, 0, 0, .12) 2.5px 5.5px, transparent 5.5px) no-repeat;
  animation: lot-flow 1.8s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform, opacity; }
@keyframes lot-flow { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html body .lot-steps li > i::after { animation: none; display: none; } }

/* "Volver a..." in the DS: submenu on surface-1, subtler border, quinary hover */
html body .rf-list { background: #F4F3F0; border-color: rgba(0,0,0,.10); }
html body .rf-item:hover, html body .rf-item:focus-visible { background: rgba(0,0,0,.10); }
html body .rf-toggle[aria-expanded="true"] { background: rgba(0,0,0,.10); }