/* Identidad visual de Feebbo Digital (feebbodigital.com): azul noche, rosa #FB73FF,
   Work Sans para texto y titulares, Barlow en mayúsculas espaciadas para etiquetas.
   Sistema (2026-09-30, crítica de diseño): Barlow en mayúsculas solo para títulos de sección y etiquetas
   de estado; campos, pestañas, chips y píldoras en Work Sans. Lo seleccionado, en --selected-bg.
   Alineado con la web (2026-10-02, nueva extracción de feebbodigital.com): el rosa nunca rellena un botón
   en reposo — texto, números, iconos, etiquetas y el estado al pasar por encima —; la acción principal es
   azul con borde rosa y se rellena de rosa al pasar; la secundaria pasa a #5867F1. Tarjetas de 22 px con el
   degradado azul de la web sobre #0A1258; etiquetas en Barlow de 13–14 px con 4–5 px de espaciado; texto
   corrido a 18 px; pie negro con columnas. Sin halos de color: sombras neutras con desplazamiento.
   Escalas (2026-09-30): tamaños de letra en --fs-* por función (antes 11 valores, cinco entre 12 y 15 px);
   radios en --radius-sm/-md/--radius y --pill; espaciado en rejilla: 2, 4, 6 y 8 px para lo pequeño y
   múltiplos de 4 a partir de ahí. Fuera de escala a propósito: la bandeja de Gmail (imita a Gmail), las
   iniciales de las miniaturas y el marco del móvil de la vista previa.
   Repaso de espaciados (2026-10-13): 91 valores añadidos después se habían salido de la rejilla (10, 14, 18, 22 px y
   sueltos de 3, 5, 7, 9 y 11 px); vuelven a ella. Siguen fuera, además de lo anterior, los que salen de una cuenta:
   la píldora con anillo (su borde lo pinta el SVG: 6 + 1 y 16 + 1), los medios anchos de las cartas del abanico, la
   sangría de 66 px de la revisión, el margen de 37 px que lleva la vista previa al borde y la maqueta en miniatura. */
:root {
  color-scheme: dark;
  --bg: #050c2a;
  --bg-deep: #081136;
  --panel: #0e1545;
  --panel-2: #14183f;
  --field: #0a1030;
  --border: #262b59;
  --border-strong: #3a3f78;
  /* Borde de los campos (auditoría UX 2026-10-14, WCAG 1.4.11): 3,47:1 sobre --field; --border-strong daba 1,9:1. */
  --border-input: #5f66a3;
  /* Anillo de foco por tema (auditoría 2026-10-14): el rosa da 2,1:1 sobre el fondo claro. */
  --focus-ring: #fb73ff;
  --text: #edf3fc;
  --muted: #8991ae;
  --pink: #fb73ff;
  --pink-soft: #cf95d0;
  --purple: #b255c3;
  --lilac: #c6bbff;
  --button: #262b59;
  --success: #4fd1a5;
  --error: #ff7a8a;
  --warning: #ffcc00;
  /* Colores que antes iban fijos en las reglas: ahora cambian con el tema (2026-09-28). */
  --accent-text: #fb73ff;
  --on-accent: #081136;
  /* Tarjeta de la web (.item de feebbodigital.com): degradado de 156° sobre #0A1258, sin borde. */
  --card-base: #0a1258;
  --card-grad-1: rgba(16, 40, 125, 0.8);
  --card-grad-2: rgba(16, 40, 125, 0.2);
  --card-border: transparent;
  /* Botón al pasar por encima (.btn.pilar:hover de la web) y pie (.footer-feebbo). */
  --btn-hover: #5867f1;
  --on-btn-hover: #ffffff;
  --footer-bg: #000000;
  --footer-text: #ffffff;
  --footer-muted: #8991ae;
  /* Número grande de los títulos de sección (el "01" azul de la web, sobre el fondo de la página). */
  --section-num: #1a2168;
  --glow-1: rgba(16, 40, 125, 0.55);
  --glow-2: rgba(178, 85, 195, 0.12);
  --surface-row: rgba(14, 21, 69, 0.6);
  --surface-row-hover: rgba(20, 24, 63, 0.9);
  --surface-pill: rgba(14, 21, 69, 0.7);
  --surface-sticky: rgba(14, 21, 69, 0.96);
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-strong: rgba(0, 0, 0, 0.45);
  --placeholder: #7d84a8; /* 5,1:1 sobre el campo (antes #5D6488, 3,2:1; 2026-10-05) */
  --btn-secondary-hover: #30367060;
  --diff-removed-fg: #ffb3bd;
  --diff-added-fg: #a8f0d6;
  --code-bg: rgba(198, 187, 255, 0.1);
  --pre-bg: rgba(0, 0, 0, 0.25);
  --th-bg: rgba(198, 187, 255, 0.06);
  --thumb-a: rgba(178, 85, 195, 0.28);
  --thumb-b: rgba(16, 40, 125, 0.4);
  /* Colores de estado tintados (2026-09-30): antes, 13 opacidades escritas a mano. Cuatro niveles:
     subtle para superficies grandes, tint para etiquetas y contadores, tint-strong para hover, line
     para bordes. Mismo tono en los dos temas: sobre blanco se leen igual de suaves. */
  --success-subtle: rgba(79, 209, 165, 0.08);
  --success-tint: rgba(79, 209, 165, 0.15);
  --warning-subtle: rgba(255, 204, 0, 0.08);
  --warning-tint: rgba(255, 204, 0, 0.15);
  --warning-line: rgba(255, 204, 0, 0.45);
  --error-subtle: rgba(255, 122, 138, 0.08);
  --error-tint: rgba(255, 122, 138, 0.15);
  --error-tint-strong: rgba(255, 122, 138, 0.26);
  --error-line: rgba(255, 122, 138, 0.45);
  --selected-bg: #313a82;
  /* Tipografía por función. Los campos van a 16 px: por debajo, iOS amplía la página al tocarlos.
     En rem (2026-10-14): con la letra del navegador a 16 px (lo normal) miden lo mismo que antes (12, 13, 14, 16, 18 y
     26 px); si alguien la tiene más grande, el texto crece con ella en vez de ignorarlo. */
  --fs-caption: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-ui: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  /* Texto corrido (explicaciones, notas, brief): como los párrafos de la web, 18 px con interlínea amplia. */
  --fs-prose: 1.125rem;
  --lh-prose: 1.6;
  --fs-title: 1.625rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius: 12px;
  --radius-card: 22px;
  --pill: 999px; /* antes 45px y 999px mezclados (auditoría 2026-10-14): con alturas menores de 90 px se ven igual */
}

/* Tema claro (2026-09-28): sigue al sistema de cada persona, salvo que elija uno a mano en la
   cabecera (data-theme en <html>, que fija un script en <head> antes de pintar). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #f4f5fb;
  --bg-deep: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f1f8;
  --field: #ffffff;
  --border: #dcdeec;
  --border-strong: #b8bcd8;
  --border-input: #858aad; /* 3,37:1 sobre blanco */
  --focus-ring: #9c1f9a; /* 6,27:1 sobre blanco */
  --text: #0e1545;
  --muted: #5a6182;
  --pink-soft: #8e3f92;
  --purple: #9b3fae;
  --lilac: #463a8c;
  --button: #e9eaf5;
  --success: #0b6b4e;
  --error: #b0223b;
  --warning: #8a5d00;
  --accent-text: #9c1f9a;
  --card-base: #ffffff;
  --card-grad-1: #ffffff;
  --card-grad-2: #fbfbff;
  --card-border: #dcdeec;
  --section-num: #dfe2f3;
  --glow-1: rgba(120, 140, 255, 0.18);
  --glow-2: rgba(251, 115, 255, 0.12);
  --surface-row: #ffffff;
  --surface-row-hover: #f7f7fd;
  --surface-pill: #ffffff;
  --surface-sticky: rgba(255, 255, 255, 0.97);
  --shadow: rgba(14, 21, 69, 0.1);
  --shadow-strong: rgba(14, 21, 69, 0.18);
  --placeholder: #6b7194; /* 4,8:1 sobre blanco (antes #8A90AB, 3,2:1) */
  --btn-secondary-hover: #dfe1f0;
  --diff-removed-fg: #a3263b;
  --diff-added-fg: #0b6b4d;
  --code-bg: rgba(70, 58, 140, 0.08);
  --pre-bg: rgba(14, 21, 69, 0.05);
  --th-bg: rgba(70, 58, 140, 0.05);
  --thumb-a: rgba(251, 115, 255, 0.2);
  --thumb-b: rgba(120, 140, 255, 0.22);
  --selected-bg: #e1e3f4;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5fb;
  --bg-deep: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f1f8;
  --field: #ffffff;
  --border: #dcdeec;
  --border-strong: #b8bcd8;
  --border-input: #858aad; /* 3,37:1 sobre blanco */
  --focus-ring: #9c1f9a; /* 6,27:1 sobre blanco */
  --text: #0e1545;
  --muted: #5a6182;
  --pink-soft: #8e3f92;
  --purple: #9b3fae;
  --lilac: #463a8c;
  --button: #e9eaf5;
  --success: #0b6b4e;
  --error: #b0223b;
  --warning: #8a5d00;
  --accent-text: #9c1f9a;
  --card-base: #ffffff;
  --card-grad-1: #ffffff;
  --card-grad-2: #fbfbff;
  --card-border: #dcdeec;
  --section-num: #dfe2f3;
  --glow-1: rgba(120, 140, 255, 0.18);
  --glow-2: rgba(251, 115, 255, 0.12);
  --surface-row: #ffffff;
  --surface-row-hover: #f7f7fd;
  --surface-pill: #ffffff;
  --surface-sticky: rgba(255, 255, 255, 0.97);
  --shadow: rgba(14, 21, 69, 0.1);
  --shadow-strong: rgba(14, 21, 69, 0.18);
  --placeholder: #6b7194; /* 4,8:1 sobre blanco (antes #8A90AB, 3,2:1) */
  --btn-secondary-hover: #dfe1f0;
  --diff-removed-fg: #a3263b;
  --diff-added-fg: #0b6b4d;
  --code-bg: rgba(70, 58, 140, 0.08);
  --pre-bg: rgba(14, 21, 69, 0.05);
  --th-bg: rgba(70, 58, 140, 0.05);
  --thumb-a: rgba(251, 115, 255, 0.2);
  --thumb-b: rgba(120, 140, 255, 0.22);
  --selected-bg: #e1e3f4;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Foco visible y uniforme para quien navega con teclado (2026-09-28). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.choice:has(input:focus-visible),
.toggle:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Títulos que reciben el foco por programa al cambiar de vista (lector de pantalla): sin recuadro. El de la ficha
   de marca salía con un marco blanco al entrar (2026-10-05). */
#job-title:focus, #brand-title:focus { outline: none; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: var(--fs-ui);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Brillos de fondo en una capa fija (background-attachment: fixed se pinta mal en algunos navegadores). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, var(--glow-1), transparent 70%),
    radial-gradient(700px 420px at -10% 30%, var(--glow-2), transparent 70%);
}

a { color: var(--accent-text); }

/* ---------- cabecera ---------- */
.topbar {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand img { display: block; width: 99px; height: 40px; }
/* El logo oficial es blanco: en el tema claro se oscurece. */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand img { filter: brightness(0) opacity(0.88); } }
:root[data-theme="light"] .brand img { filter: brightness(0) opacity(0.88); }
.topbar-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.theme-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.theme-name {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}
.theme-btn:hover { border-color: var(--pink); }

/* Sesión en la barra (2026-10-20): nombre de la cuenta y «Salir». */
.topbar-account { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-small); color: var(--muted); }
.topbar-account[hidden] { display: none; }
.topbar-user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-logout {
  flex: none; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--pill);
  background: transparent; color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
.topbar-logout:hover, .topbar-logout:focus-visible { border-color: var(--pink); outline: none; }
@media (max-width: 640px) { .topbar-user { display: none; } }

/* inline-block, no flex: con flex el texto suelto no recibe la elipsis y el punto encoge (móvil, 2026-10-01). */
.status-pill {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
}
.status-pill::before {
  content: '';
  display: inline-block;
  vertical-align: 1px;
  margin-right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.status-pill.is-online { color: var(--text); }
.status-pill.is-online::before { background: var(--success); box-shadow: 0 0 0 4px var(--success-tint); }
.status-pill.is-offline::before { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-tint); }
.status-pill.is-error { color: var(--text); }
.status-pill.is-error::before { background: var(--error); box-shadow: 0 0 0 4px var(--error-tint); }
/* Hermes trabajando: la píldora enlaza con ese trabajo (2026-09-28). */
.status-pill { text-decoration: none; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill.is-busy { color: var(--text); border-color: rgba(251, 115, 255, 0.45); }
.status-pill.is-busy::before { background: var(--pink); box-shadow: 0 0 0 4px rgba(251, 115, 255, 0.2); }
a.status-pill[href]:hover { border-color: var(--pink); }

/* ---------- tipografía ---------- */
#app {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.hero { padding: 56px 0 32px; }
.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 600;
  line-height: 1.1;
}
.accent { color: var(--accent-text); }
.lead { margin: 0; max-width: 620px; font-size: var(--fs-lead); color: var(--text); } /* blanco, como los párrafos de la web (antes lila al 85 %) */

.eyebrow {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  text-transform: uppercase;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--accent-text);
}
.label {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
}
.label em { font-style: normal; font-weight: 400; color: var(--muted); }

.hint { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 0; }

/* ---------- tarjetas y formulario ---------- */
.card {
  background: linear-gradient(156deg, var(--card-grad-1) 11%, var(--card-grad-2) 76%), var(--card-base);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: 0 10px 28px var(--shadow);
}

label { display: block; margin-bottom: 20px; }

input[type="text"], input[type="search"], input[type="url"], textarea, select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(251, 115, 255, 0.18);
}
select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fb73ff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
select option { background: var(--bg-deep); color: var(--text); }
textarea { resize: vertical; min-height: 220px; line-height: 1.5; font-size: var(--fs-ui); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
fieldset legend { padding: 0; margin-bottom: 8px; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--field);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.choice:hover { border-color: var(--border-strong); }
.choice input { accent-color: var(--pink); margin: 4px 0 0; }
.choice strong { display: block; font-weight: 600; }
.choice small { display: block; color: var(--muted); font-size: var(--fs-small); }
.choice:has(input:checked) { border-color: var(--pink); background: rgba(251, 115, 255, 0.07); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.actions .hint { margin: 0; flex: 1 1 220px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--button); border-color: var(--pink); color: var(--text); }
.btn-primary:hover { background: var(--pink); color: var(--on-accent); box-shadow: 0 6px 16px var(--shadow-strong); }
.btn-secondary { background: var(--button); color: var(--text); }
.btn-secondary:hover { background: var(--btn-hover); color: var(--on-btn-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--pink); color: var(--accent-text); }
.btn-sm { padding: 6px 16px; font-size: var(--fs-small); }
.btn-danger { background: var(--error-tint); color: var(--error); border-color: var(--error-line); }
.btn-danger:hover { background: var(--error-tint-strong); }

/* ---------- estados ---------- */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--pill);
  font-family: 'Barlow', sans-serif;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--button);
  color: var(--lilac);
}
.status-queued { background: rgba(198, 187, 255, 0.12); color: var(--lilac); }
.status-running { background: rgba(251, 115, 255, 0.14); color: var(--accent-text); }
.status-completed { background: var(--success-tint); color: var(--success); }
.status-approved { background: var(--success-tint); color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.status-blocked, .status-failed { background: var(--error-tint); color: var(--error); }
.status-cancelled { background: rgba(137, 145, 174, 0.14); color: var(--muted); }
.status-review { background: var(--warning-tint); color: var(--warning); }

/* Revisar el brief (2026-10-01) */
.job-review { margin: 0 0 24px; padding: 20px; border: 1px solid var(--warning); border-radius: var(--radius); background: var(--surface-row); }
.review-title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.job-review textarea { width: 100%; margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-small); line-height: 1.55; }
.job-review .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.review-brief-field { margin: 4px 0 20px; }
.review-brief-field .hint { margin: 4px 0 0 24px; }

/* ---------- vista de trabajo ---------- */
#view-job { margin-top: 40px; }
.job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.job-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.job-head .hint { margin-top: 2px; }

#job-progress { margin-bottom: 24px; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.progress-head span { color: var(--muted); font-size: var(--fs-ui); }
.progress-track { height: 10px; background: var(--field); border: 1px solid var(--border); border-radius: var(--pill); overflow: hidden; }
#progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  border-radius: var(--pill);
  /* Avance por recorte (ver setProgressBar en app.js): sin animar la anchura. */
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0 round var(--pill));
  transition: clip-path 0.6s ease;
}
/* Brillo que recorre la barra mientras Hermes trabaja: se ve vivo aunque el % no cambie. */
#progress-bar.is-live {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%) -40% 0 / 40% 100% no-repeat,
    linear-gradient(90deg, var(--purple), var(--pink));
  animation: progress-shine 1.8s linear infinite;
}
@keyframes progress-shine { to { background-position: 140% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { #progress-bar.is-live { animation: none; } }
.progress-head span.is-idle { color: var(--warning); }


/* Campo único de marca y ejemplos de instrucción (2026-09-28) */
/* El aviso de marca reserva su línea (no salta al escribir) y hace de separación con el campo
   siguiente: con el margen de 20 px encima, el hueco era el doble que entre los demás campos (2026-09-30). */
.brand-field { margin-bottom: 0; }
.brand-field label { margin-bottom: 0; }
.brand-match { min-height: 1.2em; margin-bottom: 4px; }
.brand-match.is-existing { color: var(--success); }
.brand-match.is-new { color: var(--lilac); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 20px; }
.examples .hint { margin: 0 4px 0 0; }
.examples .chip { font-weight: 500; }
/* En móvil, los ejemplos en una sola fila que se desliza en vez de apilarse en tres (2026-09-30). */
@media (max-width: 640px) {
  .examples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .examples::-webkit-scrollbar { display: none; }
  .examples > * { flex: none; }
}

/* Avisos dentro de la página (sustituyen a alert/confirm del navegador) */
.form-warning {
  margin: 0 0 16px;
  padding: 16px 16px;
  border: 1px solid var(--warning-line);
  border-radius: var(--radius-md);
  background: var(--warning-subtle);
}
.form-warning p { margin: 0 0 12px; font-size: var(--fs-ui); }
.warning-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-warning ul { margin: 0 0 12px; padding-left: 20px; font-size: var(--fs-ui); }
.form-warning li { margin: 4px 0; }
.auth-banner { margin: 24px 0 0; }
/* Borrador recuperado (2026-09-28) */
.requester-note { margin: 0 0 20px; }
/* Cuentas (2026-10-13): con cuenta de Google el nombre no se cambia a mano; se cierra la sesión. */
#account-logout { display: none; }
.has-account #requester-change { display: none; }
.has-account #account-logout { display: inline; }
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-deep);
}
.login-screen[hidden] { display: none; }
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--field);
  text-align: center;
}
.login-card h2 { margin: 0 0 8px; }
.login-card .hint { margin: 0 0 24px; }
.login-card .btn { width: 100%; }
.login-card .link-btn { display: block; margin: 16px auto 0; }
.login-card .link-btn[hidden], .login-card .btn[hidden] { display: none; }
.login-error { margin: 0 0 16px; color: var(--error); font-size: var(--fs-small); }
.needs-login body { overflow: hidden; }
.requester-note strong { color: var(--text); font-weight: 600; }
.draft-note {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 20px; padding: 12px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: var(--fs-ui); color: var(--muted); }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 12px 32px var(--shadow-strong);
  font-size: var(--fs-ui);
}
.toast.is-error { border-color: var(--error-line); color: var(--error); }
/* Aviso con acción (2026-09-30): "Deshacer" al quitar una aprobación. */
.toast .toast-action { margin-left: 12px; }
.reconnecting { margin: 8px 0 0; font-size: var(--fs-small); color: var(--warning); }
.reconnecting::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warning); vertical-align: 1px; }

/* Asunto y preheader del resultado */
.email-meta { margin: 0 0 16px; padding: 4px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--field); }
.meta-row { display: grid; grid-template-columns: 124px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.meta-row:first-child { border-top: none; }
.meta-row dt {
  font-family: 'Barlow', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-soft);
}
.meta-row dd { margin: 0; font-size: var(--fs-ui); overflow-wrap: anywhere; }
.meta-row dd.is-missing { color: var(--warning); }
@media (max-width: 640px) {
  .meta-row { grid-template-columns: 1fr auto; }
  .meta-row dd { grid-column: 1 / -1; grid-row: 2; }
}

/* Versiones y comparación (2026-09-28) */
.versions { margin: -8px 0 24px; }
.versions .eyebrow { margin-bottom: 8px; }
.versions ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.versions li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; font-size: var(--fs-ui); }
.versions li a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.versions li a:hover { text-decoration: underline; }
.versions li[aria-current] a { color: var(--text); }
.versions li[aria-current] a::before { content: '▸ '; content: '▸ ' / ''; color: var(--accent-text); }
.versions .v-desc { color: var(--muted); overflow-wrap: anywhere; }
.versions .v-state { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.versions .v-here { display: inline-block; padding: 0 8px; border-radius: var(--pill); background: var(--selected-bg); color: var(--text); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.compare { margin: 0 0 24px; padding: 20px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--field); }
.compare .hint { margin: 0 0 12px; }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-ui); }
.compare-list li { padding: 6px 12px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.compare-list li::before { display: inline-block; width: 18px; font-weight: 700; }
.compare-list .is-removed { background: var(--error-subtle); color: var(--diff-removed-fg); text-decoration: line-through; text-decoration-color: var(--error-line); }
.compare-list .is-removed::before { content: '−'; content: '−' / ''; color: var(--error); }
.compare-list .is-added { background: var(--success-subtle); color: var(--diff-added-fg); }
.compare-list .is-added::before { content: '+'; content: '+' / ''; color: var(--success); }
.compare-list .group { margin-top: 6px; padding: 0; font-family: 'Barlow', sans-serif; font-size: var(--fs-small); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--pink-soft); }
.compare-list .group::before { content: none; }
.job-row .version-tag { color: var(--lilac); font-weight: 600; }

/* Markdown de la autoauditoría y del brief (markdown.js) */
.md { font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--lilac); overflow-wrap: anywhere; }
.md h4, .md h5, .md h6 { margin: 24px 0 8px; color: var(--text); font-weight: 600; line-height: 1.3; }
.md h4 { font-size: 22px; }
.md h5 { font-size: 20px; }
.md h6 { font-size: var(--fs-prose); }
.md > :first-child { margin-top: 0; }
.md p, .md ul, .md ol, .md blockquote { margin: 0 0 12px; }
.md ul, .md ol { padding-left: 24px; }
.md strong { color: var(--text); }
.md code { padding: 1px 4px; border-radius: var(--radius-sm); background: var(--code-bg); font-size: var(--fs-small); }
.md pre { margin: 0 0 12px; padding: 12px 12px; border-radius: var(--radius-sm); background: var(--pre-bg); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.md blockquote { padding-left: 12px; border-left: 2px solid var(--purple); }
.md-table { overflow-x: auto; margin: 0 0 12px; }
.md table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.md th, .md td { padding: 6px 8px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.md th { color: var(--text); background: var(--th-bg); }
#notes-text { max-height: 520px; overflow-y: auto; margin-top: 12px; padding-right: 4px; }

/* Cabecera del trabajo: estado + "Copiar enlace" */
.job-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.job-head-side .btn { white-space: nowrap; }
#job-blocked .btn, .job-cancelled .btn { margin-top: 12px; }

/* Barra fija de acciones al bajar por la vista previa */
.sticky-actions {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 9;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(848px, calc(100vw - 32px));
  padding: 12px 12px 12px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  background: var(--surface-sticky);
  box-shadow: 0 12px 32px var(--shadow-strong);
  backdrop-filter: blur(6px);
}
.sticky-actions .lbl-short { display: none; }
.sticky-title { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
body.has-sticky .toast { bottom: 88px; }
body.has-sticky .foot { padding-bottom: 88px; }

/* Cancelar y pedir cambios */
.cancel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -8px 0 24px; }
.cancel-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-ui); }
.job-cancelled p { margin: 0 0 8px; color: var(--muted); }
.change-request { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--lilac); overflow-wrap: anywhere; white-space: pre-line; }
.revise-box { margin: 0 0 20px; padding: 20px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--field); }
.revise-box label { margin-bottom: 12px; }
.revise-box textarea { min-height: 110px; }
.form-error { margin: 0 0 12px; color: var(--error); font-size: var(--fs-ui); }

/* Revisión automática: control de calidad del worker + autoauditoría de Hermes (notas.md). */
.review { margin: 4px 0 24px; padding: 20px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--field); }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.review-head h3 {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.review-summary { font-size: var(--fs-ui); font-weight: 600; }
.review-summary.is-ok { color: var(--success); }
.review-summary.is-warning { color: var(--warning); }
.review-missing { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--warning-line); border-radius: 10px; background: var(--warning-subtle); color: var(--text); }
.review-missing strong { color: var(--warning); }
.review-summary.is-error { color: var(--error); }
.review .hint { margin: 0; }
.review-list { list-style: none; margin: 0; padding: 0; }
.review-list > li { border-top: 1px solid var(--border); }
.review-list > li:first-child { border-top: none; }
.review-list summary, .review-list .check-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: var(--fs-ui);
  list-style: none;
}
.review-list summary { cursor: pointer; }
.review-list summary::-webkit-details-marker { display: none; }
.review-list summary::after { content: '▾'; content: '▾' / ''; margin-left: 6px; color: var(--muted); font-size: var(--fs-caption); }
.review-list details[open] summary::after { content: '▴'; content: '▴' / ''; }
.check-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.check-ok .check-dot { background: var(--success); }
.check-warning .check-dot { background: var(--warning); }
.check-error .check-dot { background: var(--error); }
.check-label { font-weight: 600; }
.check-state { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.check-error .check-state { color: var(--error); }
.check-warning .check-state { color: var(--warning); }
.check-details { margin: 0 0 12px 20px; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--lilac); overflow-wrap: anywhere; }
.check-details li { padding: 4px 0; }
.check-details li.is-error { color: var(--text); }
.notes-box { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.notes-box summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 600; }
.notes-box summary span { margin-left: 6px; font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
#notes-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 420px;
  overflow-y: auto;
  margin: 12px 0 0;
  font-family: inherit;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--lilac);
}


/* Vista previa: el iframe se pinta al ancho real del cliente de correo (escritorio 800 px, móvil
   375 px) para que salten las media queries del email, y se escala si no cabe en la tarjeta. */
.preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.preview-head .hint { margin: 0; }
.preview-stage {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}
/* width: max-content (2026-10-13): al escalar la vista, la columna se estrecha al ancho ya escalado y el dispositivo,
   que es un bloque, se encogía con ella; el email (ancho fijo) se salía del marco del móvil por la derecha. */
.preview-device { flex: none; width: max-content; transform-origin: top left; }
.preview-col { flex: none; }
.preview-stage.is-compare { gap: 16px; }
.preview-label {
  margin: 0 0 8px;
  font-family: 'Barlow', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: var(--pink-soft);
}
#preview-frame-before { display: block; width: 800px; height: 720px; border: 0; border-radius: 6px; background: #fff; }
.preview-device.is-mobile #preview-frame-before { width: 375px; height: 740px; border-radius: 22px; }
.theme-hint { margin: -4px 0 16px; }
.preview-stage.is-dark { background: #000; }
.toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-ui); cursor: pointer; }
.toggle input { accent-color: var(--pink); width: 16px; height: 16px; margin: 0; }
#preview-frame {
  display: block;
  width: 800px;
  height: 720px;
  border: 0;
  border-radius: 6px;
  background: #fff;
}
.preview-device.is-mobile {
  padding: 14px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 34px;
  background: #0a0f2a;
  box-shadow: 0 20px 50px var(--shadow-strong);
}
.preview-device.is-mobile #preview-frame { width: 375px; height: 740px; border-radius: 22px; }

/* Fallo explicado (2026-09-30): resumen y consejo arriba; el error original, plegado. */
.job-failed { padding: 16px 20px; border: 1px solid var(--error-line); border-radius: var(--radius-md); background: var(--error-subtle); }
.failed-title { margin: 0 0 6px; font-weight: 700; color: var(--error); }
.failed-summary { margin: 0; font-size: var(--fs-prose); line-height: var(--lh-prose); }
.retried-note { margin: 8px 0 0; color: var(--text); }
.retried-note a { color: var(--accent-text); font-weight: 600; }
.job-failed .actions { margin-top: 4px; }
#job-blocked .actions .btn { margin-top: 8px; }
.failed-detail { margin-top: 16px; font-size: var(--fs-small); }
.failed-detail summary { cursor: pointer; color: var(--muted); }
#blocked-reason {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
  margin: 12px 0 0;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* Lo que se pidió, en la cabecera del trabajo (2026-09-30). */
.job-request { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--muted); overflow-wrap: anywhere; }
.job-request p { margin: 0; }
.job-request q { color: var(--text); quotes: '«' '»'; }
.job-request summary { cursor: pointer; }
.job-request summary q { display: inline; }
.job-request .request-full { margin: 8px 0 0; padding: 12px 16px; max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--field); color: var(--text); white-space: pre-wrap; font-size: var(--fs-small); }

.log-box { margin: 24px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--field); }
.log-box summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
}
#job-log { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--border); }
#job-log li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-small); color: var(--lilac); }
#job-log li time { color: var(--muted); font-variant-numeric: tabular-nums; }
#job-log li .msg { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
#job-log li details summary { cursor: pointer; }
#job-log li.log-error { background: var(--error-subtle); }
.log-box.only-warnings #job-log li:not(.log-error) { display: none; }
.log-count { margin-left: 6px; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.log-count .warn { color: var(--error); font-weight: 600; }
.log-filter { margin: 0 16px 12px; font-size: var(--fs-small); }
#job-log li:last-child { border-bottom: none; }
#job-log li strong { color: var(--text); font-weight: 600; }
#job-log li.log-error { color: var(--error); }
#job-log li.log-success { color: var(--success); }

/* ---------- historial ---------- */
#history { margin-top: 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head .hint { margin: 0; }

.history-tools { display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
.history-tools input, .history-tools select { margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 16px; }
.chips-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.chip[aria-pressed="true"]#mine-chip { background: var(--selected-bg); border-color: var(--border-strong); color: var(--text); }
.chip {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.is-active { background: var(--selected-bg); border-color: var(--border-strong); color: var(--text); }

#history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.job-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 6px 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-row);
  transition: border-color 0.15s, background 0.15s;
}
.job-row:hover { border-color: var(--border-strong); background: var(--surface-row-hover); }
.job-row > .status-badge { grid-column: 3; grid-row: 1; justify-self: end; }
/* Miniatura (2026-09-28): la genera el worker; sin ella, las iniciales de la marca. */
.job-row .thumb { grid-column: 1; grid-row: 1 / span 2; align-self: start; display: block; width: 48px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--field); }
.job-row .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.job-row .thumb-empty { display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--lilac); background: linear-gradient(160deg, var(--thumb-a), var(--thumb-b)); text-decoration: none; }
.job-row .name { grid-column: 2; grid-row: 1; color: var(--text); font-weight: 600; font-size: var(--fs-body); text-decoration: none; }
.job-row .name:hover { color: var(--accent-text); }
.job-row .meta { grid-column: 2; grid-row: 2; margin: 0; font-size: var(--fs-small); color: var(--muted); }
.job-row .err { grid-column: 2 / -1; margin: 0; font-size: var(--fs-small); color: var(--error); opacity: 0.85; }
.job-row .row-actions { grid-column: 3; grid-row: 2; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.job-row .row-actions .btn { padding: 4px 16px; font-size: var(--fs-small); }
/* Menú "⋯" de la fila (2026-10-01) */
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.job-row .row-actions .row-menu-btn { display: flex; align-items: center; padding: 4px 12px; font-size: var(--fs-small); letter-spacing: 1px; }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--field); box-shadow: 0 12px 32px var(--shadow-strong); display: grid; gap: 2px; }
.menu-item { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer; }
.menu-item small { display: block; color: var(--muted); font-size: var(--fs-caption); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-row-hover); }
a.menu-item { text-decoration: none; box-sizing: border-box; }
/* «Descargar HTML» en el menú solo en móvil: en ordenador ya está a la vista en la fila. */
.menu-download { display: none; }
@media (max-width: 640px) { .menu-download { display: block; } }
.job-row:has(.row-menu[open]) { position: relative; z-index: 5; }
.job-row:has(.row-menu[open]) .row-actions { z-index: 5; }
.job-row .mini-track { grid-column: 2 / -1; height: 4px; border-radius: var(--pill); background: var(--field); overflow: hidden; }
.job-row .mini-track > div { height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); }

#history-more { margin: 16px auto 0; display: flex; }

/* ---------- pie ---------- */
/* Como el de la web (.footer-feebbo): negro a todo el ancho, copyright en gris a 12 px y columnas con la
   etiqueta en blanco y negrita y el dato debajo. Negro también en el tema claro: es el cierre de marca. */
/* Pie con llamada final (2026-10-06): sin bloque negro, en el fondo de la página y separado por una línea fina. */
.foot {
  margin-top: 64px;
  padding: 56px 24px 32px;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.foot-inner { max-width: 832px; margin: 0 auto; } /* el ancho útil de #app (su máximo menos 2 × 24 px de relleno) */
.foot-cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; padding-bottom: 40px; }
.foot-cta-copy { max-width: 440px; }
.foot-title { margin: 12px 0 8px; font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.1; color: var(--text); }
.foot-lead { margin: 0 0 24px; font-size: var(--fs-body, 16px); line-height: 1.5; color: var(--muted); }
.foot-stats { display: flex; gap: 40px; margin: 0; }
.foot-stats div { margin: 0; }
.foot-stats dt { font-size: 44px; font-weight: 600; line-height: 1; color: var(--text); }
.foot-stats dd { margin: 6px 0 0; font-size: var(--fs-small); color: var(--muted); }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.foot-brand { display: block; flex: none; }
.foot-copy { margin: 0; font-size: var(--fs-caption); line-height: 20px; color: var(--muted); }
.foot-links { margin: 0 0 0 auto; font-size: var(--fs-small); color: var(--muted); }
.foot a:not(.btn) { color: var(--text); text-decoration: none; }
.foot a:not(.btn):hover { color: var(--pink); }
@media (max-width: 640px) {
  .foot-stats { gap: 28px; }
  .foot-stats dt { font-size: 36px; }
  .foot-links { margin-left: 0; width: 100%; }
}

/* ---------- móvil ---------- */
@media (max-width: 640px) {
  .topbar, #app, .foot { padding-left: 16px; padding-right: 16px; }
  /* Etiquetas con el espaciado de la web (5 px): en móvil, 3 px para que quepan en una línea. */
  .eyebrow, .action-title, .review-head h3, .brand-section h3 { letter-spacing: 3px; }
  /* Píldora de estado y botón de tema con su nombre: más compactos para que quepan junto al logo. */
  .status-pill { padding: 6px 12px; }
  .status-pill::before { margin-right: 6px; }
  .theme-btn { padding: 0 8px; gap: 4px; }
  .hero { padding: 36px 0 24px; }
  .card { padding: 20px; }
  .row, .choices, .history-tools { grid-template-columns: 1fr; gap: 0 12px; }
  .choices { gap: 12px; }
  .history-tools { gap: 12px; }
  .job-head { flex-direction: column-reverse; }
  /* Historial en móvil (2026-09-30): con cuatro botones, «Archivar» se salía 19 px de la tarjeta y cada
     fila medía 186 px. La tarjeta entera abre el trabajo (sobra «Ver»), el estado va junto al nombre y
     los botones que quedan caben en una fila, a 40 px de alto para el dedo. */
  .job-row { position: relative; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px; }
  .job-row .thumb { grid-row: 1 / span 2; width: 40px; height: 53px; }
  .job-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .job-row .name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .job-row > .status-badge { grid-column: 3; grid-row: 1; justify-self: end; }
  .job-row .meta { grid-column: 2 / -1; grid-row: 2; }
  .job-row .row-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; }
  .job-row > .row-actions .row-view { display: none; }
  /* «Descargar» pasa al menú «⋯» (2026-10-05). Si en la fila no queda más botón que el menú, este va a la derecha,
     bajo el estado, en vez de solo en una tercera fila. */
  .job-row > .row-actions .row-download { display: none; }
  /* Salvo en las que están trabajando: «TRABAJANDO · 45 %» ensancha esa columna y la fecha quedaba en 4 líneas. */
  .job-row:not(:has(> .mini-track)) > .row-actions:is(:has(> .row-view + .row-menu), :has(> .row-view + .row-download + .row-menu)) { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; margin-top: 0; }
  .job-row:not(:has(> .mini-track)):is(:has(> .row-actions > .row-view + .row-menu), :has(> .row-actions > .row-view + .row-download + .row-menu)) > .meta { grid-column: 2; }
  /* En móvil los botones van a la izquierda: el menú "⋯" se abre hacia la derecha para no salirse. */
  .row-menu-pop { right: auto; left: 0; }
  .job-row .row-actions .btn { min-height: 40px; padding: 8px 16px; }
  .job-row .mini-track, .job-row .err { grid-column: 1 / -1; }
  /* Lo que se pulsa dentro de la tarjeta queda por encima del enlace que la cubre. */
  .job-row .row-actions, .job-row .thumb, .job-row [data-family], .job-row .family-list { position: relative; z-index: 1; }
  .preview-stage { padding: 16px 8px; }
  .btn { width: 100%; }
  .job-row .row-actions .btn, .chip, .btn-sm { width: auto; }

  /* Botones en móvil (2026-09-28): antes, 5 botones a lo ancho uno debajo de otro en el resultado.
     Ahora la acción principal a lo ancho y las demás de dos en dos. */
  .revise-box .actions .btn { padding-left: 12px; padding-right: 12px; font-size: var(--fs-ui); }
  /* Enviar a lo ancho y Cancelar a su medida, en una fila; textos largos del final, uno debajo de otro. */
  .revise-box .actions { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .revise-box .actions .btn { white-space: nowrap; }
  .revise-box .actions .hint { grid-column: 1 / -1; }
  .job-head-side { flex-direction: row; justify-content: space-between; align-items: center; }
  .sticky-actions { padding: 8px; gap: 6px; border-radius: var(--radius); }
  .sticky-title { display: none; }
  .sticky-actions .btn { flex: 1; width: auto; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .sticky-actions .lbl-long { display: none; }
  .sticky-actions .lbl-short { display: inline; }
  .sticky-actions #sticky-top { flex: 0 0 auto; }
}

/* ---------- tipo de entrada (instrucción / prompt): pestañas pegadas al cuadro de texto ---------- */
.kind-tabs { margin-bottom: 20px; }
.tabs { display: flex; gap: 4px; }
.tabs label { margin: 0; cursor: pointer; }
.tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tabs span {
  display: block;
  position: relative;
  top: 1px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.tabs label:hover span { color: var(--text); }
.tabs input:checked + span { z-index: 1; border-color: var(--border); background: var(--field); color: var(--text); box-shadow: inset 0 2px 0 var(--pink); }
.tabs input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tab-panel { margin: 0; }
.tab-panel textarea { margin-top: 0; }
.kind-tabs:has(.tabs label:first-child input:checked) .tab-panel textarea { border-top-left-radius: 0; }
@media (max-width: 640px) {
  .tabs label { flex: 1; text-align: center; }
  .tabs span { padding: 12px 6px; font-size: var(--fs-small); }
  .kind-tabs .tab-panel textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--field);
}
.segmented label { margin: 0; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  padding: 8px 20px;
  border-radius: var(--pill);
  font-size: var(--fs-ui);
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.segmented label:hover span { color: var(--text); }
.segmented input:checked + span { background: var(--selected-bg); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.brief-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
#brief-text {
  white-space: pre-wrap;
  max-height: 420px;
  overflow-y: auto;
  margin: 12px 0 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-family: inherit;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--lilac);
}

@media (max-width: 640px) {
  .segmented { display: flex; }
  .segmented label { flex: 1; text-align: center; }
  .segmented span { padding: 8px 6px; font-size: var(--fs-small); }
}

/* ---------------------------------------------------------------- Pedir cambios: atajos y señalar (2026-09-28) */
.revise-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 4px; }
.revise-tools .hint { margin: 0; flex: 1 1 240px; }
#pick-btn[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--on-accent); }
.quick-changes { margin: 12px 0 16px; }
.quick-changes .chip { font-weight: 500; }
.pick-banner {
  position: sticky; top: calc(var(--topbar-h, 64px) + 8px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--pink); border-radius: var(--radius-md);
  background: var(--surface-sticky); box-shadow: 0 12px 32px var(--shadow-strong); font-size: var(--fs-ui);
}
.pick-banner .hint { margin: 0; }
.preview-stage.is-picking .preview-device { box-shadow: 0 0 0 3px var(--pink); }

/* ---------------------------------------------------------------- Cómo se ve en la bandeja (2026-09-28) */
.inbox { margin: -6px 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--field); }
.inbox > summary { padding: 10px 20px; cursor: pointer; font-size: 14px; color: var(--muted); }
.inbox > summary:hover { color: var(--text); }
.inbox-body { padding: 0 20px 16px; }
.inbox-label { margin: 8px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
/* Los anchos son los de Gmail, no los de Studio: el corte con «…» tiene que caer donde caería allí. */
.inbox-phone, .inbox-desk { max-width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.inbox-phone { width: 390px; }
.inbox-desk { width: 100%; }
.inbox-row { font-family: Roboto, Arial, sans-serif; color: var(--text); }
.inbox-row p { margin: 0; }
.inbox-row-mobile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 12px 40px 12px 16px; }
.inbox-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 18px; font-weight: 500; }
.inbox-lines { min-width: 0; }
.inbox-top { display: flex; justify-content: space-between; gap: 8px; }
.inbox-from { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.inbox-time { flex: none; font-size: 12px; font-weight: 700; color: var(--text); }
/* El texto llega ya cortado a la medida de Gmail (app.js, renderInbox): aquí solo se maqueta y puede partirse
   en dos líneas en pantallas estrechas sin cambiar lo que se lee. */
.inbox-row-mobile .inbox-subject { font-weight: 700; font-size: 14px; white-space: nowrap; }
.inbox-row-mobile .inbox-pre { font-size: 14px; color: var(--muted); white-space: nowrap; }
.inbox-row-desk { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 10px 16px; font-size: 14px; }
.inbox-row-desk .inbox-from { font-size: 14px; }
.inbox-row-desk .inbox-subject { font-weight: 700; }
.inbox-row-desk .inbox-pre { color: var(--muted); }
.inbox-count { margin: 6px 0 4px; font-size: 13px; }
@media (max-width: 640px) {
  .inbox-body { padding: 0 12px 12px; }
  .inbox > summary { padding: 10px 12px; }
  .inbox-row-desk { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .inbox-row-mobile .inbox-subject, .inbox-row-mobile .inbox-pre { white-space: normal; }
  .inbox-row-desk .inbox-line { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------------- Historial por newsletter (2026-09-28) */
.family-toggle {
  grid-column: 2 / -1; justify-self: start; padding: 2px 0; border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--lilac);
}
.family-toggle:hover { color: var(--accent-text); text-decoration: underline; }
.family-toggle::before { content: '▸ '; }
.family-toggle[aria-expanded="true"]::before { content: '▾ '; }
.family-list { grid-column: 2 / -1; margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 2px solid var(--purple); }
.family-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.family-list li:first-child { border-top: none; }
.family-name { color: var(--text); font-weight: 600; font-size: var(--fs-ui); text-decoration: none; }
.family-name:hover { color: var(--accent-text); }
.family-list .meta { font-size: var(--fs-small); color: var(--muted); flex: 1 1 auto; }
.family-list .row-actions { display: flex; gap: 6px; }
.family-list .row-actions .btn { padding: 4px 12px; font-size: var(--fs-small); }
.family-list .status-badge { font-size: var(--fs-caption); }
@media (max-width: 640px) {
  .family-toggle, .family-list { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Ver en la pieza (2026-09-28) */
.check-details li[data-check], .compare-list li[data-loc] { display: flex; align-items: baseline; gap: 12px; }
.check-details li[data-check] > span, .compare-list li[data-loc] > span { flex: 1 1 auto; min-width: 0; }
.compare-list li[data-loc]::before { flex: none; }
.locate-btn {
  flex: none; padding: 1px 12px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--text); text-decoration: none;
}
.locate-btn:hover { border-color: var(--pink); color: var(--accent-text); }

/* ---------------------------------------------------------------- Editar texto (2026-09-28) */
.textedit-box input[type="text"] { width: 100%; }
.textedit-box label { display: block; margin-bottom: 12px; }
.te-status { margin: 0 0 12px; }
.te-banner-actions { display: flex; gap: 8px; flex: none; }
.preview-stage.is-editing .preview-device { box-shadow: 0 0 0 3px var(--purple); }
#edit-text-btn[aria-expanded="true"], #revise-btn[aria-expanded="true"] { border-color: var(--pink); }

/* ---------------------------------------------------------------- Exportar, aprobar y archivar (2026-09-28) */
.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.export-field { display: flex; align-items: center; gap: 12px; margin: 0; }
.export-field .label { margin: 0; white-space: nowrap; }
.export-field select { width: auto; min-width: 200px; }
.export-row .toggle { margin: 0; }
.export-summary { flex: 1 1 100%; margin: 0; }
.export-summary:empty { display: none; }
.utm-fields { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.utm-fields label { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.utm-fields label span { display: block; margin-bottom: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.approval-elsewhere { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--warning-line); border-radius: var(--radius-md); background: var(--warning-subtle); font-size: var(--fs-ui); }
.approve-checklist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.approve-checklist label { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: var(--fs-ui); cursor: pointer; }
.approve-checklist input { margin-top: 4px; }
.approve-quality { margin: 0 0 12px; font-size: var(--fs-ui); color: var(--warning); }
.approved-tag { color: var(--success); font-weight: 600; }
.v-approved { margin-left: 8px; padding: 1px 8px; border-radius: var(--pill); background: var(--success-tint); color: var(--success); font-size: var(--fs-caption); font-weight: 600; }
.archived-note { margin: 12px 0 0; font-size: var(--fs-ui); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips-side { display: flex; flex-wrap: wrap; gap: 8px; }
.chip[aria-pressed="true"]#archived-chip { background: var(--selected-bg); border-color: var(--border-strong); color: var(--text); }
@media (max-width: 640px) {
  .export-field { flex: 1 1 100%; }
  .export-field select { flex: 1; min-width: 0; }
}

/* ---------------------------------------------------------------- Ancho libre (2026-09-28) */
.free-width { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -4px 0 16px; font-size: var(--fs-ui); }
.free-width-label { margin: 0; white-space: nowrap; color: var(--muted); }
.free-width-label strong { color: var(--text); font-variant-numeric: tabular-nums; }
.free-width input[type="range"] { flex: 1 1 220px; accent-color: var(--pink); margin: 0; }
.free-width-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.free-width-presets .chip { padding: 4px 12px; font-size: var(--fs-caption); }
.compare-with { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.compare-with .label { margin: 0; }
.compare-with select { width: auto; min-width: 240px; max-width: 100%; }

/* ---------------------------------------------------------------- Texto alternativo en "Editar texto" (2026-09-28) */
.alt-pop {
  position: absolute; z-index: 60; width: min(380px, calc(100vw - 16px)); padding: 16px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 20px 50px var(--shadow-strong);
}
.alt-pop .label { display: block; margin: 0 0 8px; }
.alt-pop input { width: 100%; }
.alt-pop .hint { margin: 8px 0 12px; font-size: var(--fs-caption); }
.alt-pop-actions { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- Galería del historial (2026-09-28) */
.section-head-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.view-switch { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: var(--pill); }
.seg-btn { padding: 4px 12px; border: none; border-radius: var(--pill); background: none; color: var(--muted); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--selected-bg); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
#history-list.is-gallery { gap: 24px; }
.g-all { list-style: none; }
.g-name { font-size: var(--fs-ui); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.g-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); color: var(--text); text-decoration: none; height: 100%; }
.g-card:hover { border-color: var(--border-strong); background: var(--surface-row-hover); }
.g-card .thumb { display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--field); }
.g-card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g-card .thumb-empty { display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 1px; color: var(--lilac); background: linear-gradient(160deg, var(--thumb-a), var(--thumb-b)); }
.g-meta { font-size: var(--fs-caption); color: var(--muted); }
.g-card .approved-tag { font-size: var(--fs-caption); }
/* En la tarjeta (unos 136 px de ancho) «TRABAJANDO · 45 %» y «BRIEF POR REVISAR» se salían por la derecha
   (2026-10-05): menos espaciado y, si aun así no cabe, en dos líneas. */
.g-card .status-badge { align-self: flex-start; max-width: 100%; padding: 4px 8px; font-size: var(--fs-caption); letter-spacing: 0.5px; white-space: normal; line-height: 1.3; }

/* ---------------------------------------------------------------- Atajos de teclado (2026-09-28) */
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--field); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-caption); text-align: center; color: var(--text); }
.btn kbd { margin-left: 4px; font-size: var(--fs-caption); }
.shortcuts-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 12, 42, 0.55); }
.shortcuts-dialog { width: min(440px, 100%); padding: 20px 24px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel); box-shadow: 0 20px 50px var(--shadow-strong); }
.shortcuts-dialog h3 { margin: 0 0 12px; }
.shortcuts-list { margin: 0 0 12px; display: grid; gap: 8px; }
.shortcuts-list div { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; }
.shortcuts-list dt, .shortcuts-list dd { margin: 0; font-size: var(--fs-ui); }

/* ---------------------------------------------------------------- Acciones del resultado (rediseño 2026-09-29) */
.action-panel { margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--field); }
.action-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
#result-message { margin: 0; font-weight: 600; color: var(--success); }
#result-message.has-errors { color: var(--warning); }
.result-errors-link { font-size: var(--fs-ui); font-weight: 600; color: var(--accent-text); }
.action-head-side { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.approval { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 12px; border: 1px solid var(--success); border-radius: var(--pill); background: var(--success-subtle); color: var(--success); font-size: var(--fs-small); font-weight: 600; }
.link-btn { padding: 0; border: none; background: none; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--text); }
.action-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.action-group { padding: 16px 20px 20px; }
.share-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.share-title { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.share-block .hint { margin: 6px 0 0; }
.share-url-row { display: flex; gap: 8px; }
.share-url-row input { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); }
.action-group + .action-group { border-left: 1px solid var(--border); }
.action-title { margin: 0 0 12px; font-family: 'Barlow', sans-serif; font-size: var(--fs-ui); font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--accent-text); }
.action-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.action-buttons .lbl-short { display: none; }
@media (max-width: 640px) { .action-buttons .lbl-short { display: inline; } }
.action-group .export-field .label { font-size: var(--fs-small); }
.action-group .export-field select { min-width: 0; width: auto; }
.action-list { display: grid; gap: 8px; }
.action-item {
  display: grid; gap: 2px; width: 100%; padding: 12px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); color: var(--text); font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.action-item strong { font-size: var(--fs-body); font-weight: 600; }
.action-item > span:not(.action-top) { font-size: var(--fs-small); color: var(--muted); }
.action-item:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-row-hover); }
.action-item:disabled { opacity: 0.5; cursor: not-allowed; }
.action-item[aria-expanded="true"] { border-color: var(--pink); }
.preview-open { font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 760px) {
  .action-cols { grid-template-columns: minmax(0, 1fr); }
  .action-group { padding: 16px; }
  .action-head { padding: 12px 16px; }
  .action-group .export-field { flex-wrap: wrap; }
  .action-group .export-field select { flex: 1 1 100%; width: 100%; }
  .action-group + .action-group { border-left: none; border-top: 1px solid var(--border); }
  .action-head-side { margin-left: 0; width: 100%; }
  .action-buttons .btn { flex: 1 1 140px; }
}
/* Móvil (2026-09-30): el bloque de acciones medía 719 px en un móvil de 812 y la vista previa empezaba casi
   dos pantallas abajo. Descargar y copiar en una fila y las tres formas de cambiar la pieza como botones
   compactos, sin su descripción (el tiempo estimado sigue en cada panel). */
@media (max-width: 640px) {
  .action-group { padding: 12px 16px; }
  .action-title { margin-bottom: 12px; }
  .action-buttons { flex-wrap: nowrap; margin-bottom: 12px; }
  .action-buttons .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .action-buttons .lbl-long { display: none; }
  .action-group .export-field { gap: 6px; }
  .action-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .action-item { padding: 12px 6px; text-align: center; align-content: center; }
  .action-item strong { font-size: var(--fs-small); line-height: 1.2; }
  .action-item > span:not(.action-top) { display: none; }
}

/* Pestañas del resultado (2026-09-30): vista previa, revisión, comparación y asunto/bandeja bajo las acciones. */
.job-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.job-tabs::-webkit-scrollbar { display: none; }
.job-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.job-tab:hover { color: var(--text); }
.job-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--pink); }
.job-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab-badge:empty { display: none; }
.tab-badge {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--pill);
  font-size: var(--fs-caption);
  letter-spacing: 0;
  text-align: center;
  background: var(--surface-pill);
  color: var(--muted);
}
.tab-badge.is-error { background: var(--error-tint); color: var(--error); }
.tab-badge.is-warning { background: var(--warning-tint); color: var(--warning); }
.tab-badge.is-ok { background: var(--success-tint); color: var(--success); }
/* Dentro de su pestaña, cada bloque ya no necesita separarse del siguiente. */
.job-panel > .review, .job-panel > .compare { margin-top: 0; }
.job-panel > .inbox { margin-top: 0; }
.job-tab .lbl-short { display: none; }
@media (max-width: 640px) {
  .job-tabs { gap: 0; }
  .job-tab { padding: 12px 8px; }
  .job-tab .lbl-long { display: none; }
  .job-tab .lbl-short { display: inline; }
}
/* Atajos de teclado: ayuda, no una acción más junto a "Archivar" (2026-09-30). */
.shortcuts-link { margin-left: auto; align-self: center; text-decoration: none; }
.shortcuts-link:hover { text-decoration: underline; }

/* Navegación entre el formulario y los trabajos (2026-09-30). */
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.how-btn { font-size: var(--fs-ui); }
/* «¿Cómo funciona?» (2026-10-19): rejilla de tarjetas en el sistema de la web (degradado azul, números grandes en
   Barlow, rosa para lo que se señala). 01–03 en una fila; 04 ancha, con las tres herramientas comparadas, y 05. */
.how-panel {
  margin: 32px 0 0;
  padding: 28px;
  border-radius: var(--radius-card);
  background: linear-gradient(156deg, var(--card-grad-1) 11%, var(--card-grad-2) 76%), var(--card-base);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 28px var(--shadow);
  scroll-margin-top: 96px;
  animation: how-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes how-in { from { opacity: 0; transform: translateY(12px); } }
.how-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.how-title { margin: 6px 0 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.15; color: var(--text); }
.how-close { flex: none; width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--pill); background: none; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.how-close:hover { border-color: var(--pink); color: var(--accent-text); }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-row);
  overflow: hidden;
}
.how-step-wide { grid-column: span 2; }
/* Mismo número que los títulos de sección («01 Nueva newsletter», «02 Historial»): relleno que se desvanece hacia
   abajo y contorno fino rosado, para que se distinga del fondo de la tarjeta (2026-10-19). */
.how-num {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 88px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -3px;
  color: transparent;
  background: linear-gradient(180deg, var(--how-num-fill) 0%, var(--how-num-fill) 35%, transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--how-num-fill) 70%, var(--pink));
  user-select: none;
  pointer-events: none;
}
/* Sobre el azul de la tarjeta, --section-num (#1A2168) se funde y solo quedaba el contorno: en oscuro, un relleno algo
   más claro. En claro ya se distingue (#DFE2F3 sobre blanco). */
.how-panel { --how-num-fill: color-mix(in srgb, var(--section-num) 70%, var(--lilac)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .how-panel { --how-num-fill: var(--section-num); } }
:root[data-theme="light"] .how-panel { --how-num-fill: var(--section-num); }
.how-step h3 { position: relative; margin: 0; padding-right: 84px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--text); }
.how-step h3::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--pink)); }
.how-step > p { position: relative; margin: 0; font-size: var(--fs-ui); line-height: 1.55; color: var(--muted); }
.how-step strong { color: var(--text); font-weight: 600; }
.how-foot { margin-top: auto !important; padding-top: 4px; }
.how-tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: var(--pill); font-size: var(--fs-small); color: var(--text); white-space: nowrap; }

/* 01: las dos formas de pedir. */
.how-pair { display: grid; gap: 8px; }
.how-opt { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-pill); border: 1px solid var(--border); }
.how-opt b { font-size: var(--fs-ui); color: var(--text); }
.how-opt span { font-size: var(--fs-small); color: var(--muted); }

/* 02: la secuencia y los datos prácticos. */
.how-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.how-flow li { display: flex; align-items: center; font-family: 'Barlow', sans-serif; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); }
.how-flow li + li::before { content: '→'; content: '→' / ''; margin-right: 6px; color: var(--accent-text); letter-spacing: 0; }
.how-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.how-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.how-ico { color: var(--accent-text); text-align: center; }

/* 03: lista de comprobaciones. */
.how-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text); }
.how-checks li { display: flex; align-items: center; gap: 10px; }
.how-checks li::before { content: '✓'; content: '✓' / ''; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--success-tint); color: var(--success); font-size: 11px; font-weight: 700; }

/* 04: las tres herramientas, comparadas, y el rastro de versiones. */
.how-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.how-tool { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-pill); font-size: var(--fs-small); line-height: 1.45; color: var(--muted); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s; }
.how-tool:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.how-tool.is-instant { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.how-tool b { font-size: var(--fs-body); color: var(--text); }
.how-badge { align-self: flex-start; padding: 2px 8px; border-radius: var(--pill); background: var(--success-tint); color: var(--success); font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.how-badge.is-hermes { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--accent-text); }
.how-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: auto; padding-top: 4px; }
.how-v { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--pill); font-family: 'Barlow', sans-serif; font-size: var(--fs-caption); font-weight: 700; color: var(--muted); }
.how-v + .how-v { margin-left: 18px; position: relative; }
.how-v + .how-v::before { content: ''; position: absolute; right: 100%; width: 18px; height: 1px; background: var(--border-strong); }
.how-v.is-current { border-color: var(--pink); color: var(--accent-text); }
.how-versions p { flex: 1 1 260px; margin: 0 0 0 14px; font-size: var(--fs-small); color: var(--muted); }

/* 05: plataformas de destino. */
.how-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.how-platforms li { padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface-pill); border: 1px solid var(--border); font-size: var(--fs-small); font-weight: 600; color: var(--text); }

@media (max-width: 1023px) {
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-step-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .how-panel { padding: 20px 16px; margin-top: 24px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-tools { grid-template-columns: 1fr; }
  .how-num { font-size: 72px; }
  .how-versions p { margin: 8px 0 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .how-panel { animation: none; }
  .how-tool, .how-tool:hover { transition: none; transform: none; }
}
.history-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface-pill);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.history-jump:hover { border-color: var(--pink); }
.history-jump .is-busy { color: var(--pink-soft); }
.back-link { display: inline-block; margin: -6px 0 16px; font-size: var(--fs-ui); font-weight: 600; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--text); text-decoration: underline; }

/* Lista de aprobación: cada punto lleva a donde se comprueba (2026-09-30). */
.approve-checklist li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.check-go { font-size: var(--fs-small); }

/* Revisión del cliente (2026-10-01): pestaña "Cliente" del trabajo */
#panel-client { padding-top: 8px; }
.client-decision { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--fs-ui); }
.client-decision.is-approved { background: var(--success-tint); color: var(--success); }
.client-decision.is-changes { background: var(--warning-tint); color: var(--warning); }
.client-decision .c-text { display: block; margin-top: 6px; color: var(--text); white-space: pre-wrap; }
.client-comments { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.client-comments li { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); }
.client-comments li.is-resolved { opacity: 0.6; }
.client-comments .c-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-small); color: var(--muted); }
.client-comments .c-head strong { color: var(--text); }
.client-comments .c-actions { display: flex; gap: 12px; }
.client-comments .c-ref { display: block; margin: 8px 0 0; padding: 6px 12px; border-left: 3px solid var(--accent-text); background: var(--field); font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.client-comments .c-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
#client-actions .hint { margin: 0; flex: 1 1 260px; }
.client-older summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); }
.client-older .client-comments { margin-top: 12px; }
#share-move { margin-bottom: 8px; }

/* Nombre de la newsletter (2026-10-01) */
.job-row .name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.job-row .row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: var(--fs-ui); color: var(--muted); }
.g-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); color: var(--muted); }
.job-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 0; font-size: var(--fs-body); color: var(--text); }
.job-name #job-name-text { overflow-wrap: anywhere; }
/* Sin asunto ni nombre, el hueco vacío más el espacio entre ambos desplazaba «Ponerle nombre» 12 px (2026-10-05). */
.job-name #job-name-text:empty { display: none; }
.rename-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.rename-form input { flex: 1 1 260px; min-width: 0; }
@media (max-width: 640px) {
  .job-row .name { flex-direction: column; gap: 0; }
  .job-row .row-title { font-size: var(--fs-small); }
}

/* Editar enlaces e imágenes sin Hermes (2026-10-01) */
.te-links { margin: 12px 0; }
.te-links summary { cursor: pointer; font-weight: 600; font-size: var(--fs-small); }
.te-links ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-height: 360px; overflow: auto; }
.te-links li label { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; font-size: var(--fs-small); color: var(--muted); }
.te-links li input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-small); }
.te-links li.is-broken input { border-color: var(--error); }
.te-link-flag { color: var(--error); font-weight: 600; }
.te-links input.is-invalid { border-color: var(--error); background: var(--error-tint); }
.img-pop-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; }
.img-pop-upload .hint { margin: 0; flex: 1 1 180px; }
#img-pop-url { width: 100%; }

/* Revisión por programa de correo (2026-10-01) */
.review-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.review-share { display: flex; flex-wrap: wrap; gap: 8px; }
.report-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; margin: 0 0 12px; }
.report-link input { min-width: 0; font-size: var(--fs-small); }
.report-link .hint { grid-column: 1 / -1; margin: 0; }
.review-disclaimer { margin: 0 0 12px; }
.review-clients { display: grid; gap: 12px; }
.client-card { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); }
.client-card.check-error { border-color: var(--error); }
.client-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.client-card-head h4 { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text); }
.client-scope { font-size: var(--fs-small); color: var(--muted); }
.client-card.check-unknown .check-dot { background: var(--muted); }
.client-card .check-details { margin: 8px 0 0 20px; }
.client-card .check-details li.is-ok { color: var(--muted); }
.client-card .check-details li.is-warning { color: var(--warning); }
.client-card .check-details li.is-error { color: var(--text); }
.client-item-label { color: var(--muted); }
.client-note { margin: 8px 0 0 20px; font-size: var(--fs-small); color: var(--muted); }
.client-card > .hint { margin: 6px 0 0 20px; }

/* Ficha de marca (2026-10-01) */
#view-brand { margin-top: 40px; }
.job-brand-link { display: inline-block; margin-top: 4px; font-size: var(--fs-small); color: var(--accent-text); }
.brand-head { display: flex; align-items: center; gap: 16px; margin: 16px 0 12px; }
.brand-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.brand-head .hint { margin: 2px 0 0; }
.brand-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 64px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #ffffff; overflow: hidden; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-logo span { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 20px; color: #0e1545; }
.brand-readonly { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--border-strong); background: var(--field); font-size: var(--fs-small); color: var(--muted); }
.brand-source { margin: 0 0 12px; overflow-wrap: anywhere; }
.brand-empty { margin: 0 0 16px; color: var(--muted); }
.brand-section { padding: 16px 0; border-top: 1px solid var(--border); }
.brand-section h3 { margin: 0 0 12px; font-family: 'Barlow', sans-serif; font-size: var(--fs-ui); font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--accent-text); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; }
.swatches li { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.swatch { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); }
.swatch-label { font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; }
.swatches code { font-size: var(--fs-caption); color: var(--muted); }
.brand-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: var(--fs-small); }
.brand-dl dt { color: var(--muted); }
.brand-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.brand-section .hint, .brand-text { margin: 8px 0 0; font-size: var(--fs-small); overflow-wrap: anywhere; }
.cta-sample { display: inline-block; margin: 0 0 12px; padding: 12px 24px; background: #111111; color: #ffffff; font-weight: 600; font-size: var(--fs-ui); }
.voice-examples { margin: 12px 0 0; padding-left: 20px; font-size: var(--fs-small); color: var(--text); }
.voice-examples li { margin: 4px 0; }
.brand-newsletters { margin: 0; padding-left: 20px; font-size: var(--fs-small); }
.brand-newsletters li { margin: 4px 0; }
@media (max-width: 640px) {
  .brand-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .brand-dl dd { margin-bottom: 6px; }
}
.brand-warn { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--warning); background: var(--warning-tint); font-size: var(--fs-small); color: var(--text); overflow-wrap: anywhere; }
.brand-logo.is-dark { background: #14183f; }
.client-card .client-ok { margin: 6px 0 0 20px; }
.review-views .seg-btn { white-space: nowrap; }

/* ---------------------------------------------------------------- Componentes de feebbodigital.com (2026-10-02) */
/* Título de sección numerado: "01" grande en azul y el título en rosa encima, como "01 Growth Hacking". */
.section-title { position: relative; margin: 48px 0 20px; padding: 52px 0 0 44px; }
.section-head .section-title { margin: 0; }
/* El número va detrás y el título ocupa su sitio: así no se monta sobre lo que tenga al lado. */
/* Marca de agua (2026-10-07): el título lo cortaba por la mitad y parecía un error. Ahora es más grande, se desvanece
   hacia abajo (donde va el título) y lleva un contorno fino: se lee como fondo a propósito y el título queda limpio. */
.section-num {
  position: absolute;
  left: -6px;
  bottom: -2px;
  font-size: 112px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -3px;
  color: transparent;
  background: linear-gradient(180deg, var(--section-num) 0%, var(--section-num) 35%, transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--section-num) 70%, var(--pink));
  user-select: none;
  pointer-events: none;
}
.section-title h2 {
  position: relative;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent-text);
}
.section-head { align-items: flex-end; }

/* Lista numerada en la aprobación: el número antes de cada comprobación. */
.approve-checklist { counter-reset: check; }
.approve-checklist li { counter-increment: check; }
.approve-checklist li::before {
  content: counter(check, decimal-leading-zero);
  flex: none;
  width: 28px;
  font-size: var(--fs-body);
  color: var(--accent-text);
}

/* Desplegable numerado en la revisión "Por comprobación": número rosa, título más grande. */
.check-num { flex: none; min-width: 32px; font-size: 22px; font-weight: 700; line-height: 1; color: var(--accent-text); }
.review-list summary, .review-list .check-line { padding: 12px 0; }
.review-list .check-label { font-size: var(--fs-body); }
.review-list .check-details { margin-left: 66px; }

/* Fila de cifras: número grande y lo que cuenta debajo; cada una filtra el historial. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 20px; }
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: linear-gradient(156deg, var(--card-grad-1) 11%, var(--card-grad-2) 76%), var(--card-base);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.stat:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.stat.is-active { border-color: var(--pink); }
.stat-num { font-size: 36px; font-weight: 600; line-height: 1; }
.stat-label { font-size: var(--fs-ui); color: var(--lilac); }

@media (max-width: 640px) {
  .section-title { margin-top: 32px; padding: 24px 0 0 28px; }
  .section-num { font-size: 80px; }
  .section-title h2 { font-size: 22px; }
  .stats { gap: 8px; }
  .stat { padding: 12px; }
  .stat-num { font-size: 28px; }
  .stat-label { font-size: var(--fs-small); }
  .review-list .check-details { margin-left: 0; }
}

/* 10. Tarjeta con icono y número ("Cambiar la pieza"): icono rosa arriba a la izquierda y el número a la derecha,
   como las tarjetas de Class 5 de la web. */
.action-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.action-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.action-num { font-size: var(--fs-small); color: var(--muted); }
.action-item { padding: 16px 20px; border-radius: var(--radius); }

/* 11. Título de nivel 3 en rosa (el h3 de la web: 28 px en negrita) para los paneles que se abren. */
.panel-title { margin: 0 0 8px; font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--accent-text); }

/* 12. Sección clara dentro del tema oscuro (los bloques #F9F9FB / #EDF3FC de la web, con texto #14183F): para lo
   que se lee como un documento. Redefine los colores dentro del bloque; el rosa pasa a uno oscuro que se lee. */
.surface-light {
  --text: #14183f;
  --muted: #4f5679;
  --lilac: #2c2f6b;
  --accent-text: #9c1f9a;
  --border: #d9ddeb;
  --code-bg: rgba(20, 24, 63, 0.07);
  --pre-bg: rgba(20, 24, 63, 0.05);
  --th-bg: rgba(20, 24, 63, 0.04);
  --purple: #9b3fae;
  background: #edf3fc;
  color: var(--text);
  border-color: var(--border);
}
#notes-text.surface-light { padding: 20px 24px; border-radius: var(--radius-md); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .surface-light { background: #f9f9fb; } }
:root[data-theme="light"] .surface-light { background: #f9f9fb; }

/* 13. Menú lateral con hamburguesa (como .menu-lateral de la web): panel #14183F, enlaces numerados en Barlow
   espaciada y contacto abajo. Oscuro también en el tema claro. */
.menu-btn { flex: none; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--pill); background: none; cursor: pointer; }
.menu-btn span { display: block; height: 2px; border-radius: 1px; background: var(--text); }
.menu-btn:hover { border-color: var(--pink); }
.menu-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; } /* la web no oscurece la página: el fondo solo recoge el clic para cerrar */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(320px, 86vw);
  padding: 96px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow-y: auto;
  background: #14183f;
  color: #ffffff;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
}
.menu-close { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border: 0; background: none; color: #cf95d0; font-size: 28px; line-height: 1; cursor: pointer; }
.menu-close:hover { color: #ffffff; }
.menu-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.menu-links button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Barlow', sans-serif;
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: left;
  color: #cf95d0;
  cursor: pointer;
}
.menu-links button:hover { color: #ffffff; }
.menu-num { font-weight: 800; letter-spacing: 0; color: #fb73ff; }
/* «Nueva newsletter» se partía en dos líneas con 5 px de espaciado en 240 px (2026-10-05). */
.menu-links button { white-space: nowrap; letter-spacing: 3.5px; }
/* El tema ya está en la cabecera en pantallas anchas: en el menú, solo en móvil. */
@media (min-width: 641px) { .menu-theme-item { display: none; } }
.menu-logout-item { display: none; }
.has-session .menu-logout-item { display: list-item; }
.menu-contact { margin: auto 0 0; display: grid; gap: 20px; }
.menu-contact dt { font-size: var(--fs-lead); font-weight: 700; color: #fb73ff; }
.menu-contact dd { margin: 4px 0 0; font-size: var(--fs-ui); }
.menu-contact a { color: #ffffff; text-decoration: none; }
.menu-contact a:hover { color: #fb73ff; }

@media (max-width: 640px) {
  .panel-title { font-size: 22px; }
  .action-item { padding: 12px 8px; }
  .action-top { justify-content: center; margin-bottom: 4px; }
  .action-num { display: none; }
  #notes-text.surface-light { padding: 16px; }
}

/* 14. Raíl vertical (como .column-left de la web): años en Barlow 12 px morado, línea rosa y redes en círculo.
   Fijo a la izquierda; solo cuando sobra sitio a los lados del contenido (880 px). */
.side-rail { display: none; }
/* Desde 1600 px (auditoría 2026-10-14): con el contenido a 1440 px, a partir de 1180 el raíl se montaba encima del
   formulario y del historial. */
@media (min-width: 1600px) {
  .side-rail {
    position: fixed;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}
.rail-years { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Barlow', sans-serif; font-size: var(--fs-caption); letter-spacing: 1px; color: var(--purple); }
.rail-line { width: 1px; height: 80px; background: var(--pink); }
.rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #14183f;
  font-family: 'Barlow', sans-serif;
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--pink);
  text-decoration: none;
}
.rail-icon:hover { background: var(--pink); color: #14183f; }

/* 15. Cuadrados de icono blancos (como .integracion-icon de la web: blanco, 12 px de radio y sombra azulada): las
   miniaturas con iniciales del historial y el logo de la ficha de marca. */
.job-row .thumb-empty, .g-card .thumb-empty {
  border: none;
  border-radius: var(--radius);
  background: #ffffff;
  color: #14183f;
  box-shadow: -2px 8px 11px rgba(20, 24, 63, 0.2);
}
.brand-logo { border: none; border-radius: var(--radius); box-shadow: -2px 8px 11px rgba(20, 24, 63, 0.2); }

/* 16. Detalles decorativos: la foto del equipo en círculo junto al titular (en anchos de escritorio) y un círculo
   de trazo fino #CF95D0 de fondo, como el de la sección de consultoría de la web. */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  top: -20vh;
  right: -18vw;
  width: 70vh;
  height: 70vh;
  border: 1px solid rgba(207, 149, 208, 0.22);
  border-radius: 50%;
  pointer-events: none;
}
/* En móvil el círculo cruzaba el texto de la portada: solo a partir de tableta. */
@media (max-width: 640px) { body::after { display: none; } }

/* ---------------------------------------------------------------- Página de la newsletter en dos columnas (2026-10-05) */
/* En 1280 × 900 la vista previa empezaba a 1.106 px, debajo de la cabecera y de todas las acciones, y la página
   medía casi 4.000 px en una columna de 880. En pantallas anchas: la vista previa (y sus pestañas) a la izquierda y
   las acciones a la derecha, fijas al bajar, con su propio scroll si no caben. La página se ensancha solo ahí. */
@media (min-width: 1200px) {
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) #app { max-width: 1440px; }
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) .foot-inner { max-width: 1392px; }
  /* La cabecera, igual de ancha en todas las páginas (2026-10-05): solo se ensanchaba aquí y el logo saltaba
     unos 200 px al entrar o salir de una newsletter terminada. Como en la web, logo arriba a la izquierda. */
  .topbar { max-width: 1440px; }
  #job-result:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  .job-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .job-side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .job-side .action-cols { grid-template-columns: minmax(0, 1fr); }
  .job-side .action-group + .action-group { border-left: none; border-top: 1px solid var(--border); }
  .job-side .action-panel { margin-bottom: 16px; }
  /* Las tres formas de cambiar la pieza, en fila como en móvil (2026-10-05): en una columna, con su descripción,
     la columna medía 980 px y «Pedir cambios» y «Adaptar a móvil» quedaban ocultas bajo su propio scroll. */
  .job-side .action-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .job-side .action-item { padding: 12px 6px; text-align: center; align-content: center; }
  .job-side .action-item strong { font-size: var(--fs-small); line-height: 1.2; }
  .job-side .action-item > span:not(.action-top) { display: none; }
  .job-side .action-top { justify-content: center; margin-bottom: 4px; }
  .job-side .action-num { display: none; }
  /* Con las acciones siempre a la vista sobra la barra fija de abajo. */
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) .sticky-actions { display: none !important; }
  body.has-sticky:has(#view-job:not([hidden]) #job-result:not([hidden])) .foot { padding-bottom: 48px; }
  /* La página ocupa ya los laterales: el raíl se montaba sobre la tarjeta. */
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) .side-rail { display: none; }
}

/* ---------------------------------------------------------------- Retoques de la revisión (2026-10-05) */
/* 5. En móvil el tema pasa al menú lateral ("04 Tema"): con la hamburguesa, la píldora de estado se cortaba. */
@media (max-width: 640px) { .topbar .theme-btn { display: none; } }

/* 7. Siluetas de carga: bloques con la forma de lo que va a llegar y un brillo que pasa (quieto si se pide
   menos movimiento). */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel-2) 0%, var(--border) 50%, var(--panel-2) 100%) 0 0 / 200% 100%;
  animation: skeleton-shine 1.4s ease-in-out infinite;
}
@keyframes skeleton-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skeleton-list { margin-top: 56px; display: grid; gap: 12px; }
.skeleton-title { width: 220px; height: 28px; margin-bottom: 8px; }
.skeleton-row { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.skeleton-thumb { flex: none; width: 48px; height: 64px; border-radius: var(--radius); }
.skeleton-lines { flex: 1; display: grid; gap: 12px; }
.skeleton-line { height: 14px; width: 70%; }
.skeleton-line.is-short { width: 40%; }
.skeleton-job { display: grid; gap: 12px; margin-bottom: 24px; }
.skeleton-preview { height: 420px; border-radius: var(--radius); margin-top: 12px; }
.skeleton-block { height: 160px; border-radius: var(--radius); margin-top: 8px; }
/* Mientras sale la silueta, nada del trabajo anterior ni botones sin datos ("Copiar enlace", el registro). */
#view-job:has(#job-skeleton:not([hidden])) .job-head,
#view-job:has(#job-skeleton:not([hidden])) #log-box,
#view-job:has(#job-skeleton:not([hidden])) .job-actions { display: none; }

/* ---------------------------------------------------------------- Newsletter en el móvil (2026-10-05) */
/* En un iPhone la vista previa empezaba a 1.439 px y se veía al 67 % (márgenes de la tarjeta y marco de teléfono).
   Ahora va primero, a todo el ancho de la pantalla y sin marco: al 100 %. Las acciones quedan debajo y la barra
   fija de abajo (Descargar, Copiar, Cambios, Más) las tiene a mano mientras no se ven. */
#sticky-more { display: none; }
/* Tableta y portátil pequeño (641-1199 px; a 1024 × 768 la vista previa empezaba a 1.106 px): mismo orden que en el
   móvil, vista previa primero y acciones debajo con la barra fija. Desde 1200 px, dos columnas. */
@media (max-width: 1199px) {
  #job-result:not([hidden]) { display: flex; flex-direction: column; }
  .job-main { order: 1; }
  .job-side { order: 2; margin-top: 24px; }
  .sticky-actions #sticky-top { display: none; }
  .sticky-actions #sticky-more { display: inline-flex; flex: 0 0 auto; }
}
@media (max-width: 640px) {
  /* 16 px de #app + 20 px de relleno y 1 px de borde de la tarjeta: el escenario llega a los bordes de la pantalla. */
  .job-main .preview-stage { margin: 0 -37px; padding: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .preview-device.is-mobile { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .preview-device.is-mobile #preview-frame, .preview-device.is-mobile #preview-frame-before { border-radius: 0; }
}

/* ---------------------------------------------------------------- Zonas táctiles de 24 px como mínimo (2026-10-05) */
.how-btn { display: inline-flex; align-items: center; min-height: 32px; }
.foot a:not(.btn) { display: inline-block; padding: 4px 0; }
.choice input { width: 18px; height: 18px; flex: none; }

/* Logo de la marca en las miniaturas sin imagen (2026-10-05): dentro del cuadrado blanco, con aire; si el logo es la
   versión blanca, el cuadrado pasa a azul noche (#14183F, como los iconos redondos del raíl). */
.thumb-logo { padding: 8px; }
.g-card .thumb-logo { padding: 24px; }
.job-row .thumb-logo img, .g-card .thumb-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.job-row .thumb-logo, .g-card .thumb-logo { display: flex; align-items: center; justify-content: center; }
.thumb-logo.is-on-dark { background: #14183f; }
.toggle { min-height: 28px; }

/* Fases del trabajo como pasos numerados (2026-10-05): número en rosa como las listas de feebbodigital.com; lo hecho
   con ✓, la fase actual resaltada y lo que falta en gris. En móvil, uno debajo de otro. */
/* Todos los pasos en una fila (2026-10-08): con auto-fit, el 05 caía solo en una segunda fila. */
.progress-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.progress-steps li { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.progress-steps .step-num { font-size: var(--fs-body); font-weight: 600; color: var(--muted); }
.progress-steps li.is-done .step-num { color: var(--accent-text); }
.progress-steps li.is-done .step-num::after { content: ' ✓'; content: ' ✓' / ''; color: var(--success); }
.progress-steps li.is-current { border-color: var(--pink); color: var(--text); background: rgba(251, 115, 255, 0.07); }
.progress-steps li.is-current .step-num { color: var(--accent-text); }
.progress-steps li.is-current .step-label { font-weight: 600; }
@media (max-width: 640px) {
  .progress-steps { grid-auto-flow: row; grid-template-columns: 1fr; }
  .progress-steps li { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px; }
}

/* Sugerencias del campo «Marca» (2026-10-05): logo de la ficha en un cuadrado blanco (azul noche si es la versión
   blanca) o las iniciales; las marcas que solo están en el historial lo dicen. */
.brand-combo { position: relative; }
.brand-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 12px 32px var(--shadow-strong);
}
.brand-suggest li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.brand-suggest li:hover, .brand-suggest li[aria-selected="true"] { background: var(--selected-bg); }
.bs-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 32px; padding: 4px; border-radius: var(--radius-sm); background: #ffffff; box-shadow: -2px 4px 8px rgba(20, 24, 63, 0.2); }
.bs-logo.is-on-dark { background: #14183f; }
.bs-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.bs-logo.is-initials { font-family: 'Barlow', sans-serif; font-size: var(--fs-caption); font-weight: 700; color: #14183f; }
.bs-name { font-weight: 600; }
.bs-note { margin-left: auto; font-size: var(--fs-caption); color: var(--muted); }
.brand-match .link-btn { font-size: inherit; }

/* Brief por revisar con formato (2026-10-05): documento en bloque claro, como las notas de Hermes. */
.review-brief-view { margin: 12px 0; padding: 24px 28px; border-radius: var(--radius-md); max-height: 640px; overflow-y: auto; }
@media (max-width: 640px) { .review-brief-view { padding: 16px; } }

/* «Ahora mismo» (2026-10-05): tarjetas con el degradado de la web; logo de la marca en cuadrado blanco. */
.now-strip { margin-top: 28px; }
.now-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 24px; margin-top: 16px; }
.now-subtitle { margin: 0 0 8px; font-size: var(--fs-ui); font-weight: 600; color: var(--lilac); }
.now-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.now-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(156deg, var(--card-grad-1) 11%, var(--card-grad-2) 76%), var(--card-base);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.now-link:hover { border-color: var(--pink); transform: translateY(-1px); }
.now-thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 6px; border-radius: var(--radius-sm); background: #ffffff; color: #14183f; font-family: 'Barlow', sans-serif; font-weight: 700; box-shadow: -2px 6px 10px rgba(20, 24, 63, 0.2); }
.now-thumb.is-on-dark { background: #14183f; }
.now-thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.now-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.now-body strong { font-size: var(--fs-ui); }
.now-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); color: var(--lilac); }
.now-line { font-size: var(--fs-small); color: var(--muted); }
.now-track { display: block; height: 4px; margin-top: 4px; border-radius: var(--pill); background: var(--field); overflow: hidden; }
.now-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); }
.now-action { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); white-space: nowrap; }
#now-waiting .now-link { border-color: var(--warning-line); }
@media (max-width: 640px) {
  .now-cols { grid-template-columns: 1fr; }
  .now-action { display: none; }
}

/* Decisión del cliente atendida (2026-10-05): botón debajo de la nota; atendida, en gris con «Deshacer». */
.client-decision .decision-resolve { display: flex; width: fit-content; margin-top: 12px; }
.client-decision .decision-resolved { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.client-decision.is-resolved { opacity: 0.75; }

/* Enlace directo (2026-10-05): sin portada hasta que app.js decide la vista; mientras, la silueta. */
.boot-skeleton { display: none; margin-top: 40px; }
html.deep-link .boot-skeleton { display: grid; }
html.deep-link .hero, html.deep-link #view-form { display: none; }

/* Error al cargar el historial (2026-10-05). */
.history-error { margin-top: 56px; }

/* ---------------------------------------------------------------- Movimiento y cabecera de feebbodigital.com (2026-10-05) */
/* 1. Logo animado (Lottie oficial, 117 × 47) en el sitio de la imagen; en tema claro, oscurecido como la imagen. */
.brand-anim { display: block; width: 99px; height: 40px; }
.brand-anim svg { display: block; }
/* «DIGITAL» entra (y sale) deslizándose desde ~4 px a la izquierda de la F y asomaba por fuera del logo
   (2026-10-05): se recorta todo lo que quede a la izquierda del borde de la F (x = 9 de 117 en el Lottie),
   así parece salir de detrás de esa línea. */
.brand-anim svg { clip-path: inset(0 0 0 7.6%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand-anim { filter: brightness(0) opacity(0.88); } }
:root[data-theme="light"] .brand-anim { filter: brightness(0) opacity(0.88); }

/* 2. La × del menú es la hamburguesa animada de la web: se ve en cuanto carga; mientras, la × de texto. */
.menu-close .menu-anim { display: block; width: 33px; height: 33px; }
.menu-close.has-anim .menu-close-x { display: none; }
.menu-close { display: flex; align-items: center; justify-content: center; }

/* 3. Cabecera fija (la .navbar de la web): transparente arriba; al bajar, fondo translúcido de lado a lado. */
body { overflow-x: clip; }
html { scroll-padding-top: 80px; }
.topbar { position: sticky; top: 0; z-index: 50; padding-top: 16px; padding-bottom: 12px; }
.topbar::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: transparent;
  transition: background 0.2s, box-shadow 0.2s;
}
.topbar.is-scrolled::before { background: var(--topbar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--border); }
:root { --topbar-bg: rgba(5, 12, 42, 0.86); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --topbar-bg: rgba(244, 245, 251, 0.9); } }
:root[data-theme="light"] { --topbar-bg: rgba(244, 245, 251, 0.9); }

/* 5. Menú: entra desde la derecha y sus enlaces aparecen uno tras otro, como en la web.
   Desde 2026-10-13 la posición la lleva un muelle (app.js, menuSpring) y no una animación de duración fija: se puede
   coger con el dedo, soltar con impulso y volver a abrir a medio cerrar sin saltos. Los enlaces ya no siguen un reloj:
   siguen al panel (--menu-p, 0 abierto y 1 cerrado), cada uno un poco más retrasado que el anterior.
   El panel mide 120 px más de lo que se ve, escondidos a la derecha: al tirar de él hacia dentro cede sin dejar hueco. */
.side-menu { --menu-p: 0; right: -120px; width: calc(min(320px, 86vw) + 120px); padding-right: 160px; touch-action: pan-y; will-change: transform; }
.menu-close { right: 144px; }
.side-menu .menu-links li, .side-menu .menu-contact {
  opacity: calc(1 - var(--menu-p) * (1.4 + var(--n, 0) * 0.5));
  transform: translateX(calc(var(--menu-p) * (16px + var(--n, 0) * 14px)));
}
.side-menu .menu-links li:nth-child(2) { --n: 1; }
.side-menu .menu-links li:nth-child(3) { --n: 2; }
.side-menu .menu-links li:nth-child(4) { --n: 3; }
.side-menu .menu-links li:nth-child(5) { --n: 4; }
.side-menu .menu-links li:nth-child(6) { --n: 5; }
.side-menu .menu-contact { --n: 4; }

/* 6. Entradas al hacer scroll (solo portada: títulos, cifras, «Ahora mismo» y la foto). La clase la pone app.js. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .side-menu .menu-links li, .side-menu .menu-contact { transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- revisión de la interfaz (2026-10-05, tarde) ---------- */
/* «Exportar para» se estiraba hasta su opción más larga y sobresalía 13 px de la columna de acciones. */
.action-group .export-field { min-width: 0; max-width: 100%; }
.action-group .export-field select { flex: 1 1 0; min-width: 0; max-width: 100%; }
/* Píldora de estado: en móvil sin «Hermes», que la cortaba («Hermes desconecta…»). */
.status-pill .lbl-short { display: none; }
@media (max-width: 640px) {
  .status-pill .lbl-long { display: none; }
  .status-pill .lbl-short { display: inline; }
}
/* Atajos de teclado: no sirven en una pantalla táctil. */
@media (hover: none), (max-width: 640px) { .shortcuts-link { display: none; } }
/* Pestaña Cliente sin nada todavía: aviso con el siguiente paso en lugar de una línea gris. */
.client-empty { display: grid; gap: 8px; justify-items: start; padding: 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--field); }
.client-empty[hidden] { display: none; }
.client-empty p { margin: 0; }
.client-empty-title { font-weight: 600; color: var(--text); }
.client-empty .btn { margin-top: 4px; }
/* Error en una línea en la fila del historial; la explicación completa, en la ficha. */
.job-row .err a { color: inherit; font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- Página «Marcas» (2026-10-05) */
.brands-head h2 { margin: 16px 0 4px; font-size: var(--fs-title); font-weight: 600; }
.brands-head h2:focus { outline: none; }
.brands-head .hint { margin: 0 0 16px; }
.brands-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.brands-tools input[type="search"] { flex: 1 1 240px; }
.brands-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brand-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); color: var(--text); text-decoration: none; }
.brand-row:hover { border-color: var(--border-strong); background: var(--surface-row-hover); }
.brand-row .bs-logo { width: 64px; height: 44px; padding: 6px; }
.brand-row-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.brand-row-body strong { font-size: var(--fs-ui); font-weight: 600; }
.brand-row-body .meta { font-size: var(--fs-small); color: var(--muted); }
.brand-warns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.brand-chip-warn { padding: 2px 8px; border-radius: var(--pill); background: var(--warning-tint); color: var(--warning); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.brand-head { flex-wrap: wrap; }
.brands-all-link { margin-left: auto; align-self: flex-start; font-size: var(--fs-small); color: var(--accent-text); }
@media (max-width: 640px) {
  .brand-row { flex-wrap: wrap; gap: 8px 12px; }
  .brand-warns { justify-content: flex-start; width: 100%; padding-left: 76px; }
}

/* Menú «⋯» del pie de la ficha (2026-10-05): al final de la tarjeta, se abre hacia arriba. */
.job-more { align-self: center; }
.job-more > summary { display: flex; align-items: center; justify-content: center; min-width: 48px; letter-spacing: 1px; }
.job-more .row-menu-pop { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 260px; }
.job-more .menu-item small { margin-top: 2px; }

/* Avisos de asunto y preheader (2026-10-05). */
.meta-warnings { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 6px; }
.meta-warnings li { padding: 12px 16px; border-radius: var(--radius-sm); font-size: var(--fs-small); line-height: 1.45; }
.meta-warnings li.is-warning { border: 1px solid var(--warning-line); background: var(--warning-subtle); color: var(--text); }
.meta-warnings li.is-warning::before { content: '! '; font-weight: 800; color: var(--warning); }
.meta-warnings li.is-info { border: 1px solid var(--border); color: var(--muted); }

/* Enviar una prueba (2026-10-05): plegado para no alargar la columna de acciones. */
.test-email > summary { cursor: pointer; list-style: none; }
.test-email > summary::-webkit-details-marker { display: none; }
.test-email > summary::before { content: '▸ '; color: var(--accent-text); }
.test-email[open] > summary::before { content: '▾ '; }
.test-email[open] > summary { margin-bottom: 8px; }

/* Web oficial de una marca nueva (2026-10-05): para medir su identidad antes de empezar. */
.brand-url-field { display: block; margin: 8px 0 20px; }
.brand-url-field .hint { display: block; margin-bottom: 4px; }
.brand-url-field input { width: 100%; }

/* Tiempo por fase (2026-10-05). */
.timings-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.timings-list li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 12px; font-size: var(--fs-small); }
.timings-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.timings-bar span { display: block; height: 100%; background: var(--pink); border-radius: 4px; }
/* Desglose de la primera versión (2026-10-15): subfilas sangradas y más tenues. */
.timings-list li.is-part .timings-label { padding-left: 16px; color: var(--muted); }
.timings-list li.is-part .timings-bar span { opacity: 0.6; }
.timings-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
  .timings-list li { grid-template-columns: 1fr auto; }
  .timings-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* «Pedir cambios» con un cambio solo de texto (2026-10-05): se propone «Editar texto». */
.form-hint { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid var(--pink); background: var(--surface-row); font-size: var(--fs-small); }

/* ---------- cabecera de producto (2026-10-06, 2.ª versión) ---------- */
/* Texto a la izquierda y, a la derecha, las últimas piezas de Hermes en abanico: se ve qué hace el programa. Debajo,
   los cuatro pasos con los números de las secciones unidos por la línea rosa del raíl. */
.hero { padding: 48px 0 32px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: center; }
/* En pantallas anchas el escaparate sale de la columna de 880 px por la derecha: el texto conserva su ancho. */
@media (min-width: 1180px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 440px; margin-right: -160px; } }
.hero-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 20px; }
.hero-product { font-family: 'Barlow', sans-serif; font-size: var(--fs-ui); font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--accent-text); }
.hero-by { font-size: var(--fs-small); color: var(--muted); }
.hero-by::before { content: '·'; margin-right: 12px; color: var(--muted); }
.hero h1 { font-size: clamp(32px, 4.6vw, 48px); }
.hero .lead { max-width: 520px; }
.hero-links { margin-top: 28px; }
.hero-cta { text-decoration: none; }

.hero-showcase {
  position: relative; height: 320px;
  /* Movimiento más fluido (2026-10-07): curva larga que frena suave para abrir y cerrar, y un leve rebote al levantar. */
  --fan-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lift-ease: var(--spring);
}
.show-card {
  position: absolute;
  top: 34px;
  left: 50%;
  display: block;
  width: 165px;
  height: 220px;
  margin-left: -82px;
  transform-origin: 50% 120%;
  transform: translateX(calc(var(--i, 0) * 50px)) translateY(calc(var(--i, 0) * var(--i, 0) * 6px)) rotate(calc(var(--i, 0) * 6deg));
  /* Las de fuera salen un poco después (--d); la capa (z-index) baja poco a poco al soltar, para que la carta que
     se encoge no caiga detrás de golpe. */
  transition: transform 0.6s var(--fan-ease) var(--d, 0ms), opacity 0.45s ease, z-index 0.45s linear;
  will-change: transform;
}
/* La cara: lo que se ve y lo que crece. La sombra fuerte va en una capa aparte que solo cambia de opacidad (animar
   box-shadow repinta en cada fotograma). */
.show-face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
/* Las maquetas (sin piezas todavía) son la carta y la cara a la vez. */
.show-face, .show-mock {
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Sin ratón en la cara: la zona que responde es la carta en su sitio del abanico. Así, al pasar de una carta a la de al
   lado, la grande no la tapa y el abanico se recorre seguido. */
.show-face { transform-origin: 50% 120%; transition: transform 0.55s var(--lift-ease); pointer-events: none; }
.show-face::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--pink);
  opacity: 0; transition: opacity 0.4s ease;
}
.show-mock { overflow: hidden; }
.show-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: inherit; }
/* La ventana de la carta: recorta la tira larga que la carta señalada recorre hacia abajo (app.js, fanLoadLong). La
   etiqueta de marca queda fuera, debajo, y por eso el recorte no va en la cara. */
.show-view { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; }
.show-card img.show-long { position: absolute; left: 0; top: 0; height: auto; border-radius: 0; opacity: 0; will-change: transform; }
.show-card img.show-long.is-ready { opacity: 1; }
.show-card:nth-child(1) { --i: -2; --d: 40ms; z-index: 1; }
.show-card:nth-child(2) { --i: -1; --d: 20ms; z-index: 2; }
.show-card:nth-child(3) { --i: 0; z-index: 3; }
.show-card:nth-child(4) { --i: 1; --d: 20ms; z-index: 2; }
.show-card:nth-child(5) { --i: 2; --d: 40ms; z-index: 1; }
/* Con tres, centradas. */
.hero-showcase:has(> .show-card:nth-child(3):last-child) .show-card:nth-child(1) { --i: -1; --d: 20ms; }
.hero-showcase:has(> .show-card:nth-child(3):last-child) .show-card:nth-child(2) { --i: 0; --d: 0ms; z-index: 3; }
.hero-showcase:has(> .show-card:nth-child(3):last-child) .show-card:nth-child(3) { --i: 1; --d: 20ms; z-index: 2; }
.hero-showcase:hover .show-card { transform: translateX(calc(var(--i, 0) * 58px)) translateY(calc(var(--i, 0) * var(--i, 0) * 8px - 6px)) rotate(calc(var(--i, 0) * 8deg)); }
/* La carta señalada se endereza y su cara se hace grande; las demás se apagan. Con .hero-showcase delante: la regla
   del abanico abierto pesa más. La capa sube al instante (z-index sin transición) y baja poco a poco al soltar. */
.hero-showcase a.show-card:hover, .hero-showcase a.show-card:focus-visible {
  z-index: 7;
  transform: translateX(calc(var(--i, 0) * 58px)) translateY(0) rotate(0deg);
  transition: transform 0.55s var(--lift-ease), opacity 0.45s ease, z-index 0s;
}
a.show-card:hover .show-face, a.show-card:focus-visible .show-face { transform: translateY(64px) scale(1.4); }
a.show-card:hover .show-face::after, a.show-card:focus-visible .show-face::after { opacity: 1; }
/* Las demás se apagan con un velo oscuro, no con transparencia (2026-10-13): como se solapan, transparentes se veía
   una carta a través de otra y el fondo a través de todas. */
.show-face::before, .show-mock::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: rgba(6, 10, 36, 0.58); opacity: 0; transition: opacity 0.45s ease;
}
.hero-showcase:has(a.show-card:hover) .show-card:not(:hover) .show-face::before, .hero-showcase:has(a.show-card:focus-visible) .show-card:not(:focus-visible) .show-face::before { opacity: 1; }
.show-card .show-brand {
  /* Debajo de la carta y centrada (2026-10-13): dentro, abajo a la izquierda, tapaba el botón de la pieza. */
  position: absolute; z-index: 2; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); max-width: 100%;
  padding: 2px 8px; border-radius: var(--pill);
  background: rgba(8, 17, 54, 0.82); color: #edf3fc;
  font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.25s ease 0.1s;
}
a.show-card:hover .show-brand, a.show-card:focus-visible .show-brand { opacity: 1; }
/* Maqueta mientras no hay miniaturas: cabecera de color, imagen, titular y dos líneas. */
.show-mock { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f4f5fb; }
.show-mock i { display: block; height: 14px; width: 40%; border-radius: 3px; background: #0e1545; }
.show-mock b { display: block; flex: 0 0 96px; border-radius: 6px; background: linear-gradient(135deg, #1a2168, #b255c3 70%, #fb73ff); }
.show-mock em { display: block; height: 8px; border-radius: 4px; background: #c9cde3; }
.show-mock em:last-child { width: 70%; }

.hero-steps { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 40px 0 0; padding: 0; list-style: none; }
.hero-steps li { display: flex; align-items: center; gap: 8px; font-family: 'Barlow', sans-serif; font-size: var(--fs-ui); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text); }
.hero-steps li + li::before { content: ''; width: 40px; height: 1px; margin: 0 16px 0 6px; background: var(--pink); }
.step-num { font-size: 28px; font-weight: 800; letter-spacing: 0; color: var(--section-num); line-height: 1; }
#view-form, #history { scroll-margin-top: 88px; }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-showcase { height: 210px; order: 2; }
  .show-card { width: 120px; height: 160px; margin-left: -60px; top: 20px; transform: translateX(calc(var(--i, 0) * 26px)) rotate(calc(var(--i, 0) * 6deg)); }
  .hero-showcase:hover .show-card { transform: translateX(calc(var(--i, 0) * 26px)) rotate(calc(var(--i, 0) * 6deg)); }
  .hero { padding-top: 32px; }
  .hero-by::before { content: none; }
  .hero-kicker { flex-direction: column; gap: 4px; }
  .hero-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 24px; }
  .hero-steps li + li::before { content: none; }
  .hero-steps li { letter-spacing: 2px; font-size: var(--fs-small); gap: 8px; }
  .step-num { font-size: 20px; }
}
/* Con el abanico que flota (startFan en app.js) el movimiento lo lleva JavaScript: fuera las transiciones de posición. */
.hero-showcase.is-live .show-card, .hero-showcase.is-live a.show-card:hover, .hero-showcase.is-live a.show-card:focus-visible { transition: opacity 0.45s ease; will-change: transform; }
.hero-showcase.is-live .show-face { transition: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .show-card, .show-face, .show-face::after { transition: none; } }

/* ---------- calidad (2026-10-06, punto 7) ---------- */
.art-bar > span { background: linear-gradient(90deg, var(--purple), var(--pink)); }
.art-bar.is-low > span { background: var(--error); }
.art-notes-title { margin: 16px 0 4px; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.art-notes { margin: 0; padding-left: 20px; font-size: var(--fs-small); color: var(--muted); display: grid; gap: 4px; }
.art-spark { display: block; max-width: 100%; height: auto; margin: 8px 0; color: var(--pink); }
.art-spark circle { fill: var(--bg); stroke: currentColor; stroke-width: 2; }
.stat.stat-static { cursor: default; }
.stat.stat-static:hover { transform: none; border-color: var(--border); }

/* ---------- pasos en vivo y vista previa al pasar (2026-10-06) ---------- */
.hero-steps li { transition: color 0.4s ease; }
.hero-steps .step-num { transition: color 0.4s ease, text-shadow 0.4s ease; }
.hero-steps li + li::before { background: var(--border-strong); transition: background 0.5s ease; position: relative; }
/* Con una pieza en curso: lo hecho y el paso actual en rosa; lo que falta, apagado. */
.hero-steps.is-live li { color: var(--muted); }
.hero-steps.is-live li.is-done, .hero-steps.is-live li.is-current { color: var(--text); }
.hero-steps.is-live li.is-done .step-num, .hero-steps.is-live li.is-current .step-num { color: var(--pink); }
.hero-steps.is-live li.is-done + li::before, .hero-steps.is-live li.is-current::before { background: var(--pink); }
.hero-steps.is-live li.is-current .step-num { animation: step-glow 1.6s ease-in-out infinite; }
@keyframes step-glow { 50% { text-shadow: 0 0 14px rgba(251, 115, 255, 0.75); } }
/* Pasos vivos (2026-10-07, D): la línea hacia el paso siguiente se llena según lo que lleva el actual (--fill, 0-1, lo
   pone app.js) y una chispa la recorre hasta donde va. */
@property --fill { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero-steps.is-live { transition: --fill 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-steps.is-live li.is-current + li::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent) no-repeat,
    linear-gradient(90deg, var(--pink) 0 calc(var(--fill) * 100%), var(--border-strong) calc(var(--fill) * 100%) 100%);
  background-size: 12px 100%, 100% 100%;
  background-position: -12px 0, 0 0;
  box-shadow: 0 0 6px rgba(251, 115, 255, 0.45);
  animation: step-spark 2.2s ease-in-out infinite;
}
@keyframes step-spark { 0% { background-position: -12px 0, 0 0; } 70%, 100% { background-position: calc(var(--fill) * 40px - 6px) 0, 0 0; } }
/* Sin nada en curso: un degradado rosa recorre la fila de izquierda a derecha, por los números y las líneas (2026-10-06,
   pedido del usuario: antes cada paso se encendía entero). Cada elemento empieza su paso con un retraso proporcional a
   su posición (--pn y --pl, en 0-1, los pone app.js), así que se ve como una sola luz que se desliza. */
.hero-steps.is-idle .step-num {
  color: transparent;
  background: linear-gradient(90deg, var(--section-num) 0%, var(--section-num) 38%, var(--pink) 50%, var(--section-num) 62%, var(--section-num) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: steps-sweep 6s linear infinite;
  animation-delay: calc(var(--pn, 0) * 3.6s);
}
.hero-steps.is-idle li + li::before {
  background: linear-gradient(90deg, var(--border-strong) 0%, var(--border-strong) 38%, var(--pink) 50%, var(--border-strong) 62%, var(--border-strong) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: steps-sweep 6s linear infinite;
  animation-delay: calc(var(--pl, 0) * 3.6s);
}
@keyframes steps-sweep { 0% { background-position: 100% 0; } 25%, 100% { background-position: 0% 0; } }
.hero-steps-live { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: var(--fs-small); color: var(--muted); }
.hero-steps-live a { color: var(--text); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgba(251, 115, 255, 0.6); animation: live-dot 1.6s ease-out infinite; }
@keyframes live-dot { 70% { box-shadow: 0 0 0 8px rgba(251, 115, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 115, 255, 0); } }

.thumb-peek {
  position: fixed;
  z-index: 80;
  width: 180px;
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--pink);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-12px) rotate(-6deg) scale(0.85);
  transform-origin: 0% 50%;
  transition: opacity 0.18s ease, transform 0.3s var(--spring);
}
.thumb-peek.is-on { opacity: 1; transform: rotate(-3deg) scale(1); }
.thumb-peek img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

@media (prefers-reduced-motion: reduce) {
  .hero-steps .step-num, .live-dot, .hero-steps li + li::before { animation: none !important; }
  .thumb-peek { transition: opacity 0.1s; transform: none; }
  .thumb-peek.is-on { transform: none; }
}

/* ---------- animaciones (2026-10-06): vuelo, aterrizaje, cascada y píldoras ---------- */
.fly-card { position: fixed; z-index: 120; width: 110px; height: 146px; border-radius: 8px; pointer-events: none; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--pink); }
.fly-card b { flex-basis: 52px !important; }
#view-job.is-landing { animation: job-land 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes job-land { from { opacity: 0; transform: translateY(-14px) scale(0.985); } to { opacity: 1; transform: none; } }

#history-list > li.just-done { animation: just-done 2.4s ease both; border-radius: var(--radius); }
@keyframes just-done {
  0% { box-shadow: 0 0 0 0 rgba(251, 115, 255, 0); }
  15% { box-shadow: 0 0 0 2px var(--pink), 0 0 28px rgba(251, 115, 255, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(251, 115, 255, 0); }
}
#history-list > li.just-done .thumb img { animation: thumb-land 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.3) both; }
@keyframes thumb-land { from { transform: translateY(-16px) rotate(-8deg) scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
.show-card.is-new { animation: card-drop 1s cubic-bezier(0.2, 0.8, 0.2, 1.25) both; }
@keyframes card-drop { from { opacity: 0; translate: 0 -60px; scale: 1.15; } to { opacity: 1; translate: 0 0; scale: 1; } }

.is-cascade > * { animation: deal-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.is-gallery.is-cascade > * { animation-name: deal-in-card; }
@keyframes deal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes deal-in-card { from { opacity: 0; transform: translateY(24px) rotate(-4deg) scale(0.94); } to { opacity: 1; transform: none; } }

.segmented.has-pill { position: relative; }
.segmented.has-pill > :not(.seg-pill) { position: relative; z-index: 1; }
.seg-pill {
  position: absolute;
  z-index: 0;
  opacity: 0;
  border-radius: var(--pill);
  background: var(--selected-bg);
  box-shadow: 0 1px 2px var(--shadow);
  pointer-events: none;
  transition: left 0.42s var(--spring), width 0.42s var(--spring), top 0.42s var(--spring), height 0.42s var(--spring);
}
.segmented.has-pill input:checked + span, .segmented.has-pill .seg-btn[aria-pressed="true"] { background: transparent; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  #view-job.is-landing, #history-list > li.just-done, #history-list > li.just-done .thumb img, .show-card.is-new, .is-cascade > * { animation: none !important; }
  .seg-pill { transition: none; }
}

/* ---------- fondo de newsletters flotando e interacciones (2026-10-06) ---------- */
.bg-float { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Tres capas de profundidad (2026-10-14): cada una con su parallax (--py, desde app.js). */
.bg-layer { position: absolute; inset: 0; transform: translateY(var(--py, 0px)); }
/* Fondo: desenfocada y apagada. El desenfoque va en cada tarjeta (capa propia) para no repintar la pantalla entera. */
.bg-layer-0 .bg-card { opacity: 0.28; filter: blur(2.5px); will-change: transform; }
/* Delante: más presente y con el borde algo más marcado. */
.bg-layer-2 .bg-card { opacity: 0.62; border-color: rgba(198, 187, 255, 0.22); }
.bg-card {
  position: absolute;
  left: var(--x);
  top: 100%;
  width: calc(90px * var(--s));
  height: calc(120px * var(--s));
  padding: calc(8px * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--s));
  border: 1px solid rgba(198, 187, 255, 0.16);
  border-radius: 8px;
  background: rgba(198, 187, 255, 0.025);
  opacity: 0.5;
  animation: bg-rise var(--d) linear infinite;
  animation-delay: var(--dl);
}
.bg-card i { display: block; height: 6%; width: 40%; border-radius: 2px; background: rgba(198, 187, 255, 0.14); }
.bg-card b { display: block; flex: 0 0 40%; border-radius: 4px; background: linear-gradient(135deg, rgba(178, 85, 195, 0.12), rgba(251, 115, 255, 0.08)); }
.bg-card em { display: block; height: 4%; border-radius: 2px; background: rgba(198, 187, 255, 0.1); }
.bg-card em:last-child { width: 70%; }
@keyframes bg-rise {
  from { transform: translateY(0) rotate(var(--r)); }
  to { transform: translateY(calc(-100vh - 160px)) rotate(calc(var(--r) * -1)); }
}
:root[data-theme="light"] .bg-card { border-color: rgba(70, 58, 140, 0.14); background: rgba(70, 58, 140, 0.03); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bg-card { border-color: rgba(70, 58, 140, 0.14); background: rgba(70, 58, 140, 0.03); } }
:root[data-theme="light"] .bg-layer-2 .bg-card { border-color: rgba(70, 58, 140, 0.2); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bg-layer-2 .bg-card { border-color: rgba(70, 58, 140, 0.2); } }

/* Tarjetas que se inclinan hacia el ratón, con brillo. */
#brief-form.card, .now-link, .g-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.now-link.is-tilting, .g-card.is-tilting { position: relative; }
.now-link.is-tilting, .g-card.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); }
.now-link.is-tilting::after, .g-card.is-tilting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(251, 115, 255, 0.16), transparent 60%);
}

/* Botones magnéticos y onda al pulsar. */
.has-ripple { position: relative; overflow: hidden; }
.click-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(251, 115, 255, 0.55);
  pointer-events: none;
  animation: click-ripple 0.6s ease-out forwards;
}
@keyframes click-ripple { to { transform: scale(18); opacity: 0; } }

/* Filas del historial que se levantan: sombra, borde en degradado rosa y destello de la etiqueta de estado. */
.job-row { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.job-row::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--purple), var(--pink), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.job-row:hover { transform: translateY(-3px); box-shadow: 0 14px 30px var(--shadow-strong); }
.job-row:hover::before { opacity: 1; }
.job-row .status-badge { position: relative; overflow: hidden; }
.job-row:hover .status-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  animation: badge-shine 0.8s ease forwards;
}
@keyframes badge-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Números de sección con parallax y título que se desliza al aparecer. */
/* Sin transición (2026-10-14): lo que va ligado al scroll se mueve con él, no 150 ms por detrás. */
.section-num { transform: translateY(var(--px, 0px)); }
.section-title.reveal h2 { transform: translateX(-16px); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s; }
.section-title.reveal.is-in h2 { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bg-float { display: none; }
  .is-tilting, .job-row:hover { transform: none !important; translate: none !important; }
  .job-row:hover .status-badge::after, .click-ripple { animation: none; display: none; }
  .section-num { transform: none; }
}

/* ---------- más animaciones (2026-10-06, 3.ª tanda) ---------- */
/* Pieza en curso: un brillo recorre su barra; la etiqueta gira como una carta al pasar a «Lista». */
.now-track > span, .job-row .mini-track > div { position: relative; overflow: hidden; }
.now-track > span::after, .job-row .mini-track > div::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: bar-shine 1.8s ease-in-out infinite;
}
@keyframes bar-shine { 60%, 100% { transform: translateX(100%); } }
.status-badge.flip-in { animation: badge-flip 0.5s var(--spring) both; }
@keyframes badge-flip { from { transform: perspective(300px) rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Raíl lateral de progreso: pista tenue con relleno rosa que crece al bajar; debajo, la sección actual. */
.rail-line { position: relative; background: var(--border-strong); height: 120px; }
.rail-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--purple), var(--pink)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.rail-sec { min-height: 18px; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 800; color: var(--pink); }
.rail-sec.is-new { animation: rail-sec 0.4s var(--spring) both; }
@keyframes rail-sec { from { opacity: 0; transform: translateY(8px) scale(0.6); } to { opacity: 1; transform: none; } }

/* Formulario vivo: el campo enfocado lleva un borde en degradado rosa que gira despacio; las casillas se marcan con
   un pequeño salto. */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#brief-form input:not([type="radio"]):not([type="checkbox"]):focus,
#brief-form textarea:focus {
  border-color: transparent;
  background:
    linear-gradient(var(--field), var(--field)) padding-box,
    conic-gradient(from var(--ring), var(--purple), var(--pink), var(--lilac), var(--purple)) border-box;
  animation: ring-spin 4s linear infinite;
  outline: none;
}
@keyframes ring-spin { to { --ring: 360deg; } }
#brief-form input[type="checkbox"]:checked { animation: check-pop 0.3s var(--spring); }
@keyframes check-pop { 40% { transform: scale(1.35); } }

/* Página del trabajo: la newsletter se despliega desde arriba; pestañas con subrayado que se desliza. */
#preview-device.is-unfolding { animation: unfold 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top; }
@keyframes unfold {
  from { clip-path: inset(0 0 100% 0 round 12px); transform: perspective(1200px) rotateX(-8deg) translateY(-10px); opacity: 0.4; }
  to { clip-path: inset(0 0 0 0 round 12px); transform: none; opacity: 1; }
}
.job-tabs.has-ink { position: relative; }
.job-tabs.has-ink .job-tab[aria-selected="true"] { border-bottom-color: transparent; }
.tab-ink { position: absolute; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--pink)); opacity: 0; pointer-events: none; transition: left 0.42s var(--spring), width 0.42s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  .now-track > span::after, .job-row .mini-track > div::after, .status-badge.flip-in, .rail-sec.is-new, #preview-device.is-unfolding, #brief-form input[type="checkbox"]:checked { animation: none !important; }
  #brief-form input:focus, #brief-form textarea:focus { animation: none; }
  .tab-ink, .rail-line::after { transition: none; }
}

/* ---------- 4.ª tanda (2026-10-06): aprobar, tema con onda, notas que se dibujan, vista previa que se transforma ---------- */
.burst-card, .burst-spark { position: fixed; z-index: 130; pointer-events: none; }
.burst-card { width: 22px; height: 29px; border-radius: 3px; background: #ffffff; box-shadow: inset 0 6px 0 var(--purple), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.burst-spark { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
#approved-banner.is-stamp { animation: stamp 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.4) both; }
@keyframes stamp { from { transform: scale(1.8) rotate(-8deg); opacity: 0; } 60% { transform: scale(0.95) rotate(1deg); opacity: 1; } to { transform: none; } }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.art-spark.is-drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s forwards; }
.art-spark.is-drawing circle { opacity: 0; animation: spark-dot 0.4s ease forwards; animation-delay: calc(0.3s + var(--i, 0) * 0.15s); }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@keyframes spark-dot { from { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: none; } }

#preview-frame, #preview-frame-before { transition: width 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), border-radius 0.5s ease; }
.preview-device { transition: padding 0.5s ease, border-radius 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease, transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  #approved-banner.is-stamp, .art-spark.is-drawing path, .art-spark.is-drawing circle { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
  #preview-frame, #preview-frame-before, .preview-device { transition: none; }
}
.preview-stage.no-anim #preview-frame, .preview-stage.no-anim #preview-frame-before, .preview-stage.no-anim .preview-device { transition: none; }

/* ---------- rendimiento y 5.ª tanda (2026-10-06) ---------- */
/* El fondo se paraba en la página del trabajo por rendimiento; desde 2026-10-13 se mueve también ahí (pedido por el
   usuario: parado parecía una imagen estática). Solo anima transform, que no obliga a repintar la vista previa. */

/* Píldora de Hermes con anillo: trazo que recorre el contorno y se cierra con el progreso; libre y conectado, late suave. */
/* Con anillo: sin borde CSS (overflow: hidden recortaría lo que se dibuje encima); el SVG pinta pista y progreso. */
.status-pill.has-ring { position: relative; border-width: 0; padding: 7px 17px; }
.pill-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pill-ring rect { fill: none; stroke-width: 1.5; }
.pill-ring .track { stroke: var(--border); }
.pill-ring .bar { stroke: url(#pill-ring-grad); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
@media (max-width: 640px) { .status-pill.has-ring { padding: 7px 13px; } }
.status-pill.is-online { animation: pill-breathe 3.2s ease-in-out infinite; }
@keyframes pill-breathe { 50% { box-shadow: 0 0 0 4px rgba(79, 209, 165, 0.12); } }
html.in-job .status-pill.is-online { animation: none; }

/* Copiar con confirmación: un ✓ rosa dibujado sobre el botón. */
.is-copied { position: relative; color: transparent !important; }
.is-copied > :not(.copy-check) { visibility: hidden; }
.copy-check { position: absolute; inset: 0; display: grid; place-items: center; }
.copy-check svg { width: 18px; height: 18px; }
.copy-check path { fill: none; stroke: var(--pink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: check-draw 0.4s ease-out forwards; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* Avisos: entran como una carta desde abajo, con una barra de tiempo. */
.toast.is-in { overflow: hidden; }
/* El movimiento lo lleva un muelle (app.js, toastMotion) sobre «translate»: el aviso se centra con
   transform: translateX(-50%) y no hay que pisarlo. Entra y sale por abajo, y se puede arrastrar para quitarlo. */
.toast.is-in::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); transform-origin: left; animation: toast-time var(--toast-ms, 3000ms) linear forwards; }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Cargas con brillo de marca: siluetas con un brillo rosa que las recorre y el logo late mientras se espera. */
.skeleton { background: linear-gradient(90deg, var(--panel-2) 0%, var(--panel-2) 35%, rgba(251, 115, 255, 0.22) 50%, var(--panel-2) 65%, var(--panel-2) 100%) 0 0 / 220% 100%; }
html.is-loading .brand img, html.is-loading .brand-anim { animation: logo-wait 1.1s ease-in-out infinite; }
@keyframes logo-wait { 50% { opacity: 0.45; transform: scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
  .status-pill.is-online, .toast.is-in, .toast.is-in::after, .copy-check path, html.is-loading .brand img, html.is-loading .brand-anim { animation: none !important; }
  .copy-check path { stroke-dashoffset: 0; }
}

/* ---------- 6.ª tanda de animaciones (2026-10-06) ---------- */
/* Envío que se transforma: el botón se encoge a una píldora con un punto que late mientras sale la petición. */
.btn.is-sending { border-radius: var(--pill); padding-left: 20px; padding-right: 20px; opacity: 1; cursor: progress; }
.send-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pink); vertical-align: 1px; animation: send-dot 0.9s ease-in-out infinite; }
@keyframes send-dot { 50% { transform: scale(0.55); opacity: 0.55; } }

/* Cifras que ruedan: cada dígito, una columna 0-9 que se desplaza hasta su valor. */
/* inline-flex: la línea base sale del «0» de la columna (el transform no la mueve), así casa con el texto. */
.roll { display: inline-flex; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.roll-col > span { display: block; height: 1.25em; }
.roll-col { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.25em)); transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }

/* Foco de luz: brillo rosa radial que sigue al cursor por la fila. */
.job-row.is-lit, .brand-row.is-lit {
  background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(251, 115, 255, 0.1), transparent 70%);
  border-color: rgba(251, 115, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .send-dot { animation: none; }
  .roll-col { transition: none; }
}

/* ---------- 7.ª tanda de animaciones (2026-10-06) ---------- */
/* Menú: el cierre lo lleva el mismo muelle que la apertura (ver «5. Menú»), por el mismo camino. */

/* Avisos con sacudida: corta y horizontal; el aviso entra deslizándose. */
.is-shake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
input.is-shake, textarea.is-shake, select.is-shake { border-color: var(--pink) !important; }
@keyframes shake {
  0% { translate: 0 -6px; opacity: 0.6; }
  15% { translate: -6px 0; opacity: 1; }
  30% { translate: 5px 0; }
  45% { translate: -4px 0; }
  60% { translate: 3px 0; }
  75% { translate: -1px 0; }
  100% { translate: 0 0; }
}

/* Salto con destello: un aro rosa que se abre y se apaga sobre el destino. */
.is-flash { animation: jump-flash 0.9s ease-out; }
@keyframes jump-flash {
  0% { box-shadow: 0 0 0 0 rgba(251, 115, 255, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(251, 115, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .is-shake, .is-flash { animation: none !important; }
}

/* ---------- Hilo que conecta 01 con 02 (2026-10-06) ---------- */
#view-form { position: relative; }
.section-thread { position: absolute; left: -28px; width: 2px; pointer-events: none; --t: 0; }
.section-thread-line {
  position: absolute;
  inset: 0;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--pink), var(--purple));
  transform: scaleY(var(--t));
  transform-origin: top;
}
.section-thread-dot {
  position: absolute;
  left: 50%;
  top: calc(var(--t) * 100%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(251, 115, 255, 0.18), 0 0 14px rgba(251, 115, 255, 0.7);
  opacity: calc(min(1, var(--t) * 20));
}
@media (max-width: 640px) { .section-thread { left: -10px; } }
/* El «02» se ilumina al llegar el hilo y vuelve despacio a su azul (rosa mezclado: en rosa pleno tapaba el título). */
.section-num.is-lit { animation: num-lit 1.4s ease-out; }
@keyframes num-lit {
  0% { -webkit-text-stroke-color: color-mix(in srgb, var(--section-num) 70%, var(--pink)); filter: none; }
  15% { -webkit-text-stroke-color: var(--pink); filter: drop-shadow(0 0 14px rgba(251, 115, 255, 0.55)); }
  100% { -webkit-text-stroke-color: color-mix(in srgb, var(--section-num) 70%, var(--pink)); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .section-thread { display: none; }
  .section-num.is-lit { animation: none; }
}

/* ---------- 8.ª tanda de animaciones (2026-10-06) ---------- */
/* Descarga con flecha: sobre la esquina del botón, una flechita cae en una bandeja (la insignia) y se vuelve ✓. */
.btn.is-dl { position: relative; overflow: visible; }
.btn.is-dl::before, .btn.is-dl::after {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.btn.is-dl::before { content: '↓'; color: var(--pink); z-index: 2; animation: dl-arrow 1.6s ease both; }
.btn.is-dl::after { content: '✓'; border-radius: 50%; background: var(--pink); color: #14183f; box-shadow: 0 0 0 3px rgba(251, 115, 255, 0.25); animation: dl-badge 1.6s ease both; }
@keyframes dl-arrow {
  0% { transform: translateY(-14px); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: translateY(0); opacity: 1; }
  55%, 100% { transform: translateY(2px); opacity: 0; }
}
@keyframes dl-badge {
  0%, 40% { transform: scale(0.6); opacity: 0; color: transparent; }
  50% { transform: scale(1.15); opacity: 1; color: transparent; }
  60% { transform: scale(1); color: #14183f; }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-dl::before, .btn.is-dl::after { display: none; }
}

/* ---------- 9.ª tanda de animaciones (2026-10-06) ---------- */
/* Entrada a la página: el título sube palabra por palabra (solo la primera visita de la sesión). */
.intro-word { display: inline-block; animation: intro-word 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes intro-word { from { opacity: 0; transform: translateY(0.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Vista previa que se revela: una capa del color del fondo baja y se retira con una línea de luz en su borde. */
.preview-device { position: relative; }
.preview-device.is-revealing { overflow: hidden; }
.preview-device.is-revealing::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 115, 255, 0.9) 0, rgba(251, 115, 255, 0.35) 3px, var(--bg) 14px);
  box-shadow: 0 -10px 30px rgba(251, 115, 255, 0.5);
  animation: preview-reveal 0.95s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
@keyframes preview-reveal { from { transform: translateY(0); } to { transform: translateY(101%); } }

/* Paleta de marca en abanico: las muestras salen una tras otra desde la anterior; el logo aparece. */
.swatches li { animation: swatch-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--n, 0) * 45ms + 120ms); }
@keyframes swatch-in { from { opacity: 0; transform: translateX(-14px) scale(0.92); } to { opacity: 1; transform: none; } }
.brand-logo { animation: brand-logo-in 0.6s ease-out both; }
@keyframes brand-logo-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* Pie que se ilumina: el logo animado se reproduce al entrar en pantalla (app.js) y el texto se enciende un momento. */
.foot.is-lit .foot-copy { animation: foot-copy 1.6s ease-out; }
@keyframes foot-copy { 20% { color: var(--pink); } }

@media (prefers-reduced-motion: reduce) {
  .intro-word, .swatches li, .brand-logo { animation: none !important; }
  .preview-device.is-revealing::after { display: none; }
  .foot.is-lit .foot-copy { animation: none; }
}

/* ---------- 10.ª tanda de animaciones (2026-10-06) ---------- */
/* Comprobaciones que se marcan: entran una tras otra y su punto de estado salta al llegar. */
.is-ticking { animation: tick-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--n, 0) * 90ms); }
.is-ticking .check-dot { animation: tick-dot 0.4s var(--spring) both; animation-delay: calc(var(--n, 0) * 90ms + 220ms); }
@keyframes tick-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes tick-dot { from { transform: scale(0); } to { transform: scale(1); } }

/* Registro en vivo: las líneas nuevas entran deslizándose con un resalte rosa que se apaga. */
.is-fresh { animation: log-fresh 1.6s ease-out both; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes log-fresh {
  0% { opacity: 0; transform: translateY(6px); background: rgba(251, 115, 255, 0.22); }
  20% { opacity: 1; transform: none; background: rgba(251, 115, 255, 0.22); }
  100% { background: transparent; }
}

/* Atajos que se pulsan: la tecla se hunde (el borde inferior grueso desaparece) y vuelve. */
kbd.is-pressed { animation: key-press 0.26s ease-out; }
@keyframes key-press {
  40% { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 1px; background: rgba(251, 115, 255, 0.18); border-color: var(--pink); }
}

@media (prefers-reduced-motion: reduce) {
  .is-ticking, .is-ticking .check-dot, .is-fresh, kbd.is-pressed { animation: none !important; }
}

/* ---------- pieza en marcha que se construye (2026-10-07, C) ---------- */
/* La miniatura de lo que hace Hermes: una maqueta cuyos bloques se encienden según avanza (app.js, buildThumbInner),
   con una línea de escaneo; en cola respira, sin bloques. Blanca en los dos temas, como las miniaturas sin imagen. */
.thumb.thumb-build {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6%;
  padding: 10% 11%;
  border: none;
  border-radius: var(--radius);
  background: #f4f5fb;
  box-shadow: -2px 8px 11px rgba(20, 24, 63, 0.2);
}
.now-thumb.thumb-build { padding: 6px 7px; gap: 3px; }
.thumb-build i { display: block; flex: none; border-radius: 2px; background: #e1e4f2; transform-origin: left center; transition: background 0.5s ease; }
.thumb-build .tb-logo { height: 7%; width: 40%; align-self: center; }
.thumb-build .tb-img { height: 30%; border-radius: 3px; }
.thumb-build .tb-h { height: 7%; width: 84%; }
.thumb-build .tb-l { height: 4%; }
.thumb-build .tb-l.is-short { width: 64%; }
.thumb-build .tb-btn { height: 8%; width: 44%; border-radius: 999px; }
.thumb-build .tb-logo.is-on, .thumb-build .tb-h.is-on { background: #0e1545; }
.thumb-build .tb-img.is-on { background: linear-gradient(135deg, #1a2168, #b255c3 70%, #fb73ff); }
.thumb-build .tb-l.is-on { background: #a3a8cc; }
.thumb-build .tb-btn.is-on { background: var(--pink); }
.thumb-build i.is-new { animation: tb-pop 0.6s var(--spring) both; }
.thumb-build i.is-new:nth-child(2) { animation-delay: 0.08s; }
.thumb-build i.is-new:nth-child(3) { animation-delay: 0.16s; }
.thumb-build i.is-new:nth-child(4) { animation-delay: 0.24s; }
.thumb-build i.is-new:nth-child(5) { animation-delay: 0.32s; }
.thumb-build i.is-new:nth-child(6) { animation-delay: 0.4s; }
@keyframes tb-pop { from { opacity: 0; transform: translateY(6px) scaleX(0.4); } }
.thumb-build .tb-scan {
  position: absolute; left: 0; right: 0; top: -22%; height: 22%;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(251, 115, 255, 0), rgba(251, 115, 255, 0.22) 70%, rgba(251, 115, 255, 0.85));
  box-shadow: 0 1px 6px rgba(251, 115, 255, 0.6);
  pointer-events: none;
  animation: tb-scan 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes tb-scan { 0% { top: -22%; } 80%, 100% { top: 100%; } }
.thumb-build.is-queued { animation: tb-breathe 2.4s ease-in-out infinite; }
@keyframes tb-breathe { 50% { opacity: 0.6; } }

/* ---------- calidad con gráfica (2026-10-07, E) ---------- */
/* La tarjeta de calidad ocupa la fila entera (antes se quedaba sola debajo) con la evolución de las últimas piezas. */
.stat.stat-quality { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; }
.stat-quality .stat-num { grid-column: 1; grid-row: 1; }
.stat-quality .stat-label { grid-column: 1; grid-row: 2; }
.q-spark { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: 100%; max-width: 320px; height: auto; overflow: visible; }
.q-spark .q-avg { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.q-spark .q-line { fill: none; stroke: var(--pink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.q-spark .q-area { opacity: 0; }
.q-spark .q-dot { fill: var(--pink); stroke: var(--bg, #081136); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.q-spark.is-drawn .q-line { stroke-dashoffset: 0; }
.q-spark.is-drawn .q-area, .q-spark.is-drawn .q-dot { opacity: 1; }
.q-spark.is-drawing .q-line { animation: q-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.q-spark.is-drawing .q-area { animation: q-fade 0.8s ease 0.9s forwards; }
.q-spark.is-drawing .q-dot { animation: q-dot 0.45s var(--spring) 1.3s forwards, q-pulse 2s ease-in-out 2s infinite; }
.q-spark.is-drawn .q-dot { animation: q-pulse 2s ease-in-out infinite; }
@keyframes q-draw { to { stroke-dashoffset: 0; } }
@keyframes q-fade { to { opacity: 1; } }
@keyframes q-dot { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes q-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (max-width: 640px) { .q-spark { max-width: 180px; } }

@media (prefers-reduced-motion: reduce) {
  .thumb-build i.is-new, .thumb-build .tb-scan, .thumb-build.is-queued, .q-spark .q-dot { animation: none !important; }
  .thumb-build .tb-scan { display: none; }
}

/* ---------- galería viva (2026-10-07, A y B) ---------- */
/* A: la pieza de verdad, a 600 px y reducida al ancho de la tarjeta, se desliza por encima de la miniatura. */
.g-card .thumb { position: relative; }
.thumb-scroll {
  position: absolute; top: 0; left: 0;
  width: 600px; height: 100%;
  border: 0; background: #ffffff;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}
/* B: la miniatura que vuela de la galería a la vista previa del trabajo. */
.card-fly {
  position: fixed; z-index: 80;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(251, 115, 255, 0.35);
  pointer-events: none;
}
.card-fly > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-fly.thumb-empty, .card-fly.thumb-logo { display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 32px; color: #14183f; }
.card-fly.thumb-logo img { max-width: 50%; max-height: 40%; object-fit: contain; }

/* ---------- panel de marca (2026-10-07, F) ---------- */
.brand-peek { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); }
.peek-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 112px; height: 52px; padding: 8px 12px; border-radius: var(--radius-sm); background: #ffffff; box-shadow: -2px 6px 10px rgba(20, 24, 63, 0.2); }
.peek-logo.is-dark { background: #14183f; }
.peek-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.peek-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.peek-colors li { position: relative; width: 34px; height: 34px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent), 0 4px 10px rgba(0, 0, 0, 0.18); }
.peek-colors li span { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; padding: 2px 6px; border-radius: var(--pill); background: #0e1545; color: #ffffff; font-size: var(--fs-caption); font-family: ui-monospace, monospace; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, translate 0.15s; }
.peek-colors li:hover span { opacity: 1; translate: -50% 0; }
/* Al elegir la marca: el logo aparece y los colores caen uno detrás de otro, con un pequeño bote. */
.brand-peek.is-in { animation: peek-in 0.35s ease-out both; }
.brand-peek.is-in .peek-logo { animation: peek-logo 0.5s var(--spring) 0.05s both; }
.brand-peek.is-in .peek-colors li { animation: peek-drop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) both; animation-delay: calc(0.18s + var(--n, 0) * 70ms); }
@keyframes peek-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes peek-logo { from { opacity: 0; transform: scale(0.7); filter: blur(6px); } }
@keyframes peek-drop { 0% { opacity: 0; transform: translateY(-34px) rotate(-14deg); } 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .brand-peek.is-in, .brand-peek.is-in .peek-logo, .brand-peek.is-in .peek-colors li { animation: none; } }

/* ---------- portada más ancha y formulario a dos columnas (2026-10-07) ---------- */
/* En escritorio la portada usaba una columna de 880 px con márgenes enormes. Ahora 1240 px: el formulario se abre en
   dos columnas (lo que se escribe | la marca y las opciones) y la galería gana columnas. */
.brand-side { display: none; }
@media (min-width: 1180px) {
  /* Un solo ancho (2026-10-08): la portada, la pieza terminada, la cabecera y el pie comparten bordes (1440 aquí, 1600 y
     1760 en pantallas muy grandes), así el logo de arriba y el del pie caen en la misma línea que el contenido. */
  body:has(#view-form:not([hidden])) #app { max-width: 1440px; }
  body:has(#view-form:not([hidden])) .foot-inner { max-width: 1392px; }
  .topbar { max-width: 1440px; }
  .hero-grid { margin-right: 0; grid-template-columns: minmax(0, 1fr) 520px; }
  /* La fila de abajo (el botón) se pega a lo escrito: el alto que sobra del panel lateral va debajo, no encima. */
  #brief-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
  .form-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .form-end { grid-column: 1; grid-row: 2; min-width: 0; }
  .form-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 96px; min-width: 0; padding-left: 32px; border-left: 1px solid var(--border); }
  #brand-peek { display: none !important; }
  .brand-side { display: block; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .form-main textarea { min-height: 300px; }
}
.side-kicker { margin: 0 0 12px; font-family: 'Barlow', sans-serif; font-size: var(--fs-caption, 12px); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--pink); }
.side-logo { display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px 24px; border-radius: var(--radius-md); background: #ffffff; box-shadow: -2px 8px 14px rgba(20, 24, 63, 0.22); }
.side-logo.is-dark { background: #14183f; }
.side-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.side-name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; }
.side-status { margin: 12px 0 0; font-size: var(--fs-small); color: var(--muted); }
.side-colors { margin-top: 16px; }
.side-type { margin: 16px 0 0; font-size: var(--fs-small); }
.side-sub { margin: 20px 0 8px; font-size: var(--fs-small); font-weight: 600; color: var(--lilac); }
.side-recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.side-recent a { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #ffffff; transition: transform 0.3s var(--spring), border-color 0.2s; }
.side-recent a:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--pink); }
.side-recent img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.side-empty { display: flex; align-items: center; gap: 16px; }
.side-empty p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
/* Sin marca elegida (2026-10-07): un abanico de tres maquetas de newsletter, como el de la cabecera. Antes era un
   rectángulo blanco suelto que parecía roto. */
.side-empty-art { position: relative; flex: none; width: 76px; height: 70px; }
.side-empty-art i {
  position: absolute; left: 22px; top: 8px; width: 32px; height: 44px; border-radius: 5px;
  background:
    linear-gradient(#0e1545, #0e1545) 50% 14% / 44% 7% no-repeat,
    linear-gradient(135deg, #1a2168, #b255c3 70%, #fb73ff) 50% 42% / 78% 32% no-repeat,
    linear-gradient(#c9cde3, #c9cde3) 50% 72% / 78% 6% no-repeat,
    linear-gradient(#c9cde3, #c9cde3) 24% 84% / 46% 6% no-repeat,
    #f4f5fb;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 130%;
  transition: transform 0.5s var(--spring);
}
.side-empty-art i:nth-child(1) { transform: rotate(-16deg); }
.side-empty-art i:nth-child(2) { transform: rotate(16deg); }
.side-empty-art i:nth-child(3) { z-index: 1; transform: translateY(-2px); }
.side-empty:hover .side-empty-art i:nth-child(1) { transform: rotate(-24deg); }
.side-empty:hover .side-empty-art i:nth-child(2) { transform: rotate(24deg); }
.side-empty:hover .side-empty-art i:nth-child(3) { transform: translateY(-6px); }
.brand-side.is-in > * { animation: peek-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.brand-side.is-in > *:nth-child(2) { animation-delay: 0.06s; }
.brand-side.is-in > *:nth-child(3) { animation-delay: 0.12s; }
.brand-side.is-in > *:nth-child(n + 4) { animation-delay: 0.18s; }
.brand-side.is-in .side-logo { animation: peek-logo 0.5s var(--spring) 0.05s both; }
.brand-side.is-in .peek-colors li { animation: peek-drop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) both; animation-delay: calc(0.2s + var(--n, 0) * 70ms); }
.brand-side.is-in .side-recent li { animation: deal-in-card 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.35s + var(--n, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .brand-side.is-in *, .brand-side.is-in > * { animation: none !important; } }

/* ---------- miniaturas vacías con carácter (2026-10-07) ---------- */
.job-row .thumb, .g-card .thumb, .now-thumb { position: relative; }
/* Solo iniciales: un tono propio de la marca (--h, de su nombre) en vez del blanco liso. */
.thumb-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 30% 15%, hsl(var(--h, 240) 70% 96%), hsl(var(--h, 240) 55% 84%));
  color: hsl(var(--h, 240) 50% 28%);
  font-family: 'Barlow', sans-serif; font-weight: 800; letter-spacing: 1px;
}
.g-card .thumb-initials { font-size: 34px; }
/* Canceladas y fallidas: rayado tenue, logo o iniciales apagados y el estado escrito. */
.thumb-empty.is-stopped { background: repeating-linear-gradient(135deg, #f3f4f9 0 9px, #e7e9f3 9px 18px) !important; }
.thumb-empty.is-stopped > img, .thumb-empty.is-stopped > .thumb-initials { opacity: 0.4; filter: grayscale(1); }
.thumb-empty.is-stopped > .thumb-initials { background: transparent; }
.thumb-empty.is-stopped.is-on-dark { background: repeating-linear-gradient(135deg, #1b2050 0 9px, #232864 9px 18px) !important; }
.thumb-state {
  position: absolute; left: 50%; bottom: 10%; translate: -50% 0;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(20, 24, 63, 0.82); color: #ffffff;
  font-style: normal; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
}
.job-row .thumb-state, .now-thumb .thumb-state { display: none; }

/* ---------- tarjeta de galería más rica (2026-10-07) ---------- */
/* Insignia con texto desde la auditoría de 2026-10-14 (H-21): antes, un punto de 10 px solo distinguible por el color. */
.g-dot {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 64px);
  padding: 2px 8px 2px 6px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.94); color: #14183f;
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.g-dot::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #8f96c9); }
.g-dot.is-ok { --dot: #2fbf71; }
.g-dot.is-warn { --dot: #f4a524; }
.g-dot.is-live { --dot: var(--pink); }
.g-dot.is-live::before { animation: g-dot-live 1.6s ease-out infinite; }
.g-dot.is-bad { --dot: #e5484d; }
.g-dot.is-ready { --dot: #5b8cff; }
@keyframes g-dot-live { 0% { box-shadow: 0 0 0 0 rgba(251, 115, 255, 0.6); } 100% { box-shadow: 0 0 0 6px rgba(251, 115, 255, 0); } }
.g-score {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(8, 13, 46, 0.82);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.g-score svg { position: absolute; inset: 2px; width: 30px; height: 30px; transform: rotate(-90deg); }
.g-score circle { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; }
.g-score .g-score-arc { stroke: var(--arc); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.g-score.is-high { --arc: #2fbf71; }
.g-score.is-mid { --arc: #f4a524; }
.g-score.is-low { --arc: #e5484d; }
.g-score b { position: relative; font-size: var(--fs-caption); font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; }
/* El arco se dibuja con la entrada en cascada de la galería (no en cada refresco). */
.is-cascade .g-score .g-score-arc { animation: g-score-draw 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
@keyframes g-score-draw { from { stroke-dasharray: 0 100; } }
/* Con la pieza que se recorre (A), el anillo y el punto se quedan encima. */
.g-card .thumb-scroll { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .g-dot.is-live::before, .is-cascade .g-score .g-score-arc { animation: none; } }

/* ---------- historial por días (2026-10-07) ---------- */
/* «Hoy», «Ayer», «Esta semana», «Septiembre»…: un separador que se queda fijo bajo la cabecera mientras se recorre su
   tramo. Una píldora con fondo de cristal, para que se lea sobre las filas que pasan por debajo. */
.day-sep {
  position: sticky; top: var(--topbar-h, 70px); z-index: 5;
  display: flex; align-items: center; gap: 12px;
  margin: 8px -8px -2px; padding: 8px;
  /* El mismo cristal que la cabecera: pegado a ella, se lee como su continuación y tapa del todo lo que pasa debajo. */
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}
.day-sep:first-child { margin-top: 0; }
.day-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.day-label, .day-count { pointer-events: auto; }
.day-label {
  padding: 6px 12px; border-radius: 999px;
  background: var(--topbar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text);
}
.day-count { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
#history-list.is-gallery .day-sep { margin-bottom: -8px; }

/* ---------- «Los dos»: escritorio y móvil lado a lado (2026-10-07) ---------- */
.preview-stage.is-both { gap: 24px; align-items: flex-start; }
#preview-frame-mobile { display: block; width: 375px; height: 740px; border: 0; border-radius: 22px; background: #fff; }
.preview-stage.is-both #preview-col-after::before { content: 'Escritorio'; display: block; margin: 0 0 8px; font-family: 'Barlow', sans-serif; font-size: var(--fs-small); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; text-align: center; color: var(--pink-soft); }

/* ---------- nota de arte en el lateral (2026-10-07) ---------- */
.art-card { margin: 16px 0 4px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); }
.art-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.art-card-pct { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tone); }
.art-card-pct small { font-size: 14px; font-weight: 600; }
.art-card-title { display: flex; flex-direction: column; margin-right: auto; font-size: var(--fs-small); font-weight: 600; }
.art-card-title small { font-weight: 400; color: var(--muted); }
.art-card.is-high { --tone: #2fbf71; }
.art-card.is-mid { --tone: #f4a524; }
.art-card.is-low { --tone: #e5484d; }
.art-card-bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.art-card-bars li { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 12px; font-size: var(--fs-small); }
.art-card-bars li > span:first-child { color: var(--lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-card-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.art-card-bar { position: relative; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.art-card-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--purple, #b255c3), var(--pink)); }
.art-card-bar.is-low i { background: linear-gradient(90deg, #c2410c, #f4a524); }
.art-card.is-drawing .art-card-bar i { animation: art-card-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.1s + var(--i, 0) * 70ms); }
@keyframes art-card-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .art-card.is-drawing .art-card-bar i { animation: none; } }

/* ---------- tiempo de la pieza (2026-10-08) ---------- */
.time-card { margin: 12px 0 4px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); }
.time-card-total { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.time-card-total small { font-size: 14px; font-weight: 600; color: var(--muted); }
.time-bar { display: flex; gap: 2px; height: 10px; margin: 2px 0 12px; }
.time-bar span { flex-basis: 0; min-width: 4px; border-radius: 5px; background: var(--seg); }
.time-card.is-drawing .time-bar span { animation: time-seg 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.1s + var(--i, 0) * 120ms); transform-origin: left center; }
@keyframes time-seg { from { transform: scaleX(0); opacity: 0; } }
.time-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--lilac); }
.time-legend li { display: flex; align-items: center; gap: 6px; }
.time-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--seg); }
.time-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tb-prep { --seg: #5b8cff; }
.tb-draft { --seg: var(--pink); }
.tb-write { --seg: var(--pink); }
.tb-selfreview { --seg: var(--purple, #b255c3); }
.tb-check { --seg: #f4a524; }
.tb-fix { --seg: #e5484d; }
.tb-art { --seg: #2fbf71; }
.tb-other { --seg: #8f96c9; }
@media (prefers-reduced-motion: reduce) { .time-card.is-drawing .time-bar span { animation: none; } }

/* ---------- abanico: la carta señalada por huecos fijos (2026-10-07) ---------- */
/* Con el abanico vivo, las cartas no reciben el ratón: lo recibe la caja y app.js (fanCardAt) decide la carta por su
   hueco. Así la carta que se mueve no se suelta sola en el borde. El brillo, la etiqueta y el apagado de las demás
   siguen a la clase is-hot en vez de :hover. */
.hero-showcase.is-live .show-card { pointer-events: none; }
.hero-showcase.is-live.has-hot { cursor: pointer; }
.hero-showcase.is-live .show-card.is-hot .show-face::after { opacity: 1; }
.hero-showcase.is-live .show-card.is-hot .show-brand { opacity: 1; }
.hero-showcase.is-live.has-hot .show-card:not(.is-hot) .show-face::before, .hero-showcase.is-live.has-hot .show-mock:not(.is-hot)::before { opacity: 1; }
.hero-showcase.is-live .show-face::after { transition: opacity 0.35s ease; }
.hero-showcase.is-live .show-card { transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
/* La carta señalada, nítida (2026-10-13): el navegador guarda cada carta ya pintada para moverla sin repintar, y al
   crecer 1,4× estiraba esa imagen, que se veía borrosa. Ahora la cara se pinta a su tamaño grande y en reposo se
   encoge (app.js, FAN_GROW): reducir no emborrona. Todo lo que va en píxeles dentro de la cara va × 1,4 para verse
   igual que antes. En móvil no hay carta señalada y la cara queda como estaba. */
@media (min-width: 761px) {
  /* El transform de aquí solo vale hasta el primer fotograma de app.js, que lo pone en línea. */
  .hero-showcase.is-live .show-face { left: -20%; top: -48%; width: 140%; height: 140%; transform: scale(0.7143); border-radius: 14px; box-shadow: 0 25px 56px rgba(0, 0, 0, 0.45), 0 0 0 1.4px rgba(255, 255, 255, 0.08); }
  .hero-showcase.is-live .show-face::after { box-shadow: 0 42px 84px rgba(0, 0, 0, 0.6), 0 0 0 2.8px var(--pink); }
  .hero-showcase.is-live .show-brand { top: calc(100% + 13px); padding: 4px 12px; font-size: 15.4px; }
}
/* Y la señalada, sin capa guardada: se pinta siempre a su tamaño real. */
.hero-showcase.is-live .show-card.is-hot, .hero-showcase.is-live .show-card.is-hot .show-face { will-change: auto; }
/* Reparto de entrada (app.js, fanTick): apiladas e invisibles hasta que a cada una le toca salir. */
.hero-showcase.is-live .show-card.is-stacked { opacity: 0; transition: none; }

/* ---------- pieza en marcha: maqueta grande y últimas acciones (2026-10-07) ---------- */
#job-progress.has-build { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px 32px; align-items: start; }
#job-progress .progress-main { min-width: 0; }
.thumb.live-build { grid-row: 1 / span 2; width: 180px; aspect-ratio: 3 / 4; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 115, 255, 0.25); animation: live-float 5s ease-in-out infinite; }
.thumb.live-build.is-queued { animation: tb-breathe 2.4s ease-in-out infinite; }
@keyframes live-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.live-feed-box { grid-column: 2; min-width: 0; }
.live-feed-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lilac); }
.live-feed { position: relative; display: grid; gap: 6px; margin: 0; padding: 0 0 0 16px; list-style: none; }
.live-feed::before { content: ''; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, var(--pink), transparent); }
.live-feed li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; font-size: var(--fs-small); color: var(--muted); }
.live-feed li::before { content: ''; position: absolute; left: -16px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.live-feed li:first-child { color: var(--text); }
.live-feed li:first-child::before { background: var(--pink); box-shadow: 0 0 0 4px rgba(251, 115, 255, 0.2); }
.live-feed li:nth-child(3) { opacity: 0.75; }
.live-feed li:nth-child(4) { opacity: 0.5; }
.live-feed li.is-warn span { color: var(--warning, #f4a524); }
.live-feed time { font-variant-numeric: tabular-nums; color: var(--muted); }
.live-feed li.is-new { animation: feed-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes feed-in { from { opacity: 0; transform: translateY(-10px); } }
@media (max-width: 640px) {
  #job-progress.has-build { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .thumb.live-build { width: 84px; }
  .live-feed-box { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .thumb.live-build, .live-feed li.is-new { animation: none; } }
/* Pieza en marcha al ancho de todo lo demás (2026-10-08): en una columna de 880 centrada, la cabecera y el logo iban
   a 1440 y la tarjeta quedaba en medio. En pantalla ancha, la maqueta grande al lado de la fase y los pasos. */
@media (min-width: 1200px) {
  body:has(#view-job:not([hidden]) #job-progress:not([hidden])) #app { max-width: 1440px; }
  body:has(#view-job:not([hidden]) #job-progress:not([hidden])) .foot-inner { max-width: 1392px; }
  #job-progress.has-build { grid-template-columns: 220px minmax(0, 1fr); gap: 24px 40px; }
  #job-progress.has-build .thumb.live-build { width: 220px; }
}
/* Las últimas acciones, en su propia columna solo si caben los cinco pasos con holgura (a 1280 quedaban en 80 px). */
@media (min-width: 1600px) {
  #job-progress.has-build { grid-template-columns: 240px minmax(0, 1fr) minmax(300px, 380px); }
  #job-progress.has-build .thumb.live-build { width: 240px; }
  #job-progress.has-build .live-feed-box { grid-column: 3; grid-row: 1 / span 2; }
}
@media (min-width: 1800px) {
  body:has(#view-job:not([hidden]) #job-progress:not([hidden])) #app { max-width: 1600px; }
  body:has(#view-job:not([hidden]) #job-progress:not([hidden])) .foot-inner { max-width: 1552px; }
}
@media (min-width: 2400px) {
  body:has(#view-job:not([hidden]) #job-progress:not([hidden])) #app { max-width: 1760px; }
  body:has(#view-job:not([hidden]) #job-progress:not([hidden])) .foot-inner { max-width: 1712px; }
}

/* ---------- cabecera de marca en el historial (2026-10-07) ---------- */
/* hist-brand-head, no brand-head: esa clase es la de la cabecera de la ficha de marca (se le colaban estos estilos). */
.hist-brand-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  margin: 0 0 20px; padding: 20px;
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
  background: linear-gradient(156deg, var(--card-grad-1) 11%, var(--card-grad-2) 76%), var(--card-base);
}
.bh-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bh-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 112px; height: 64px; padding: 8px 12px; border-radius: var(--radius-sm); background: #ffffff; box-shadow: -2px 8px 14px rgba(20, 24, 63, 0.22); }
.bh-logo.is-dark { background: #14183f; }
.bh-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.bh-logo.is-initials { width: 64px; background: radial-gradient(120% 90% at 30% 15%, hsl(var(--h, 240) 70% 96%), hsl(var(--h, 240) 55% 84%)); color: hsl(var(--h, 240) 50% 28%); font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 22px; }
.bh-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; }
.bh-colors { margin-top: 8px; }
.bh-colors li { width: 22px; height: 22px; border-radius: 6px; }
.bh-link { display: inline-block; margin-top: 8px; font-size: var(--fs-small); color: var(--accent-text); }
.bh-stats { display: flex; gap: 24px; margin: 0; }
.bh-stats div { display: flex; flex-direction: column; }
.bh-stats dt { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bh-stats dd { margin: 4px 0 0; font-size: var(--fs-small); color: var(--lilac); }
.bh-spark { min-width: 0; }
.bh-spark .q-spark { grid-column: auto; grid-row: auto; width: 100%; max-width: 260px; }
.bh-best { position: relative; display: block; width: 84px; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25); transition: transform 0.3s var(--spring); }
.bh-best:hover { transform: translateY(-4px) rotate(-2deg); }
.bh-best img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bh-best span { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 4px; border-radius: 999px; background: rgba(8, 13, 46, 0.85); color: #fff; font-size: var(--fs-caption); font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-brand-head.is-in > * { animation: peek-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hist-brand-head.is-in > *:nth-child(2) { animation-delay: 0.07s; }
.hist-brand-head.is-in > *:nth-child(3) { animation-delay: 0.14s; }
.hist-brand-head.is-in > *:nth-child(4) { animation-delay: 0.21s; }
.hist-brand-head.is-in .bh-logo { animation: peek-logo 0.5s var(--spring) both; }
.hist-brand-head.is-in .bh-colors li { animation: peek-drop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) both; animation-delay: calc(0.2s + var(--n, 0) * 60ms); }
.hist-brand-head.is-in .q-spark .q-line { animation: bh-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; }
@keyframes bh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 900px) {
  .hist-brand-head { grid-template-columns: minmax(0, 1fr) auto; }
  .bh-spark { display: none; }
}
@media (max-width: 560px) {
  .hist-brand-head { grid-template-columns: 1fr; gap: 12px; }
  .bh-best { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hist-brand-head.is-in *, .hist-brand-head.is-in > * { animation: none !important; } }

/* ---------- brief maquetado (2026-10-07) ---------- */
/* decorateBrief (app.js) agrupa cada sección en una tarjeta con su icono y color. Vale en la superficie clara de la
   revisión del brief y en el desplegable del brief de la página del trabajo. */
.md.is-brief .bf-title { margin: 0 0 16px; font-size: 22px; line-height: 1.25; color: var(--text); }
.bf-sec { --tone: #6b5bd6; position: relative; margin: 0 0 12px; padding: 16px 16px 6px 20px; border: 1px solid var(--border); border-left: 3px solid var(--tone); border-radius: var(--radius-md); background: color-mix(in srgb, var(--tone) 5%, transparent); }
.bf-sec > h5 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 15px; color: var(--text); }
.bf-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tone); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.bf-concept { --tone: #c23ac0; }
.bf-identity { --tone: #3a6fd8; }
.bf-data { --tone: #1f9d5c; }
.bf-subject { --tone: #d9822b; }
.bf-scenes { --tone: #7a4fd0; }
.bf-images { --tone: #138a9c; }
.bf-banned { --tone: #d23c48; }
.bf-audit { --tone: #6c7393; }
span.bf-quote { display: block; margin: 0 0 12px; }
.bf-quote { position: relative; margin: 0 0 12px !important; padding: 4px 0 4px 16px; border-left: 2px solid color-mix(in srgb, var(--tone) 60%, transparent); font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--text); }
.src-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--bf-chip, #1f9d5c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bf-chip, #1f9d5c) 35%, transparent); font-size: 12px; font-weight: 600; text-decoration: none !important; white-space: nowrap; vertical-align: 1px; }
.src-chip::before { content: 'fuente ·'; font-weight: 500; opacity: 0.7; }
.bf-swatch { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 2px; border-radius: 3px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(20, 24, 63, 0.25); }
.md.is-brief .is-pending { margin-left: -8px; padding: 4px 8px; border-radius: 8px; background: rgba(244, 165, 36, 0.14); box-shadow: inset 3px 0 0 #f4a524; }
.md.is-brief li.is-pending { list-style-position: inside; }
.bf-inbox { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #ffffff; box-shadow: 0 6px 16px rgba(20, 24, 63, 0.12); }
.bf-inbox-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--tone), #f4c47a); }
.bf-inbox strong { display: block; color: #14183f; font-size: 15px; }
.bf-inbox span { display: block; color: #5b6180; font-size: 13px; }
.bf-scenes ol { counter-reset: scene; list-style: none; padding-left: 0; display: grid; gap: 8px; }
.bf-scenes ol > li { counter-increment: scene; position: relative; padding: 12px 12px 12px 48px; border-radius: 10px; background: color-mix(in srgb, var(--tone) 7%, transparent); }
.bf-scenes ol > li::before { content: counter(scene, decimal-leading-zero); position: absolute; left: 12px; top: 9px; font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 18px; color: var(--tone); }
.bf-banned, .bf-audit { font-size: 14px; }

/* ---------- vacío con personalidad (2026-10-07) ---------- */
.history-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px 32px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); }
.history-empty .empty-title { margin: 8px 0 0; font-size: 18px; font-weight: 700; color: var(--text); }
.history-empty .hint { max-width: 420px; margin: 0; }
.empty-actions { display: flex; gap: 8px; margin-top: 12px; }
.empty-fan { position: relative; width: 120px; height: 84px; }
.empty-fan i { position: absolute; left: 44px; top: 8px; width: 34px; height: 46px; border-radius: 6px; border: 1.5px dashed var(--border-strong); background: color-mix(in srgb, var(--pink) 6%, transparent); transform-origin: 50% 140%; }
.empty-fan i:nth-child(1) { transform: rotate(-22deg); }
.empty-fan i:nth-child(3) { transform: rotate(22deg); }
.history-empty.is-in .empty-fan i { animation: empty-fan 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.history-empty.is-in .empty-fan i:nth-child(1) { --r: -22deg; }
.history-empty.is-in .empty-fan i:nth-child(2) { --r: 0deg; animation-delay: 0.06s; }
.history-empty.is-in .empty-fan i:nth-child(3) { --r: 22deg; animation-delay: 0.12s; }
@keyframes empty-fan { from { transform: rotate(0deg) translateY(6px); opacity: 0; } to { transform: rotate(var(--r, 0deg)); opacity: 1; } }
.history-empty.is-in > .empty-title, .history-empty.is-in > .hint, .history-empty.is-in > .empty-actions { animation: peek-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
@media (prefers-reduced-motion: reduce) { .history-empty *, .empty-fan i { animation: none !important; } }

/* ---------- pieza recién terminada (2026-10-07) ---------- */
.done-summary { position: relative; overflow: hidden; margin: 0 0 20px; padding: 16px 20px; border: 1px solid color-mix(in srgb, #2fbf71 45%, var(--border)); border-radius: var(--radius-card); background: linear-gradient(135deg, color-mix(in srgb, #2fbf71 12%, transparent), color-mix(in srgb, var(--pink) 8%, transparent)); }
.ds-head { display: flex; align-items: center; gap: 12px; }
.ds-head > div { display: flex; flex-direction: column; margin-right: auto; }
.ds-head strong { font-size: 18px; color: var(--text); }
.ds-head > div > span { font-size: var(--fs-small); color: var(--muted); }
.ds-check { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #2fbf71; color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 0 0 6px rgba(47, 191, 113, 0.18); }
.ds-close { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px; border-radius: 8px; }
.ds-close:hover { color: var(--text); background: var(--surface-row); }
.ds-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0 48px; font-size: var(--fs-small); color: var(--lilac); }
.ds-stats b { margin-right: 4px; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.ds-stats b.is-high { color: #2fbf71; }
.ds-stats b.is-mid { color: #f4a524; }
.ds-stats b.is-low { color: #e5484d; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 48px; }
.done-summary.is-in { animation: ds-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.done-summary.is-in .ds-check { animation: ds-check 0.5s var(--spring) 0.15s both; }
.done-summary.is-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-100%); animation: ds-shine 1.2s ease 0.4s both; pointer-events: none; }
@keyframes ds-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
@keyframes ds-check { from { transform: scale(0) rotate(-45deg); } }
@keyframes ds-shine { to { transform: translateX(100%); } }
.card-fly.is-done-fly { padding: 10% 11%; display: flex; flex-direction: column; gap: 6%; background: #f4f5fb; }
@media (max-width: 640px) { .ds-stats, .ds-actions { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .done-summary.is-in, .done-summary.is-in .ds-check, .done-summary.is-in::after { animation: none; } }

/* ---------- formulario guiado (2026-10-07) ---------- */
.prompt-coach { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: -8px 0 20px; }
.coach-meter { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); font-weight: 600; }
.coach-bar { position: relative; width: 84px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.coach-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--n, 0) * 25%); border-radius: inherit; background: var(--tone); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s; }
.coach-meter.is-low { --tone: #e5484d; color: #e5484d; }
.coach-meter.is-mid { --tone: #f4a524; color: #f4a524; }
.coach-meter.is-good { --tone: #7ccf52; color: #7ccf52; }
.coach-meter.is-great { --tone: #2fbf71; color: #2fbf71; }
.coach-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.coach-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 1px dashed var(--border-strong); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); transition: background 0.3s, border-color 0.3s, color 0.3s; }
.coach-list li small { font-weight: 400; color: var(--muted); }
.coach-list li small::before { content: '· '; }
.coach-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); font-size: 10px; line-height: 1; color: #fff; }
.coach-list li.is-done { border-style: solid; border-color: color-mix(in srgb, #2fbf71 45%, transparent); background: color-mix(in srgb, #2fbf71 12%, transparent); color: var(--text); }
.coach-list li.is-done .coach-mark { color: var(--success); }
.coach-list li.is-done .coach-mark { border-color: #2fbf71; background: #2fbf71; }
.coach-list li.is-new { animation: coach-pop 0.4s var(--spring); }
.coach-list li.is-new .coach-mark { animation: coach-check 0.4s var(--spring); }
@keyframes coach-pop { 40% { transform: scale(1.08); } }
@keyframes coach-check { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .coach-list li.is-new, .coach-list li.is-new .coach-mark { animation: none; } }

/* ---------- comentarios del cliente como chinchetas (2026-10-07) ---------- */
#preview-device { position: relative; }
.client-pins { position: absolute; inset: 0; pointer-events: none; }
.preview-stage.is-picking .client-pins, .preview-stage.is-editing .client-pins { display: none; }
.client-pin { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px 0 0 -6px; padding: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 4px; background: var(--pink); color: #1b0420; font-size: 13px; font-weight: 800; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); cursor: pointer; pointer-events: auto; animation: pin-drop 0.5s cubic-bezier(0.34, 1.6, 0.64, 1) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform 0.15s; }
.client-pin:hover, .client-pin.is-open { transform: scale(1.15); }
.client-pin.is-resolved { background: #8b91b8; }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-14px) scale(0.6); } }
.pin-pop { position: absolute; z-index: 3; width: 260px; margin-left: -10px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--panel, #0e1545); color: var(--text); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); pointer-events: auto; font-size: var(--fs-small); animation: peek-in 0.25s ease both; }
.pin-pop p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pin-pop .c-ref { display: block; margin: 0 0 6px; }
.c-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-right: 6px; padding: 0 6px; border-radius: 10px 10px 10px 3px; background: var(--pink); color: #1b0420; font-size: var(--fs-caption); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .client-pin, .pin-pop { animation: none; } }

/* ---------- ficha de marca como portada (2026-10-07) ---------- */
.bv-hero { --brand: var(--pink); position: relative; overflow: hidden; align-items: center; gap: 24px; margin: 12px 0 20px; padding: 28px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: var(--radius-card); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%), linear-gradient(156deg, var(--card-grad-1) 11%, var(--card-grad-2) 76%), var(--card-base); }
.bv-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%); filter: blur(10px); pointer-events: none; }
.bv-hero .brand-logo { width: 168px; height: 104px; padding: 16px 20px; border: 0; border-radius: 18px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); }
.bv-hero .brand-logo span { font-size: 34px; }
.bv-id { position: relative; z-index: 1; margin-right: auto; min-width: 0; }
.bv-id .eyebrow { margin: 0 0 4px; }
.bv-hero h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.05; }
.bv-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 4px; font-size: var(--fs-small); color: var(--lilac); }
.bv-stats b { margin-right: 4px; font-size: 20px; color: var(--text); }
.bv-hero .brands-all-link { position: relative; z-index: 1; align-self: flex-start; }
.bv-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.bv-chip { display: flex; flex-direction: column; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface-row); color: var(--text); text-align: left; cursor: copy; transition: transform 0.3s var(--spring), box-shadow 0.25s; }
.bv-chip:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3); }
.bv-chip-color { display: block; height: 72px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--text) 12%, transparent); }
.bv-chip-label { padding: 8px 12px 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-chip code { padding: 2px 12px 12px; background: none; font-size: 12px; color: var(--muted); }
.bv-chip.is-copied { animation: chip-copied 0.6s ease; }
@keyframes chip-copied { 30% { transform: scale(0.95); box-shadow: 0 0 0 3px var(--pink); } }
.bv-type { --brand: var(--pink); display: flex; align-items: baseline; gap: 20px; margin: 4px 0 12px; padding: 16px 20px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 10%, var(--surface-row)); overflow: hidden; }
.bv-type-big { font-size: 64px; font-weight: 700; line-height: 1; color: var(--text); }
.bv-type-line { min-width: 0; font-size: 18px; color: var(--lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.bv-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; height: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-row); color: var(--text); text-decoration: none; transition: transform 0.3s var(--spring), border-color 0.2s; }
.bv-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.bv-thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.bv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bv-card-title { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bv-card .hint { font-size: 12px; }
#brand-body.is-in .bv-hero { animation: peek-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
#brand-body.is-in .bv-hero .brand-logo { animation: peek-logo 0.5s var(--spring) 0.1s both; }
#brand-body.is-in .bv-palette li { animation: peek-drop 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) both; animation-delay: calc(0.2s + var(--n, 0) * 60ms); }
#brand-body.is-in .bv-gallery li { animation: deal-in-card 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.25s + var(--i, 0) * 50ms); }
@media (max-width: 640px) {
  .bv-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .bv-hero .brand-logo { width: 128px; height: 80px; }
  .bv-type-big { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { #brand-body.is-in * { animation: none !important; } }

/* ---------- tema de marca en la pieza abierta (2026-10-07) ---------- */
/* --job-accent lo pone app.js (applyJobAccent) con el color principal de la marca. Se aclara un poco para que se lea
   sobre el azul de Studio; en el tema claro se usa tal cual. */
#view-job.has-accent { --job-ui: color-mix(in srgb, var(--job-accent) 70%, #ffffff); position: relative; isolation: isolate; overflow: clip; border-color: color-mix(in srgb, var(--job-accent) 30%, var(--card-border)); }
:root[data-theme="light"] #view-job.has-accent { --job-ui: var(--job-accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #view-job.has-accent { --job-ui: var(--job-accent); } }
/* Sin la franja de color en el borde de arriba (2026-10-08): no gustaba. Queda el tinte del borde y el halo. */
#view-job.has-accent::after { content: ''; position: absolute; left: -120px; top: -160px; width: 420px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--job-accent) 22%, transparent), transparent 70%); pointer-events: none; z-index: -1; animation: accent-glow 1.2s ease both; }
#view-job.has-accent .tab-ink { background: linear-gradient(90deg, var(--job-ui), color-mix(in srgb, var(--job-ui) 60%, var(--pink))); }
#view-job.has-accent .seg-pill { background: color-mix(in srgb, var(--job-accent) 32%, var(--selected-bg)); }
#view-job.has-accent .job-tab[aria-selected="true"] { color: var(--text); }
@keyframes accent-glow { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #view-job.has-accent::after { animation: none; } }

/* ---------- cabecera compacta y «+ Nueva» (2026-10-07) ---------- */
.topbar { transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.topbar.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
.topbar .brand img, .topbar .brand-anim { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; }
.topbar.is-scrolled .brand img, .topbar.is-scrolled .brand-anim { transform: scale(0.82); }
.topbar-new {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 0; padding: 0; margin-right: -8px; overflow: hidden;
  border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple, #b255c3), var(--pink));
  color: #1b0420; font: inherit; font-size: var(--fs-ui); font-weight: 700; white-space: nowrap;
  opacity: 0; transform: scale(0.6); cursor: pointer;
  transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin 0.4s, opacity 0.25s, transform 0.4s var(--spring);
}
.topbar-new span:first-child { font-size: 18px; line-height: 1; }
.topbar.has-new .topbar-new { max-width: 140px; padding: 8px 16px; margin-right: 0; opacity: 1; transform: none; box-shadow: 0 6px 16px rgba(251, 115, 255, 0.3); }
.topbar-new:hover { filter: brightness(1.08); }
@media (max-width: 600px) { .topbar-new .lbl-long { display: none; } .topbar.has-new .topbar-new { padding: 6px 12px; } }
@media (prefers-reduced-motion: reduce) { .topbar, .topbar-new, .topbar .brand img { transition: none; } }

/* ---------- búsqueda que sugiere (2026-10-07) ---------- */
.search-combo { position: relative; min-width: 0; }
.search-combo input { width: 100%; }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--panel); box-shadow: 0 18px 40px var(--shadow-strong, rgba(0, 0, 0, 0.45)); transform-origin: top; animation: ss-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ss-in { from { opacity: 0; transform: translateY(-6px) scaleY(0.96); } }
.ss-head { padding: 8px 12px 4px; font-family: 'Barlow', sans-serif; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pink); }
.ss-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; cursor: pointer; animation: peek-in 0.25s ease both; animation-delay: calc(var(--n, 0) * 25ms); }
.ss-item:hover, .ss-item[aria-selected="true"] { background: var(--surface-row-hover, rgba(255, 255, 255, 0.06)); }
.ss-item[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--pink); }
.ss-icon { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 800; }
.ss-icon.thumb-initials { position: relative; inset: auto; font-size: 12px; }
.ss-icon.is-logo { padding: 4px; background: #fff; }
.ss-icon.is-logo.is-dark { background: #14183f; }
.ss-icon.is-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ss-icon.is-person { border-radius: 50%; background: linear-gradient(135deg, var(--purple, #b255c3), var(--pink)); color: #1b0420; }
.ss-icon.is-status { border-radius: 50%; width: 14px; height: 14px; margin: 0 8px; background: #5b8cff; }
.ss-icon.is-status.is-active { background: var(--pink); }
.ss-icon.is-status.is-approved { background: #2fbf71; }
.ss-icon.is-status.is-review { background: #f4a524; }
.ss-icon.is-status.is-failed { background: #e5484d; }
.ss-label { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-label mark { background: none; color: var(--pink); }
.ss-extra { flex: none; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .search-suggest, .ss-item { animation: none; } }

/* ---------- versiones apiladas en la galería (2026-10-07) ---------- */
.g-stack { position: relative; display: block; }
.g-stack > .thumb { position: relative; z-index: 1; transition: transform 0.45s var(--spring); }
.g-back { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #e9ebf5; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); transform-origin: 50% 100%; transition: transform 0.5s var(--spring), filter 0.3s; filter: brightness(0.85); }
.g-back img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g-back[style*="--k:1"] { transform: translate(-5px, 4px) rotate(-4deg) scale(0.97); }
.g-back[style*="--k:2"] { transform: translate(5px, 7px) rotate(4deg) scale(0.94); }
.g-card:hover .g-stack > .thumb, .g-card:focus-visible .g-stack > .thumb { transform: translateY(-6px); }
.g-card:hover .g-back[style*="--k:1"], .g-card:focus-visible .g-back[style*="--k:1"] { transform: translate(-26%, 2px) rotate(-11deg) scale(0.9); filter: brightness(0.95); }
.g-card:hover .g-back[style*="--k:2"], .g-card:focus-visible .g-back[style*="--k:2"] { transform: translate(26%, 6px) rotate(11deg) scale(0.86); filter: brightness(0.95); transition-delay: 0.04s; }
.g-card:has(.g-stack) { position: relative; }
.g-card:has(.g-stack):hover { z-index: 4; }
.g-count { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 8px; border-radius: 999px; background: rgba(8, 13, 46, 0.85); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.g-count small { font-size: var(--fs-caption); font-weight: 600; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .g-back, .g-stack > .thumb { transition: none; } }

/* ---------- títulos de sección (2026-10-08) ---------- */
/* Vuelve la marca de agua (a petición del equipo): número grande con contorno detrás del título (ver .section-num más
   arriba). La etiqueta pequeña «01 ——» del 07-10 se quitó. */

/* ---------- cifras a cero, discretas (2026-10-07) ---------- */
.stats { display: flex; flex-wrap: wrap; }
.stats > .stat { flex: 1 1 0; min-width: 0; }
.stats > .stat.is-zero { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 8px; padding: 12px 16px; opacity: 0.6; align-self: stretch; }
.stats > .stat.is-zero .stat-num { font-size: 20px; }
.stats > .stat.is-zero:hover, .stats > .stat.is-zero.is-active { opacity: 1; }
.stats > .stat-quality { flex: 1 1 100%; }
/* Cuatro cifras iguales en una fila (2026-10-08): «0 aprobadas» quedaba pequeña y suelta y la calidad ocupaba una fila
   entera. Las que están a cero siguen apagadas, pero del mismo tamaño; la gráfica de calidad va dentro de su tarjeta. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats > .stat, .stats > .stat.is-zero { flex: none; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; align-self: stretch; }
.stats > .stat.is-zero .stat-num { font-size: 36px; }
.stats > .stat.stat-quality { grid-column: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.stats > .stat-quality .q-spark { max-width: 140px; align-self: center; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > .stat, .stats > .stat.is-zero { padding: 12px; }
  .stats > .stat.is-zero .stat-num, .stats > .stat .stat-num { font-size: 28px; }
}

/* ---------- «Ahora mismo» compacto en la cabecera (2026-10-07) ---------- */
.now-compact { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 16px; padding: 8px 16px 8px 12px; border: 1px solid color-mix(in srgb, #f4a524 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, #f4a524 10%, var(--surface-row)); color: var(--text); font-size: var(--fs-small); text-decoration: none; transition: border-color 0.2s, transform 0.3s var(--spring); animation: peek-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.now-compact .live-dot { background: #f4a524; box-shadow: 0 0 0 0 rgba(244, 165, 36, 0.6); }
.now-compact span:not(.live-dot):not(.now-compact-go) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lilac); }
.now-compact-go { color: #f4a524; font-weight: 700; transition: transform 0.2s; }
.now-compact:hover { border-color: #f4a524; transform: translateY(-1px); }
.now-compact:hover .now-compact-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .now-compact { animation: none; } }

/* ---------- transiciones entre secciones (2026-10-08) ---------- */
/* Cambio de página (app.js, withViewTransition): la que se va se desvanece subiendo un poco; la nueva entra desde
   abajo con una curva que frena suave. La cabecera fija no participa: se queda quieta. */
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar), ::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }
::view-transition-old(root) { animation: vt-out 0.2s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* Pestañas de la pieza (Vista previa, Revisión…): el panel nuevo aparece en vez de cambiar de golpe. */
.job-panel:not([hidden]) { animation: panel-in 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* Con «reducir movimiento» (2026-10-13): no desaparece la transición, se queda en un fundido corto sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-fade-out 0.15s ease both; }
  ::view-transition-new(root) { animation: vt-fade-in 0.2s ease both; }
  .job-panel:not([hidden]) { animation: vt-fade-in 0.2s ease; }
}

/* ---------- cabecera: estado en una tarjeta y abanico alineado (2026-10-08) ---------- */
/* «con Hermes» no se parte: «con» se quedaba solo al final de la primera línea. */
.hero h1 .accent { white-space: nowrap; }
.hero-status { margin-top: 36px; }
.hero-status .hero-steps { margin: 0; }
/* Con algo en marcha o esperando, los pasos, la línea «Ahora» y el aviso van juntos en una tarjeta. */
.hero-status:has(#hero-steps-live:not([hidden])), .hero-status:has(#now-compact:not([hidden])) {
  display: inline-block; max-width: 100%; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-row) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-status .hero-steps-live { display: block; margin: 16px 0 0; }
.hero-status .hero-steps-live .live-dot { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.hero-status .now-compact {
  display: flex; margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none;
}
.hero-status .now-compact:hover { transform: none; }
.hero-status .now-compact:hover strong { color: #f4a524; }
@media (min-width: 761px) {
  .hero-status .hero-steps { flex-wrap: nowrap; }
  .hero-status .hero-steps li + li::before { width: 28px; margin: 0 12px 0 4px; }
}
/* El abanico arriba, a la altura del titular, y más cerca del texto: antes iba centrado en vertical y a la derecha. */
.hero-grid { align-items: start; }
.hero-showcase { --fan-k: 1; }
@media (min-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 40px; }
  .hero-showcase { --fan-k: 1.2; height: 390px; margin-top: 8px; }
  .hero-showcase .show-card { width: 198px; height: 264px; margin-left: -99px; }
}
@media (min-width: 1800px) {
  .hero-grid { grid-template-columns: minmax(0, 820px) minmax(0, 1fr); }
  .hero-showcase { --fan-k: 1.32; height: 430px; }
  .hero-showcase .show-card { width: 218px; height: 290px; margin-left: -109px; }
}

/* ---------- una sola línea decorativa (2026-10-07) ---------- */
/* El hilo rosa con puntos de las secciones competía con el raíl de la izquierda: fuera. */
.section-thread.is-off { display: none !important; }

/* ---------- pantallas muy grandes (2026-10-07) ---------- */
/* En monitores de 1.800 px o más todo quedaba pequeño en el centro (el contenido ocupaba menos de la mitad). La
   portada se ensancha y la tipografía crece por sus variables. Sin «zoom» de CSS: varias animaciones colocan cosas en
   píxeles de pantalla (la carta que vuela, el abanico, la vista previa al pasar) y con zoom se descolocaban. */
@media (min-width: 1800px) {
  :root { --fs-caption: 0.8125rem; --fs-small: 0.875rem; --fs-ui: 0.9375rem; --fs-body: 1.0625rem; --fs-lead: 1.25rem; --fs-prose: 1.1875rem; --fs-title: 1.875rem; }
  body:has(#view-form:not([hidden])) #app,
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) #app { max-width: 1600px; }
  body:has(#view-form:not([hidden])) .foot-inner,
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) .foot-inner { max-width: 1552px; }
  .topbar { max-width: 1600px; }
  .hero h1 { font-size: 58px; }
  .hero .lead { max-width: 600px; font-size: 19px; }
  #brief-form { grid-template-columns: minmax(0, 1fr) 380px; }
  .section-title h2 { font-size: 34px; }
  .g-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .stat-num { font-size: 40px; }
}
@media (min-width: 2400px) {
  :root { --fs-caption: 0.875rem; --fs-small: 0.9375rem; --fs-ui: 1rem; --fs-body: 1.125rem; --fs-lead: 1.3125rem; --fs-prose: 1.25rem; --fs-title: 2rem; }
  body:has(#view-form:not([hidden])) #app,
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) #app { max-width: 1760px; }
  body:has(#view-form:not([hidden])) .foot-inner,
  body:has(#view-job:not([hidden]) #job-result:not([hidden])) .foot-inner { max-width: 1712px; }
  .topbar { max-width: 1760px; }
  .hero h1 { font-size: 66px; }
  .g-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ---------- formulario en cuatro pasos (2026-10-13) ---------- */
/* El orden se lee solo: 1 marca, 2 qué necesitas, 3 imágenes, 4 opciones y el botón. Las opciones dejan la columna
   derecha (queda para la marca) y usan las mismas tarjetas que las imágenes: lo elegido, en rosa. */
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  border: 1px solid var(--pink); color: var(--pink);
  font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 1px;
}
.kind-tabs > legend { margin-bottom: 12px; }
/* Con «Marca conocida…» debajo del campo, el paso 2 quedaba pegado. */
.brand-field { margin-bottom: 12px; }
/* Interruptor en vez de casilla: se enciende o se apaga, no se elige entre dos. */
.choice-switch input {
  appearance: none; flex: none; position: relative; width: 34px; height: 20px; margin: 2px 0 0; border-radius: 999px;
  background: var(--border-strong); cursor: pointer; transition: background 0.15s;
}
.choice-switch input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text); transition: transform 0.3s var(--spring), background 0.15s;
}
.choice-switch input:checked { background: var(--pink); }
.choice-switch input:checked::after { transform: translateX(14px); background: var(--on-accent); }
.choice-switch[hidden] { display: none; }
/* El botón principal es el único relleno del formulario, como «+ Nueva» en la cabecera. */
.btn-go {
  padding: 16px 28px; border-color: transparent;
  background: linear-gradient(135deg, var(--purple), var(--pink)); color: #1b0420; font-weight: 700;
  box-shadow: 0 8px 20px rgba(251, 115, 255, 0.28);
}
.btn-go:hover { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #1b0420; filter: brightness(1.08); box-shadow: 0 10px 24px rgba(251, 115, 255, 0.36); }
.actions { margin-top: 16px; }
@media (min-width: 1180px) {
  /* La columna derecha ya solo lleva la marca: sin la raya que la separaba de las opciones. */
  .brand-side { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
}
@media (min-width: 1180px) {
  /* Sin marca elegida no hay columna derecha (2026-10-13): el formulario ocupa todo el ancho en vez de dejar un hueco. */
  #brief-form:not(.has-brand) { grid-template-columns: minmax(0, 1fr); }
  #brief-form:not(.has-brand) .form-side { display: none; }
}
@media (prefers-reduced-motion: reduce) { .choice-switch input, .choice-switch input::after { transition: none; } }

/* ---------- espaciado del texto según su tamaño (2026-10-13) ---------- */
/* Hasta ahora ningún titular llevaba interletrado propio y varios heredaban el interlineado del texto corrido (1,55).
   Cuanto más grande la letra, más cerrada y con menos interlínea: a 48 px las letras se ven más separadas que a 14 px
   con el mismo valor. En em, para que acompañe al tamaño en cada ancho de pantalla. No cambia el texto corrido ni las
   etiquetas en Barlow espaciada, que son de la marca. */
/* Titulares de 40 px o más. */
.hero h1, .foot-title, .bv-hero h2 { letter-spacing: -0.022em; }
.hero h1, .foot-title { line-height: 1.08; }
/* Cifras grandes. */
.stat-num, .foot-stats dt, .art-card-pct, .time-card-total, .bh-stats dt { letter-spacing: -0.02em; }
/* Títulos de 26 a 34 px. Los de página (trabajo, ficha de marca, marcas) heredaban 1,55. */
.section-title h2, .panel-title, .job-head h2, .brand-head h2, .brands-head h2, .side-name { letter-spacing: -0.014em; }
.job-head h2, .brand-head h2, .brands-head h2 { line-height: 1.2; }
/* Títulos de 20 a 22 px. */
.md h4, .md h5, .bh-name, .md.is-brief .bf-title, .login-card h2 { letter-spacing: -0.01em; }
.login-card h2 { line-height: 1.25; }

/* ================================================================ Respuesta y accesibilidad (2026-10-13) ====== */
/* Nada de esto cambia cómo se ve la interfaz en reposo: es cómo responde al tocarla y cómo se adapta a los ajustes del
   sistema. El menú y los avisos, movidos por un muelle, están en sus secciones («5. Menú» y «Avisos»). */

/* ---------- respuesta al pulsar ---------- */
/* No había ni un :active: todo respondía al pasar por encima o al soltar. Ahora, al bajar el dedo. */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }
/* Sin la espera del doble toque ni el recuadro gris de iOS: la respuesta la da cada elemento. */
a, button, summary, label, select, input, textarea, [role="tab"], [role="option"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Al soltar vuelve suave; al pulsar, se hunde en 80 ms (la duración se cambia solo mientras está pulsado). */
.chip, .seg-btn, .theme-btn, .menu-btn, .history-jump, .locate-btn, .brand-row, .rail-icon {
  transition: transform 0.3s var(--ease-out), background-color 0.15s, border-color 0.15s, color 0.15s;
}
.job-tab { transition: color 0.15s, opacity 0.1s; }
.menu-item { transition: background-color 0.12s; }
.btn:active:not(:disabled), .topbar.has-new .topbar-new:active { transform: scale(0.97); transition-duration: 0.08s; }
.btn-sm:active:not(:disabled), .chip:active, .seg-btn:active, .theme-btn:active, .menu-btn:active, .history-jump:active,
.locate-btn:active, .rail-icon:active { transform: scale(0.95); transition-duration: 0.08s; }
.stat:active, .action-item:active:not(:disabled), .now-link:active, .g-card:active, .brand-row:active, .bv-card:active,
.bv-chip:active, .side-recent a:active, .bh-best:active { transform: scale(0.98); transition-duration: 0.08s; }
.stat.stat-static:active { transform: none; }
.job-tab:active, .link-btn:active, .back-link:active, .family-toggle:active, .menu-links button:active, .how-btn:active { opacity: 0.6; }
.menu-item:active { background: var(--selected-bg); }
.choice:active { border-color: var(--border-strong); }
.tabs label:active span, .segmented label:active span { opacity: 0.7; }
.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* ---------- pantallas táctiles ---------- */
/* Zona de toque de 44 px en los botones redondos de 34-36 px, sin cambiar lo que se ve. */
.menu-btn, .theme-btn, .locate-btn { position: relative; }
.menu-btn::after, .theme-btn::after, .menu-close::after, .locate-btn::after { content: ''; position: absolute; inset: -6px; }
/* Sin ratón no hay «pasar por encima»: el estado se quedaba pegado tras el toque (filas levantadas, con sombra). */
@media (hover: none) {
  .btn:hover, .stat:hover, .now-link:hover, .job-row:hover, .bv-chip:hover, .bv-card:hover, .side-recent a:hover,
  .bh-best:hover, .now-compact:hover { transform: none; }
  .job-row:hover { box-shadow: none; }
  .job-row:hover::before { opacity: 0; }
  .job-row:hover .status-badge::after { display: none; }
  .btn:active:not(:disabled) { transform: scale(0.97); }
  .stat:active, .now-link:active, .bv-chip:active, .bv-card:active { transform: scale(0.98); }
}

/* ---------- avisos ---------- */
/* Se arrastra hacia abajo para quitarlo; mientras se sujeta, su barra de tiempo se para. Por encima del menú lateral:
   al cambiar el tema desde el menú, en móvil, quedaba tapado. */
.toast { z-index: 110; touch-action: none; will-change: translate, opacity; }
.toast.is-held::after { animation-play-state: paused; }

/* ---------- ajustes de accesibilidad del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .chip:active, .seg-btn:active, .stat:active, .action-item:active, .now-link:active,
  .g-card:active, .brand-row:active, .theme-btn:active, .menu-btn:active, .history-jump:active { transform: none; opacity: 0.7; }
}
/* Menos transparencia: lo translúcido con desenfoque pasa a superficies lisas. */
@media (prefers-reduced-transparency: reduce) {
  .topbar.is-scrolled::before, .day-sep, .day-label { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sticky-actions, .pick-banner { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-status:has(#hero-steps-live:not([hidden])), .hero-status:has(#now-compact:not([hidden])) { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .g-score { background: #080d2e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Más contraste: bordes marcados, texto secundario más cerca del principal y barras lisas. */
@media (prefers-contrast: more) {
  :root, :root[data-theme="light"], :root[data-theme="dark"], :root:not([data-theme="dark"]) {
    --border: var(--border-strong);
    --muted: color-mix(in srgb, var(--text) 82%, var(--bg));
    --placeholder: color-mix(in srgb, var(--text) 70%, var(--bg));
  }
  .topbar.is-scrolled::before, .day-sep, .day-label { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar.is-scrolled::before { box-shadow: 0 2px 0 var(--text); }
  .sticky-actions, .toast, .row-menu-pop, .brand-suggest, .search-suggest, .alt-pop, .pin-pop, .shortcuts-dialog { background: var(--panel); border: 2px solid var(--text); }
  .side-menu { border-left: 2px solid #ffffff; }
  .btn-ghost, .chip, .choice, .job-row { border-color: var(--text); }
}

/* ---------- cambio de tema (2026-10-14) ---------- */
/* El tema nuevo se abre en círculo sobre el anterior, que se queda quieto: antes también le tocaba la animación de cambio
   de página y subía y se desvanecía debajo del círculo. */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; }

/* ---------- fila deslizable del historial (2026-10-14, app.js: swipeRow) ---------- */
/* Debajo de la fila, mientras se desliza: «Descargar» a la izquierda y «Archivar» a la derecha. Cada botón mide lo que
   la fila se ha apartado; pasada la mitad, el de archivar pasa a rosa y su texto se pega al borde de la fila. */
#history-list { position: relative; }
@media (pointer: coarse) { #history-list:not(.is-gallery) > .job-row { touch-action: pan-y; } }
.swipe-under {
  position: absolute; display: flex; overflow: hidden; margin: 0; padding: 0; list-style: none;
  border-radius: var(--radius); background: var(--field); pointer-events: none;
}
.swipe-btn {
  display: none; align-items: center; justify-content: center; height: 100%; min-width: 0; padding: 0 20px; border: 0;
  font: inherit; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; color: #ffffff;
  pointer-events: auto; cursor: pointer; transition: background-color 0.15s;
}
.swipe-dl { background: var(--btn-hover); }
.swipe-arch { margin-left: auto; background: var(--purple); }
.swipe-under[data-side="dl"] .swipe-dl, .swipe-under[data-side="arch"] .swipe-arch { display: flex; }
.swipe-under.is-commit .swipe-arch { justify-content: flex-start; background: var(--pink); color: var(--on-accent); }
.swipe-under.is-commit .swipe-dl { justify-content: flex-end; }

/* ================================================================ Bloque 2 (2026-10-14) ======================= */

/* ---------- muelle sin rebote ---------- */
/* Rebotaban interruptores, pastillas, insignias, el subrayado de las pestañas y las tarjetas al pasar el ratón: cosas que
   nadie ha lanzado. Ahora llegan con la curva de un muelle con amortiguación crítica (la de Apple por defecto: llega sin
   pasarse). El rebote se queda en lo que cae o se reparte: cartas del abanico, colores de la marca, sello de aprobado. */
:root { --spring: var(--ease-out); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.037, 0.123, 0.23, 0.34, 0.445, 0.541, 0.624, 0.695, 0.755, 0.804, 0.844, 0.877, 0.903, 0.924, 0.94, 0.954, 0.964, 0.972, 0.978, 0.983, 0.987, 0.99, 0.992, 0.994, 0.995, 0.997, 0.997, 1); }
}

/* ---------- cabecera translúcida ---------- */
/* Al bajar, el contenido pasa desenfocado por debajo en vez de quedar tras una barra casi opaca. Al 68 % se veía
   demasiado lo de detrás (2026-10-14, en producción): 82 % en oscuro y 85 % en claro, con el mismo desenfoque. El cristal aparece
   fundiéndose (antes el desenfoque salía de golpe) y, en lugar de la raya de 1 px, una sombra corta bajo la barra.
   Los rótulos de día del historial («Hoy», «Esta semana»), pegados a la cabecera, llevan el mismo cristal. */
:root { --topbar-bg: color-mix(in srgb, var(--bg) 82%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); } }
:root[data-theme="light"] { --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent); }
.topbar::before, .topbar.is-scrolled::before {
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.topbar.is-scrolled::before { opacity: 1; }
.topbar::after {
  content: ''; position: absolute; top: 100%; left: 50%; width: 100vw; height: 12px; transform: translateX(-50%);
  background: linear-gradient(color-mix(in srgb, var(--bg) 50%, transparent), transparent);
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.topbar.is-scrolled::after { opacity: 1; }
.day-sep, .day-label { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
/* Sobre el cristal, el gris pierde contraste: el nombre del tema va en el color del texto. */
.topbar.is-scrolled .theme-name { color: var(--text); }
/* Sin desenfoque disponible, el cristal sería transparente con el texto de detrás nítido: casi opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme="light"], :root:not([data-theme="dark"]) { --topbar-bg: color-mix(in srgb, var(--bg) 94%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar::before, .topbar.is-scrolled::before { box-shadow: 0 1px 0 var(--border); }
  .topbar::after { display: none; }
}
@media (prefers-contrast: more) { .topbar::after { display: none; } }

/* ---------- el menú «⋯» nace de su botón ---------- */
/* Aparecía de golpe; ahora crece desde la esquina del botón que lo abre (arriba a la derecha en ordenador, arriba a la
   izquierda en móvil y abajo a la izquierda el del pie de la ficha, que se abre hacia arriba). */
.row-menu[open] > .row-menu-pop { transform-origin: top right; animation: pop-in 0.3s var(--spring) both; }
.job-more[open] > .row-menu-pop { transform-origin: bottom left; }
@media (max-width: 640px) { .row-menu[open] > .row-menu-pop { transform-origin: top left; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .row-menu[open] > .row-menu-pop { animation: vt-fade-in 0.15s ease both; } }

/* ================================================================ Bloque 3: historial (2026-10-14) =========== */

/* ---------- estado solo cuando no es lo normal; en su sitio, la calidad ---------- */
/* «Lista» se repetía en casi todas las filas y no decía nada. Ahora la etiqueta sale solo en lo que pide atención (en
   curso, por revisar, fallida, cancelada) y en las terminadas va la calidad, el dato que más se mira, con los colores
   del aro de la galería. */
.job-row > .row-score { grid-column: 3; grid-row: 1; justify-self: end; }
.row-score {
  display: inline-flex; align-items: baseline; padding: 2px 10px; border-radius: var(--pill);
  font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent);
}
.row-score.is-high { --tone: #2fbf71; }
.row-score.is-mid { --tone: #f4a524; }
.row-score.is-low { --tone: #e5484d; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .row-score.is-high { --tone: #0b7a4b; } :root:not([data-theme="dark"]) .row-score.is-mid { --tone: #9a5b00; } :root:not([data-theme="dark"]) .row-score.is-low { --tone: #b0223b; } }
:root[data-theme="light"] .row-score.is-high { --tone: #0b7a4b; }
:root[data-theme="light"] .row-score.is-mid { --tone: #9a5b00; }
:root[data-theme="light"] .row-score.is-low { --tone: #b0223b; }
.row-score.flip-in { animation: badge-flip 0.5s var(--spring) both; }
@media (prefers-reduced-motion: reduce) { .row-score.flip-in { animation: none; } }

/* ---------- la fila entera abre la newsletter ---------- */
/* Como ya pasaba en el móvil: el nombre cubre toda la tarjeta, así que sobra «Ver». «Descargar» queda en su sitio pero
   solo aparece al pasar el ratón por la fila o al llegar con el tabulador; en pantallas táctiles, a la vista. Lo que
   pide hacer algo («Revisar el brief», «Reintentar») sigue siempre a la vista. */
.job-row .name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.job-row .row-actions, .job-row .thumb, .job-row [data-family], .job-row .family-list, .job-row .err a { position: relative; z-index: 1; }
.job-row > .row-actions .row-view { display: none; }
@media (hover: hover) {
  .job-row > .row-actions .row-download { opacity: 0; transition: opacity 0.15s; }
  .job-row:hover > .row-actions .row-download, .job-row:focus-within > .row-actions .row-download { opacity: 1; }
}

/* ---------- cifras a cero, en segundo plano ---------- */
/* Siguen del mismo tamaño que las demás (decisión del 2026-10-08), pero sin el relleno de tarjeta: borde discontinuo y
   en gris, para que «0 en curso» no pese lo mismo que «64 newsletters». Al elegirla como filtro, vuelve a ser tarjeta. */
.stats > .stat.is-zero:not(.is-active) { opacity: 1; background: transparent; border: 1px dashed var(--border-strong); box-shadow: none; }
.stats > .stat.is-zero:not(.is-active) .stat-num, .stats > .stat.is-zero:not(.is-active) .stat-label { color: var(--muted); }
.stats > .stat.is-zero:not(.is-active):hover { border-color: var(--pink); }

/* ---------- menú «⋯» en el móvil (2026-10-14) ---------- */
/* Cuando los botones de la fila van a la derecha, bajo el estado (ver «Historial en móvil»), el menú se abría hacia la
   derecha (left: 0) y quedaba fuera de la pantalla: en esas filas se abre hacia la izquierda, desde su botón. */
@media (max-width: 640px) {
  .job-row:not(:has(> .mini-track)) > .row-actions:is(:has(> .row-view + .row-menu), :has(> .row-view + .row-download + .row-menu)) .row-menu-pop { left: auto; right: 0; }
  .job-row:not(:has(> .mini-track)) > .row-actions:is(:has(> .row-view + .row-menu), :has(> .row-view + .row-download + .row-menu)) .row-menu[open] > .row-menu-pop { transform-origin: top right; }
}

/* ---------- lo que tarda, dentro del botón (2026-10-14) ---------- */
/* «Generar newsletter → · ~20 min»: la acción y lo que cuesta juntas, sin texto al lado del botón. Más fina que el
   rótulo, para que se lea como un dato y no como parte de la orden. */
.go-eta { margin-left: 2px; font-weight: 500; opacity: 0.78; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- Auditoría de UX (2026-10-14) */
/* H-18. Enlace para saltar al formulario: primer elemento con Tab, solo visible con el foco. */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-md); background: var(--panel); color: var(--text); font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px var(--shadow-strong); }
.skip-link:focus { top: 12px; }
#app:focus { outline: none; }

/* H-20. A 768 px la última carta del abanico acababa en x = 783 y la página se desplazaba de lado. */
@media (max-width: 1179px) { .hero-showcase { overflow-x: clip; } }

/* H-12. Texto secundario dentro de lo seleccionado: --muted sobre --selected-bg daba 3,27:1 en oscuro. */
.brand-suggest li:hover .bs-note, .brand-suggest li[aria-selected="true"] .bs-note,
:is(.chip.is-active, .chip[aria-pressed="true"], .seg-btn[aria-pressed="true"], .segmented input:checked + span) :is(small, .hint, .muted) { color: var(--lilac); }

/* H-15. «Cerrar sesión» medía 85 × 20 px en móvil. */
@media (max-width: 640px) {
  #requester-change, .has-account #account-logout { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .has-account #requester-change { display: none; }
}

/* H-02. La tarjeta de entrada, con el logo y una línea de qué es Studio; H-01, la contraseña dentro de la tarjeta. */
.login-logo { display: block; width: 99px; height: 40px; margin: 0 auto 16px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .login-logo { filter: brightness(0) opacity(0.88); } }
:root[data-theme="light"] .login-logo { filter: brightness(0) opacity(0.88); }
.login-lead { margin: 0 0 16px; color: var(--muted); }
.login-pass { display: grid; gap: 12px; margin: 16px 0 0; text-align: left; }
.login-pass label { margin: 0; }
.login-pass input[type="password"], .login-pass input[type="email"] {
  display: block; width: 100%; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--field); color: var(--text); font: inherit; font-size: var(--fs-body);
}
.login-pass input[type="password"]:focus, .login-pass input[type="email"]:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 25%, transparent); }
.login-pass-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }

/* H-05. Aviso en línea junto al botón de generar (mismo patrón que «Hermes tendría que adivinar esto»). */
.brand-cross { margin: 0 0 16px; }
.brand-cross p { margin: 0 0 8px; }

/* H-07. Lo que ya comprobó Studio en la lista de aprobación, y el aviso al exportar sin aprobar. */
.check-auto { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: var(--pill); background: var(--success-tint); color: var(--success); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.export-gate { margin: 8px 0 0; }
.export-gate p { margin: 0 0 8px; }

/* H-23. Móvil: las 4 cifras y las 8 píldoras ocupaban una pantalla antes de la primera newsletter. Filtros en una fila que
   se desplaza de lado y cifras más bajas. */
@media (max-width: 640px) {
  .chips-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
  .chips-row::-webkit-scrollbar { display: none; }
  .chips-row .chips { flex-wrap: nowrap; margin: 12px 0; }
  .chips-row .chips > *, .chips-row .chips-side > * { flex: none; }
  .chips-row .chips-side { display: flex; gap: 8px; flex: none; }
  .stats { gap: 8px; margin-bottom: 12px; }
  .stats > .stat, .stats > .stat.is-zero { padding: 8px 12px; gap: 0; }
  .stats > .stat.is-zero .stat-num, .stats > .stat .stat-num { font-size: 22px; }
  .stats > .stat-quality .q-spark { display: none; }
  /* Página de la newsletter: los dos controles de vista, compactos y a todo el ancho; sin «Los dos» ni «Libre». */
  .preview-head { gap: 8px; margin-bottom: 12px; }
  .preview-head .view-toggle label:has(input[value="both"], input[value="free"]) { display: none; }
  .preview-head .segmented { display: flex; flex: 1 1 100%; padding: 2px; }
  .preview-head .segmented label { flex: 1 1 0; text-align: center; }
  .preview-head .segmented span { padding: 6px 8px; font-size: var(--fs-small); }
  .job-request summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #job-brand-link { display: inline-block; }
}

/* H-08. Por qué Móvil puede salir «Correcto» en la revisión automática y bajo en la de arte. */
.art-mobile-note { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--warning); background: var(--warning-subtle); font-size: var(--fs-small); }
.art-mobile-note p { margin: 0 0 8px; }
.art-card-bars b small { font-weight: 500; opacity: 0.7; }

/* H-17. Brief temprano: mismo marco que «Revisar el brief», pero sin el tono de aviso (Hermes no está parado). */
.early-brief { border-color: var(--border-strong); }
.early-brief.is-collapsed .review-brief-view { display: none; }
.early-brief-status { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--success); background: var(--success-subtle); font-size: var(--fs-small); }