/* Boogie QC — base styles. Brand accent is the single --accent variable (handoff §12). */
:root {
  --accent: #00C8D7;          /* Boogieman brand cyan */
  --accent-dim: #00a5b2;
  --bg: #0d1117;              /* blue-black neutrals per Boogieman spec */
  --bg-raised: #161c24;
  --bg-input: #0a0e13;
  --border: #26303c;
  --text: #e6edf3;
  --text-muted: #8b98a5;
  --danger: #ff5d5d;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over display:flex/grid classes. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar-home { margin-left: 16px; font-size: 13px; }
.user-chip { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.user-chip em {
  font-style: normal;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  padding: 1px 8px;
  margin-left: 6px;
  font-size: 11px;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-logo { height: 26px; width: auto; }
/* El wordmark va envuelto en .brand-name: .brand es inline-flex con gap 8px (logo↔nombre)
   y un texto suelto + <span> serían DOS items flex → "Boogie Review" con espacio. */
.brand-name span { color: var(--accent); }
.brand-lg { font-size: 26px; margin: 0 0 4px; }
/* Versión visible (topbar junto al brand; login al pie del card). Se bumpea en cada update. */
.app-version { font-size: 11px; color: var(--text-muted); margin-left: 8px; letter-spacing: 0.2px; }
.app-version-login { margin: 14px 0 0; text-align: center; }

.page { max-width: 1100px; margin: 0 auto; padding: 28px 20px; }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 22px; }

/* Cards */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}

.title-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.title-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.title-card h2 { margin: 0; font-size: 17px; }
.counters { font-size: 13px; color: var(--accent); margin-bottom: 0; }

.empty-state { text-align: center; padding: 48px 20px; }
.muted { color: var(--text-muted); }
a { color: var(--accent); }

/* Forms */
label { display: block; font-size: 13px; color: var(--text-muted); margin: 14px 0 0; }
input, textarea, select, button { font-family: inherit; }
input[type="text"], input[type="email"], input[type="password"], textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-error { color: var(--danger); font-size: 13px; }

/* Buttons */
.btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  /* Un botón jamás se subraya (los <a class=btn> heredaban el underline del UA) ni
     se parte en dos líneas (el ⚙ quedaba arriba de "Config" en la topbar). */
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Los <label class="btn"> (subir archivo) heredaban el margin-top de los labels de
   formulario y quedaban más abajo que sus vecinos. Un botón no lleva ese margen. */
label.btn { margin: 0; }
.btn-primary {
  background: var(--accent);
  color: #06282c;
  font-weight: 600;
}
/* Hover de lo cyan (20-ago, Fernando): el texto se iba al mismo cyan y no se leía →
   texto BLANCO en hover de botones primary y chips activos. */
.btn-primary:hover { background: var(--accent-dim); color: #fff; }
.btn-ghost { border-color: var(--border); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Login */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}
.login-card { width: 340px; }
.login-card .btn { width: 100%; margin-top: 18px; }

.card-link { color: var(--text); text-decoration: none; }
.card-link:hover { color: var(--accent); }
.title-card { cursor: pointer; }
.title-card:hover { border-color: var(--accent); }
.hint { font-size: 13px; margin: -6px 0 18px; }
.status-accent { color: var(--accent); }
.drop-target {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent);
}
.breadcrumb { margin: 0 0 2px; font-size: 13px; }
.breadcrumb a { text-decoration: none; color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.h-sub { font-size: 14px; font-weight: 400; }

/* Filter chips */
.filter-bar { display: flex; gap: 8px; margin-bottom: 18px; }
.chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 14px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  /* Un chip jamás se parte entre renglones: si no entra, baja ENTERO (pedido 11-ago:
     el «📁 Materiales» de las cards quedaba cortado al medio). */
  display: inline-block;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-active {
  border-color: var(--accent);
  color: #06282c;
  background: var(--accent);
  font-weight: 600;
}
.chip.chip-active:hover, #qc-filter .chip.chip-active:hover, #kind-tabs .chip.chip-active:hover { color: #fff; }
.client-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip-client { font-size: 12px; padding: 3px 10px; }
.chip-mini {
  padding: 1px 8px;
  font-size: 11px;
  cursor: default;
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* Toolbar del listado: buscador + orden + toggle grilla/lista (a la derecha de las solapas) */
#kind-tabs { flex-wrap: wrap; align-items: center; }
.list-toolbar { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.list-toolbar input[type="search"] {
  width: 220px;
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 14px;
}
.list-toolbar select { width: auto; margin: 0; padding: 6px 10px; font-size: 13px; }
.card-due { font-size: 12px; }

/* Filtro por estado QC: chips con el color de su estado (mismo lenguaje que .mbadge) */
#qc-filter { margin-top: -8px; }
/* Aviso de filtros activos que ocultan títulos (20-ago). */
.filter-notice {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 6px 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: rgba(255, 176, 32, 0.12); border: 1px solid rgba(255, 176, 32, 0.45); color: #ffcf6b;
}
.filter-notice .btn { margin-left: auto; }
.chip-qc-pending { color: #f0a437; border-color: #f0a437; }
.chip-qc-pending.chip-active { background: #f0a437; border-color: #f0a437; color: #2a1a05; }
.chip-qc-review { color: var(--accent); border-color: var(--accent-dim); }
.chip-qc-changes { color: var(--danger); border-color: var(--danger); }
/* MockUps incompletos (7-sep): faltan slots del catálogo de 10 — reclamo a la vista. */
.family-chip-missing { color: var(--danger); border-color: var(--danger); }
/* Strip del visor: slot del catálogo SIN subir — rojo, no navegable. */
.rv-family-missing { color: var(--danger); border-color: var(--danger); opacity: 0.85; cursor: default; }
/* 22-oct ML: rótulo de cada set de mockups en la tira del visor (original / idiomas extra) */
.rv-family-lang { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); margin: 0 2px 0 8px; align-self: center; }
.rv-family-lang-active { color: var(--accent); }
/* 22-oct ML: pestañas por idioma del 🧩 */
.family-lang-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.family-lang-tab.family-lang-miss:not(.chip-active) { border-color: #7a3a3a; color: #ffb1b1; }
.mockup-langs-dialog { width: min(440px, 92vw); }
.mockup-langs-dialog .ml-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.mockup-langs-dialog .ml-item { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; }
.mockup-langs-dialog .ml-add { display: flex; gap: 8px; align-items: center; }
.mockup-langs-dialog .ml-add input { flex: 1; margin: 0; }
.mockup-langs-dialog .ml-sub { margin: 10px 0 0; }
.chip-qc-approved { color: #3ddc84; border-color: #3ddc84; }
#qc-filter .chip-active { color: #06282c; }
.chip-qc-changes.chip-active { background: var(--danger); border-color: var(--danger); }
.chip-qc-approved.chip-active { background: #3ddc84; border-color: #3ddc84; }
.chip-qc-falta.chip-active { background: var(--text-muted); border-color: var(--text-muted); }

/* Vista Lista: filas compactas, thumbnail chico */
.title-grid.list-view { display: flex; flex-direction: column; gap: 6px; }
.list-view .title-card { padding: 6px 12px; align-items: center; gap: 12px; }
.list-view .title-poster { width: 34px; height: 50px; border-radius: 4px; font-size: 8px; }
.list-view .title-card-info { display: flex; align-items: center; gap: 16px; }
.list-view .title-card-info > * { margin: 0; }
.list-view .title-card-head { flex: 1 1 34%; min-width: 0; }
.list-view .title-card-head h2 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-view .title-team { flex: 1 1 30%; }
.list-view .counters { flex: 0 0 auto; white-space: nowrap; }

/* Pill Branded/UnBranded del diálogo de título + tachito de archivar en la card */
.kind-pill { display: flex; gap: 6px; margin: 6px 0 12px; }
.btn-archive { padding: 4px 9px; font-size: 13px; }
.btn-archive:hover { border-color: var(--danger); color: var(--danger); }

/* Barra global de progreso de subidas: fija abajo al centro, sobre todo lo demás */
.upload-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 80;
  width: min(440px, 84vw);
  background: var(--bg-raised);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  padding: 10px 16px 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
.upload-bar[hidden] { display: none; }
/* 6-oct: la barra del sync de Monday va arriba de la de subidas cuando están las dos */
#qc-upload-bar:not([hidden]) ~ #qc-sync-bar { bottom: 104px; }
.upload-bar-label { display: block; font-size: 13px; margin-bottom: 7px; color: var(--text); }
.upload-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-input);
  overflow: hidden;
}
.upload-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.15s linear;
}

/* Marca de instancia LOCAL (solo aparece en la Mac; producción no la muestra) */
.env-badge {
  background: #f0a437;
  color: #2b1d05;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 8px;
}
/* 22-oct 💾 cuota del hosting (layout.php / config.php) */
.env-badge-disk { text-decoration: none; }
.env-badge-disk-warn { color: #ffd27a; background: #4a3200; border: 1px solid #f0b429; }   /* 23-oct: el texto ámbar sobre el naranja base no se leía */
.env-badge-disk-crit { color: #fff; background: #c0392b; border: 1px solid #c0392b; }
.disk-level-warn { color: #f0b429; }
.disk-level-crit { color: #ff6b6b; }
.env-badge-test { background: #b388ff; color: #1a0b33; }   /* 🧪 sitio de pruebas qc-test */

/* Config (admin): grilla de cards de settings + preview del mail */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.config-card { padding: 18px 20px; }
.config-card h2 { margin: 0 0 12px; font-size: 16px; }
.config-card-wide { grid-column: 1 / -1; }
.config-subhead { margin: 16px 0 6px; font-size: 14px; }
.logos-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 12px; }
.logos-results li { padding: 3px 0; border-bottom: 1px solid var(--border); }
.logos-results li .muted { margin-left: 4px; }
.config-card textarea {
  width: 100%;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.mail-preview {
  width: 100%;
  height: 640px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 12px;
  background: #0d1117;
}
.mail-preview[hidden] { display: none; }
.mail-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 2px;
}
.mail-toolbar select { width: auto; margin: 0; padding: 4px 8px; font-size: 12px; }
.toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.mail-editor { height: 720px; }
.hint { margin-top: -8px; }

/* Home: dos botones grandes en el centro para elegir el mundo (Branded / UnBranded) */
.home-choice {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: calc(100vh - 220px);
}
.home-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(340px, 42vw);
  aspect-ratio: 16 / 10;
  border: 2px solid #E50914;      /* marco rojo Netflix: acá viven títulos de Netflix */
  border-radius: 18px;
  background: var(--bg-raised);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.home-btn:hover {
  border-color: #E50914;
  box-shadow: 0 0 0 2px #E50914, 0 12px 36px rgba(229, 9, 20, 0.35);
  transform: translateY(-3px);
}
.home-btn-label {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text);
}
.home-btn:hover .home-btn-label { color: #fff; }   /* 9-oct (Fernando): con el brillo rojo, el texto queda blanco */
.home-btn-alt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: -6px;
}
.home-btn-sub { font-size: 13px; }
.card-folder { text-decoration: none; margin-left: 4px; }

/* Monday sync: badge de grupo (título que salió de "En proceso") + fila de metadata */
.mbadge {
  display: inline-block;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 6px;
}
.mbadge-ok { color: #3ddc84; border: 1px solid #3ddc84; }
.mbadge-bad { color: var(--danger); border: 1px solid var(--danger); }
.mbadge-warn { color: #f0a437; border: 1px solid #f0a437; }
.mbadge-neutral { color: var(--text-muted); border: 1px solid var(--border); }
.mbadge-accent { color: var(--accent); border: 1px solid var(--accent-dim); }
p.muted > .mbadge:first-child { margin-left: 0; margin-right: 4px; }
.monday-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  margin: 4px 0 0;
}
.monday-row b { color: var(--text); font-weight: 600; }
.monday-row .chip-mini { cursor: pointer; text-decoration: none; }
.monday-row .chip-mini:hover { border-color: var(--accent); color: var(--accent); }

/* Bible group cards */
.group-card { padding: 0; overflow: hidden; cursor: pointer; }
.group-card:hover { border-color: var(--accent); }
.group-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--bg-input);
}
.group-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
.group-card-body { padding: 12px 14px; }
.group-card-body h2 { margin: 0; font-size: 16px; }
.group-card-body p { margin: 4px 0 0; font-size: 13px; }
.group-meta { display: flex; align-items: center; gap: 8px; }
/* Team in charge, on the project card and the title header. */
.title-team { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin: 2px 0 0; }
.title-team b { color: var(--text); font-weight: 600; }

/* Bible group page */
.page-head-main { min-width: 0; }
.head-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.group-title-row { display: flex; align-items: center; gap: 10px; }
.group-title-row h1 { margin: 0; font-size: 24px; }
.btn-icon {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.18s ease-out, border-color 0.18s ease-out;
}
.btn-icon:hover { color: var(--accent); border-color: var(--border); }
.group-title-edit { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.group-title-edit input { margin-top: 0; width: auto; }
.group-title-edit input[name="name"] { width: 260px; }
.group-title-edit input[name="variant"] { width: 220px; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }   /* 6-oct: 🗑 Borrar seleccionadas */
.btn-danger:disabled { opacity: .5; }
.btn-danger-ghost { border-color: var(--border); color: var(--text-muted); }
.btn-danger-ghost:hover { border-color: var(--danger); color: var(--danger); }
/* Pedir corrección en el popup de aprobación (20-ago, Fernando): rojo SUAVE siempre
   visible al lado de "Dar OK" (el ghost gris se perdía); rojo pleno al hover. */
.btn-request {
  background: rgba(255, 93, 93, 0.16); border-color: rgba(255, 93, 93, 0.55); color: var(--danger);
}
.btn-request:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-request:disabled { background: rgba(255, 93, 93, 0.08); border-color: rgba(255, 93, 93, 0.3); }
/* Dar OK en verde (20-ago, Fernando): mismo verde de "Aprobado" (#3ddc84), texto oscuro. */
.btn-ok { background: #3ddc84; border-color: #3ddc84; color: #062a18; }
.btn-ok:hover:not(:disabled) { background: #5ee89a; border-color: #5ee89a; }

.refgroup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .refgroup-layout { grid-template-columns: 1fr; }
}
.refgroup-side { position: sticky; top: 20px; }
.refgroup-side label { margin-top: 0; }
.refgroup-side textarea { resize: vertical; min-height: 220px; }
.attrs-status { font-size: 12px; margin: 8px 0 0; min-height: 1em; }
.side-sep { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.side-meta { margin: 0; font-size: 13px; }

.empty-drop {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 60px 24px;
  text-align: center;
  transition: border-color 0.18s ease-out;
}
.empty-drop p { margin: 4px 0; }

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 200, 215, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drop-overlay-box {
  border: 2px dashed var(--accent);
  border-radius: 14px;
  background: var(--bg-raised);
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  padding: 28px 44px;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.asset-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.asset-cell {
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.18s ease-out;
}
.asset-cell img {
  width: 100%;
  aspect-ratio: 5 / 4;    /* 19-ago: misma caja casi cuadrada que el visor, recorte centrado */
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: zoom-in;
  background: var(--bg-input);
}
.asset-cover { border-color: var(--accent); }
.cover-chip {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: var(--accent);
  color: #06282c;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  padding: 2px 8px;
}
.asset-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 4px;
}
.asset-cell:hover .asset-actions { display: flex; }
.asset-actions button {
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  padding: 3px 7px;
  font-size: 12px;
}
.asset-actions button:hover { background: var(--accent); color: #06282c; }
.upload-btn { display: inline-block; cursor: pointer; }

select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
}

/* Lightbox */
.lightbox {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 95vw;
  max-height: 95vh;
}
.lightbox img {
  max-width: 95vw;
  max-height: 86vh;
  display: block;
}
.lb-wrap { position: relative; display: inline-block; }
.lb-crop {
  position: absolute;
  border: 2px dashed var(--accent);
  background: rgba(0, 200, 215, 0.12);
  pointer-events: none;
}
.lb-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-wrap: wrap;
}
.lb-bar select { width: auto; margin: 0; }
#lb-crop-controls { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Dashboard: title cards with vertical poster */
.title-card { display: flex; gap: 14px; padding: 12px; }
.title-poster {
  width: 74px;
  height: 111px;              /* 2:3 vertical, small but recognizable */
  object-fit: cover;
  border-radius: 7px;
  background: var(--bg-input);
  flex-shrink: 0;
}
.title-poster-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  border: 1px dashed var(--border);
}
.title-card-info { flex: 1; min-width: 0; }

/* Step bar (loading order: UBAs → personajes → locaciones → props) */
.step-bar {
  display: flex;
  gap: 8px;
  margin-top: 16px;   /* 10-sep: se encimaba con la caja de Logos (que no deja margen abajo) */
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.18s ease-out, border-color 0.18s ease-out;
}
.step-bar { align-items: center; }
.step-bar .step-back { margin-right: 4px; }   /* 30-sep «← Títulos», a la izquierda de UBAs */
.step:hover { border-color: var(--accent); color: var(--text); }
.step-active { border-color: var(--accent); color: var(--text); background: rgba(0, 200, 215, 0.07); }
.step-active .step-n { background: var(--accent); color: #06282c; }
.step-count { color: var(--accent); font-size: 12px; }

/* UBA gallery (step 1) — each card opens its QC */
.uba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.uba-card { padding: 0; overflow: hidden; cursor: pointer; transition: border-color 0.18s ease-out; }
.uba-card:hover { border-color: var(--accent); }
/* All UBA thumbnails share the same horizontal frame regardless of format
   (vertical posters belong to title covers only). */
.uba-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--bg-input);
}
.uba-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
.uba-body { padding: 10px 12px 12px; }
.uba-body h2 { margin: 0 0 6px; font-size: 15px; }
.uba-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; flex-wrap: wrap; }
.small { font-size: 12px; margin: 0; }

/* Materials intake card — 10-sep (Fernando): UNA línea, botones chicos, sin texto explicativo.
   La card entera sigue siendo la zona de drop (borde punteado + .drop-target al arrastrar). */
.mat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-style: dashed;
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}
.mat-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mat-hint { white-space: nowrap; }
.mat-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.mat-actions .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
/* ⚙ Configuración del proyecto (15-sep): misma fila que Subir materiales pero borde sólido
   (no es zona de drop). Herramientas a la derecha, en chico. */
.cfg-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; }
.cfg-actions { margin-left: 0; }
.cfg-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; white-space: nowrap; }
.cfg-tools a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); }
.cfg-tools a:hover { color: var(--accent); border-bottom-color: var(--accent); }
#btn-logos-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* Fila de filtros del round (15-sep): diseñadores a la izquierda, chips «Ver: Por diseñador /
   Por categoría» a la derecha. */
.filter-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.filter-row .filter-bar { margin-bottom: 0; flex-wrap: wrap; }
.filter-row .group-filters { margin-left: auto; align-items: center; }
.btn-drive {
  /* Degradé cyan de la casa → azul Google Drive (pedido 12-ago; el verde no gustó) */
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, #4285F4 100%);
  color: #0d1117;
  font-weight: 600;
}
.btn-drive:hover {
  background: linear-gradient(135deg, #2fd9e6 0%, #5a95f5 100%);
  color: #0d1117;
}
.auto-status { width: 100%; margin: 0; min-height: 0; }
.auto-status:empty { display: none; }
.mat-summary { margin: 12px 0; padding-left: 20px; }
.mat-summary li { margin: 4px 0; }
.mat-summary li.mat-warn { color: #f0a437; }   /* 17-sep: solo avisos; el detalle va a consola */
.mat-cat-row .uba-info { margin-left: 6px; }
/* ℹ Datos del deck (21-sep, Fernando): amarillo = faltan los 3 chips, verde = cargados. Misma paleta que
   los chips de QC (pendiente #f0a437 / aprobado #3ddc84). Vale para la card, la fila de la tanda y el visor. */
.uba-info-pending { background: #f0a437; border-color: #f0a437; color: #2a1a05; }
.uba-info-done { background: #3ddc84; border-color: #3ddc84; color: #06282c; }
.uba-info-pending:hover, .uba-info-done:hover { color: #fff; }
/* 24-sep (Fernando): como el botón «Nueva versión», el ℹ con info pendiente late para llamar a completarla (mismo
   doble pulso, en naranja). Se frena al pasar el mouse; con reduced-motion, fade lento. */
@keyframes qc-info-heartbeat {
  0%   { background: #f0a437; box-shadow: 0 0 0 0 rgba(240, 164, 55, .75); }
  12%  { background: #ffc978; box-shadow: 0 0 0 5px rgba(240, 164, 55, .35); }
  24%  { background: #b87718; box-shadow: 0 0 0 2px rgba(240, 164, 55, .15); }
  36%  { background: #ffc978; box-shadow: 0 0 0 8px rgba(240, 164, 55, .25); }
  60%  { background: #f0a437; box-shadow: 0 0 0 12px rgba(240, 164, 55, 0); }
  100% { background: #f0a437; box-shadow: 0 0 0 0 rgba(240, 164, 55, 0); }
}
@keyframes qc-info-fade {
  0%, 100% { background: #f0a437; }
  50%      { background: #a8701f; }
}
.uba-info-pending { animation: qc-info-heartbeat 1.6s ease-in-out infinite; }
.uba-info-pending:hover, .uba-info-pending:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .uba-info-pending { animation: qc-info-fade 3s ease-in-out infinite; }
}
.mat-unclass-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin: 8px 0 12px;
}
.mat-uitem { display: flex; align-items: center; gap: 10px; }
.mat-uitem img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 7px;
  background: var(--bg-input);
  flex-shrink: 0;
}
.mat-uname {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mat-uitem select { width: auto; margin: 0; }

/* Embedded curation overlay */
.curation-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.curation-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--accent);
}
.curation-bar .btn { margin-left: auto; }
#curation-frame { flex: 1; border: none; width: 100%; }

/* Tabs */
/* Pieces table */
.pieces-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pieces-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.pieces-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }

/* /users (12-ago): acciones APILADAS en columna angosta + fecha en una línea —
   antes los botones en fila ensanchaban la tabla y desalineaban los renglones. */
.user-actions { display: flex; flex-direction: column; gap: 4px; width: 148px; }
.user-actions .btn { width: 100%; justify-content: center; padding: 4px 8px; font-size: 12.5px; }
.u-sent { white-space: nowrap; font-size: 12.5px; }
.state {
  font-size: 12px;
  border-radius: 10px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.state-in_review { color: var(--accent); border-color: var(--accent-dim); }
.state-pending { color: #f0a437; border-color: #7a5a24; }   /* 20-ago: nadie la revisó todavía */
.state-changes_requested { color: #ff7a7a; border-color: #a33a3a; }   /* 23-oct: rojo más firme (acción) */
.state-approved { color: #4ade80; border-color: #2c5e3f; }
.state-killed { color: var(--muted); border-color: var(--border); }   /* 5-oct: killed no espera nada */

/* Review screen: full-bleed, own vertical layout */
.page:has(.review-page) { max-width: none; padding: 0; }
.review-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 52px);
}
.review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.review-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.review-head-left .breadcrumb { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-head-right { display: flex; gap: 8px; align-items: center; }
.review-head-right select { width: auto; margin: 0; padding: 6px 8px; }

.review-split { display: flex; flex: 1; min-height: 0; }
.review-panel {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
#rv-left-panel { flex-basis: 58%; }
.review-divider {
  width: 6px;
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.18s ease-out;
}
.review-divider:hover { background: var(--accent); }

.viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #06090d;
  touch-action: none;
  cursor: grab;
  min-height: 0;
}
.viewport:active { cursor: grabbing; }
.stage { position: absolute; transform-origin: 0 0; }
.stage img { display: block; user-select: none; }
.overlay-svg { position: absolute; inset: 0; pointer-events: none; }
.pin-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pin-badge {
  position: absolute;
  transform: translate(-50%, -100%);
  color: #06282c;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px 10px 10px 2px;
  padding: 2px 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: pointer;
}
.pin-resolved { opacity: 0.4; }
/* Shape tags sit just above the top-left corner of their bounding box. */
.pin-badge-tag {
  transform: translate(-30%, -120%);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px 8px 8px 2px;
}
.pin-badge-active { outline: 2px solid #fff; }
.svg-zone {
  stroke: #ffd166;
  stroke-width: 2.5;
  stroke-dasharray: 8 5;
  fill: rgba(255, 209, 102, 0.07);
}

/* Live annotation editing */
.edit-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
}
.edit-box {
  position: absolute;
  border: 1.5px dashed var(--accent);
  border-radius: 2px;
}
.edit-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 3px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 26;
}
/* Comparador de versiones: "Versión [v2] vs [v1]" uno al lado del otro + modos */
.rv-versions-ctl, .rv-compare-ctl { display: inline-flex; align-items: center; gap: 2px; }
.rv-compare-ctl .tool { white-space: nowrap; font-size: 12px; }
.rv-compare-ctl[hidden] { display: none; }
.rv-vlabel { font-size: 12px; color: var(--text-muted); margin: 0 4px 0 2px; white-space: nowrap; }
.rv-vlabel.rv-vs { font-weight: 700; color: var(--accent); margin: 0 6px; }
#rv-version-select, #rv-compare-ver {
  font-size: 12px;
  font-weight: 700;
  width: auto;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text);
}
#rv-compare-ver { color: var(--text-muted); }
.rv-options .tool[disabled] { opacity: 0.4; cursor: not-allowed; }
/* El slider de opacidad RESERVA su lugar aunque no esté en modo onion: si apareciera y
   desapareciera, la options bar cambia de alto (wrap) y el visor se corre unos px —
   justo lo que arruina una comparación (18-ago). */
/* 26-ago: en vez de reservar espacio INVISIBLE (dejaba un hueco raro en la barra),
   el slider queda visible pero apagado — mismo layout estable, sin agujero. */
#rv-cmp-opacity.rv-cmp-opacity-off { opacity: .22; pointer-events: none; }
/* Auto-Onion: cartel con la versión que está en pantalla en este instante */
.rv-cmp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 21;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #06282c;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.rv-cmp-badge.is-cmp { background: #ffb020; }
#rv-cmp-opacity { width: 90px; margin: 0 4px; accent-color: var(--accent); }

.rv-width-ctl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 4px;
  border: 1px solid var(--accent-dim);
  border-radius: 7px;
  font-size: 12px;
  color: var(--accent);
}
.rv-width-ctl[hidden] { display: none; }
.rv-width-ctl button {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  width: 18px;
  cursor: pointer;
  border-radius: 5px;
}
.rv-width-ctl button:hover { background: rgba(0, 200, 215, 0.12); }
#rv-width-val { min-width: 28px; text-align: center; }

/* GenAI markings layer + wipe comparator */
.ai-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
/* SafeZone (spec 2026-08-12): cartel rojo cuando la UBA no tiene la medida canónica. */
.rv-sz-banner {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: 92%;
  padding: 10px 18px;
  border-radius: 8px;
  background: #c62828;
  color: #fff;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.wipe-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  margin-left: -9px;
  z-index: 20;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.wipe-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 200, 215, 0.7);
}
.wipe-grip {
  position: relative;
  white-space: nowrap;
  background: var(--accent);
  color: #06282c;
  border-radius: 10px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
#rv-ai-opacity { width: 90px; margin: 0 4px; accent-color: var(--accent); }
.tool-zoom-group { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#rv-zoom-slider-right { width: 110px; accent-color: var(--accent); }
.rv-acting-as { font-size: 12px; color: var(--accent); margin: 0; }
.rv-acting-ok { color: #4ade80; }
.rv-action-hint { font-size: 12px; margin: 0; }
.tool-zoom-icon { font-size: 13px; opacity: 0.75; }
#rv-zoom-slider { width: 110px; accent-color: var(--accent); }
.tool-zoom-fixed { min-width: 40px; text-align: right; }
#rv-color {
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}

/* Photoshop-style split: a vertical tools column on the left, a contextual options bar
   on top. Nothing gets clipped. */
.rv-options {
  display: flex;
  gap: 2px;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  row-gap: 4px;
}
.rv-left-body { display: flex; flex: 1; min-height: 0; }
.rv-tools-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding: 8px 5px;
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  flex-shrink: 0;
}
.rv-tools-col .tool {
  width: 34px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-sep-h { width: 22px; height: 1px; background: var(--border); margin: 4px 0; }
.rv-tools-col #rv-color { width: 26px; height: 26px; }
.tool {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.tool:hover { color: var(--accent); border-color: var(--border); }
.tool-active { color: var(--accent); border-color: var(--accent-dim); background: rgba(0, 200, 215, 0.08); }
.tool-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.tool-zoom { margin-left: auto; font-size: 12px; color: var(--text-muted); }
/* Reference grid + slideshow */
.rv-ref-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  /* Celdas más grandes (12-ago): con 130px un still 16:9 quedaba de 84px de alto —
     completo pero irreconocible. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* max-content es CLAVE (12-ago): con filas auto, Chrome repartía la altura del
     panel entre las filas — 30 refs = filas de 44px aplastadas en vez de scroll. */
  grid-auto-rows: max-content;
  gap: 10px;
  padding: 10px;
  background: #06090d;
  align-content: start;
}
.rv-ref-cell {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease-out;
}
.rv-ref-cell:hover { border-color: var(--accent); }
.rv-ref-cell img {
  width: 100%;
  /* 19-ago (Fernando): thumbs TODOS iguales — rectángulo horizontal casi cuadrado (5:4),
     recorte desde el centro (cover): un 16:9 pierde un poco de los lados, un vertical
     arriba y abajo. Antes (12-ago) era altura natural y con crops raros se descajetaba
     la grilla. La imagen completa se ve al hacer click (vista single). */
  aspect-ratio: 5 / 4;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--bg-input);
}
.rv-ref-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-ref-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-size: 26px;
  width: 38px;
  height: 56px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
.rv-ref-nav:hover { background: var(--accent); color: #06282c; }
.rv-ref-prev { left: 8px; }
.rv-ref-next { right: 8px; }
/* Live crop rect: draggable body + free-transform corner handles. */
.rv-ref-croprect {
  position: absolute;
  border: 2px dashed var(--accent);
  background: rgba(0, 200, 215, 0.12);
  pointer-events: auto;
  cursor: move;
  z-index: 14;
  touch-action: none;
}
.rv-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 3px;
  z-index: 15;
}
.rv-crop-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.rv-crop-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.rv-crop-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.rv-crop-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.rv-crop-controls { display: inline-flex; gap: 6px; align-items: center; }
.rv-crop-controls[hidden] { display: none; }
/* Undo toast: bottom-left, out of the way, disappears alone. */
.undo-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.undo-toast[hidden] { display: none; }

/* Close button for the side-by-side comparison, on the compared image itself. */
.rv-cmp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 16;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
}
.rv-cmp-close:hover { border-color: var(--accent); color: var(--accent); }

/* Multi-select of references (link images to this UBA). */
.rv-select-bar { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.rv-select-bar[hidden] { display: none; }
.rv-ref-cell-sel { border-color: var(--accent); }
/* 6-oct: 🗑 Borrar varias — marcadas en rojo; las que este usuario no puede borrar, atenuadas (tooltip con el motivo) */
.rv-ref-cell-del.rv-ref-cell-sel { border-color: var(--danger); }
.rv-ref-cell-del.rv-ref-cell-sel .rv-sel-check { background: var(--danger); }
.rv-ref-cell-off { opacity: .35; cursor: not-allowed; }
.rv-sel-check {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: rgba(0, 0, 0, 0.6);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover ✕ on reference grid cells (review right panel). */
.rv-ref-x {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: none;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffb1b1;
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
}
.rv-ref-cell:hover .rv-ref-x { display: block; }

.crop-flag {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--accent);
  font-size: 12px;
  border-radius: 6px;
  padding: 1px 5px;
  z-index: 2;
}

.rv-ref-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.rv-group-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.rv-ref-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.rv-ref-attrs {
  padding: 8px 12px;
  font-size: 13px;
  max-height: 76px;
  overflow-y: auto;
  white-space: pre-wrap;
  border-top: 1px solid var(--border);
}
/* Lado a lado (18-ago): la línea "vN (izquierda) vs vM (derecha)" sube ARRIBA del visor
   derecho (2ª fila, como la options bar izquierda) y la tira de thumbs se esconde, así
   los dos visores arrancan y terminan a la misma altura. El JS iguala el alto restante. */
#rv-right-panel.is-side .rv-ref-head { order: -2; }
#rv-right-panel.is-side #rv-ref-attrs {
  order: -1;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
#rv-right-panel.is-side #rv-thumbs { display: none; }
.rv-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  min-height: 62px;
}
.rv-thumbs img {
  height: 46px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease-out;
}
.rv-thumbs img:hover { border-color: var(--accent-dim); }
.rv-thumbs .thumb-active { border-color: var(--accent); }

.review-bottom {
  display: flex;
  gap: 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 8px 16px;
  align-items: stretch;
}
.rv-thread { flex: 1.4; min-width: 260px; display: flex; flex-direction: column; gap: 4px; }
.rv-thread-head { margin: 0; font-size: 11px; letter-spacing: 0.02em; }
/* 20-oct (Martín): recuadro «📝 Correcciones pedidas» arriba del hilo — lo que hay que corregir, sin pasar el mouse por nada */
.rv-fixes { border: 1px solid #7a3a3a; background: rgba(255, 90, 90, 0.08); border-radius: 8px; padding: 6px 10px; }
.rv-fixes-head { display: block; width: 100%; text-align: left; margin: 0 0 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #ffb1b1; }
.rv-fixes-head:hover { color: #ffd0d0; }
.rv-fixes-count { font-weight: 400; opacity: 0.8; }
.rv-fixes-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; max-height: 72px; overflow-y: auto; }
/* 21-oct: plegado = una sola línea */
.rv-fixes-collapsed { padding: 3px 10px; }
.rv-fixes-collapsed .rv-fixes-head { margin: 0; }
.rv-fixes-collapsed .rv-fixes-list { display: none; }
.rv-fix-item { font-size: 12px; line-height: 1.3; white-space: pre-wrap; }
.rv-fix-item[data-annot] { cursor: pointer; }
.rv-fix-item[data-annot]:hover .rv-fix-text { text-decoration: underline; }
.rv-fix-who { font-weight: 600; }
.rv-fix-marks, .rv-fix-warn { color: var(--muted); }
.rv-fix-warn { color: #ffd37a; }
.rv-thread-list {
  max-height: 118px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start; /* rows hug their content instead of stretching across */
}
/* Compact one-line rows: number + text + author + resolve all together, clickable to
   select the matching mark on the piece. */
.rv-annot {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  max-width: 100%;
}
.rv-annot:hover { background: rgba(255, 255, 255, 0.04); }
.rv-annot-active { border-color: var(--accent); background: rgba(0, 200, 215, 0.08); }
.rv-annot-resolved { opacity: 0.5; }
.rv-annot-num {
  color: #06282c;
  font-weight: 700;
  font-size: 11px;
  border-radius: 8px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.rv-annot-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-annot-author { flex-shrink: 0; font-size: 11px; }
.rv-annot-sent { flex-shrink: 0; font-size: 11px; opacity: 0.7; cursor: help; }
.rv-annot-resolve {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
}

.rv-signatures { display: flex; gap: 8px; }
.rv-upload { white-space: nowrap; flex-shrink: 0; }
.rv-sig {
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 9px;
  color: var(--text-muted);
}
.rv-sig-ok { color: #4ade80; border-color: #2c5e3f; }
.rv-sig-optional { opacity: .6; font-style: italic; }   /* 18-sep: firma opcional en rounds de Diseño (solo aprueba el AD) */
.rv-sig-changes { color: #ffb1b1; border-color: #7a3a3a; }
.rv-sig.rv-sig-void { text-decoration: line-through; opacity: .55; color: var(--text-muted); border-color: var(--border); }   /* QA1-P4: firma no vigente (cliente pidió corrección) */
.rv-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text); margin: 0; }
.rv-ack input { margin-top: 1px; }
/* One row, one height, nothing wraps or overflows. */
.rv-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.rv-actions .btn,
.rv-actions select,
.rv-upload {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.rv-actions select {
  max-width: 150px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-actions .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.rv-comment-box {
  position: fixed;
  bottom: 170px;
  left: 24px;
  width: 340px;
  z-index: 60;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.rv-comment-box p { margin: 0 0 6px; font-size: 13px; }
.rv-comment-box textarea { margin-top: 0; }

/* Users admin */
.row-inactive { opacity: 0.5; }

.pieces-table select { width: auto; margin: 0; padding: 5px 8px; }
.generated-password {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 20px;
  color: var(--accent);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  user-select: all;
}

/* Dialog */
dialog.card {
  /* Los <dialog> heredan color NEGRO del UA (no heredan del body): sin esto, títulos
     y labels sueltos dentro de un dialog se leían negro-sobre-oscuro (12-ago). */
  color: var(--text);
  border: 1px solid var(--border);
  width: 420px;
  max-width: 92vw;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
/* ℹ Datos del UBA para el deck (10-sep): chips para las opciones fijas, textarea para lo libre. */
dialog.deck-fields { width: 520px; }
.deck-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.deck-chips .chip { font-size: 12.5px; padding: 4px 12px; }
.deck-chips .chip[disabled] { cursor: default; opacity: 0.7; }
.deck-chips .chip[disabled]:hover { border-color: var(--border); color: var(--text-muted); }
.deck-chips .chip.chip-active[disabled]:hover { border-color: var(--accent); color: #06282c; }
.deck-chips-hint { display: block; margin-top: 4px; font-size: 11.5px; color: #FFB454; }
.deck-fields textarea { min-height: 58px; resize: vertical; }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ---- Equipo branded: menciones + envío de comentarios + dueño de pieza ---- */
/* Autocomplete @: lista flotante dentro del comment box del visor. */
#rv-mention-list {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 54px;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #2d333b);
  border-radius: 8px;
  overflow: hidden;
  z-index: 40;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
#rv-mention-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: none;
  border: 0;
  color: var(--text, #e6edf3);
  font-size: 13px;
  cursor: pointer;
}
#rv-mention-list button:hover { background: rgba(0, 200, 215, .12); color: #00C8D7; }

/* Mención resaltada en el thread de comentarios. */
.rv-mention { color: #00C8D7; font-weight: 600; }

/* Badge del diseñador dueño en la card de UBA (clickeable para reasignar). */
.uba-owner { cursor: default; }

/* ---- Agrupado de UBAs por diseñador (recuadro + base tenue de su color) ---- */
.uba-grid.uba-grouped { display: block; }
.uba-group {
  border: 1px solid var(--border, #2d333b);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin-bottom: 16px;
}
.uba-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 14px;
}
/* 13-oct: la cabecera es un botón que pliega / despliega el grupo. */
button.uba-group-head { width: 100%; background: none; border: 0; padding: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
button.uba-group-head:hover .uba-group-caret { color: var(--accent); }
.uba-group-caret { width: 14px; display: inline-block; font-size: 16px; line-height: 1; color: var(--muted, #8b949e); }
.uba-group.uba-group-collapsed { padding-bottom: 12px; }
.uba-group.uba-group-collapsed .uba-group-head { margin-bottom: 0; }
.group-fold-all { display: inline-flex; gap: 6px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border, #2d333b); }
.group-fold-all[hidden] { display: none; }
.designer-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  vertical-align: middle;
  margin-right: 6px;
}
#designer-filter .chip .designer-dot { margin-right: 6px; }

/* ---- Logo del título (bajado de Drive) ---- */
.title-logo {
  height: 48px;
  max-width: 220px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 14px;
}
/* En la card: banner a todo el ancho, arriba del cover (pedido 11-ago). */
.title-card { flex-wrap: wrap; }
.title-card-logo {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px 2px;
}
.title-card-logo img {
  width: 100%;
  max-height: 110px;
  object-fit: contain;
}
/* La vista Lista es una fila compacta: sin banner. */
.list-view .title-card-logo { display: none; }

/* ---- 🔔 Campanita (topbar, v1.23.0) ---- */
.bell-wrap { position: relative; }
.bell-btn { position: relative; font-size: 16px; padding: 4px 9px; line-height: 1; }
.bell-btn.bell-has { border-color: #f0a437; }
.bell-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 10px; background: #f0a437; color: #2b1d05;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-raised);
}
.bell-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;   /* 6-oct: + solapa Hecho */
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45); padding: 12px 12px 10px;
}
.bell-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 8px; font-size: 14px; color: var(--text); }
.bell-total { font-size: 12px; color: var(--text-muted); }
/* 6-oct 🔔 solapas Pendientes / ✔ Hecho */
.bell-tabs { display: flex; gap: 4px; margin: 0 2px 8px; border-bottom: 1px solid var(--border); }
.bell-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-size: 13px; padding: 4px 10px 6px; cursor: pointer; }
.bell-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.bell-ranges { display: flex; gap: 6px; margin: 0 4px 6px; }
.bell-summary { margin: 0 4px 8px; font-size: 12px; color: var(--text-muted); }
.bell-sec { margin: 10px 4px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.bell-hist-group { margin: 0 4px 8px; }
.bell-hist-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; }
.bell-hist-title a, .bell-hist a { color: var(--text); text-decoration: none; }
.bell-hist-title a:hover, .bell-hist a:hover { color: var(--accent); }
.bell-hist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.bell-hist li { padding: 2px 0; line-height: 1.35; }
.bell-hist-ts { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 2px; }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-row {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 13px;
}
.bell-row:hover { background: rgba(0, 200, 215, .08); }
/* 6-oct integridad: ▸ lista de ítems concretos por título */
.bell-row-wrap { display: flex; align-items: stretch; gap: 2px; }
.bell-row-wrap .bell-row { flex: 1; min-width: 0; }
.bell-expand { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 0 6px; font-size: 12px; border-radius: 6px; }
.bell-expand:hover { color: var(--accent); background: rgba(0, 200, 215, .08); }
.bell-items { list-style: none; margin: 0 0 6px 14px; padding: 0; font-size: 12px; }
.bell-items li { padding: 2px 0; }
.bell-items a { color: var(--text); text-decoration: none; }
.bell-items a:hover { color: var(--accent); }
.bell-due { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }   /* 6-oct urgencia */
.bell-due-warm { color: #f0a437; }
.bell-due-hot { color: #ff7b72; font-weight: 600; }
.bell-kind-logo_review { color: #f0a437; border-color: rgba(240, 164, 55, .5); }
.bell-kind-logo_fix { color: #ffb1b1; border-color: rgba(255, 93, 93, .5); }
.bell-title { font-weight: 600; }
.bell-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.bell-kind { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-muted); }
.bell-kind-fix { color: #ffb1b1; border-color: rgba(255, 93, 93, .5); }
.bell-kind-assign { color: var(--accent); border-color: var(--accent-dim); }   /* AS2 📋 pedidos nuevos */
.bell-kind-review { color: #f0a437; border-color: rgba(240, 164, 55, .5); }
.bell-kind-final { color: var(--accent); border-color: var(--accent-dim); }
.bell-kind-sign { color: var(--text-muted); }
.bell-empty { margin: 6px 4px 10px; font-size: 13px; color: #3ddc84; }
.bell-foot { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; text-align: right; }
.bell-foot .btn { font-size: 12px; }

/* ---- "Ver como" (topbar, solo admin real) ---- */
#view-as-select {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
}
#view-as-select.view-as-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 200, 215, .08);
}

/* ---- Visor: barra de acción compacta + pop-up de aprobación (11-ago) ---- */
.rv-actionbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;   /* 26-ago: dos filas — trabajo arriba, archivo abajo */
  align-items: flex-end;
  gap: 8px;
  max-width: 62%;   /* 46% partía la fila con los 3 botones parejos (12-ago) */
}
.rv-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* ⬆ Nueva versión — semáforo (26-ago): HUECO en amarillo cuando no hay nada
   pendiente; PLENO cuando la última versión tiene corrección pedida (se debe una
   versión). El estado del botón es un mensaje en sí mismo. */
.btn-newver {
  background: transparent;
  border: 1px solid #f5c518;
  color: #f5c518;
  font-weight: 700;
}
.btn-newver:hover { background: #f5c51822; }
.btn-newver.newver-due {
  background: #f5c518;
  color: #0d1117;
}
.btn-newver.newver-due:hover { background: #ffd84d; border-color: #ffd84d; }
/* 24-sep (Fernando): el color solo no alcanzaba — cuando se DEBE una versión, el botón late (doble pulso tipo
   corazón: fade del amarillo + anillo que se expande). Se frena al pasar el mouse; con reduced-motion, fade lento. */
@keyframes qc-newver-heartbeat {
  0%   { background: #f5c518; box-shadow: 0 0 0 0 rgba(245, 197, 24, .75); }
  12%  { background: #ffe066; box-shadow: 0 0 0 6px rgba(245, 197, 24, .35); }
  24%  { background: #b8900f; box-shadow: 0 0 0 2px rgba(245, 197, 24, .15); }
  36%  { background: #ffe066; box-shadow: 0 0 0 9px rgba(245, 197, 24, .25); }
  60%  { background: #f5c518; box-shadow: 0 0 0 14px rgba(245, 197, 24, 0); }
  100% { background: #f5c518; box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}
@keyframes qc-newver-fade {
  0%, 100% { background: #f5c518; }
  50%      { background: #a88410; }
}
.btn-newver.newver-due { animation: qc-newver-heartbeat 1.6s ease-in-out infinite; }
.btn-newver.newver-due:hover, .btn-newver.newver-due:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-newver.newver-due { animation: qc-newver-fade 3s ease-in-out infinite; }
}
.rv-actionbar #rv-open-approve { font-weight: 700; letter-spacing: 0.4px; }
/* Alineación pareja (12-ago): TODO lo de la barra con la misma altura y centrado —
   chips de firmas, Nueva versión, APROBAR y Eliminar UBA se veían despatarrados. */
.rv-actionbar .btn {
  height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rv-actionbar .rv-signatures { align-items: center; }
.rv-actionbar .rv-sig {
  display: inline-flex;
  align-items: center;
  height: 36px;              /* misma altura que los botones de la barra */
  padding: 0 14px;
  border-radius: 18px;
  font-size: 12.5px;
}
.rv-actionbar .form-error { flex-basis: 100%; text-align: right; margin: 0; }
.rv-approve-dialog { width: 560px; max-width: 92vw; }   /* 460 cortaba Cerrar con el ✉ visible (12-ago) */
.rv-approve-dialog h2 { margin-top: 0; }
.rv-approve-dialog .rv-ack { margin: 10px 0 0; }
.rv-approve-dialog input[type="text"] { margin-top: 8px; }
/* Presets de corrección (v1.25.0): fila de chips arriba del comentario. */
.rv-note-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rv-note-presets .chip { font-size: 12px; padding: 4px 12px; }

/* Texto in-situ (v1.27.0): input flotante sobre la pieza mientras se escribe. */
.rv-text-input {
  position: absolute;
  z-index: 30;
  min-width: 220px;
  padding: 4px 8px;
  background: rgba(13, 17, 23, .85);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  font-weight: 700;
  outline: none;
}
.rv-approve-dialog .rv-action-hint { font-size: 12px; margin: 10px 0 0; }
/* 20-ago: el select "como X" (admin / 2 roles) iba dentro de la fila de botones y la
   quebraba (Dar OK caía solo abajo). Ahora vive en su propia línea; los tres botones
   quedan siempre juntos: Cerrar · Pedir corrección · Dar OK. */
.rv-sign-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.rv-sign-row:has(select[hidden]) { display: none; }
.rv-sign-row select { width: auto; flex: 0 0 auto; min-width: 170px; margin: 0; }
.rv-approve-dialog .rv-actions { flex-wrap: nowrap; }
.rv-actions-spacer { flex: 1 1 auto; }
.rv-unsign-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.rv-unsign-row .btn { font-size: 12px; padding: 4px 10px; }

/* ---- Import desde Google Drive (spec 2026-08-12-drive-import-design.md) ---- */
.drive-dialog { width: min(760px, 92vw); }
.drive-url-row { display: flex; gap: 8px; margin-bottom: 10px; }
.drive-url-row input { flex: 1; }
.drive-crumbs { margin-bottom: 8px; font-size: 13px; }
.drive-crumb {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--accent); font-size: 13px;
}
.drive-crumb:disabled { color: var(--text); cursor: default; font-weight: 600; }
.drive-body { max-height: 48vh; overflow-y: auto; margin-bottom: 8px; }
.drive-list { display: flex; flex-direction: column; gap: 2px; }
.drive-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; text-align: left;
}
.drive-row:hover { background: var(--bg-input); }
.drive-row-folder { background: none; border: none; color: var(--text); font-size: 14px; }
.drive-row input[type="checkbox"] { margin: 0; flex: none; width: auto; }
.drive-thumb {
  width: 56px; height: 40px; object-fit: cover; border-radius: 4px; flex: none;
  background: var(--bg-input);
}
.drive-thumb-fallback {
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.drive-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.drive-reason { flex: none; max-width: 220px; }
.drive-v-excluded .drive-name { color: var(--text-muted); }
.drive-badge-auto { border-color: var(--accent); color: var(--accent); }
.drive-badge-suggested { border-color: #e3b341; color: #e3b341; }
.drive-badge-excluded { color: var(--text-muted); }
.drive-row-failed { outline: 1px solid var(--danger); }
.drive-actions { align-items: center; flex-wrap: wrap; }
.drive-group-row { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; }
.drive-group-row select { width: auto; margin: 0; }

/* Simulación por usuario ("Ver como" total) */
.sim-badge {
  background: #663c00; color: #ffd8a8; border-radius: 6px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sim-badge-mode { border-color: var(--accent); color: var(--accent); background: rgba(0, 200, 215, 0.12); }
/* «Actuás como» (11-sep): rol efectivo en el título, con switch si hay 2+ roles */
.act-as { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.act-as-label { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.act-as-select { font-size: 12px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--accent-dim); background: transparent; color: var(--accent); cursor: pointer; }
.act-as-select.act-as-manual { border-color: var(--accent); background: rgba(0, 200, 215, 0.12); font-weight: 600; }
.act-as-fixed b { color: var(--accent); font-weight: 600; }

/* Status de Monday en cards: "Ready for QC" destacado */
.mbadge-ready {
  background: rgba(0, 200, 215, 0.18); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 700;
}
.chip-qc-ready.chip-active { border-color: var(--accent); color: var(--accent); }
/* Etapa por grupo de Monday (19-ago): grupo de chips a la derecha de la barra QC */
.stage-filter { display: inline-flex; gap: 8px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--border); }
.extra-filter { display: inline-flex; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
.extra-filter[hidden] { display: none; }
/* Con los chips 👥/⏸ la fila no entra en desktop: envuelve (en celular sigue la fila deslizable). */
@media (min-width: 761px) { #qc-filter { flex-wrap: wrap; row-gap: 8px; } }
.chip-stage-done { color: #3ddc84; border-color: #3ddc84; }
.chip-stage-cancelled { color: var(--danger); border-color: var(--danger); }
.chip-stage-done.chip-active { background: #3ddc84; border-color: #3ddc84; }
.chip-stage-cancelled.chip-active { background: var(--danger); border-color: var(--danger); }

/* Archivar UBA: tachito al hover + toast con Deshacer */
.uba-card { position: relative; }
.uba-del {
  /* Arriba a la IZQUIERDA: el sello APROBADO vive arriba a la derecha y lo tapaba. */
  position: absolute; top: 6px; left: 6px; z-index: 4;
  background: rgba(13, 17, 23, 0.85); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; cursor: pointer; font-size: 13px;
  opacity: 0; transition: opacity 0.15s;
}
.uba-card:hover .uba-del { opacity: 1; }
.uba-del:hover { border-color: var(--danger); }
.undo-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--bg-raised); border: 1px solid var(--accent-dim);
  border-radius: 10px; padding: 10px 16px; z-index: 60;
  display: flex; align-items: center; gap: 12px; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* N de Netflix centrada arriba del texto en los botones de la Home */
.home-btn-badge { width: 44px; height: auto; margin: 0 auto 14px; display: block; }

/* Sello APROBADO — estampa de tinta (rotada, no bloquea clicks) */
.qc-stamp { pointer-events: none; transform: rotate(-12deg); opacity: 0.92; z-index: 3; }
.qc-stamp-card { position: absolute; top: 8px; right: 8px; width: 74px; }
.qc-stamp-title { position: absolute; top: 10px; right: 10px; width: 84px; }
.qc-stamp-viewer { position: absolute; bottom: 26px; right: 26px; width: 150px; opacity: 0.85; }

/* Festejo de aprobación (spec 2026-08-12): el sello cae desde atrás de la cámara —
   gigante, transparente y fuera de foco → nítido y clavado en su lugar. OJO: transform
   se pisa entero, así que el rotate(-12deg) base viaja en CADA keyframe. */
.qc-stamp-drop { animation: qc-stamp-drop 0.45s cubic-bezier(0.55, 0, 0.85, 0.36) 0.4s both; }
@keyframes qc-stamp-drop {
  0%   { transform: rotate(-12deg) scale(5);    opacity: 0;    filter: blur(10px); }
  78%  { transform: rotate(-12deg) scale(0.94); opacity: 0.92; filter: blur(0); }
  100% { transform: rotate(-12deg) scale(1);    opacity: 0.85; filter: blur(0); }
}
/* Variante prefers-reduced-motion: solo un fade suave, sin viaje ni sacudida. */
.qc-stamp-fade { animation: qc-stamp-fade 0.4s ease-out both; }
@keyframes qc-stamp-fade { from { opacity: 0; } to { opacity: 0.85; } }
/* Micro-sacudida del viewport en el impacto (usa translate, no pisa transforms). */
.qc-shake { animation: qc-shake 0.18s linear; }
@keyframes qc-shake {
  0% { translate: 0 0; } 25% { translate: 3px -2px; } 50% { translate: -3px 2px; }
  75% { translate: 2px 1px; } 100% { translate: 0 0; }
}
/* Papelitos del festejo: contenedor autolimpiable sobre la pieza. */
.qc-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.qc-confetti span { position: absolute; width: 9px; height: 14px; border-radius: 2px; will-change: transform, opacity; }
.title-card { position: relative; }

/* Barra global en modo indeterminado (sync de Monday): franja animada */
.upload-bar-indet .upload-bar-fill {
  width: 30% !important;
  animation: indet-slide 1.2s ease-in-out infinite alternate;
}
@keyframes indet-slide {
  from { transform: translateX(0); }
  to { transform: translateX(233.333%); }
}

/* Zona peligrosa del diálogo de título: Eliminar separado del form y en rojo
   (Fernando lo apretó sin querer por estar pegado al Choose File del afiche) */
.danger-zone {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.btn-danger {
  background: none; border: 1px solid var(--danger); color: var(--danger);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

/* Volver del visor (el breadcrumb era la única salida y no parecía clickeable) */
.rv-back { flex: none; white-space: nowrap; }

/* Eliminar UBA en el visor + Restaurar en la vista 🗄 Archivadas */
.rv-delete-piece:hover { border-color: var(--danger); color: var(--danger); }
.uba-restore { position: absolute; top: 6px; left: 6px; z-index: 4; }

/* Selección múltiple de referencias (eliminar en lote con Deshacer) */
.select-del-bar { display: inline-flex; align-items: center; gap: 6px; }
.asset-cell .asset-check {
  position: absolute; top: 6px; left: 6px; z-index: 3; font-size: 18px;
  background: rgba(13, 17, 23, 0.8); border-radius: 5px; padding: 1px 5px;
  pointer-events: none;
}
.asset-cell.asset-selected { outline: 2px solid var(--accent); }

/* Colaboradores por pieza (👥) */
.rv-editors-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; margin-top: 10px; }
.rv-editor-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; margin: 0; }
.rv-editor-row input { width: auto; margin: 0; }
#rv-editors-dialog { width: 380px; max-width: 92vw; }

/* Preloader de imagen en los viewports del visor */
.img-loading {
  position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px;
  width: 36px; height: 36px; border-radius: 50%; z-index: 5;
  border: 3px solid rgba(0, 200, 215, 0.2); border-top-color: var(--accent);
  animation: img-spin 0.8s linear infinite; pointer-events: none;
}
@keyframes img-spin { to { transform: rotate(360deg); } }

/* Panel de subida de referencias: barrita por archivo + total */
.rg-upload-panel {
  position: fixed; bottom: 18px; right: 18px; z-index: 70;
  width: 320px; max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px; padding: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
.rg-up-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rg-up-name {
  flex: 0 0 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-muted);
}
.rg-up-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-input); overflow: hidden; }
.rg-up-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }
.rg-up-error .rg-up-name { color: var(--danger); }
.rg-up-error .rg-up-fill { background: var(--danger); }
.rg-up-total { border-top: 1px solid var(--border); padding-top: 8px; font-weight: 600; }
.rg-up-total .rg-up-name { color: var(--text); }

/* Chip de usuario clickeable (cambiar mi clave) */
.user-chip-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.user-chip-btn:hover { background: var(--bg-input); }
#pw-dialog { width: 360px; max-width: 92vw; }

/* Comentarios de marcas expandibles. 19-ago (feedback diseñador: "el texto largo queda
   cortado y no se puede leer"): la marca SELECCIONADA se muestra completa sola (click en
   el comentario o en el pin), el botón pasa de un glifo ⤢ casi invisible a "ver más /
   ver menos", y la lista crece hasta 40vh mientras haya un comentario desplegado. */
.rv-annot-expanded, .rv-annot-active { align-items: flex-start; width: 100%; }
.rv-annot-expanded .rv-annot-text, .rv-annot-active .rv-annot-text {
  flex: 1 1 auto; white-space: pre-wrap; overflow: visible; text-overflow: unset; overflow-wrap: anywhere; line-height: 1.4;
}
.rv-annot-expand {
  flex-shrink: 0; font-size: 11px; padding: 0 6px; border: 1px solid var(--border); border-radius: 10px;
  color: var(--accent); background: none; cursor: pointer; white-space: nowrap;
}
.rv-annot-expand:hover { border-color: var(--accent); }
.rv-thread-list:has(.rv-annot-expanded), .rv-thread-list:has(.rv-annot-active) { max-height: 24vh; }   /* 21-oct: era 40vh, se comía el visor */
.rv-annot-close { display: none; }
.rv-annot-active .rv-annot-close, .rv-annot-expanded .rv-annot-close { display: inline-block; }
.rv-annot-expanded .rv-annot-expand { display: none; }   /* «cerrar ▴» reemplaza a «ver menos» */
.rv-hint-ok { color: var(--accent) !important; }

/* Switch on/off (modo de pruebas de mails) */
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; cursor: pointer; color: var(--text); font-size: 14px; }
.switch-input { position: absolute; opacity: 0; pointer-events: none; }
.switch-slider {
  width: 42px; height: 24px; border-radius: 12px; background: var(--bg-input);
  border: 1px solid var(--border); position: relative; flex: none; transition: background 0.15s;
}
.switch-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--text-muted); transition: transform 0.15s, background 0.15s;
}
.switch-input:checked + .switch-slider { background: rgba(0, 200, 215, 0.35); border-color: var(--accent); }
.switch-input:checked + .switch-slider::after { transform: translateX(18px); background: var(--accent); }
.env-badge-mail { background: #663c00; color: #ffd8a8; }

/* ---------- Tanda 14-ago: source en alta (Drive), descargas, refs en comentarios ---------- */
/* Nombre de archivo + link al original en la línea de atributos de la vista single */
.rv-ref-src { display: inline-block; margin-left: 10px; }
.rv-ref-src a { color: var(--accent); text-decoration: none; }
.rv-ref-src a:hover { text-decoration: underline; }
.rv-ref-src-fix {
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.6);
  color: #ffb020;
  border-radius: 6px;
  padding: 1px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.rv-ref-src-fix:hover { background: rgba(255, 176, 32, 0.22); }
.rv-drive-dialog { width: min(560px, 92vw); }
/* 🔍 Shutterstock en Referencias (SS, 25-sep) */
dialog.card.sstk-dialog { width: min(1100px, 94vw); max-width: none; max-height: 88vh; display: flex; flex-direction: column; gap: 8px; }
dialog.card.sstk-dialog:not([open]) { display: none; }
.sstk-bar { display: flex; gap: 8px; align-items: center; }
.sstk-bar input[type="text"] { flex: 1; min-width: 0; margin-top: 0; }
.sstk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; overflow-y: auto; min-height: 120px; }
.sstk-card { border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-raised); }
.sstk-card.is-done { border-color: var(--accent); }
.sstk-thumb { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: rgba(127,127,127,.08); border-radius: 6px; overflow: hidden; }
.sstk-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sstk-offset { position: absolute; top: 4px; left: 4px; background: var(--accent); color: #000; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.sstk-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sstk-actions { display: flex; gap: 6px; }
.sstk-actions [data-sstk-add] { flex: 1; }
.sstk-more { display: flex; justify-content: center; }
.sstk-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
@media (max-width: 760px) { .sstk-grid { grid-template-columns: repeat(2, 1fr); } }
.rv-drive-dialog code { color: var(--accent); word-break: break-all; }
.rv-drive-dialog input[type="text"] { width: 100%; }

/* Picker de referencias para un comentario: la misma grilla de la biblia, más chica */
.rv-refpick-dialog { width: min(820px, 94vw); }
.rv-refpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: max-content;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 8px;
  margin: 8px 0;
  background: #06090d;
  border-radius: 8px;
}
.rv-refpick-dialog .dialog-actions { align-items: center; }
.rv-refpick-drop { margin: 8px 0 0; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
/* Drag & drop de refs sobre el panel derecho / el picker (18-ago) */
#rv-right-panel.rv-drop-hot, .rv-refpick-dialog.rv-drop-hot .rv-refpick-drop {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: rgba(0, 200, 215, 0.06);
}
.rv-refpick-dialog .dialog-actions .muted { margin-right: auto; font-size: 12px; }

/* Chips de refs elegidas dentro del comment box */
.rv-comment-refs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.rv-comment-refs[hidden] { display: none; }
.rv-comment-ref { position: relative; display: inline-block; }
.rv-comment-ref img { height: 56px; border-radius: 5px; border: 1px solid var(--border); display: block; }
.rv-comment-ref button {
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%; border: 0;
  background: #e5484d; color: #fff; font-size: 10px; line-height: 16px; padding: 0; cursor: pointer;
}
.rv-comment-pick { margin-right: auto; }
/* Fila de secundarios del comment box (v1.29.2): 🖼 Referencias a la izquierda,
   "Sin comentario" a la derecha; Cancelar/Guardar quedan en su propia fila abajo. */
.rv-comment-secondary { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Nombre del archivo al pasar el mouse por una celda del picker de referencias
   (v1.29.3): frames consecutivos solo se distinguen por el timecode del nombre. */
.rv-ref-cell[data-name]:hover::after {
  content: attr(data-name);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 6px;
  background: rgba(13, 17, 23, .92);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  word-break: break-all;
  z-index: 3;
  pointer-events: none;
}

/* Badge 🖼 N en la fila del comentario + globito flotante con los thumbnails */
.rv-annot-refs-badge { flex-shrink: 0; font-size: 11px; color: var(--accent); }
#rv-ref-bubble {
  position: fixed;
  z-index: 70;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--accent);
}
#rv-ref-bubble[hidden] { display: none; }
#rv-ref-bubble img {
  height: 72px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease-out;
}
#rv-ref-bubble img:hover { border-color: var(--accent); }
#rv-ref-bubble::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: -7px;
  width: 12px; height: 12px;
  background: inherit;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}
/* Nombre de archivo bajo cada imagen del grupo de la biblia (link al original en Drive) */
.asset-name {
  display: block;
  font-size: 11px;
  padding: 3px 6px 4px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-raised);
}
a.asset-name:hover { text-decoration: underline; }
.asset-name-missing { color: var(--text-muted); }

/* (la strip de rounds v1 fue reemplazada por la splash v2, más abajo) */
/* Pieza muerta en el round que se mira: foto de época grisada */
.piece-killed { position: relative; }
.piece-killed .uba-cover, .piece-killed .uba-body { filter: grayscale(1); opacity: .55; }
.piece-killed-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: #2a1215;
  border-color: #b34;
  color: #f88;
}
/* ❌ junto al 🗑 (que vive en 6,6): corrido a la derecha para no taparse */
/* 18-sep (Fernando): el ❌ es un glifo de TEXTO — sin color heredaba el negro default de <button> y quedaba
   negro sobre negro. Blanco; rojo al hover (acción destructiva). */
.uba-kill { left: 42px; color: #fff; font-size: 15px; line-height: 1.2; }
.uba-kill:hover { color: #ff8888; }
.piece-revive { position: absolute; top: 6px; right: 6px; z-index: 4; }
/* Pieza muerta en review: acciones de firma/subida ocultas (server 409 igual) */
.rv-killed-banner {
  margin: 8px 0 0;
  padding: 6px 12px;
  border: 1px solid #b34;
  border-radius: 8px;
  background: #2a1215;
  color: #f88;
  font-size: 13px;
}
.rv-killed #rv-open-approve, .rv-killed .rv-upload, .rv-killed #rv-sstk-open { display: none !important; }
/* Modal de cierre de round: lista de vivas con veredicto pasa/muere */
#round-close-dialog { min-width: 480px; max-width: 640px; }
.round-close-grid { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin: 10px 0; }
.round-close-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}
.round-close-item img, .rc-noimg { width: 84px; height: 46px; object-fit: cover; border-radius: 4px; }
.rc-noimg { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); background: var(--bg-raised); }
.round-close-item .rc-name { flex: 1; }
.round-close-item .rc-verdict { color: #7ee787; font-weight: 600; }
.round-close-item.rc-dead { border-color: #b34; background: #2a121533; }
.round-close-item.rc-dead .rc-verdict { color: #f88; }
.round-close-item.rc-dead img { filter: grayscale(1); opacity: .6; }
.round-close-next { display: block; margin: 8px 0; font-size: 13px; }
/* 📩 Feedback del cliente por round (16-sep): diálogo ancho con una fila por UBA presentado. */
dialog.feedback-dialog { width: min(860px, 94vw); }
.feedback-dialog textarea { resize: vertical; margin: 0; }
.feedback-dialog > form > label textarea { margin-top: 4px; min-height: 72px; }   /* 7-oct: más alto */
.fb-bulk { margin: 10px 0 6px; align-items: center; }
.fb-count { margin-left: auto; }
.fb-rows { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 6px 0; padding-right: 4px; }
.fb-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.fb-row img, .fb-row .rc-noimg { width: 192px; height: 108px; object-fit: cover; border-radius: 6px; flex: none; }   /* 16-sep: más grandes para verlos bien */
.fb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-main textarea { width: 100%; min-height: 96px; font-size: 13px; line-height: 1.4; }   /* 7-oct: ~5 líneas de entrada; crece con el texto (fbAutoGrow) */
.fb-main textarea.fb-required { border-color: #f0a437; }
.fb-row.fb-fix { border-color: #7a5a24; background: rgba(240, 164, 55, .06); }
.fb-row.fb-ok { border-color: #2c5e3f; background: rgba(74, 222, 128, .05); }
.fb-row.fb-discard { border-color: #b34; background: #2a121533; }
.fb-row.fb-discard img { filter: grayscale(1); opacity: .6; }
.fb-row .chip[data-outcome="fix"].chip-active { background: #f0a437; border-color: #f0a437; color: #2a1a05; }
.fb-row .chip[data-outcome="ok"].chip-active { background: #3ddc84; border-color: #3ddc84; color: #06282c; }
.fb-row .chip[data-outcome="discard"].chip-active { background: var(--danger); border-color: var(--danger); color: #fff; }
/* 22-oct 🖼 (reporte 09660379): capturas del cliente por diseño — tira de miniaturas (diálogo 📩, visor y su globito). */
.fb-imgs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.fb-imgs[hidden] { display: none; }
.fb-img { position: relative; flex: none; }
.fb-imgs .fb-img img, .fb-row .fb-imgs .fb-img img { width: 84px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border);
  cursor: zoom-in; display: block; filter: none; opacity: 1; }
.fb-img-del { position: absolute; top: 2px; right: 2px; padding: 0 3px; font-size: 11px; line-height: 16px; border: 0; border-radius: 3px;
  background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; opacity: 0; }
.fb-img:hover .fb-img-del, .fb-img-del:focus-visible { opacity: 1; }
.fb-img-add { white-space: nowrap; }
.fb-img-add.disabled { opacity: .5; pointer-events: none; }
.fb-img-drop { outline: 2px dashed var(--accent, #58a6ff); outline-offset: 2px; }
.fb-lightbox { max-width: 94vw; max-height: 94vh; padding: 12px 44px; background: #0d1117; color: #e6edf3; border: 1px solid var(--border); border-radius: 8px; }
.fb-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.fb-lightbox figure { margin: 0; text-align: center; }
.fb-lightbox img { max-width: calc(94vw - 100px); max-height: calc(94vh - 70px); object-fit: contain; display: block; margin: 0 auto; }
.fb-lightbox figcaption { margin-top: 6px; }
.fb-lb-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
.fb-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 32px; cursor: pointer; }
.fb-lb-nav[hidden] { display: none; }
.fb-lb-prev { left: 8px; }
.fb-lb-next { right: 8px; }
.piece-killed-chip { color: #f88; border-color: #b34; }
/* Cards: estado «esperando versión nueva» + chips 📩 + brief del cliente. */
.state-client_fix { color: #ff7a7a; border-color: #a33a3a; font-weight: 600; }   /* QA1-P4: corrección del cliente = color de corrección */
.fb-chip-fix { color: #f0a437; border-color: #7a5a24; }
.fb-chip-ok { color: #4ade80; border-color: #2c5e3f; }
.fb-chip-discard { color: #f88; border-color: #b34; }
.fb-chip-past { color: var(--text-muted); border-color: var(--border); }
.uba-feedback {
  margin: 0 0 6px; font-size: 12px; color: #f0c27a; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 20-oct: links del feedback del cliente (URL suelta o [palabra](url)) — clickeables, pestaña nueva. */
a.rich-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.uba-feedback a.rich-link { color: inherit; }
.fb-rich { white-space: pre-wrap; font-size: 13px; padding: 6px 2px; }
.rich-link-btn { align-self: flex-start; margin-top: 4px; }
.round-header .rh-feedback { color: #f0a437; font-size: 12px; font-weight: 600; }
/* Visor: banner + panel de feedback del cliente con chat interno (al lado del hilo de marcas). */
.rv-feedback-banner { border-color: #7a5a24; background: #2a2010; color: #f0c27a; cursor: pointer; }
.rv-feedback-banner.rv-feedback-waiting { border-color: #f0a437; }
.rv-feedback-banner-body { color: #e6d3b0; }
.rv-feedback { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--border); padding-left: 14px; position: relative; align-self: flex-start; }
/* 8-oct: barra bajita — botón compacto + globito por encima (no empuja la barra ni tapa el UBA cerrado) */
.rv-fb-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-fb-toggle-waiting { border-color: #7a5a24; color: #FFB454; }
.rv-fb-pop { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 60; width: min(460px, 92vw); max-height: min(60vh, 520px);
  overflow-y: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 8px; }
.rv-fb-pop[hidden] { display: none; }
.rv-fb-pop-head { display: flex; align-items: baseline; gap: 6px; position: sticky; top: -10px; background: var(--bg-raised); padding: 2px 0 6px; z-index: 1; }
.rv-fb-pop-close { margin-left: auto; border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.rv-fb-pop-close:hover { color: var(--text); }
.rv-fb-pop .rv-feedback-list { max-height: none; overflow: visible; }
.rv-feedback-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.rv-fb-item { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.rv-fb-item.rv-fb-fix { border-color: #7a5a24; }
.rv-fb-item.rv-fb-ok { border-color: #2c5e3f; }
.rv-fb-item.rv-fb-discard { border-color: #b34; }
.rv-fb-head { margin: 0 0 4px; font-size: 12px; }
.rv-fb-pending { color: #f0a437; font-weight: 600; }
.rv-fb-done { color: #4ade80; }
.rv-fb-body { margin: 0 0 4px; white-space: pre-wrap; color: #e6d3b0; }
.rv-fb-note { margin: 0 0 4px; font-size: 12px; white-space: pre-wrap; }
.rv-fb-replies { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0 8px; border-left: 2px solid var(--border); padding-left: 8px; }
.rv-fb-replyrow { cursor: default; flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
.rv-fb-replyrow .rv-annot-num { margin-top: 2px; }
.rv-fb-replytext { flex: 1 1 200px; min-width: 0; white-space: pre-wrap; line-height: 1.35; }
.rv-fb-replyrow .rv-annot-author { flex-basis: auto; margin-left: auto; }
.rv-fb-reply { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; }
.rv-fb-reply[hidden] { display: none; }
.rv-fb-reply-open { margin-top: 6px; }
.rv-fb-reply-actions { display: flex; flex-direction: column; gap: 4px; }
.rv-fb-reply textarea { flex: 1; margin: 0; min-height: 30px; font-size: 12.5px; resize: vertical; }
/* 13-oct: @menciones en la respuesta del feedback — la lista (estilo .tmsg-suggest) sale arriba del campo */
.rv-fb-reply { position: relative; }
.rv-fb-suggest { left: 0; right: auto; min-width: 240px; bottom: calc(100% + 4px); z-index: 5; }
.rv-fb-load { align-self: flex-start; margin: 2px 0 4px; }
dialog.feedback-dialog-one { width: min(560px, 94vw); }
.feedback-dialog-one textarea { width: 100%; margin-top: 8px; min-height: 90px; }
.feedback-dialog-one form.fb-fix .chip[data-outcome="fix"].chip-active { background: #f0a437; border-color: #f0a437; color: #2a1a05; }
.feedback-dialog-one form.fb-ok .chip[data-outcome="ok"].chip-active { background: #3ddc84; border-color: #3ddc84; color: #06282c; }
.feedback-dialog-one form.fb-discard .chip[data-outcome="discard"].chip-active { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Editor ⚙ Rounds */
#rounds-editor { min-width: 560px; width: min(760px, 94vw); }   /* 16-sep: entra el select de alcance */
.rounds-editor-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.rounds-editor-row { display: flex; align-items: center; gap: 8px; }
.rounds-editor-row .re-no { width: 44px; }
.rounds-editor-row .re-name { flex: 1; min-width: 120px; }
.rounds-editor-row input[type=date] { width: 140px; }
.rounds-editor-row .re-scope { width: 190px; flex: none; margin: 0; padding: 6px 8px; font-size: 12.5px; }
/* 16-sep: alcance de revisión por round — ✎ Diseño (magenta, como el sello Design QC) / 🧩 GenFill QC (cyan). */
.scope-design { color: #f472b6; border-color: #7a3a5e; }
.scope-genfill { color: var(--accent); border-color: var(--accent-dim); }
.rc-scope { font-size: 11px; font-weight: 600; }
.round-header .rh-scope { font-weight: 600; }
.rv-scope { font-weight: 600; }
.rv-req-scope, .rv-comment-scope { align-items: center; margin: 0 0 8px; }
.rv-annot-scope { flex-shrink: 0; font-size: 11px; line-height: 1; cursor: help; }
/* 20-oct 💬 Sala: comentario GENERAL de la pieza (sin pin) — chapa en el hilo + botón para crearlo. */
.rv-annot-general { flex-shrink: 0; font-size: 11px; line-height: 1.4; padding: 0 6px; border-radius: 9px; background: rgba(0, 200, 215, .16); color: var(--text, #e8e8e8); white-space: nowrap; }
.rv-thread-top { display: flex; align-items: center; gap: 10px; min-height: 0; }
.rv-add-general { margin: 0 0 0 auto; padding: 1px 8px; font-size: 11px; flex-shrink: 0; }
.rv-readonly .rv-add-general { display: none; }
/* 23-oct: ▾ Minimizar comentarios (review.js) — quedan solo el contador y los botones; la pieza gana la altura. */
.rv-thread-min { padding: 1px 8px; font-size: 11px; flex-shrink: 0; }
.review-bottom.rv-bottom-min .rv-fixes, .review-bottom.rv-bottom-min .rv-thread-list,
.review-bottom.rv-bottom-min .rv-feedback { display: none !important; }
.review-bottom.rv-bottom-min .rv-thread-min { color: var(--accent); border-color: var(--accent); }
.rv-thread-filter { margin-left: 8px; display: inline-flex; gap: 4px; }
.rv-thread-filter .chip { padding: 0 6px; font-size: 10.5px; }
.rv-thread-filter .chip.chip-active { color: #06282c; }
/* 16-sep: mockups obsoletos (de una versión anterior del UBA) = falta; el viejo se puede abrir. */
.rv-family-stale { text-decoration: line-through; opacity: .8; }
.rv-family-stale:hover { opacity: 1; }
.dc-stale small { display: block; font-size: 9px; color: #f0a437; margin-top: 2px; line-height: 1.2; }
.fs-stale { outline: 1px dashed #f0a437; outline-offset: -2px; }
.rounds-gen { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.rounds-gen input[type=number] { width: 56px; }
.rounds-forced-row { display: block; margin: 10px 0 4px; font-size: 13px; }
.rounds-forced-row select { margin-left: 8px; }

/* ---------- Rounds v2: splash de secciones + banda de color (mockup Fernando) ---------- */
.rounds-splash {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 18px 0;
}
.round-card {
  aspect-ratio: 1 / 0.95;
  border-radius: 26px;
  border: 4px solid var(--rc-border);
  background: var(--rc-fill);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.round-card .rc-name {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.round-card .rc-meta { font-size: 13px; opacity: .85; }
.round-card .rc-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 6px;
  background: rgba(0,0,0,.25);
}
.round-card:hover { transform: translateY(-3px); }
/* EN CURSO: a todo color con glow del propio borde */
.round-card.rc-active { box-shadow: 0 0 26px var(--rc-border); }
/* Entregado / cerrado: mantiene el color pero atenuado (mapa del proyecto de un vistazo) */
.round-card.rc-past, .round-card.rc-closed { filter: saturate(.55) brightness(.72); }
/* Futuro: bien grisado hasta que se active */
.round-card.rc-future { filter: grayscale(.85) brightness(.55); }
.round-card.rc-future:hover, .round-card.rc-past:hover, .round-card.rc-closed:hover { filter: none; }

/* Banda de round adentro de la sección: evidente y con el color del round */
.round-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 2px solid var(--rc-border);
  border-left-width: 14px;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  background: linear-gradient(90deg, var(--rc-fill) 0%, color-mix(in srgb, var(--rc-fill) 35%, transparent) 60%, transparent 100%);
}
.round-header .rh-name {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.round-header .rh-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  border: 1px solid var(--rc-border);
  background: var(--rc-fill);
  border-radius: 999px;
  padding: 3px 10px;
}
.round-header .rh-meta { color: var(--text-muted); font-size: 13px; }
.round-header .rh-epoch { color: var(--accent); font-size: 12px; font-style: italic; }
.round-header .rh-spacer { flex: 1; }
/* 21-sep (Fernando): los botones de acción del round (Slideshow · Cerrar · Feedback · Generar deck · Vista
   previa) van juntos en UNA línea: grupo sin wrap, a la derecha; si no entra junto al nombre baja entero. */
.round-header .rh-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-left: auto; }
/* 🔒 LOCK de proyecto: barra al pie de la splash (estado final previo al Delivery) */
.title-lock-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
}
.title-lock-bar.locked {
  border: 2px solid #008166;
  border-radius: 12px;
  background: #06352D;
}
.title-lock-bar .tl-text { color: #7ee787; font-weight: 700; letter-spacing: .3px; }
.rh-locked { background: #06352D !important; border-color: #008166 !important; }
/* 🗑 en la card de round (solo vacíos): aparece al hover, arriba a la derecha */
.round-card { position: relative; }
.round-card .rc-del {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 3px 8px; font-size: 14px; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.round-card:hover .rc-del { opacity: 1; }
.round-card .rc-del:hover { border-color: var(--danger); }
/* ▶ Slideshow en la card de la Revisión (11-sep): siempre visible, abajo a la derecha */
.round-card .rc-play {
  position: absolute; bottom: 10px; right: 10px; text-decoration: none; color: #fff;
  background: #7c4dff; border: 1px solid #9d7bff; border-radius: 8px;
  padding: 2px 9px; font-size: 13px; line-height: 1.4;
}
.round-card .rc-play:hover { background: #9068ff; border-color: #c4b0ff; }
/* 8-oct (Fernando): ▶ Slideshow en VIOLETA sólido — color fuera de la simbología (cyan/verde/ámbar/rojo/magenta)
   para ubicarlo de un vistazo; es de las funciones que más se usan. */
.btn.rh-slideshow { background: #7c4dff; border-color: #9d7bff; color: #fff; font-weight: 600; }
.btn.rh-slideshow:hover { background: #9068ff; border-color: #c4b0ff; color: #fff; }
/* Badge 🔒 LOCKED en la card del título (dashboard, todas las etapas) */
.mbadge-locked { background: #06352D; border: 1px solid #008166; color: #7ee787; font-weight: 700; }
/* 🔒 LOCK en el visor: solo lectura — sin APROBAR, subir/reemplazar ni eliminar */
.rv-locked-banner { border-color: #008166; background: #06352D; color: #7ee787; }
.rv-locked #rv-open-approve, .rv-locked .rv-upload, .rv-locked #rv-sstk-open, .rv-locked #rv-delete-piece { display: none !important; }
/* Propuesta editable del Brief (dentro del editor de Rounds) */
.rounds-brief-proposal {
  border: 1px dashed var(--accent-dim);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* ⛶ FullScreen de marcación: solo la columna izquierda, tools y comentarios intactos */
.rv-fs #rv-right-panel { display: none !important; }
.rv-fs #rv-left-panel { flex-basis: 100%; }
.rv-fs .review-head { display: none; }        /* más alto para la pieza; ✕ para volver */
.rv-fs .rv-actionbar { max-width: 100%; }
#rv-fs-btn { font-weight: 700; }
/* 26-ago: la options bar se descajetaba con el ⛶ — todo compacto y elástico para
   que quede en UNA fila: el zoom vuelve a su lugar a la derecha y los sliders ceden
   ancho antes de romper la línea. */
#rv-fs-btn { padding: 2px 8px; }
.rv-options { column-gap: 4px; }
.rv-options .tool { padding: 3px 6px; }
#rv-toolbar > .tool-zoom-group { flex: 0 1 auto; min-width: 0; }
#rv-zoom-slider { width: clamp(60px, 6vw, 96px); }
#rv-cmp-opacity { width: clamp(56px, 6vw, 90px); }
.rv-vlabel { margin: 0 2px; }
.rv-vlabel.rv-vs { margin: 0 4px; }
/* Clusters de la options bar: main (envuelve) + zoom pinneado a la derecha */
.rv-options { flex-wrap: nowrap; }
.rv-opt-main {
  display: flex;
  align-items: center;
  gap: 2px;
  column-gap: 4px;
  row-gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
#rv-toolbar > .tool-zoom-group { margin-left: 6px; flex-shrink: 0; }
/* Los controles de comparación fluyen SUELTOS en la barra (display:contents):
   sin saltos en bloque de 437px que dejaban agujeros — las filas se llenan de
   corrido como texto. :not([hidden]) preserva el toggle del modo comparación. */
#rv-toolbar .rv-compare-ctl:not([hidden]) { display: contents; }
/* Aviso modal de la casa (reemplaza alert()) */
.qc-msg-dialog { max-width: 440px; }
.qc-msg-dialog p { color: var(--text-muted); line-height: 1.5; margin: 10px 0 4px; }

/* ---------- 🧩 Familia de mockups (F1) ---------- */
/* UAT 3-sep: casi pantalla completa — el layout del deck se ve a tamaño real. */
dialog.family-dialog { width: min(1500px, 96vw); max-width: 96vw; max-height: 94vh; overflow-y: auto; }
/* 19-oct: ◀ UBA anterior · n de N por aprobar · UBA siguiente ▶ — abajo, junto a «Aprobar todos» */
.family-nav { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.family-nav[hidden] { display: none; }
dialog.family-dialog:focus { outline: none; }

/* Pasada de MockUps (UAT 3-sep): ver grande, sin marcar nada; Aprobar todos al final. */
dialog.mockup-show-dialog { width: 96vw; max-width: 96vw; max-height: 96vh; }
.ms-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ms-spacer { flex: 1; }
.ms-stage { display: flex; align-items: center; justify-content: center; background: #060a0e;
  border: 1px solid var(--border); border-radius: 10px; height: calc(94vh - 170px); min-height: 300px; }
.ms-stage img { max-width: 100%; max-height: 100%; }
.ms-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
/* Vista deck de MockUps (UAT 31-ago): espejo de los slides reales del deck */
.deck-board-wrap { margin: 10px 0 2px; }
.deck-board { position: relative; width: 100%; aspect-ratio: 720 / 405; background: #060a0e;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.deck-board-cap { margin: 4px 2px 0; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.deck-cell { position: absolute; border-radius: 4px; background: var(--bg-raised); overflow: hidden; }
.deck-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* UAT 3-sep: borde cyan 1px = límite del canvas de cada mockup (igual que el preview
   de logos). Solo celdas con imagen; fs-picked/hover (2px) pisan porque vienen después. */
.deck-cell:not(.fs-missing) { outline: 1px solid var(--accent); }
.deck-cell.fs-missing { border: 1px dashed var(--border); background: transparent; }
.deck-cell.fs-picked { outline: 2px solid var(--accent); }
.deck-cell.fs-click { cursor: pointer; }
.deck-cell.fs-click:hover { outline: 2px solid var(--accent); }
.deck-cell .state { position: absolute; left: 4px; bottom: 4px; font-size: 9px; padding: 1px 5px;
  background: rgba(6, 10, 14, .82); max-width: calc(100% - 8px); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: 2px; color: var(--text-muted); font-size: 13px; }
.dc-empty i { font-style: normal; font-size: 9px; text-align: center; line-height: 1.1; }
/* UAT 3-sep (2ª vuelta): un board POR FILA a ancho completo — el punto del diálogo
   gigante es ver cada slide casi a tamaño real, no dos miniaturas más.
   3ª vuelta: VACÍO (sin versiones ni archivos elegidos) → compacto, slides chiquitos
   lado a lado y los botones a la vista sin scroll; con imágenes, grande. */
.family-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 12px 0; }
/* 20-oct: slide del UBA arriba del 🧩 MockUps — firma desde acá; click en la imagen = visor. */
.fam-uba-wrap { grid-column: 1 / -1; }
.fam-uba-board { cursor: zoom-in; outline: 1px solid var(--accent); }
.fam-uba-board .fam-uba-img, .fam-uba-board .fam-uba-ai { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fam-uba-board .fam-uba-ai { opacity: .7; pointer-events: none; }
.fam-uba-board .fam-uba-ai[hidden] { display: none; }
.fam-uba-state { position: absolute; left: 8px; top: 8px; }
.fam-uba-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.fam-uba-bar .deck-board-cap { margin: 0; }
.fam-uba-sigs { display: inline-flex; gap: 6px; flex: 1; }
.fam-uba-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--accent-dim); border-radius: 8px; }
.fam-uba-confirm[hidden], .fam-uba-note[hidden] { display: none; }
.fam-uba-confirm select { width: auto; }
.fam-uba-note { margin: 6px 0 0; color: var(--accent); }
.family-grid.family-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 320px)); gap: 10px; }
/* UAT 31-ago: elegido, con preview */
.state-picked { color: var(--accent); border-color: var(--accent-dim); }
.family-report { margin: 8px 0 0; padding-left: 18px; max-height: 140px; overflow: auto; }
.uba-family { position: absolute; right: 8px; bottom: 8px; }
/* ★ Key Art (11-sep): a la izquierda del 🧩 MockUps, misma fila. 14-sep: label corto «★ KA»
   (con «Key Art» se cortaba por la izquierda en cards de 190px) y el botón muestra el ESTADO:
   gris = no es Key Art (click marca), .is-ka ámbar lleno = ES Key Art (click quita la ★). 22-sep: mismo UBA, sin copia. */
.uba-ka-chip { cursor: pointer; color: #FFB454; border-color: rgba(255, 180, 84, 0.6); background: transparent; font: inherit; }
.uba-ka-chip:hover { background: rgba(255, 180, 84, 0.15); }
.uba-to-ka { position: absolute; right: 118px; bottom: 8px; white-space: nowrap; color: var(--text-muted); border-color: var(--border); }
.uba-to-ka:hover { color: #FFB454; border-color: rgba(255, 180, 84, 0.6); }
.uba-to-ka.is-ka { color: #14100a; background: #FFB454; border-color: #FFB454; font-weight: 600; }
.uba-to-ka.is-ka:hover { background: #FFC878; border-color: #FFC878; color: #14100a; }
/* La card con botón 🧩 reserva el alto del botón: el texto nunca se encima (UAT 3-sep). */
.uba-card-has-family .uba-body { padding-bottom: 46px; }
.family-chip { border-color: var(--accent); }
/* 5-oct (Fernando): 🟡 correcciones pendientes (esperando versión nueva) · 🟢 todo aprobado — card del UBA y tira del visor. */
.family-chip.family-chip-fix, .rv-family-chip.rv-family-fix { color: #f0a437; border-color: #f0a437; }
.family-chip.family-chip-ok, .rv-family-chip.rv-family-ok { color: #4ade80; border-color: #2c5e3f; }
.rv-family-chip.rv-family-fix.chip-active { background: #f0a437; color: #1a1205; }
.rv-family-chip.rv-family-ok.chip-active { background: #2c5e3f; color: #d8ffe6; }
.rv-family { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 8px; }
.rv-family-chip { text-decoration: none; }

/* ---------- 🎨 Logos (F2) ---------- */
.logos-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 10px 14px; }
.logos-card .mat-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.logo-slot { position: relative; display: flex; gap: 8px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--bg-input); }
.logo-slot.ls-missing { border-style: dashed; opacity: .75; }
.ls-thumb { width: 72px; height: 44px; object-fit: contain; border-radius: 6px; flex: none; background: var(--bg-raised); }
.ls-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
/* UAT 3-sep: variante dark = logo oscuro → fondo blanco o no se ve nada. */
.ls-thumb-darklogo { background: #fff; }
.ls-thumb-click { cursor: zoom-in; }
/* Preview de logo: popup liviano, sin nada de evaluación. */
.logo-preview-dialog { width: min(760px, 92vw); }
.lpv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lpv-stage { display: flex; align-items: center; justify-content: center; padding: 28px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); min-height: 180px; }
.lpv-stage.lpv-light { background: #fff; }
/* UAT 3-sep: recuadro cyan 1px = borde REAL del canvas del archivo (los logos traen
   aire transparente — sin esto no se ve la safezone). outline no altera el tamaño. */
.lpv-stage img { max-width: 100%; max-height: 62vh; outline: 1px solid var(--accent); }
.ls-body { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.ls-upload { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; }
.ls-open { position: absolute; right: 6px; top: 6px; text-decoration: none; }
.logo-proposals { display: flex; gap: 10px; flex-wrap: wrap; }
.logo-prop-card { position: relative; display: flex; gap: 8px; align-items: center; min-width: 210px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 34px 8px 8px; background: var(--bg-input); }
.logo-prop-card.lp-click { cursor: pointer; }
.logo-prop-card.lp-click:hover { border-color: var(--accent); }
.logo-prop-card.lp-killed { opacity: .45; }
.lp-kill { position: absolute; right: 6px; top: 6px; padding: 2px 8px; color: #fff; }
/* 7-sep: quitar logos (archivado soft) — variante junto al ↻, propuesta abajo a la derecha. */
.ls-delete { position: absolute; right: 44px; bottom: 6px; padding: 2px 8px; }
.ls-delete:hover, .lp-remove:hover { border-color: var(--danger); color: var(--danger); }
.lp-remove { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; }

/* F3 decks: chip N° editable + fila GenFill del diálogo de familia */
.uba-designno-edit { cursor: pointer; }
.family-genfill { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.family-genfill select { width: auto; }

/* F3 decks: diálogo de resultado (botones 🎬) */
.deck-dialog, .deck-ask { max-width: 560px; }
.deck-dialog a { word-break: break-all; }
/* Fase 2 (4-sep): progreso real de la generación por pasos */
.deck-bar { height: 8px; border-radius: 4px; background: var(--border, #333); overflow: hidden; margin: 12px 0 6px; }
.deck-bar-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--accent, #00C8D7); transition: width .4s ease; }

/* ---- F4 ✓ Nomenclatura (chequeador pre-entrega) ---- */
.nomenc-langs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.nomenc-langs input { width: 220px; }
.nomenc-dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 26px; text-align: center; margin: 14px 0; cursor: pointer; transition: border-color .15s, background .15s; }
.nomenc-dropzone p { margin: 4px 0; }
.nomenc-dropzone.active { border-color: var(--accent); background: rgba(0, 200, 215, .06); }
.nomenc-summary { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0; font-size: 13px; }
.nomenc-filters { display: flex; gap: 8px; margin-bottom: 10px; }
.nomenc-f.active { border-color: var(--accent); color: var(--accent); }
.nomenc-c-error { color: var(--danger); } .nomenc-c-warn { color: #f5c542; } .nomenc-c-ok { color: #3ddc84; }
.nomenc-title-issues, .nomenc-issues, .nomenc-rows { list-style: none; margin: 0; padding: 0; }
.nomenc-group { margin-bottom: 12px; border-left: 4px solid var(--border); }
.nomenc-group.error { border-left-color: var(--danger); } .nomenc-group.warn { border-left-color: #f5c542; } .nomenc-group.ok { border-left-color: #3ddc84; }
.nomenc-group h3 { margin: 0 0 8px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.nomenc-row { padding: 4px 0; border-top: 1px solid var(--border); font-size: 13px; }
.nomenc-row .nomenc-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.nomenc-glyph { display: inline-block; width: 18px; font-weight: 700; }
.nomenc-row.error > .nomenc-glyph, .nomenc-issue.error .nomenc-glyph, .nomenc-group.error > h3 .nomenc-glyph { color: var(--danger); }
.nomenc-row.warn > .nomenc-glyph, .nomenc-issue.warn .nomenc-glyph, .nomenc-group.warn > h3 .nomenc-glyph { color: #f5c542; }
.nomenc-row.ok > .nomenc-glyph, .nomenc-group.ok > h3 .nomenc-glyph { color: #3ddc84; }
.nomenc-issue { font-size: 12px; color: var(--text-muted); padding-left: 18px; }
.nomenc-issue.info .nomenc-glyph { color: var(--accent); }
.nomenc-issue code { font-size: 11px; color: var(--accent-dim); }
.nomenc-issues-group { margin-bottom: 8px; } .nomenc-issues-group .nomenc-issue { font-size: 13px; color: var(--text); padding-left: 0; }

/* ---- ⬆ Subir logos en lote (UAT 31-ago) ---- */
.logo-batch-dialog { width: min(640px, 92vw); }
.logo-batch-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.logo-batch-row { display: grid; grid-template-columns: 72px 1fr 180px; gap: 10px; align-items: center; font-size: 13px; }
.logo-batch-row img { width: 72px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--bg-raised); }
.logo-batch-row .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.logo-batch-row select { width: 100%; }
.logo-batch-row.lb-auto select { border-color: var(--accent-dim); }

@media (prefers-reduced-motion: reduce) {
  .qc-shake, .qc-confetti, .qc-confetti span, .upload-bar-indet .upload-bar-fill { animation: none !important; }
  .qc-confetti { display: none; }
}

/* Revisión interna: etapa de bocetos previa a los rounds numerados. */
.round-card.rc-revision { border-style: dashed; }
.rc-revision .rc-name { color: #8ee4e7; }

/* P2b: categories and informational access to another designer's work. */
/* 16-sep: el select vive DENTRO del chip. Sin esto hereda el `select` global (display:block,
   margin-top:6px, padding 9px, aspecto nativo con indent propio) y el texto queda bajo y corrido
   respecto de los otros chips. Apariencia quitada + chevron propio (currentColor = color de la categoría). */
.uba-category-select {
  appearance: none; -webkit-appearance: none;
  display: inline-block; width: auto; max-width: 150px; height: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; line-height: inherit; color: inherit; vertical-align: baseline;
  cursor: pointer; text-overflow: ellipsis; outline-offset: 2px;
}
.uba-category-editable { position: relative; padding-right: 22px; }
/* 14-oct (Michelle): el select cubre también la flechita (antes el click ahí abría el UBA). */
.uba-category-editable .uba-category-select,
.uba-scope-editable .uba-scope-select { padding-right: 22px; margin-right: -22px; }
.uba-category-editable, .uba-scope-editable { cursor: pointer; }
.uba-category-editable::after {
  content: ''; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
/* 1-oct: nivel de QC por pieza — mismo select-en-chip que la categoría; borde doble = nivel propio de la pieza. */
.uba-scope { font-weight: 600; }
.uba-scope-k { font-weight: 500; opacity: .75; margin-right: 5px; }
.uba-scope.scope-own { border-width: 2px; border-style: solid; box-shadow: 0 0 0 1px currentColor inset; }
.uba-scope-select {
  appearance: none; -webkit-appearance: none;
  display: inline-block; width: auto; max-width: 150px; height: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; line-height: inherit; color: inherit; vertical-align: baseline; cursor: pointer; outline-offset: 2px;
}
.uba-scope-select option { color: var(--text); background: var(--bg-raised); }
.uba-scope-editable { position: relative; padding-right: 22px; }
.uba-scope-editable::after {
  content: ''; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.rh-scope-own { font-weight: 500; opacity: .85; }
/* 2-oct: 👤 quién subió la referencia (página del grupo). */
.asset-uploader { display: block; padding: 0 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uba-foreign { border-style: dashed; }
.categories-dialog { width: min(560px, 90vw); }
/* ⚙ Categorías (15-sep, rediseño): ancho cómodo, campo arriba, lista, biblioteca plegada, acciones en fila. */
dialog.categories-dialog { width: min(680px, 94vw); }
.category-help { margin: -4px 0 12px; }
.category-new { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.category-new input { flex: 1; margin: 0; }
.category-rows { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.category-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); }
.category-row .designer-dot { flex: none; width: 12px; height: 12px; margin: 0; }
.category-handle { flex: none; width: 14px; color: var(--text-muted); cursor: grab; letter-spacing: -2px; user-select: none; }
.category-rows-sortable .category-row { cursor: grab; }
.category-row.dragging { opacity: .45; }
.category-row.drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.category-row.drop-after { box-shadow: 0 2px 0 0 var(--accent); }
.category-pos { flex: none; min-width: 18px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 12px; }
.category-sugg { display: inline-flex; align-items: center; }
.category-sugg .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.category-sugg-del { border: 1px solid var(--border); border-left: 0; border-radius: 0 8px 8px 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; padding: 4px 8px; cursor: pointer; line-height: 1.2; }
.category-sugg-del:hover { color: #ff5c5c; border-color: #ff5c5c; }
.category-row .category-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.category-actions { display: flex; gap: 4px; flex: none; }
.category-library { margin: 4px 0 10px; }
.category-library summary { cursor: pointer; color: var(--text-muted); user-select: none; }
.category-library summary:hover { color: var(--accent); }
.category-library > p { margin: 6px 0 8px; }
.category-suggestions { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; }
.categories-dialog .dialog-actions { justify-content: flex-end; }   /* 18-sep: un solo «OK» que cierra, a la derecha */
.category-new .category-add { flex: none; white-space: nowrap; }
#mat-categories label { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; }
/* 10-sep: filas con thumbnail (misma estética que "Sin clasificar") */
#mat-categories label.mat-cat-row { justify-content: flex-start; align-items: center; color: var(--text); font-size: 13px; }
/* 5-oct (Fernando): thumbnail grande para ver el UBA al asignarle categoría (contain: se ve entero, sin recorte). */
#mat-categories label.mat-cat-row img { width: 240px; height: 135px; object-fit: contain; background: #000; cursor: zoom-in; }
@media (max-width: 760px) { #mat-categories label.mat-cat-row { flex-wrap: wrap; } #mat-categories label.mat-cat-row img { width: 100%; height: auto; aspect-ratio: 16 / 9; } }
/* Con las filas de categoría el diálogo se ensancha para que entren thumbnail + nombre + categoría + ℹ. */
#mat-dialog:has(#mat-categories:not([hidden])) { width: 760px; }
#mat-categories label.mat-cat-row .mat-uname { flex: 1; min-width: 0; }
#mat-categories label.mat-cat-row select { max-width: 200px; }
.intake-preview { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; cursor: zoom-out; }
.intake-preview::backdrop { background: rgba(0, 0, 0, .85); }
.intake-preview img { display: block; max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.intake-preview p { margin: 8px 0 0; text-align: center; color: #ddd; font-size: 13px; }
#mat-categories label.mat-cat-row select { width: auto; margin: 0; margin-left: auto; }
.mat-clash select { width: auto; margin: 4px 0 0; display: block; }
.piece-thumb { display: block; width: 100%; max-height: 180px; object-fit: contain; margin-top: 10px; border-radius: 8px; background: var(--bg-input); }
.rv-readonly #rv-tools, .rv-readonly #rv-width-ctl, .rv-readonly #rv-comment-box,
.rv-readonly .rv-annot-resolve, .rv-readonly #rv-thread [data-edit], .rv-readonly #rv-thread [data-del],
.rv-readonly #rv-add-genfill, .rv-readonly #rv-open-approve, .rv-readonly #rv-fam-approve-all,
.rv-readonly #rv-upload-version, .rv-readonly #rv-replace-version, .rv-readonly #rv-delete-piece,
.rv-readonly #rv-editors-btn, .rv-readonly #rv-owner-btn,
.rv-readonly #rv-select-mode, .rv-readonly #rv-select-bar,
.rv-readonly #rv-approve-dialog, .rv-readonly #rv-unsign-row,
.rv-readonly .edit-layer { display: none !important; }

/* Key Art keeps its amber identity in the root and its own splash. */
.rc-ka { --rc-border: #D9A441; --rc-fill: #594018; }

/* Deck preview warnings and family numbers retain their line breaks. */
#qc-msg-body { white-space: pre-wrap; }

/* 👁 Vista previa visual del deck (10-sep): slides 16:9 dibujadas con el manifiesto; huecos punteados. */
/* Mismo ancho que la página (.page 1100px − padding 40px); dialog.card pisaba .deck-preview por especificidad. */
dialog.card.deck-preview { width: min(1060px, calc(100vw - 40px)); max-width: none; max-height: 92vh; padding: 0; overflow: hidden; }
.deck-preview .dp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.deck-preview .dp-head h2 { margin: 0; font-size: 16px; }
.deck-preview .dp-head .dp-status { margin-left: auto; }
.deck-preview .dp-msz.btn-active { border-color: #ec008c; color: #ff5cb8; }
/* ▣ SafeZone de mockups (24-sep): overlay sobre el área REAL de la <img> de grilla (object-fit: contain), ubicado por
   mockup-safezone.js; la celda solo gana position: relative. Specificity alta para ganarle a `.dp-cell img` / `.ss-mk-cell img`. */
.msz-host { position: relative; }
.msz-host > img.msz-overlay { position: absolute; margin: 0; padding: 0; max-width: none; max-height: none; min-height: 0; flex: none;
  object-fit: fill; border-radius: 0; pointer-events: none; z-index: 1; display: none; }
.deck-preview .dp-body { overflow-y: auto; max-height: calc(92vh - 60px); padding: 14px 18px 24px; }
.dp-summary { margin: 0 0 8px; color: var(--text-muted); }
.dp-warn { color: #FFB454; }
.dp-warnings { margin: 0 0 14px; padding-left: 18px; color: #FFB454; font-size: 12.5px; }
.dp-warnings-title { margin: 8px 0 6px; font-size: 13px; color: #FFB454; }
.dp-status { flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-slide-wrap { margin: 0 0 18px; }
.dp-slide { aspect-ratio: 16 / 9; background: #0b0f14; border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; overflow: hidden; }
.dp-slide-missing .dp-slide { border-color: #FFB454; }
.dp-caption { margin: 6px 2px 0; font-size: 12.5px; color: var(--text-muted); }
.dp-grid { display: grid; gap: 10px; width: 100%; height: 100%; }
/* 18-sep: vista previa — orden por categorías */
.dp-cat-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 4px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text-muted); }
.dp-cat-banner-warn { border-color: #ffb454; color: #ffd166; background: rgba(255, 180, 84, .08); }
.dp-index-cell { position: relative; }
.dp-cat { position: absolute; top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 1px 7px; border-radius: 10px; font-size: 10px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #0d1117; background: var(--cat, #8b949e); font-weight: 600; }
.dp-grid-2x2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dp-grid-3x3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.dp-grid-4x4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; }
.dp-grid-others { grid-template-columns: 0.55fr 1fr 1fr 0.5fr 0.45fr; grid-template-rows: 1fr; }
.dp-cell { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #131a22; border-radius: 6px; padding: 6px; overflow: hidden; }
.dp-cell img { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; object-fit: contain; border-radius: 4px; }
.dp-full, .dp-uba-img { position: relative; padding: 0; }
.dp-full img, .dp-uba-img img { border-radius: 6px; }
.dp-full figcaption, .dp-uba-img figcaption { position: absolute; left: 8px; bottom: 6px; max-width: calc(100% - 16px); padding: 2px 8px; background: rgba(0, 0, 0, .55); border-radius: 4px; color: var(--text); }
.dp-missing.dp-full figcaption { position: static; background: none; }
.dp-cell figcaption { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dp-missing { border: 1.5px dashed #FFB454; background: rgba(255, 180, 84, 0.06); }
.dp-empty { border: 1.5px dashed rgba(255, 255, 255, 0.18); background: none; }
.dp-empty figcaption { position: static; background: none; color: var(--text-muted); white-space: normal; text-align: center; }
.dp-missing span { font-size: 12px; font-weight: 600; color: #FFB454; letter-spacing: .04em; text-transform: uppercase; }
.dp-missing figcaption { color: #FFB454; white-space: normal; text-align: center; }
.dp-full { width: 100%; height: 100%; }
.dp-uba { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 10px; width: 100%; height: 100%; }
.dp-lang-label { font-size: 11px; font-weight: 700; color: #B7B7B7; letter-spacing: .02em; }   /* 22-oct ML: = etiqueta del deck ⚡ */
.dp-uba-img { width: 100%; height: 100%; }
.dp-fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dp-field { background: #131a22; border-radius: 4px; padding: 4px 6px; font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-field small { display: block; color: var(--text-muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.dp-field-filled { border: 1px dashed #5fd38d; }
.dp-field-filled small { color: #5fd38d; }
/* Huecos subibles: click abre el picker, drop sube directo (10-sep) */
.dp-droppable { cursor: pointer; transition: background .15s, border-color .15s; }
.dp-droppable:hover, .dp-droppable:focus-visible { background: rgba(255, 180, 84, 0.16); outline: none; }
.dp-droppable.dp-drop-over { border-style: solid; background: rgba(0, 200, 215, 0.14); border-color: var(--accent); }
.dp-droppable.dp-drop-over span, .dp-droppable.dp-drop-over figcaption { color: var(--accent); }
.dp-droppable.dp-uploading { opacity: .55; cursor: progress; }
.dp-drop-hint { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.dp-grid-4x4 .dp-drop-hint, .dp-grid-others .dp-drop-hint { display: none; }
/* Índice reordenable (10-sep): celdas arrastrables + N° editable */
.dp-index-cell { cursor: grab; border: 1.5px solid transparent; }
.dp-index-cell:active { cursor: grabbing; }
.dp-index-cell.dp-dragging { opacity: .4; }
.dp-index-cell.dp-drop-over { border-color: var(--accent); background: rgba(0, 200, 215, 0.14); }
.dp-index-cell figcaption { display: flex; align-items: center; gap: 6px; max-width: 100%; }
/* 22-sep (Fernando): Title Cards de la vista previa — arrastrables como el índice, N° propio y ❌ «no se presenta»;
   las ocultas van al final, atenuadas, con ↩ Volver. */
.dp-tc-cell { position: relative; cursor: grab; border: 1.5px solid transparent; }
.dp-tc-cell:active { cursor: grabbing; }
.dp-tc-cell.dp-dragging { opacity: .4; }
.dp-tc-cell.dp-drop-over { border-color: var(--accent); background: rgba(0, 200, 215, 0.14); }
.dp-tc-cell figcaption { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.dp-tc-cell .dp-tc-btn { margin-left: auto; padding: 0 6px; font-size: 12px; line-height: 18px; cursor: pointer; }
.dp-tc-cell.dp-tc-hidden { cursor: default; opacity: .45; }
.dp-tc-cell.dp-tc-hidden img { filter: grayscale(1); }
.dp-tc-cell.dp-tc-hidden .dp-tc-btn { color: var(--accent); }
.dp-index-cell figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-no { width: 46px; margin: 0; padding: 1px 4px; font-size: 12px; font-weight: 600; text-align: center; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--accent); font-family: inherit; }
.dp-no:focus { outline: none; border-color: var(--accent); }

/* Bulk category selection: labels remain visible without covering the artwork. */
.uba-bulk-bar { flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.uba-bulk-bar > * { flex-shrink: 0; }
.uba-bulk-bar label { max-width: 100%; flex-wrap: wrap; display: flex; align-items: center; gap: 8px; margin: 0; }
.uba-bulk-bar select { width: auto; max-width: min(240px, 100%); margin: 0; }
#uba-selection-count { white-space: nowrap; }
.uba-bulk-sep { display: inline-flex; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
.uba-bulk-kill:not(:disabled) { color: #ff8888; border-color: #b34; }
.uba-bulk-kill:not(:disabled):hover { background: rgba(255, 136, 136, .1); }
#uba-bulk-status { flex-basis: 100%; font-size: 13px; overflow-wrap: anywhere; }
#uba-bulk-status:empty { display: none; }
.uba-select-label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.uba-select-input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.uba-card.uba-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.uba-selectable .uba-del { top: 44px; }
.uba-selectable .piece-revive { top: 74px; }
.uba-selectable .qc-stamp-card, .uba-selectable .piece-killed-badge, .uba-selectable .uba-fix-pill { top: 46px; }

/* Move one or several UBAs between categories. */
.uba-category-draggable .uba-cover { cursor: grab; }
.uba-category-draggable.uba-dragging { opacity: .5; }
.uba-group.uba-category-drop-over { border-color: var(--accent); background: rgba(0, 200, 215, .12); outline: 2px dashed var(--accent); outline-offset: 2px; }
.uba-category-empty { grid-column: 1 / -1; margin: 0; padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; }

/* ---- ▶ Slideshow (11-sep): pantalla negra para la call de Revisión ---- */
body.bare { margin: 0; background: #000; }
body.bare .page { padding: 0; max-width: none; margin: 0; }
.ss { position: fixed; inset: 0; background: #000; color: #e6edf3; overflow: hidden; outline: none; user-select: none; }
/* Índice vertical del slideshow (15-sep): panel derecho sobre el escenario, no se esconde con idle. */
.ss-index { position: absolute; top: 58px; bottom: 58px; right: 12px; width: min(320px, 40vw); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px;
  background: rgba(8, 12, 18, .88); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); z-index: 3; }
/* 18-sep (UAT Fernando: «no se lee nada, están cortados los textos»): el panel es un flex en columna con scroll;
   sin flex:none los botones se ENCOGÍAN de alto para entrar todos (flex-shrink:1 + overflow:hidden = texto
   rebanado) en vez de scrollear. Alto natural + line-height explícito. */
.ss-index button { flex: none; line-height: 1.35; text-align: left; border: 0; background: transparent; color: #cbd5df; font: inherit; font-size: 13px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-index button:hover { background: rgba(255,255,255,.08); color: #fff; }
.ss-index .ss-ix-designer { font-weight: 700; color: #fff; margin-top: 6px; font-size: 14px; }
.ss-index .ss-ix-designer:first-child { margin-top: 0; }
.ss-index .ss-ix-designer kbd { display: inline-block; min-width: 18px; text-align: center; font: 600 11px/18px ui-monospace, monospace;
  background: rgba(255,255,255,.12); border-radius: 4px; margin-right: 6px; color: #e6edf3; }
.ss-index .ss-ix-count { color: #8b98a5; font-weight: 400; margin-left: 4px; }
.ss-index .ss-ix-uba { padding-left: 34px; }
.ss-index .ss-ix-uba b { color: #8b98a5; margin-right: 4px; }
.ss-index .ss-ix-c { color: var(--accent); font-size: 12px; }
.ss-index button.cur { background: rgba(0, 200, 215, .18); color: var(--accent); }
.ss-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.live-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; }
.live-banner-item { display: block; padding: 8px 16px; border-radius: 22px; background: #161b22; border: 1px solid #ff4d4d; color: #e6edf3; font-size: 14px; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.live-banner-item:hover { background: #1f2630; }
.live-banner-item span { color: #8b98a5; }
/* 20-oct 🔴 Presentar / Seguir: barra de estado (siempre visible) + Navigator. */
.ss-live { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px;
  background: rgba(13, 17, 23, .92); border: 1px solid #ff4d4d; border-radius: 22px; font-size: 13px; color: #e6edf3; white-space: nowrap; max-width: 92vw; overflow: hidden; }
.ss-live #ss-live-text { display: flex; align-items: center; gap: 8px; }
/* 20-oct (Fernando: «la burbuja pisa los diseños»): se arrastra (⠿) y se achica a un punto (–). */
.ss-live { cursor: grab; touch-action: none; user-select: none; }
.ss-live:active { cursor: grabbing; }
.ss-live.ss-live-moved { transform: none; }
.ss-live-grip { color: #8b98a5; font-size: 14px; margin-right: -2px; }
.ss-live-min { border: 0; background: none; color: #8b98a5; font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; }
.ss-live-min:hover { color: #fff; }
.ss-live.ss-live-dot { width: 16px; height: 16px; padding: 0; gap: 0; border-radius: 50%; border: 2px solid #fff; background: #ff3b3b; box-shadow: 0 0 0 3px rgba(255, 59, 59, .35); cursor: pointer; animation: ss-live-pulse 2s ease-in-out infinite; }
.ss-live.ss-live-dot[data-mode="detached"], .ss-live.ss-live-dot[data-mode="available"] { background: #ffb86b; box-shadow: 0 0 0 3px rgba(255, 184, 107, .35); }
.ss-live.ss-live-dot > * { display: none !important; }
@keyframes ss-live-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 59, 59, .12); } }
.ss-live .ss-btn { padding: 3px 10px; font-size: 12px; }
.ss-live-warn { color: #ffb86b; }
.ss-live-notice { color: #8ecae6; white-space: normal; }
.ss-live-btn.on { border-color: #ff4d4d; color: #ff6b6b; background: rgba(255, 77, 77, .15); }
.ss-sala-open.ss-sala-right .ss-live:not(.ss-live-moved) { left: calc((100% - var(--sala-w)) / 2); }
.ss-sala-open.ss-sala-left .ss-live:not(.ss-live-moved) { left: calc(var(--sala-w) + (100% - var(--sala-w)) / 2); }
.ss-navmini { position: absolute; right: 16px; bottom: 64px; width: 220px; z-index: 7; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; background: #000; line-height: 0; box-shadow: 0 4px 16px rgba(0,0,0,.6); pointer-events: none; }
.ss-navmini img { width: 100%; height: auto; display: block; opacity: .85; }
.ss-navmini-rect { position: absolute; border: 2px solid #ff4d4d; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.ss-sala-open.ss-sala-right .ss-navmini { right: calc(var(--sala-w) + 16px); }
/* 20-oct 💬 Sala de Revisión: panel de comentarios (izq / der) + toolbar de marcación sobre el slideshow. */
.ss { --sala-w: min(380px, 34vw); }
.ss-sala-open.ss-sala-right .ss-stage { right: var(--sala-w); }
.ss-sala-open.ss-sala-left .ss-stage { left: var(--sala-w); }
.ss-sala-open .ss-stage { top: 56px; bottom: 52px; }
.ss-sala-open .ss-img, .ss-sala-open .ss-frame { max-width: calc(100vw - var(--sala-w) - 80px); max-height: calc(100vh - 116px); }
.ss-sala-open .ss-top, .ss-sala-open .ss-bottom { opacity: 1 !important; }
.ss-sala-open.ss-sala-right .ss-next, .ss-sala-open.ss-sala-right .ss-index { right: calc(var(--sala-w) + 12px); }
.ss-sala-open.ss-sala-left .ss-prev { left: calc(var(--sala-w) + 12px); }
.ss-sala-open.ss-sala-right .ss-top, .ss-sala-open.ss-sala-right .ss-bottom { right: var(--sala-w); }
.ss-sala-open.ss-sala-left .ss-top, .ss-sala-open.ss-sala-left .ss-bottom { left: var(--sala-w); }
.ss-sala-open.ss-idle .ss-nav { opacity: .6; }
.ss-sala-open.ss-idle:not(.ss-zoomed) .ss-stage { cursor: pointer; }
.ss-sala-drawing .ss-stage, .ss-sala-open.ss-sala-drawing.ss-idle .ss-stage { cursor: crosshair; }
.sala { position: absolute; top: 0; bottom: 0; width: var(--sala-w); box-sizing: border-box; display: flex; flex-direction: column; background: #0d1117; border-left: 1px solid #30363d; z-index: 6; user-select: text; cursor: default; }
.ss-sala-left .sala { left: 0; border-left: 0; border-right: 1px solid #30363d; }
.ss-sala-right .sala { right: 0; }
.sala-head { display: flex; align-items: flex-start; gap: 6px; padding: 12px 12px 8px; border-bottom: 1px solid #21262d; }
.sala-head > div { flex: 1; min-width: 0; }
.sala-count { color: #8b98a5; font-size: 12px; margin-left: 4px; }
.sala-target { display: block; color: var(--accent); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.sala-empty { color: #8b98a5; font-size: 13px; line-height: 1.45; margin: 8px 4px; }
.sala-group { margin: 6px 4px 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8b98a5; }
.sala-item { border: 1px solid #21262d; border-radius: 8px; padding: 8px 10px; background: #161b22; cursor: pointer; font-size: 13px; line-height: 1.4; }
.sala-item:hover { border-color: #30363d; }
.sala-item-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sala-item-resolved { opacity: .55; }
.sala-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sala-author { color: #8b98a5; font-size: 12px; }
.sala-body { margin: 6px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; color: #e6edf3; }
.sala-item-actions { display: flex; align-items: center; gap: 10px; color: #8b98a5; font-size: 12px; }
.sala-item-actions label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sala-compose { border-top: 1px solid #21262d; padding: 10px 12px 12px; position: relative; }
.sala-compose-label { margin: 0 0 6px; font-size: 12px; color: #8b98a5; }
.sala-compose-label b { color: #e6edf3; }
.sala-away { color: #ffb86b; }
.sala-compose textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; background: #0d1117; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 8px; font: inherit; font-size: 13px; }
.sala-compose textarea:focus { outline: none; border-color: var(--accent); }
.sala-compose-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sala-mentions { position: absolute; left: 12px; right: 12px; bottom: 100%; background: #161b22; border: 1px solid #30363d; border-radius: 6px; display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.sala-mentions button { text-align: left; background: none; border: 0; color: #e6edf3; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.sala-mentions button:hover { background: rgba(0, 200, 215, .15); }
.sala-toast { margin: 0; padding: 8px 12px; font-size: 13px; background: rgba(0, 200, 215, .15); color: var(--accent); }
.sala-toast-bad { background: rgba(255, 136, 136, .15); color: #ff8888; }
.sala-tools { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.ss-sala-right .sala-tools { left: 74px; }
.ss-sala-left .sala-tools { right: 74px; }
.sala-tools .ss-btn { width: 40px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
.sala-tools input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid #30363d; border-radius: 6px; background: none; }
.sala-tools-off { display: none !important; }
.sala-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; line-height: normal; }
.sala-layer .sala-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.sala-layer .text-layer { position: absolute; left: 0; top: 0; pointer-events: none; }
.sala-layer .text-obj[contenteditable] { pointer-events: auto; }
.sala-badges { position: absolute; inset: 0; pointer-events: none; }
.sala-badge { position: absolute; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 50%; border: 2px solid #fff; color: #fff; font: 700 13px/22px -apple-system, "Segoe UI", sans-serif; text-align: center;
  transform: translate(-50%, -50%) scale(calc(1 / var(--ss-z, 1))); pointer-events: auto; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sala-badge-resolved { opacity: .45; }
.sala-badge-active { outline: 3px solid var(--accent); outline-offset: 2px; }
.sala-badge-new { background: #ff2b2b; pointer-events: none; }
.ss-img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; display: block; -webkit-user-drag: none; }
.ss-frame { position: relative; display: inline-block; line-height: 0; max-width: 100vw; max-height: 100vh; transform-origin: center center; will-change: transform; }
.ss-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.ss-overlay.ss-gf { opacity: .7; }
.ss-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(0, 200, 215, 0.15); }
.ss-warn { color: #ff8888; font-weight: 600; }
.ss-btn.warn { border-color: #ff8888; color: #ff8888; background: rgba(255, 136, 136, .12); }   /* 18-sep: SafeZone pedida pero no aplicable */
.ss-zoomed .ss-stage { cursor: grab; }
.ss-zoomed .ss-stage:active { cursor: grabbing; }
.ss-zoom { color: var(--accent); font-variant-numeric: tabular-nums; }
.ss-loading { color: #8b949e; font-size: 16px; }
/* MockUps del UBA en grilla (18-sep): Eclipse 2×2 / Others 5 en fila, proporciones de la vista previa del deck. */
.ss-mockups { width: 100vw; height: 100vh; padding: 64px 5vw 70px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; cursor: default; }
.ss-mockups header small { display: block; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #8b949e; }
.ss-mockups header h2 { margin: 4px 0 0; font-size: clamp(20px, 2.6vw, 34px); color: #fff; }
.ss-mockups header h2 b { color: var(--accent); }
.ss-mk-grid { flex: 1; min-height: 0; display: grid; gap: 16px 18px; }
.ss-mockups-eclipse .ss-mk-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ss-mockups-others .ss-mk-grid { grid-template-columns: 0.55fr 1fr 1fr 0.5fr 0.45fr; grid-template-rows: 1fr; align-items: center; }
.ss-mk-cell { margin: 0; min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 6px; border-radius: 8px; padding: 6px; box-sizing: border-box; transition: background .15s; }
/* Others: piezas de proporciones muy distintas en una fila → la celda abraza a su imagen (rótulo pegado abajo). */
.ss-mockups-others .ss-mk-cell { height: auto; max-height: 100%; }
.ss-mockups-others .ss-mk-cell img { flex: 0 1 auto; max-height: 64vh; }
.ss-mk-cell[data-vid] { cursor: zoom-in; }
.ss-mk-cell[data-vid]:hover { background: rgba(255,255,255,.07); }
.ss-mk-cell img { width: 100%; min-height: 0; flex: 1; object-fit: contain; border-radius: 4px; -webkit-user-drag: none; }
.ss-mk-cell figcaption { font-size: 13px; color: #cbd5df; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-mk-hole { flex: 1; min-height: 60px; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,.25); border-radius: 6px; color: #8b949e; font-size: 13px; }
.ss-mk-missing figcaption { color: #8b949e; }
/* Title Cards del diseñador (18-sep): 4×4 como la vista previa del deck. */
.ss-tcards .ss-mk-grid { grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: minmax(0, 1fr); align-content: center; }
/* 22-sep (Fernando): el tamaño del thumbnail lo fija la barrita 🔍 (--ss-thumb, en vw, por tipo) y la grilla se
   reacomoda sola: repeat(auto-fill, minmax(thumb, 1fr)); las filas son del alto de la celda (la imagen manda) y si no
   entra, la grilla scrollea. Resumen del diseñador y cierre por categoría (UBAs) y Title Cards. */
.ss-grid-3x3 .ss-sum-grid, .ss-grid-4x4 .ss-mk-grid { grid-template-columns: repeat(auto-fill, minmax(var(--ss-thumb, 22vw), 1fr)); grid-auto-rows: max-content; align-content: start; overflow: hidden; padding-bottom: 8px; }
.ss-grid-3x3 .ss-sum-cell, .ss-grid-4x4 .ss-mk-cell { height: auto; }
/* 1-oct: la proporción real (--r) fija la altura antes de que cargue la imagen → slideshow-pages.js arma páginas que
   entran sin scroll; una fila que sola no entra se achica con --ss-img-max. */
.ss-grid-3x3 .ss-sum-cell img, .ss-grid-4x4 .ss-mk-cell img { flex: none; width: 100%; height: auto; aspect-ratio: var(--r, 16 / 9); max-height: var(--ss-img-max, none); object-fit: contain; }
.ss-thumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; }
.ss-thumb input[type="range"] { width: 120px; margin: 0; accent-color: var(--accent); cursor: ew-resize; }
.ss-tcards header h2 span { color: var(--accent); font-weight: 400; font-size: .6em; }
/* Cierre por categorías (18-sep): slides paginados (≤ 9 por slide) con el formato del resumen del diseñador, sin scroll. */
.ss-cats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.ss-cats-head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-cats-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ss-cats-status { font-size: 13px; color: #ffd166; }
.ss-cat-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--cat); flex: none; }
.ss-cats .ss-sum-cell { position: relative; border: 1px solid color-mix(in srgb, var(--cat, #8b949e) 35%, transparent); }
.ss-cats .ss-sum-cell figcaption small { display: block; color: #8b949e; font-size: 11px; }
.ss-cat-movable { cursor: grab; }
.ss-cat-cell.dragging { opacity: .4; }
.ss-cat-select { align-self: center; max-width: 100%; margin: 0; padding: 2px 6px; font-size: 12px; color: #cbd5df; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; }
.ss-cat-cell.drop-before::before, .ss-cat-cell.drop-after::after { content: ''; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--accent); }
.ss-cat-cell.drop-before::before { left: -9px; }
.ss-cat-cell.drop-after::after { right: -9px; }
/* Resumen por diseñador (15-sep): grilla de todos sus UBAs, como el índice del deck. */
.ss-summary { width: 100vw; height: 100vh; padding: 64px 5vw 70px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; cursor: default; }
.ss-summary header small { display: block; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #8b949e; }
.ss-summary header h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 38px); color: #fff; }
.ss-summary header h2 span { color: var(--accent); font-weight: 400; font-size: .6em; }
.ss-sum-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 16px 18px; align-content: center; }
.ss-sum-cell { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border-radius: 8px; padding: 6px; transition: background .15s; }
.ss-sum-cell:hover { background: rgba(255,255,255,.07); }
.ss-sum-cell img { width: 100%; min-height: 0; flex: 1; object-fit: contain; border-radius: 4px; -webkit-user-drag: none; }
.ss-sum-cell figcaption { font-size: 13px; color: #cbd5df; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-sum-cell figcaption b { color: #fff; }
/* Grillas de mockups del UBA (18-sep): sub-entradas más chicas, colgadas del UBA. */
.ss-index .ss-ix-mk { padding: 3px 8px 3px 52px; font-size: 12px; color: #8b98a5; }
.ss-index .ss-ix-mk.cur { color: var(--accent); }
.ss-index { width: min(380px, 44vw); }
.ss-index .ss-ix-summary { color: #8b98a5; font-size: 12px; }
.ss-cover { text-align: center; padding: 0 6vw; }
.ss-cover small { display: block; font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: #8b949e; margin-bottom: 18px; }
.ss-cover h1 { margin: 0; font-size: clamp(40px, 8vw, 110px); font-weight: 700; color: #fff; line-height: 1.05; }
.ss-cover p { margin-top: 22px; font-size: 20px; color: var(--accent); }
.ss-top, .ss-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0)); transition: opacity .3s; font-size: 14px; }
.ss-bottom { bottom: 0; top: auto; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); padding-top: 28px; }
.ss-top { top: 0; }
.ss-idle .ss-top, .ss-idle .ss-bottom, .ss-idle .ss-nav { opacity: 0; }
.ss-idle:not(.ss-zoomed) .ss-stage { cursor: none; }
.ss-spacer { flex: 1; }
.ss-btn { color: #e6edf3; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.ss-btn:hover { border-color: var(--accent); color: var(--accent); }
.ss-round { color: #8b949e; font-size: 13px; }
.ss-caption { font-size: 16px; }
.ss-caption b { color: var(--accent); font-size: 20px; }
.ss-sep { color: #8b949e; margin: 0 4px; }
.ss-v, .ss-designer { color: #8b949e; }
.ss-comments { background: #FFB454; color: #1a1200; font-weight: 700; border-radius: 12px; padding: 3px 10px; font-size: 14px; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.ss-comments:hover { background: #ffc677; }
.ss-comments.ss-comments-static { cursor: default; pointer-events: none; }
.ss-counter { color: #8b949e; font-variant-numeric: tabular-nums; }
.ss-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 96px; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 44px; cursor: pointer; border-radius: 10px; opacity: .6; transition: opacity .3s; }
.ss-nav:hover { opacity: 1; background: rgba(0,0,0,.6); }
.ss-nav:disabled { opacity: .1; cursor: default; }
.ss-prev { left: 10px; } .ss-next { right: 10px; }

/* 22-sep camino C: selector de motor del deck (⚡ Moderno / 🐢 Clásico) en #deck-dialog */
.deck-engine-opt { display: block; margin: .45em 0; cursor: pointer; line-height: 1.35; }
.deck-engine-opt input { margin-right: .4em; }
.deck-engine-opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.dp-cat-ka { --cat: #FFB454; color: #FFB454; border-color: rgba(255, 180, 84, 0.6); }

/* ---------- 📊 Estadísticas (S1, 23-sep) — Internas azul / Externas magenta (validados con dataviz sobre #161c24) ---------- */
.st-int { color: #7fb0f0; }
.st-ext { color: #e88bb0; }
.st-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 18px; }
.st-filters .filter-bar { margin-bottom: 0; }
.st-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.st-f select, .st-f input { margin: 0; padding: 6px 8px; width: auto; min-width: 140px; }
.st-panel { display: flex; flex-direction: column; gap: 16px; }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.st-kpi { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.st-kpi-v { font-size: 26px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.st-kpi-l { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.st-kpi-n { font-size: 11px; color: var(--text-muted); opacity: .8; }
.st-kpi-alert { border-color: #7a3a3a; }
.st-kpi-alert .st-kpi-v { color: #ffb1b1; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.st-card h2 { font-size: 15px; margin: 0 0 6px; }
.st-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.st-card-head select { width: auto; margin: 0; padding: 5px 8px; }
.st-chart { position: relative; height: 220px; }
.st-chart-rank { height: 240px; }
.st-person { border-top: 1px solid var(--border); padding: 8px 0; }
.st-person summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.st-count { background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.st-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.st-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.st-age { margin-left: auto; font-variant-numeric: tabular-nums; }
.st-alert { color: #ffb1b1; }
.st-tag { font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; }
.st-tag-int { color: #7fb0f0; border-color: #2b4f80; }
.st-tag-ext { color: #e88bb0; border-color: #7a2f4d; }
.st-tag-late { color: #ffb1b1; border-color: #7a3a3a; }
.st-tag-soon { color: #f0a437; border-color: #7a5a24; }
.st-table-wrap { overflow-x: auto; }
.st-table { font-size: 13px; }
.st-table th.st-sort { cursor: pointer; white-space: nowrap; user-select: none; }
.st-table th.st-asc::after { content: ' ▲'; font-size: 10px; }
.st-table th.st-desc::after { content: ' ▼'; font-size: 10px; }
.st-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 🎨 Revisión de Logos (LG1, 23-sep): propuestas sobre gris neutro (se ven logos blancos y negros) ---------- */
:root { --lg-bg-gray: #8a8a8a; --lg-bg-light: #f2f2f2; --lg-bg-dark: #141414; }
.round-card.rc-lg { --rc-border: #00C8D7; --rc-fill: #0B3A40; }
.logos-round { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.lg-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-group-h { font-size: 15px; margin: 0 0 8px; }
/* 25-sep LK: grupos de Logos con el color del diseñador (o de la categoría), igual que .uba-group de los UBAs. */
.lg-group { border: 1px solid var(--border, #2d333b); border-radius: 12px; padding: 12px 14px 14px; }
.lg-group-h { display: flex; align-items: center; gap: 8px; }
.lg-group-mode { gap: 6px; }
.lg-cat-select { max-width: 100%; font-size: 12px; background: var(--bg, #0d1117); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; }
.section-lock-bar.is-locked { border-color: #3ddc84; color: #3ddc84; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-section-lock:disabled { opacity: .5; cursor: not-allowed; }
.section-lock-bar.rh-section-lock { margin: 0; padding: 2px 8px; font-size: 12px; gap: 8px; }
.ss-lg-by { color: #8b949e; }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.lg-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lg-card.lg-dead { opacity: .45; }
.lg-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--lg-bg-gray); border-radius: 6px; overflow: hidden; }
.lg-thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.lg-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.lg-no { font-variant-numeric: tabular-nums; color: var(--accent); }
.lg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-actions { margin-left: auto; display: flex; gap: 4px; }
.lg-empty { margin: 8px 0; }
/* 8-oct plan LS: Sets de logos — una card con las 4 variantes (SD, SL, HD, HL) + ⭐ final. */
.lg-card.lg-set { grid-column: span 2; }
@media (max-width: 520px) { .lg-card.lg-set { grid-column: span 1; } }
.lg-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-var { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.lg-var.lg-dead { opacity: .45; }
.lg-var-empty .lg-thumb-empty { border: 1px dashed var(--border); background: transparent; color: var(--muted, #8b949e); font-size: 12px; }
.lg-var-h { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.lg-var-label { font-size: 12px; font-weight: 600; }
.lg-var-select { max-width: 100%; font-size: 12px; background: var(--bg, #0d1117); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; }
.lg-var-dead { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lg-thumb-mini { width: 44px; aspect-ratio: 4 / 3; flex: none; }
.lg-set-acts { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.lg-star.lg-star-current { color: #f5c518; }
.lg-star.lg-star-stale { color: #f5c518; opacity: .7; }
span.lg-star { padding: 0 4px; }
.lg-mode { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.lg-file-rows { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.lg-file-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lg-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-file-problems { color: var(--warn, #d29922); }
/* 🎨 Slideshow de logos (LG1): grilla 4×3 fija, cada celda sobre el fondo elegido con ◐ (gris / claro / oscuro). */
.ss-grid-4x3 .ss-mk-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
.ss-lg-cell { margin: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.ss-lg-img { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--lg-bg-gray); overflow: hidden; }
.ss[data-lgbg="light"] .ss-lg-img { background: var(--lg-bg-light); }
.ss[data-lgbg="dark"] .ss-lg-img { background: var(--lg-bg-dark); }
.ss-lg-img img { max-width: 78%; max-height: 78%; object-fit: contain; pointer-events: none; }
.ss-lg-cell figcaption { font-size: 13px; color: #cfd6de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-lg-cell:hover .ss-lg-img { outline: 2px solid #00C8D7; }
/* 🎨 Visor con aire (LG1): propuesta de logo sobre fondo neutro, marcas visibles fuera del logo. */
.viewport.rv-airy { background: var(--lg-bg-gray); }
.viewport.rv-airy[data-lgbg="light"] { background: var(--lg-bg-light); }
.viewport.rv-airy[data-lgbg="dark"] { background: var(--lg-bg-dark); }
.viewport.rv-airy .stage { overflow: visible; }
/* 🎬 Vista previa del Deck Logos (LG2) */
.dp-cover { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 8%; gap: 6px; }
.dp-cover b { font-size: 18px; } .dp-cover span { color: var(--text-muted); font-size: 12px; }
.dp-lr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4% 1.7%;
  width: 100%; height: 100%; box-sizing: border-box; padding: 3% 3% 2% 11.7%; }
.dp-lr-grid > * { min-width: 0; min-height: 0; overflow: hidden; }
.dp-lr-cell img { background: #8A8A8A; object-fit: contain; }
.dp-lr-big { display: flex; align-items: center; justify-content: center; height: 100%; background: #8A8A8A; }

/* ---------- 📋 Asignaciones nuevas (AS1, 23-sep): lámina (render compartido) + editor + sección del Feedback ---------- */
.asg-fit { position: relative; width: 100%; overflow: hidden; border-radius: 4px; }
.asg-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.asg-el { position: absolute; }
.asg-img { object-fit: fill; user-select: none; -webkit-user-drag: none; }
.asg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.25; min-height: 1em; outline: none; }
.asg-shape { left: 0; top: 0; overflow: visible; pointer-events: none; }
.page:has(.asg-page) { max-width: 1560px; }
.asg-head { align-items: flex-start; gap: 16px; }
.asg-head-main { flex: 1; min-width: 0; }
.asg-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.asg-title-input { font-size: 22px; font-weight: 700; background: transparent; border: 1px solid transparent; padding: 4px 6px; margin: 2px 0 4px -7px; width: 100%; color: var(--text); }
.asg-title-input:hover:not([readonly]), .asg-body-input:hover:not([readonly]) { border-color: var(--border); }
.asg-body-input { width: 100%; resize: none; background: transparent; border: 1px solid transparent; padding: 4px 6px; margin-left: -7px; color: var(--text); font-size: 14px; overflow: hidden; }
.asg-designers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.asg-designers .chip { font-size: 12px; padding: 3px 10px; }
.asg-save { min-height: 1.2em; }
.asg-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--bg-raised); border: 1px solid var(--accent-dim);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.asg-banner > span { flex: 1; min-width: 220px; }
.asg-work { display: grid; grid-template-columns: 172px 1fr; gap: 16px; align-items: start; }
.asg-strip { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.asg-sheets { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.asg-thumb { position: relative; display: block; padding: 4px; background: var(--bg-raised); border: 2px solid var(--border); border-radius: 6px; cursor: pointer; width: 162px; }
.asg-thumb.is-active { border-color: var(--accent); }
.asg-thumb-no { position: absolute; left: 8px; top: 6px; z-index: 1; font-size: 11px; background: rgba(0,0,0,.6); color: #fff; border-radius: 3px; padding: 0 5px; }
.asg-strip-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.asg-editor { min-width: 0; }
.asg-tools { flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.asg-tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.asg-color input { width: 34px; height: 28px; padding: 0; border: 1px solid var(--border); background: none; cursor: pointer; }
.asg-color, .asg-size { margin: 0; }
.asg-size select { padding: 4px 6px; font-size: 13px; }
.asg-sel-tools, .asg-undo { display: inline-flex; gap: 4px; }
.asg-undo { margin-left: auto; }
.asg-canvas { position: relative; background: #2a2f36; padding: 0; border-radius: 6px; outline: none; box-shadow: 0 0 0 1px var(--border); touch-action: none; }
.asg-canvas .asg-fit { box-shadow: 0 2px 18px rgba(0,0,0,.35); }
.asg-canvas[data-tool="select"] .asg-stage { cursor: default; }
.asg-canvas:not([data-tool="select"]) .asg-stage { cursor: crosshair; }
.asg-canvas[data-tool="text"] .asg-stage { cursor: text; }
.asg-canvas.asg-drop { box-shadow: 0 0 0 3px var(--accent); }
.asg-hint { margin-top: 8px; }
.asg-selbox { position: absolute; outline: calc(2px * var(--inv-k, 1)) solid var(--accent); outline-offset: calc(3px * var(--inv-k, 1)); pointer-events: none; }
.asg-selbox-line { outline: none; left: 0; top: 0; width: 0; height: 0; }
.asg-handle { position: absolute; width: calc(12px * var(--inv-k, 1)); height: calc(12px * var(--inv-k, 1)); background: #fff;
  border: calc(2px * var(--inv-k, 1)) solid var(--accent); border-radius: 2px; pointer-events: auto; box-sizing: border-box; transform: translate(-50%, -50%); }
.asg-h-nw { left: calc(-3px * var(--inv-k, 1)); top: calc(-3px * var(--inv-k, 1)); cursor: nwse-resize; }
.asg-h-ne { left: calc(100% + 3px * var(--inv-k, 1)); top: calc(-3px * var(--inv-k, 1)); cursor: nesw-resize; }
.asg-h-sw { left: calc(-3px * var(--inv-k, 1)); top: calc(100% + 3px * var(--inv-k, 1)); cursor: nesw-resize; }
.asg-h-se { left: calc(100% + 3px * var(--inv-k, 1)); top: calc(100% + 3px * var(--inv-k, 1)); cursor: nwse-resize; }
.asg-h-pt { border-radius: 50%; cursor: move; }
.asg-text.asg-editing { outline: calc(1px * var(--inv-k, 1)) dashed var(--accent); cursor: text; }
.asg-readonly [data-edit] { display: none !important; }
.asg-ref-dialog { width: min(900px, 94vw); }
.asg-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; margin: 12px 0; }
.asg-ref-item { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text); font-size: 12px; text-align: left; }
.asg-ref-item:hover { border-color: var(--accent); }
.asg-ref-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }
/* Sección en el diálogo 📩 Feedback del cliente */
.asg-section { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 14px 0 6px; background: var(--bg-raised); }
.asg-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.asg-section-head h3 { margin: 0; font-size: 15px; flex: 1; }
.asg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.asg-card { border: 1px solid var(--border); border-radius: 6px; padding: 6px; background: var(--bg-input); display: flex; flex-direction: column; gap: 6px; }
.asg-card-title { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.asg-card-meta { font-size: 12px; color: var(--text-muted); }
.asg-card-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.asg-card-thumb { cursor: pointer; }
.asg-new-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border: 1px dashed var(--accent-dim); border-radius: 6px; }
.asg-new-form label { margin: 0; }
.asg-new-designers { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) {
  .asg-work { grid-template-columns: 1fr; }
  .asg-strip { position: static; }
  .asg-sheets { flex-direction: row; max-height: none; overflow-x: auto; }
}

/* ---------- 📋 Pedidos nuevos (AS2, 24-sep): banda arriba de la grilla del round N+1 ---------- */
.assign-band { border: 1px solid var(--accent-dim); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; background: var(--bg-raised); }
.assign-band-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.assign-band-head h2 { margin: 0; font-size: 17px; flex: 1; }
.assign-filter { margin: 0; }
.assign-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.assign-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--bg-input); }
.assign-card.is-mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim) inset; }
.assign-card.is-done { opacity: .85; }
.assign-thumb { cursor: pointer; width: 220px; max-width: 100%; }
.assign-body h3 { margin: 2px 0 2px; font-size: 14px; overflow-wrap: anywhere; }
.assign-text { margin: 0; white-space: pre-wrap; }
.assign-who, .assign-deliv { margin: 2px 0; color: var(--text-muted); }
.assign-who b { color: var(--text); }
.assign-deliv { display: flex; flex-direction: column; gap: 2px; }
.assign-deliv-item { font-size: 12px; }
.assign-deliv-item.is-killed { color: var(--text-muted); text-decoration: line-through; }
.assign-state { font-size: 11px; }
.assign-card.is-done .assign-state { border-color: #3fb950; color: #7ee787; }
.assign-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.uba-asg-chip { border-color: var(--accent-dim); color: var(--accent); }
.asg-deliver-note { margin: 4px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--bg-input); color: var(--text); font-size: 13px; border-radius: 4px; }

/* ---------- 📊 S2 (24-sep): ficha de persona, Proyectos, CSV ---------- */
.st-plink { color: var(--text); text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; }
.st-plink:hover { color: var(--accent); }
.st-linkbtn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.st-linkbtn:hover { text-decoration: underline; }
.st-person-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.st-person-head h2 { margin: 0; font-size: 20px; }
.st-card-head h3 { margin: 0; font-size: 14px; }

/* ======================================================================================================
   📱 RS1 (24-sep): celular (≤ 760 px). Todo lo de acá vive en media queries — desktop no cambia. Única
   excepción: el botón ☰ del menú de la topbar, oculto fuera del celular.
   ====================================================================================================== */
.topbar-menu-btn { display: none; }
@media (max-width: 760px) {
  /* ---- Topbar: logo + ⌂ + 🔔 + ☰; el resto pasa al panel (layout.php mueve los nodos) ---- */
  .topbar { padding: 0 10px; gap: 8px; position: relative; }
  .brand-name, .app-version { display: none; }
  .topbar-home { margin-left: 6px; padding: 0 10px; }
  .env-badge { font-size: 10px; padding: 2px 6px; margin-left: 6px; }
  .topbar-right { gap: 6px; }
  .topbar-menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; font-size: 18px; }
  .topbar-menu-panel { position: absolute; top: 52px; left: 0; right: 0; z-index: 70; display: flex; flex-direction: column;
    gap: 8px; padding: 12px; background: var(--bg-raised); border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .5); max-height: calc(100vh - 52px); overflow-y: auto; }
  .topbar-menu-panel[hidden] { display: none; }
  .topbar-menu-panel > * { width: 100%; justify-content: center; min-height: 44px; }
  .topbar-menu-panel select { width: 100%; max-width: none; }
  .topbar-menu-panel .user-chip { text-align: center; white-space: normal; }
  .bell-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 70px); }

  /* ---- Página y encabezados ---- */
  .page { padding: 14px 12px 28px; }
  .page-head { flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .page-head h1 { font-size: 19px; }
  .head-actions { flex-wrap: wrap; flex-shrink: 1; gap: 8px; }

  /* ---- Filas de chips: una fila con scroll horizontal propio (fade a la derecha = hay más) ---- */
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { flex-shrink: 0; }
  .filter-bar .chip { min-height: 40px; }
  /* Insp. RS1-02: los filtros de diseñador también en una fila deslizable; la barra de selección múltiple ENVUELVE. */
  .filter-row .filter-bar { flex-wrap: nowrap; overflow-x: auto; }
  .uba-bulk-bar, .uba-bulk-bar .filter-bar { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .stage-filter { margin-left: 0; flex-shrink: 0; }
  .extra-filter { flex-shrink: 0; }

  /* ---- Botones táctiles ---- */
  .btn:not(.btn-sm) { min-height: 40px; }
  /* Insp. RS1-03: todo lo tocable ≥ 40 px (botones chicos, chips de resultado del feedback, acciones de tarjetas). */
  .btn-sm, .deck-chips .chip, .uba-del, .rc-del { min-height: 40px; min-width: 40px; }

  /* ---- Diálogos a lo ancho, con scroll interno ---- */
  dialog.card, dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; min-width: 0 !important;
    max-height: calc(100dvh - 16px); overflow-y: auto; padding: 16px; margin: auto; }
  .dialog-actions { flex-wrap: wrap; gap: 8px; }
  .dialog-actions .btn { flex: 1 1 auto; }
  dialog .btn { white-space: normal; max-width: 100%; }   /* insp. RS1-01: etiquetas largas (generador de rounds) envuelven */
  /* Insp. RS1-06: filas del cierre de round — nombres largos cortan, veredicto siempre visible. */
  .round-close-item { flex-wrap: wrap; }
  .round-close-item .rc-name { min-width: 0; flex: 1 1 140px; overflow-wrap: anywhere; }

  /* ---- /titulos ---- */
  #kind-tabs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  #kind-tabs .list-toolbar { width: 100%; margin-left: 0; display: flex; gap: 8px; flex-wrap: wrap; }
  #title-search { flex: 1 1 160px; width: auto; min-width: 0; }
  .title-grid { grid-template-columns: 1fr; }
  /* vista lista → tarjetas compactas (la fila de columnas no entra) */
  .list-view .title-card-info { flex-wrap: wrap; gap: 4px 12px; }
  .list-view .title-card-head { flex: 1 1 100%; }
  .list-view .counters { white-space: normal; flex: 1 1 100%; }

  /* ---- Home: los dos botones apilados a lo ancho ---- */
  .home-choice { gap: 16px; min-height: 0; padding-top: 12px; }
  .home-btn { width: 100%; aspect-ratio: auto; padding: 22px 12px; }
  .home-btn-label { font-size: 24px; letter-spacing: 2px; }

  /* ---- Título: banda del round (acciones en su propia fila con scroll horizontal) ---- */
  .round-header { gap: 8px 10px; padding: 10px 12px; border-left-width: 8px; }
  .round-header .rh-name { font-size: 19px; }
  .round-header .rh-spacer { display: none; }
  .round-header .rh-actions { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .round-header .rh-actions::-webkit-scrollbar { display: none; }
  .round-header .rh-actions > * { flex-shrink: 0; }

  /* ---- Diálogo de Feedback: filas apiladas (imagen arriba a lo ancho) ---- */
  .fb-row { flex-direction: column; align-items: stretch; }
  .fb-row img, .fb-row .rc-noimg { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
  .fb-head { flex-wrap: wrap; }
  .fb-head b { overflow-wrap: anywhere; }
  .asg-cards { grid-template-columns: 1fr; }
  .asg-card-thumb, .assign-thumb { width: 100%; }

  /* ---- Editor de láminas (lectura en celular): cabecera apilada ---- */
  .asg-head { flex-direction: column; align-items: stretch; }
  .asg-head-side { flex-direction: row; justify-content: space-between; align-items: center; }
  .asg-title-input { font-size: 19px; }
  .assign-cards { grid-template-columns: 1fr; }
  /* R03: el lienzo de solo lectura deja scrollear y pellizcar (nativo) para leer textos chicos. */
  .asg-readonly .asg-canvas { touch-action: pan-x pan-y pinch-zoom; }
  /* R04: tira de láminas horizontal con miniaturas que no se encogen. */
  .asg-strip { min-width: 0; }
  .asg-sheets { min-width: 0; }
  .asg-thumb { flex: 0 0 162px; }

  /* R01: badges de simulación / modo compactos, siempre en la barra. */
  .sim-badge .sim-word { display: none; }
  .sim-badge { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; padding: 3px 6px; }
  .topbar-right { min-width: 0; }

  /* R02: editor de rounds y propuesta del brief — filas apiladas. */
  .rounds-editor-row { flex-wrap: wrap; row-gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .rounds-editor-row .re-name { flex: 1 1 100%; min-width: 0; order: -1; }
  .rounds-editor-row .re-scope { flex: 1 1 140px; width: auto; }
  .rounds-editor-row input[type=date] { flex: 1 1 130px; width: auto; }
  .rounds-brief-proposal * { max-width: 100%; }
  .rounds-brief-proposal .rounds-editor-row, .rounds-brief-proposal [class*="-row"] { flex-wrap: wrap; }
}
/* Pantallas táctiles: lo que hoy aparece solo con hover queda visible. */
@media (hover: none) and (max-width: 760px) {   /* insp. RS1-R06: solo celular (las táctiles anchas no cambian) */
  .uba-card .uba-del { opacity: 1; visibility: visible; }
  .round-card .rc-del { opacity: 1; visibility: visible; }   /* insp. RS1-04: borrar round vacío / KA / Logos */
}

/* ======================================================================================================
   📱 RS2 (24-sep): pantalla de revisión en celular (≤ 760 px). Desktop no cambia: los controles nuevos
   (barra ⚙/📚/↶, ⋯ Más, ✕ de referencias) están ocultos fuera del celular.
   ====================================================================================================== */
.rv-m-bar, .rv-actionbar .rv-m-more, .rv-ref-head .rv-m-refs-close { display: none; }   /* especificidad > .rv-actionbar .btn */
@media (pointer: coarse) {
  /* handles de edición / recorte tocables con el dedo (solo punteros gruesos; el mouse sigue igual) */
  .edit-handle, .rv-crop-handle { width: 24px; height: 24px; border-radius: 6px; }
}
@media (max-width: 760px) {
  .page:has(.review-page) { padding: 0; }
  .review-page { height: auto; min-height: calc(100dvh - 52px); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* ---- Cabecera compacta ---- */
  .review-head { flex-wrap: wrap; gap: 6px; padding: 8px 10px; position: relative; }
  .review-head-left { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; padding-right: 92px; }
  .review-head-left .breadcrumb { flex: 1 1 100%; font-size: 13px; }
  .review-head-right { position: absolute; top: 6px; right: 8px; gap: 4px; }
  #rv-prev, #rv-next { font-size: 0; min-width: 40px; min-height: 40px; padding: 0; }
  #rv-prev::before { content: '‹'; font-size: 24px; line-height: 1; }
  #rv-next::before { content: '›'; font-size: 24px; line-height: 1; }
  #rv-family { flex: 1 1 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  #rv-family::-webkit-scrollbar { display: none; }
  #rv-family > * { flex-shrink: 0; }

  /* ---- Split → columna; referencias a pantalla completa detrás de 📚 ---- */
  .review-split { flex-direction: column; flex: none; }
  #rv-left-panel { flex: none; width: 100%; min-width: 0; }
  .review-divider { display: none; }
  #rv-right-panel { display: none; }
  body.rv-m-refs-open #rv-right-panel { display: flex; flex-direction: column; position: fixed; inset: 52px 0 0 0; z-index: 85;
    background: var(--bg); width: auto; }
  body.rv-m-refs-open .rv-ref-head .rv-m-refs-close { display: inline-flex; }
  body.rv-m-refs-open #rv-right-panel .viewport { flex: 1 1 auto; min-height: 0; }

  /* ---- Barra solo-celular + opciones plegables ---- */
  .rv-m-bar { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
  .rv-m-bar > * { flex-shrink: 0; }
  #rv-toolbar { display: none; }
  #rv-cmp-side { display: none; }   /* RS2-R03: sin lado a lado en celular */
  #rv-toolbar.rv-m-open { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  #rv-toolbar.rv-m-open .rv-opt-main { flex-wrap: wrap; }

  /* ---- Herramientas en fila arriba del visor + visor grande ---- */
  .rv-left-body { flex-direction: column; }
  .rv-tools-col { flex-direction: row; width: 100%; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 4px 8px; border-right: 0; }
  .rv-tools-col::-webkit-scrollbar { display: none; }
  .rv-tools-col .tool { width: 44px; min-width: 44px; height: 40px; flex-shrink: 0; }
  .rv-tools-col .tool-sep-h { width: 1px; height: 28px; margin: 0 4px; }
  .rv-tools-col #rv-color { width: 44px; height: 40px; flex-shrink: 0; }
  #rv-piece-viewport { flex: none; height: min(58dvh, 108vw); min-height: 260px; }

  /* ---- Comentarios y feedback a lo ancho ---- */
  .review-bottom { flex-direction: column; gap: 10px; padding: 8px 10px; }
  .rv-thread, .rv-feedback { min-width: 0; width: 100%; max-height: none; }

  /* ---- Barra de acción fija abajo: ⬆ Nueva versión · ✅ APROBAR · ⋯ (el resto en la hoja) ---- */
  .rv-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; max-width: none; margin: 0;
    display: flex; flex-direction: column; gap: 8px; background: var(--bg-raised); border-top: 1px solid var(--border);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
  .rv-actionbar .rv-actions-row { flex-wrap: nowrap; gap: 8px; justify-content: flex-start; }
  .rv-actionbar .rv-actions-row:first-child { order: 2; }
  .rv-actionbar .rv-actions-row2 { order: 1; display: none; }
  .rv-actionbar .rv-actions-row:first-child > :not(#rv-upload-version):not(#rv-open-approve):not(.rv-m-more) { display: none; }
  .rv-actionbar .rv-m-more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; font-size: 20px; }
  /* Insp. RS2-F01: etiquetas largas («✅ APROBAR DISEÑO + GENFILL») envuelven y se achican; nada se sale de 320 px. */
  .rv-actionbar #rv-open-approve { flex: 1 1 0; min-width: 0; }
  .rv-actionbar #rv-upload-version { flex: 0 1 auto; min-width: 0; }
  .rv-actionbar .btn { min-height: 44px; height: auto; white-space: normal; line-height: 1.15; font-size: 13px; padding: 6px 10px; text-align: center; }
  .rv-actionbar .rv-m-more { flex: 0 0 44px; }
  /* los avisos (errores / deshacer) flotan por encima de la barra fija y de la hoja de referencias */
  .undo-toast { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 95; left: 8px; right: 8px; transform: none; max-width: none; }
  /* en la revisión el aviso es solo informativo: «↶ Deshacer» está en la barra de arriba y el cartel no captura toques
     (un toque sobre el visor no puede deshacer por accidente la marca recién guardada) */
  #rv-undo-toast { pointer-events: none; opacity: .92; }
  #rv-undo-toast #rv-undo-btn { display: none !important; }
  .rv-actionbar.rv-m-more-open { max-height: 75dvh; overflow-y: auto; }
  .rv-actionbar.rv-m-more-open .rv-actions-row2 { display: flex; flex-wrap: wrap; justify-content: stretch; }
  .rv-actionbar.rv-m-more-open .rv-actions-row2 > .btn { flex: 1 1 45%; }
  .rv-actionbar.rv-m-more-open .rv-actions-row:first-child { flex-wrap: wrap; }
  .rv-actionbar.rv-m-more-open .rv-actions-row:first-child > :not([hidden]) { display: inline-flex !important; }
  .rv-actionbar.rv-m-more-open .rv-signatures { flex: 1 1 100%; display: flex; flex-wrap: wrap; }

  /* ---- Caja de comentario = hoja inferior que sube con el teclado ---- */
  .rv-comment-box { left: 8px; right: 8px; width: auto; bottom: calc(8px + var(--rv-kb, 0px)); z-index: 90;
    max-height: calc(100dvh - 70px - var(--rv-kb, 0px)); overflow-y: auto; }
  .rv-comment-box .btn { min-height: 44px; }

  /* ---- Diálogo de firma ---- */
  .rv-sign-row { flex-wrap: wrap; }
  .rv-sign-row select { min-width: 0; flex: 1 1 100%; }
  .rv-approve-dialog .rv-ack { display: block; }
  .rv-approve-dialog .rv-ack input { vertical-align: middle; margin-right: 6px; }
}
/* QA1-P2: tarjeta a la que se vuelve desde el slideshow */
.uba-card.uba-card-flash { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .6s; }
/* QA1-P5c: vincular a Drive como opción chica (ya no es alerta) */
.rv-ref-src-link { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; font-size: 11px; padding: 0 6px; margin-left: 6px; cursor: pointer; }
.rv-ref-src-link:hover { color: var(--accent); border-color: var(--accent); }
/* QA1-P5a: 📚 De la biblioteca en asignaciones */
.asg-lib-groups { max-height: 60vh; overflow-y: auto; }
.asg-lib-title { font-size: 13px; margin: 10px 0 6px; color: var(--text-muted); }
.asg-ref-item.is-picked { outline: 2px solid var(--accent); outline-offset: 1px; }
/* QA2-P1: textos como objeto (visor, ambos paneles) — capa HTML en px de la imagen, escala con el stage */
.stage .text-layer { position: absolute; left: 0; top: 0; pointer-events: none; }
.text-obj { position: absolute; line-height: 1.2; font-family: -apple-system, "Segoe UI", sans-serif; overflow-wrap: anywhere;
  box-sizing: content-box;
  /* 25-sep: contorno del color que CONTRASTA con el texto (antes gris fijo: rojo sobre gris no se leía) */
  --hc: var(--halo-color, rgba(0,0,0,.55));
  text-shadow: calc(var(--halo, 2px) * -1) 0 0 var(--hc), var(--halo, 2px) 0 0 var(--hc),
               0 calc(var(--halo, 2px) * -1) 0 var(--hc), 0 var(--halo, 2px) 0 var(--hc),
               calc(var(--halo, 2px) * -.7) calc(var(--halo, 2px) * -.7) 0 var(--hc), calc(var(--halo, 2px) * .7) calc(var(--halo, 2px) * .7) 0 var(--hc),
               calc(var(--halo, 2px) * -.7) calc(var(--halo, 2px) * .7) 0 var(--hc), calc(var(--halo, 2px) * .7) calc(var(--halo, 2px) * -.7) 0 var(--hc); }
.text-obj[data-bg="box"], .text-obj[data-bg="none"] { text-shadow: none; }
.text-obj.text-obj-editing { pointer-events: auto; cursor: text; outline: 2px dashed var(--accent); outline-offset: 4px; min-width: 1em; min-height: 1.2em; }
.text-obj.text-obj-editing:not([data-bg="box"]) { background: rgba(0,0,0,.25); }
/* 25-sep: barra de estilo del texto (UBA y referencias) */
.text-style-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 16; display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; max-width: calc(100% - 120px); padding: 4px 6px; background: rgba(13,17,23,.92); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.text-style-bar[hidden] { display: none; }
.ref-tools ~ .text-style-bar { left: 140px; right: 50px; transform: none; max-width: none; justify-content: flex-start; }   /* ref: a la derecha de su toolbar */
.text-style-bar .tsb-sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.text-style-bar .tsb-sw.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }
.text-style-bar input[type=color] { width: 22px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.text-style-bar button:not(.tsb-sw) { min-width: 24px; height: 22px; padding: 0 5px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); cursor: pointer; font-size: 12px; }
.text-style-bar button.is-on:not(.tsb-sw) { border-color: var(--accent); color: var(--accent); }
.text-style-bar select { width: auto; min-width: 0; flex: none; height: 22px; padding: 0 4px; margin: 0; background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-size: 12px; line-height: 20px; }
.text-style-bar .tsb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
.text-style-bar .tsb-hint { color: var(--muted, #8b949e); font-size: 11px; }
@media (max-width: 760px) { .text-style-bar { max-width: calc(100% - 16px); top: auto; bottom: 8px; } }
.text-obj.text-obj-selected { outline: 1px dashed rgba(255,255,255,.6); outline-offset: 3px; }
#rv-text-bold.tool-active { color: var(--accent); font-weight: 700; }
/* QA2-P1: toolbar de marcas sobre la referencia (vertical, dentro del panel) + chips ✎ N */
/* 25-sep (Fernando): corrida a la derecha de la flecha ‹ (.rv-ref-prev: left 8 + 38 de ancho) — con el panel bajo
   la toolbar vertical se pisaba con la flecha centrada. */
.ref-tools { position: absolute; left: 54px; top: 8px; z-index: 6; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 32px); max-height: calc(100% - 16px); gap: 4px;   /* panel bajo → 2ª columna */
  background: rgba(13,17,23,.85); border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.ref-tools > [hidden] { display: none; }
.ref-tools[hidden] { display: none; }
.ref-tools .tool { width: 32px; height: 32px; }
.ref-tools input.ref-color { padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.ref-tools .ref-wval { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted, #8b949e); }
.rv-ref-cell.has-ref-marks::after { content: attr(data-ref-marks); position: absolute; top: 6px; right: 6px; background: var(--accent); color: #000;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
#rv-thumbs img.has-ref-marks { outline: 2px solid var(--accent); outline-offset: -2px; }
/* QA3-P6: panel flotante global de subidas (cola persistente) */
.qc-upload-panel { position: fixed; right: 16px; bottom: 16px; z-index: 1000; width: min(360px, calc(100vw - 32px)); max-height: 50vh; display: flex; flex-direction: column;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.45); font-size: 12px; }
.qc-upload-panel[hidden] { display: none; }
.qup-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.qup-head b { flex: 1; }
.qc-upload-panel.is-collapsed .qup-head { border-bottom: 0; }
.qc-upload-panel button { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 1px 7px; cursor: pointer; font-size: 12px; }
.qc-upload-panel button:hover { border-color: var(--accent); color: var(--accent); }
.qup-list { list-style: none; margin: 0; padding: 6px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.qup-line { display: flex; align-items: center; gap: 6px; }
.qup-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qup-link { color: var(--accent); white-space: nowrap; }
.qup-track { height: 4px; background: rgba(127,127,127,.2); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.qup-fill { height: 100%; background: var(--accent); transition: width .3s; }
.qup-done .qup-fill { background: #4ade80; }
.qup-error .qup-fill { background: var(--danger); }
.qup-status { color: var(--text-muted); margin-top: 2px; }
.qup-error .qup-status { color: #ffb1b1; }
.qup-hint { margin: 0; padding: 6px 10px 8px; color: var(--text-muted); font-size: 11px; }
@media (max-width: 760px) { .qc-upload-panel { right: 8px; left: 8px; width: auto; bottom: 8px; } }


/* 29-sep: «⚠ N» diferencias con Monday + su diálogo */
.monday-diff-badge { color: #f2b84b; border-color: #f2b84b; }
.monday-conflicts-dialog, dialog.card.monday-conflicts-dialog { width: 680px; max-width: calc(100vw - 32px); }
.monday-conflicts-dialog .dialog-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.monday-conflicts-dialog .dialog-actions [data-act=later] { margin-right: auto; }
.monday-conflicts-dialog .mc-list { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.monday-conflicts-dialog .mc-title h3 { font-size: 15px; margin: 0 0 6px; }
.monday-conflicts-dialog .mc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.monday-conflicts-dialog .mc-label { min-width: 110px; color: var(--text-muted); }
.monday-conflicts-dialog .mc-from { text-decoration: line-through; opacity: .75; }
.monday-conflicts-dialog .mc-to { font-weight: 600; color: #00c8d7; }

/* 19-oct ❓ Ayuda (support-chat.js): botón de la topbar + panel lateral no modal. */
.help-btn { white-space: nowrap; position: relative; }
.help-dot { position: absolute; top: 6px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.help-panel { position: fixed; top: 60px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); z-index: 900;
  display: none; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.help-panel.open { display: flex; }
.help-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.help-spacer { flex: 1; }
.help-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.help-msg { max-width: 92%; padding: 8px 11px; border-radius: 10px; font-size: 14px; line-height: 1.45; background: var(--bg-input); border: 1px solid var(--border); }
.help-msg p { margin: 0 0 6px; } .help-msg p:last-child { margin-bottom: 0; }
.help-msg ul, .help-msg ol { margin: 4px 0 6px; padding-left: 20px; }
.help-user { align-self: flex-end; background: rgba(0, 200, 215, .14); border-color: rgba(0, 200, 215, .35); }
.help-agent { border-color: rgba(0, 200, 215, .55); }
.help-who { font-size: 11px; color: var(--accent); margin-bottom: 4px; letter-spacing: .3px; }
.help-system, .help-k-error { background: transparent; border-style: dashed; color: var(--text-muted); font-size: 13px; }
.help-k-bug_proposal { border-color: var(--danger); align-self: stretch; max-width: none; }
.help-k-bug_proposal label { display: block; margin: 6px 0; }
.help-k-bug_proposal input, .help-k-bug_proposal textarea { width: 100%; margin-top: 2px; }
.hp-shot { border: 1px dashed var(--border); border-radius: 8px; padding: 8px; margin: 6px 0; }
.hp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.help-rate { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.help-rate .btn-xs { padding: 0 6px; font-size: 13px; opacity: .55; }
.help-rate .btn-xs.on { opacity: 1; outline: 1px solid var(--accent); }
.help-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.help-sugs .chip { cursor: pointer; text-align: left; }
.help-typing { display: flex; gap: 4px; align-items: center; }
.help-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: help-blink 1.2s infinite; }
.help-typing span:nth-child(2) { animation-delay: .2s; } .help-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes help-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.help-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.help-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; }
.help-foot { display: flex; gap: 6px; padding: 0 12px 10px; }
.help-closed { text-align: center; }
@media (max-width: 600px) { .help-panel { top: 56px; right: 8px; left: 8px; bottom: 8px; width: auto; } }

/* 19-oct ❓ /soporte (soporte.js) */
.support-summary { padding: 12px 16px; margin-bottom: 12px; }
.support-list { display: flex; flex-direction: column; gap: 8px; }
.support-row { padding: 10px 14px; cursor: pointer; }
.support-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.support-first { margin: 6px 0 0; }
.support-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; cursor: default; }
.support-detail .help-msg { max-width: none; }

/* 30-sep 🐞 Reportar un problema (bug-report.js) + panel /bugs (bugs.js). */
.bug-report-btn { white-space: nowrap; }
/* Solo el 🐞; «Reportar» se despliega al pasar el mouse (o con foco de teclado). En el menú ☰ del celular se ve siempre. */
.bug-report-word { display: none; }
.bug-report-btn:hover .bug-report-word, .bug-report-btn:focus-visible .bug-report-word,
.topbar-menu-panel .bug-report-word { display: inline; }
.bugs-count { background: var(--danger); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; margin-left: 2px; }
.bug-dialog { width: min(600px, calc(100vw - 32px)); }
.bug-dialog textarea { width: 100%; resize: vertical; min-height: 120px; }
.bug-shot { margin: 10px 0; }
.bug-shot-drop { border: 1px dashed var(--border); border-radius: 8px; padding: 12px; font-size: 13px; color: var(--text-muted); }
.bug-shot-drop.over, .bug-shot-drop:focus { border-color: var(--accent); outline: none; }
.bug-shot-pick { color: var(--accent); cursor: pointer; text-decoration: underline; }
.bug-shot-preview { display: flex; align-items: flex-start; gap: 10px; }
.bug-shot-preview img { max-width: 260px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border); }
.bug-auto { font-size: 12px; color: var(--text-muted); margin: 8px 0; }
.bug-auto ul { margin: 6px 0 0 18px; padding: 0; }
.bugs-filters { margin: 12px 0 16px; }
/* 2-oct: 💡 feedback / 🐞 problemas — solapas del diálogo y filtro + etiqueta del panel. */
.bugs-kinds { margin: 12px 0 0; }
.bug-tabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.bug-tab { cursor: pointer; }
.bug-kind-feedback { color: #facc15; border-color: #7a6a1f; }
.bug-kind-bug { color: #f87171; border-color: #7a2f2f; }
.bugs-n:empty { display: none; }
.bugs-n { opacity: .75; margin-left: 2px; }
.bugs-list { display: flex; flex-direction: column; gap: 14px; }
.bug-card { padding: 14px 16px; border-left: 4px solid var(--border); }
.bug-card.bug-new { border-left-color: var(--danger); }
.bug-card.bug-doing { border-left-color: #f0b429; }
.bug-card.bug-fixed { border-left-color: #3fb950; }
.bug-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bug-head .bug-status { margin: 0; width: auto; }
.bug-head-right { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
/* 22-oct: estado del agente + botones de acción en la cabecera, al lado del estado del reporte */
.bug-agent-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.bug-agent-pill-you { border-color: #f0a437; background: #f0a437; color: #1a1200; font-weight: 800; }   /* 23-oct: te toca = naranja (acción), no cyan */
.bug-agent-pill-busy { border-color: var(--accent-dim); color: var(--accent); animation: bug-pill-pulse 1.6s ease-in-out infinite; }
@keyframes bug-pill-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .bug-agent-pill-busy { animation: none; } }
.bug-head-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bug-head-actions:empty { display: none; }

.bug-mail-warn { color: var(--danger); font-size: 12px; cursor: help; }
.bug-page { margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.bug-body { margin: 8px 0; padding: 10px 14px; background: var(--bg-input); border-left: 3px solid var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; }
.bug-thumb { border: 0; padding: 0; background: none; cursor: zoom-in; }
.bug-thumb img { max-width: 240px; max-height: 150px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.bug-ctx, .bug-prompt-box { font-size: 13px; margin: 8px 0; }
.bug-ctx summary, .bug-prompt-box summary { cursor: pointer; color: var(--text-muted); }
.bug-log { font: 12px ui-monospace, Menlo, monospace; margin: 6px 0 0; padding-left: 0; list-style: none; max-height: 280px; overflow: auto; }
.bug-log li { padding: 1px 0; overflow-wrap: anywhere; }
.bug-log li span { color: var(--text-muted); }
.bug-log li em { font-style: normal; color: var(--text-muted); }
.bug-log li.k-error, .bug-log li.k-reject, .bug-log li.k-cerr, .bug-log li.k-fetch { color: var(--danger); }
.bug-log li.k-warn { color: #f0b429; }
.bug-prompt { background: var(--bg-input); padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px ui-monospace, Menlo, monospace; max-height: 360px; overflow: auto; }
.bug-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.bug-actions .bug-note { flex: 1; min-width: 180px; }
.bug-actions .bug-fixver { width: 120px; }
/* 19-oct 🤖 agente de bugs: hilo, estado del agente, decisiones de Fernando y «Mis reportes». */
.bug-agent { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.bug-agent.bug-agent-you { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.bug-agent-head { margin: 0 0 6px; }
.bug-agent-summary { white-space: pre-wrap; font-size: 13px; margin: 0 0 8px; }
.bug-agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bug-thread { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.bug-msg { padding: 6px 10px; border-radius: 8px; background: rgba(127, 127, 127, .08); border-left: 3px solid var(--border); }
.bug-msg-agent { border-left-color: var(--accent); }
.bug-msg-user { border-left-color: #f0b429; }
.bug-msg-admin { border-left-color: #3fb950; }
.bug-msg-head { font-size: 12px; margin-bottom: 2px; }
.bug-msg-body { white-space: pre-wrap; font-size: 13px; }
.bug-reply { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.bug-reply .bug-reply-to { width: auto; margin: 0; }   /* 22-oct: compacto, no ocupa una fila entera */
.bug-reply textarea { flex: 1; min-width: 200px; }
.bug-card.bug-waiting { border-left-color: var(--accent); }
.bug-ask-chip { background: var(--accent); color: #001014; }
.bug-note-out { margin: 6px 0; font-size: 13px; }
/* 19-oct: aviso «Hay una versión nueva — Recargar» (version-check.js). */
.qc-update-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; max-width: calc(100vw - 32px);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px;
  background: var(--bg-raised); border: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); font-size: 14px; }
/* 23-oct (Fernando: «más evidente que hay que actualizar»): «Recargar» late en cyan — el mismo doble pulso que ⬆ Nueva versión
   y el ℹ pendiente. Se frena al pasar el mouse; con reduced-motion, fade lento. */
@keyframes qc-reload-heartbeat {
  0%   { background: #00C8D7; box-shadow: 0 0 0 0 rgba(0, 200, 215, .75); }
  12%  { background: #5ee6ef; box-shadow: 0 0 0 6px rgba(0, 200, 215, .35); }
  24%  { background: #00939e; box-shadow: 0 0 0 2px rgba(0, 200, 215, .15); }
  36%  { background: #5ee6ef; box-shadow: 0 0 0 9px rgba(0, 200, 215, .25); }
  60%  { background: #00C8D7; box-shadow: 0 0 0 14px rgba(0, 200, 215, 0); }
  100% { background: #00C8D7; box-shadow: 0 0 0 0 rgba(0, 200, 215, 0); }
}
@keyframes qc-reload-fade {
  0%, 100% { background: #00C8D7; }
  50%      { background: #00838c; }
}
.qc-update-bar .qc-update-reload { background: #00C8D7; border-color: #00C8D7; color: #001014; font-weight: 700;
  animation: qc-reload-heartbeat 1.6s ease-in-out infinite; }
.qc-update-bar .qc-update-reload:hover, .qc-update-bar .qc-update-reload:focus-visible { animation: none; background: #5ee6ef; }
@media (prefers-reduced-motion: reduce) {
  .qc-update-bar .qc-update-reload { animation: qc-reload-fade 3s ease-in-out infinite; }
}
.qc-update-close { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 14px; }
/* 19-oct 🤖 monitor del agente (/bugs). */
.agent-monitor { padding: 12px 14px; margin: 0 0 14px; }
.agent-monitor.agent-busy { border-color: var(--accent); }
.agent-mon-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.agent-on { background: #3fb950; color: #04130a; }
.agent-off { background: var(--border); }
.agent-ok { color: #3fb950; font-size: 13px; }
.agent-bad { color: var(--danger); font-size: 13px; }
.agent-idle { margin: 8px 0 0; }
.agent-run { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.agent-run p { margin: 0 0 4px; }
.agent-step { font-weight: 600; }
.agent-steps { margin: 4px 0 0; padding-left: 18px; font-size: 12px; max-height: 260px; overflow: auto; }
.agent-history { margin-top: 10px; }
.agent-runs { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.agent-runs th, .agent-runs td { text-align: left; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (max-width: 700px) { .agent-runs { display: block; overflow-x: auto; } }
.bugs-shot-dialog { max-width: min(1200px, calc(100vw - 32px)); }
.bugs-shot-dialog img { max-width: 100%; max-height: 80vh; display: block; }
@media (max-width: 760px) {
  .bug-head .bug-status { margin-left: 0; }
}

/* 2-oct 🎨 Marketing Key Art: pósters de cualquier medida — la miniatura entra entera (contain), card un poco más alta. */
.title-mkt .uba-card .uba-cover { object-fit: contain; aspect-ratio: 3 / 4; height: auto; background: #0a0e13; }
.review-mode-btn.mode-mkt { color: #f472b6; border-color: #7a3a5e; }
/* 2-oct: subidas terminadas = globito «✓ Upload terminado» con ✕ (sin «Limpiar»). */
.qc-upload-panel.qup-done-pill { width: auto; border-color: #2f6f45; }
.qup-done-pill .qup-head { gap: 4px; padding: 6px 8px 6px 12px; }
.qc-upload-panel .qup-pill-text { background: none; border: 0; color: #3ddc84; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.qup-x { min-width: 26px; }

/* 5-oct 👥 Equipo del proyecto (team-dialog.js) */
.team-dialog { width: min(640px, 94vw); }
.team-grid { display: grid; gap: 8px; margin: 12px 0; }
.team-dialog .team-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; }
.team-label { color: var(--muted, #8b98a5); font-size: 13px; }
.team-dialog .team-row select, .team-field select { width: 100%; margin: 0; }
.team-field { min-width: 0; }
.team-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.team-dialog .team-radio { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.team-src { opacity: .8; }
.team-src-manual { border-style: dashed; }
.team-h3 { font-size: 15px; margin: 16px 0 4px; }
.team-collabs { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.team-collabs li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) { .team-dialog .team-row { grid-template-columns: 1fr; gap: 4px; } }
/* 5-oct: popup 👥 colaboradores agrupado por puesto / Team */
.rv-editor-group { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8b98a5); margin: 10px 0 2px; }
.rv-editor-others { margin-top: 10px; }
.rv-editor-others summary { cursor: pointer; color: var(--muted, #8b98a5); font-size: 13px; }
/* 5-oct 👥 Teams en Usuarios (teams-admin.js) */
.teams-admin { margin-top: 20px; }
.teams-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-card { border: 1px solid var(--border, #2a313a); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.team-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-card-head .team-name { font-weight: 600; min-width: 160px; }
.team-card-head .team-clients { min-width: 200px; }
.team-members summary { cursor: pointer; margin-top: 8px; color: var(--muted, #8b98a5); }
.team-members-group { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 6px 0; }
.team-members-group b { min-width: 90px; font-size: 12px; color: var(--muted, #8b98a5); }
.team-member { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.team-designers { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.team-dchip { cursor: pointer; }
.team-more { flex-basis: 100%; }
.team-more summary { cursor: pointer; color: var(--muted, #8b98a5); font-size: 12px; }
/* 5-oct: 👁 mostrar contraseña en el login */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font-size: 16px; padding: 4px 6px; line-height: 1; }

/* 5-oct (Fernando): vista de Diseño reducida — sin tira de pasos, logos en una barrita de solo ver, 🎬 Title Cards abajo. */
.step-bar[hidden] { display: none; }
.logos-card.logos-compact { flex-direction: row; align-items: center; gap: 12px; padding: 6px 12px; }
.logos-card.logos-compact .mat-info strong { font-size: 13px; }
.logos-card.logos-compact .logo-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.logos-card.logos-compact .logo-slot { padding: 2px; }
.logos-card.logos-compact .logo-slot .ls-body, .logos-card.logos-compact .ls-open { display: none; }
.logos-card.logos-compact .logo-slot.ls-missing { display: none; }
.logos-card.logos-compact .ls-thumb { width: 72px; height: 40px; }
.tcards-band { margin-top: 18px; }
.tcards-head { margin: 0 0 8px; font-weight: 600; }
.tcards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tcard-cell { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); font-size: 12px; }
.tcard-cell img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 8px; border: 1px solid var(--border); }
.tcard-cell:hover img { border-color: var(--accent); }
.tcard-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 6-oct: title cards SUELTAS (sin UBA) — borde punteado, 🗑 para sacarlas, botón «＋ Title card suelta» en el encabezado */
.tcard-cell.tcard-loose { position: relative; }
.tcard-cell.tcard-loose img { border-style: dashed; }
.tcard-cell.tcard-loose small { font-size: 11px; }
.tcard-cell.tcard-killed img { opacity: .35; filter: grayscale(1); }
.tcard-del { position: absolute; top: 6px; right: 6px; border: 0; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; padding: 2px 6px; opacity: 0; transition: opacity .15s; }
.tcard-cell.tcard-loose:hover .tcard-del, .tcard-del:focus-visible { opacity: 1; }
.tcards-head .tcards-add { margin-left: 8px; }
/* 8-oct plan TC: ❌ matar / ⭐ elegir LA Title Card (banda 🎬 y popup 🧩) */
.tcard-cell { position: relative; }
.tcard-acts { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; z-index: 2; }
.tcard-act { border: 0; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; padding: 2px 7px; font-size: 13px; line-height: 1.4; }
.tcard-act:hover { background: rgba(0,0,0,.85); }
.tcard-act.tcard-kill:hover { color: var(--danger); }
.tcard-act.tcard-star.on { background: rgba(0,0,0,.8); }
.tcard-cell.tcard-selected img, .deck-cell.tcard-selected { outline: 2px solid #ffd166; outline-offset: 1px; }
.tcards-sel { margin-left: 8px; font-weight: 600; }
.tcards-warn { margin-left: 8px; color: #ffd166; font-weight: 500; }
/* 13-oct: franja 🎨 Logos del round (debajo de las Title Cards) — mismo lienzo gris + borde que la sección de Logos */
.rlogos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rlogo-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-decoration: none; color: var(--text); font-size: 12px; }
.rlogo-cell .lg-thumb { border: 1px solid var(--border); }
.rlogo-cell:hover .lg-thumb { border-color: var(--accent); }
.rlogo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-cell.fs-tc-killed img { opacity: .35; filter: grayscale(1); }


/* 5-oct (Fernando): vista previa del deck — logos Dark sobre blanco, Light sobre negro. */
.dp-cell.dp-logo-dark img { background: #fff; }
.dp-cell.dp-logo-light img { background: #000; }
/* 5-oct (Fernando): logos por idioma — una fila por set (Principal, EN, JA…) + «+ Nuevo idioma». */
.logo-variants { display: flex; flex-direction: column; gap: 10px; }
.logo-variant-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-items: center; }
.logo-lang-tag { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; }
.logo-add-lang { align-self: flex-start; }
.logos-card.logos-compact .logo-variants { flex-direction: column; }
.logos-card.logos-compact .logo-variant-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.logos-card.logos-compact .logo-lang-tag { grid-column: auto; }

/* 5-oct (Fernando): barra vertical de marcación de la referencia plegable — plegada queda solo ✏️. */
.ref-tools.ref-tools-folded > :not(.ref-tools-fold) { display: none !important; }
.ref-tools-fold { font-size: 13px; opacity: .8; }
.ref-tools-fold:hover { opacity: 1; }
.ref-tools.ref-tools-folded { grid-template-rows: none; height: auto; max-height: none; background: rgba(13,17,23,.6); }
/* 5-oct (Fernando): «la tira de Logos para diseño quedó excesivamente chica» → logos grandes (Light sobre negro, Dark sobre blanco). */
.logos-card.logos-compact { flex-direction: column; align-items: stretch; padding: 10px 14px; }
.logos-card.logos-compact .logo-variant-row { gap: 12px; }
.logos-card.logos-compact .ls-thumb { width: 260px; height: 130px; padding: 10px; box-sizing: border-box; background: #000; border: 1px solid var(--border); }
.logos-card.logos-compact .ls-thumb.ls-thumb-darklogo { background: #fff; }
@media (max-width: 760px) { .logos-card.logos-compact .ls-thumb { width: calc(50vw - 40px); height: auto; aspect-ratio: 2 / 1; } }
.logos-card.logos-compact .logo-variant-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.logos-card.logos-compact .logo-lang-tag { grid-column: 1 / -1; }
.logos-card.logos-compact .logo-slot { padding: 0; }
.logos-card.logos-compact .ls-thumb { width: 100%; height: auto; aspect-ratio: 2 / 1; }
@media (max-width: 760px) { .logos-card.logos-compact .logo-variant-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 5-oct (UAT Fernando, captura): seleccionado / expandido, con 🖼 refs + autor + Resuelta + ✉ + ✕ en la misma fila el
   texto quedaba con ~0 de ancho y se leía una letra por línea. Ahora la fila ENVUELVE y el texto baja a su propia
   línea a todo el ancho (debajo del N°, autor y acciones). */
.rv-annot-expanded, .rv-annot-active { flex-wrap: wrap; align-items: center; }
.rv-annot-expanded .rv-annot-text, .rv-annot-active .rv-annot-text { order: 10; flex: 1 1 100%; min-width: 0; padding: 2px 2px 4px; }
.rv-annot-active:not(.rv-annot-expanded) .rv-annot-expand:not(.rv-annot-close) { display: none; }   /* seleccionada ya se ve completa */
/* 22-oct 💬 (reporte 9c0b69a4): respuestas dentro del comentario — se ven con el comentario abierto, debajo del texto. */
.rv-annot-replies-badge {
  flex-shrink: 0; font-size: 11px; padding: 0 6px; border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); background: none; cursor: pointer; white-space: nowrap;
}
.rv-annot-replies-badge.rv-annot-replies-new { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rv-annot-replies { display: none; }
.rv-annot-active .rv-annot-replies, .rv-annot-expanded .rv-annot-replies {
  display: block; order: 11; flex: 1 1 100%; min-width: 0; margin: 0 0 4px 22px; cursor: default;
}
.rv-annot-reply { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; font-size: 12.5px; padding: 2px 0; }
.rv-annot-reply .rv-annot-num { margin-top: 1px; }
.rv-annot-reply-text { flex: 1 1 200px; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.rv-annot-reply .rv-annot-author { margin-left: auto; }
.rv-annot-reply-open { margin-top: 4px; }

/* 5-oct (Fernando): fila de logos colapsable — colapsada queda la cabecera (🎨 Logos + botones). */
.logos-card.logos-collapsed .logo-variants, .logos-card.logos-collapsed .logo-proposals { display: none !important; }
.logos-collapse { padding: 2px 10px; font-size: 13px; white-space: nowrap; }

/* 6-oct: round abierto detrás de uno posterior ya cerrado — sin curar, NO grisado como cerrado. */
.round-card.rc-open_behind { border-style: dashed; }
.round-card.rc-open_behind .rc-state { background: #f0a437; color: #1a1205; }

/* 6-oct 💬 Mensajes del título — botón en la barra superior + panel lateral (drawer) */
.tmsg-btn { position: relative; font-size: 16px; padding: 4px 9px; line-height: 1; }
.tmsg-btn.tmsg-has { border-color: var(--accent); }
.tmsg-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px;
  background: var(--accent); color: #032a2e; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-raised);
}
.tmsg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(420px, 100vw);
  display: flex; flex-direction: column; background: var(--bg-raised); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .45);
}
.tmsg-drawer[hidden] { display: none; }
.tmsg-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.tmsg-head .tmsg-close { margin-left: auto; }
.tmsg-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tmsg-empty { margin: auto 0; text-align: center; }
.tmsg-msg { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; max-width: 92%; align-self: flex-start; }
.tmsg-msg.tmsg-mine { align-self: flex-end; border-color: rgba(0, 200, 215, .35); }
.tmsg-msg.tmsg-deleted { opacity: .55; }
.tmsg-msg.tmsg-flash { box-shadow: 0 0 0 2px var(--accent); }
.tmsg-meta { font-size: 12px; margin-bottom: 4px; }
.tmsg-body { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.tmsg-mention { color: var(--accent); font-weight: 600; }
.tmsg-quote { font-size: 12px; color: var(--text-muted); border-left: 3px solid var(--border); padding: 2px 8px; margin: 2px 0 6px; overflow-wrap: anywhere; }
.tmsg-tools { display: flex; gap: 6px; margin-top: 6px; }
.tmsg-tools button { background: none; border: 0; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 0; }
.tmsg-tools button:hover { color: var(--accent); }
/* 8-oct: reacciones con emoji + «👁 visto por» en 💬 Mensajes */
.tmsg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; position: relative; }
.tmsg-react { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 1px 8px; font-size: 13px; cursor: pointer; line-height: 1.5; }
.tmsg-react span { font-size: 11px; color: var(--text-muted); }
.tmsg-react.on { border-color: var(--text-muted); background: var(--bg-raised); }
.tmsg-react.on span { color: var(--text); }
.tmsg-react:disabled { cursor: default; }
.tmsg-react-add { border: 1px dashed var(--border); background: none; color: var(--text-muted); border-radius: 999px; padding: 1px 7px; font-size: 12px; cursor: pointer; opacity: .55; }
.tmsg-msg:hover .tmsg-react-add, .tmsg-react-add:focus-visible { opacity: 1; }
.tmsg-picker { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.tmsg-picker button { border: 0; background: none; font-size: 18px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.tmsg-picker button:hover { background: var(--bg); }
.tmsg-picker-in { width: 130px; margin: 0 0 0 4px; padding: 3px 6px; font-size: 12px; }
.tmsg-seen { margin-left: 8px; border: 0; background: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 0; }
.tmsg-seen:hover { color: var(--text); }
.tmsg-seenlist { margin: 4px 0; padding: 4px 8px; border-left: 2px solid var(--border); }
.tmsg-form { position: relative; border-top: 1px solid var(--border); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.tmsg-input { width: 100%; resize: vertical; min-height: 64px; background: var(--bg-input); color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font: inherit; }
.tmsg-input:focus { outline: none; border-color: var(--accent); }
.tmsg-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tmsg-replying { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.tmsg-replying .tmsg-x { background: none; border: 0; color: inherit; cursor: pointer; }
.tmsg-suggest { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 4px); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); max-height: 240px; overflow-y: auto; z-index: 2; }
.tmsg-suggest button { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 7px 10px; cursor: pointer; font: inherit; }
.tmsg-suggest button.on, .tmsg-suggest button:hover { background: rgba(0, 200, 215, .12); }
@media (max-width: 600px) { .tmsg-drawer { width: 100vw; } }

/* 7-oct (Fernando): ✅ APROBAR como semáforo (igual que ⬆ Nueva versión) — late cuando falta TU OK, hueco verde cuando
   ya está aprobado, hueco tenue cuando tu OK está y faltan los demás. */
.rv-actionbar #rv-open-approve.appr-due { background: #22c55e; border-color: #22c55e; color: #0d1117; animation: qc-appr-heartbeat 1.6s ease-in-out infinite; }
.rv-actionbar #rv-open-approve.appr-due:hover, .rv-actionbar #rv-open-approve.appr-due:focus-visible { animation: none; background: #4ade80; }
.rv-actionbar #rv-open-approve.appr-done { background: transparent; border: 1px solid #2c5e3f; color: #4ade80; }
.rv-actionbar #rv-open-approve.appr-done:hover { background: #4ade8018; }
.rv-actionbar #rv-open-approve.appr-wait { background: transparent; border: 1px solid var(--border, #30363d); color: var(--text-muted, #8b949e); font-weight: 600; }
.rv-actionbar #rv-open-approve.appr-wait:hover { color: var(--text, #e6edf3); }
@keyframes qc-appr-heartbeat {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); }
  15%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, .3); }
  30%  { box-shadow: 0 0 0 2px rgba(34, 197, 94, .15); }
  45%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, .2); }
  70%  { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* 20-oct: el ✅ del slide del UBA en el 🧩 usa el mismo semáforo. */
.fam-uba-approve.appr-due { background: #22c55e; border-color: #22c55e; color: #0d1117; animation: qc-appr-heartbeat 1.6s ease-in-out infinite; }
.fam-uba-approve.appr-done { background: transparent; border: 1px solid #2c5e3f; color: #4ade80; opacity: 1; }
.fam-uba-approve.appr-wait { background: transparent; border: 1px solid var(--border, #30363d); color: var(--text-muted, #8b949e); font-weight: 600; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rv-actionbar #rv-open-approve.appr-due, .fam-uba-approve.appr-due { animation: none; } }
/* 7-oct: el botón 🧩 MockUps de la card con el mismo semáforo. 2ª vuelta: mismo tamaño de siempre + globito con el número
   (amarillo que late = esperan TU OK [9-oct, antes verde]; gris = esperan a otro / corrección); el pulso queda dentro del globito, no invade la card. */
.uba-family { display: inline-flex; align-items: center; gap: 6px; }
.uba-family .fam-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1; background: var(--border); color: var(--text-muted); }
/* 9-oct (Fernando): «esperan tu OK» en AMARILLO — el verde quedó solo para «✔ todos aprobados» (antes confundía). */
.uba-family.appr-due { border-color: #f5c518; color: #f5c518; }
.uba-family.appr-due .fam-badge { background: #f5c518; color: #0d1117; animation: qc-fam-badge 1.6s ease-in-out infinite; }
.uba-family.appr-due:hover .fam-badge { animation: none; }
@keyframes qc-fam-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .6); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0); }
}
/* 20-oct (bug Lucho B): MockUps con correcciones o comentarios abiertos → NARANJA (mismo tono que el chip 🧩 «N corr.»). */
.uba-family.fam-fix { border-color: #f0a437; color: #f0a437; }
.uba-family.fam-fix .fam-badge { background: #f0a437; color: #0d1117; }
.uba-family.appr-done { border-color: #2c5e3f; color: #4ade80; }
.uba-family.appr-done:hover { background: #4ade8018; }
@media (prefers-reduced-motion: reduce) { .uba-family.appr-due .fam-badge { animation: none; } }
/* 7-oct: 🧩 MockUps y ★ KA en una fila flex abajo a la derecha (primero en el DOM = el de más a la derecha). */
.uba-card-actions { position: absolute; right: 8px; bottom: 8px; left: 8px; display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; pointer-events: none; }
.uba-card-actions > * { pointer-events: auto; }
.uba-card-actions > .uba-family, .uba-card-actions > .uba-to-ka { position: static; }
/* 7-oct (3ª vuelta): al diseñador, el 🧩 titila en AMARILLO mientras falten mockups por cargar (como ⬆ Nueva versión). */
.uba-family.fam-missing { border-color: #f5c518; color: #f5c518; }
.uba-family.fam-missing .fam-badge { background: #f5c518; color: #0d1117; animation: qc-fam-missing 1.6s ease-in-out infinite; }
.uba-family.fam-missing:hover .fam-badge { animation: none; }
@keyframes qc-fam-missing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .65); opacity: 1; }
  50%      { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) { .uba-family.fam-missing .fam-badge { animation: none; } }
/* 7-oct (4ª vuelta): para AD y Producción, sin mockups (o faltando) el 🧩 queda en ROJO fijo. */
.uba-family.fam-missing-alert { border-color: #f85149; color: #ff7b72; }
.uba-family.fam-missing-alert .fam-badge { background: #f85149; color: #0d1117; }
/* 9-oct: UBA eliminado (❌) → 🧩 gris apagado, sin pendientes. */
.uba-family.fam-killed { border-color: var(--border); color: var(--text-muted); opacity: .6; }
/* 7-oct: tramos resaltados dentro de un texto de lámina (📋 asignaciones). */
.asg-run[data-hl] { border-radius: 3px; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 7-oct (Fernando): el feedback del cliente no tapa el UBA — cartel de una línea, textos a 3 líneas con «ver más»,
   respuestas plegadas, lista más baja. */
.rv-feedback-banner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-feedback-list { max-height: 150px; }
.rv-fb-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-fb-more { background: none; border: 0; padding: 0; margin: 0 0 4px; color: var(--accent); font-size: 12px; cursor: pointer; }
.rv-fb-more:hover { text-decoration: underline; }
.rv-fb-replies[hidden] { display: none; }
/* 7-oct: ⟳ Auto Onion en el diálogo 🧩 — etiqueta de versión sobre la celda (ámbar mientras muestra la anterior). */
.deck-cell .fs-vtag { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(13, 17, 23, .8); color: #e6edf3; pointer-events: none; }
/* 23-oct: marcas del visor sobre las celdas del 🧩 (family-marks.js) + lista de correcciones abajo de los tableros. */
.deck-cell .fs-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.family-marks-off .fs-marks, .deck-cell:has(.fs-vtag-prev) .fs-marks { display: none; }   /* Onion mostrando la anterior: sin marcas */
.family-comments { margin: 10px 0 0; padding: 8px 12px; border: 1px solid #7a3a3a; background: rgba(255, 90, 90, 0.06); border-radius: 8px;
  max-height: 220px; overflow-y: auto; }
.family-comments-head { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #ffb1b1; }
.family-comments-mk { margin: 0 0 6px; }
.family-comments-name { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.family-comments-name:hover { text-decoration: underline; }
.family-comments ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.family-comments li { font-size: 12px; line-height: 1.35; display: flex; gap: 6px; align-items: baseline; }
.family-comments-no { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; }
.family-comments-text { white-space: pre-wrap; }
.deck-cell .fs-vtag.fs-vtag-prev { background: #f5c518; color: #0d1117; }
/* 7-oct: Stock ID / Timecode con el chip «None» al lado (campo + chip en una fila; None marcado = campo atenuado). */
.deck-none-row { display: flex; gap: 8px; align-items: flex-start; }
.deck-none-row > textarea, .deck-none-row > input { flex: 1; min-width: 0; }
.deck-none-row .deck-none { flex: none; margin-top: 4px; }
.deck-none-on { opacity: .6; }

/* 7-oct: switch «Solo pendientes» del visor (la navegación saltea lo aprobado). */
.rv-nav-pending { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; margin-left: 4px; }
.rv-nav-pending input { margin: 0; accent-color: #00C8D7; }

/* 8-oct (plan V): ⚙ Config → casillas de envío que se turnan. */
.mail-slot { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; }
.mail-slot legend { padding: 0 6px; font-weight: 700; }
.mail-slot-hostport { display: grid; grid-template-columns: 1fr 90px; gap: 6px; }
#mail-status div { margin-top: 2px; }
/* 8-oct (plan MK): vista previa del deck Marketing KA con diseño Boogie (fondo #212121 como el Master Boogie) */
.dp-slide.dp-mk { background: #212121; position: relative; }
/* 13-oct (Fernando: «muy chiquitos y con un borde raro»): grilla 5×2 como el deck real (Master Boogie: celdas 112,7×158,5
   en 720×405) — el póster con su forma, sin fondo ni recuadro, lo más grande posible, con aire y el N° abajo. */
.dp-mk-grid { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3.5% 3.9%; padding: 1.5% 1.6%; }
.dp-mk-cell { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dp-mk-cell img { display: block; flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: calc(100% - 26px); width: auto; height: auto;
  object-fit: contain; background: none; border: 0; border-radius: 0; }
.dp-mk-cell figcaption { width: 100%; display: flex; align-items: center; gap: 6px; color: #F3F3F3; font: 400 11px/1 "Helvetica Neue", Arial, sans-serif; }
.dp-mk-cat { flex: 1 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 1px 4px; height: 20px; font-size: 11px; background: #2b2b2b; color: #eee; border: 1px solid #444; border-radius: 4px; }
.dp-mk-cell[draggable="true"] { cursor: grab; }
.dp-mk-cell.dp-dragging { opacity: .35; }
.dp-mk-cell.dp-drop-over img { outline: 3px solid var(--accent); outline-offset: 2px; }
.dp-mk-big { position: absolute; inset: 0; display: flex; justify-content: center; }
.dp-mk-big img { height: 100%; width: auto; max-width: 70%; object-fit: contain; }
.dp-mk-big span { position: absolute; left: 69%; bottom: 3%; color: #F3F3F3; font: 400 11px/1 "Helvetica Neue", Arial, sans-serif; }
.dp-mk-help { flex-wrap: wrap; gap: 6px; }
.dp-mk-section { position: absolute; left: 6%; top: 42%; color: #fff; font: 700 clamp(14px, 2.4vw, 26px)/1.1 "Helvetica Neue", Arial, sans-serif; }
.dp-mk-section.dp-mk-thanks { left: 0; right: 0; text-align: center; color: #4DD0E1; }
.dp-mk-cover { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.dp-mk-cover > div { padding: 5% 4%; display: flex; flex-direction: column; gap: 4px; color: #ccc; }
.dp-mk-cover b { font-size: clamp(14px, 2vw, 22px); }
.dp-mk-cover small { margin-top: auto; color: #999; font-size: 11px; }
.dp-mk-cover .dp-mk-hero { width: 40%; height: 100%; margin: 0; background: #434343; }
.dp-mk-cover .dp-mk-hero img { width: 100%; height: 100%; object-fit: contain; }
/* 8-oct (plan MK): ⚙ Config → 🏷 Logos de clientes */
.client-logos-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.client-logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-logo-row .cl-thumb { width: 96px; height: 36px; display: flex; align-items: center; justify-content: center; background: #212121; border-radius: 4px; }
.client-logo-row .cl-thumb img { max-width: 92px; max-height: 32px; object-fit: contain; }
.client-logo-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.client-logo-new input[type=text] { flex: 1; min-width: 200px; margin: 0; }


/* 9-oct (plan UB1): 🎬 Info del título (Unbranded) — póster, top 3 cast, GÉNERO destacado, sinopsis, Storyline. */
.ti-card { display: flex; flex-direction: column; gap: 10px; }
.ti-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ti-genres { display: flex; gap: 6px; flex-wrap: wrap; }
.ti-genre { background: var(--accent, #00c8d7); color: #04161a; font-weight: 800; font-size: 14px; letter-spacing: .02em; padding: 3px 12px; border-radius: 999px; text-transform: uppercase; }
.ti-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .ti-body { grid-template-columns: 1fr; } }
.ti-poster-img { display: block; height: 220px; width: auto; max-width: 160px; object-fit: cover; border-radius: 8px; background: var(--bg-raised); }
span.ti-poster-img { width: 148px; display: flex; align-items: center; justify-content: center; }
.ti-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ti-cast { display: flex; gap: 16px; flex-wrap: wrap; }
.ti-actor { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 116px; text-align: center; }
.ti-actor figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ti-face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bg-raised); border: 2px solid var(--border); }
span.ti-face { display: flex; align-items: center; justify-content: center; color: var(--muted, #8b949e); }
.ti-img-edit { cursor: pointer; display: inline-block; }
.ti-field { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 14px; }
.ti-label { font-weight: 700; color: var(--muted, #8b949e); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.ti-value { min-width: 0; line-height: 1.45; }
.ti-genre-field .ti-value { font-weight: 800; font-size: 16px; color: var(--accent, #00c8d7); }
.ti-storyline .ti-value { max-height: 160px; overflow: auto; }
.ti-acts { display: inline-flex; gap: 4px; align-items: center; }
.ti-manual { font-size: 11px; font-weight: 600; color: var(--warn, #d29922); text-transform: none; letter-spacing: 0; }
.ti-reset { background: none; border: none; color: var(--muted, #8b949e); font-size: 11px; cursor: pointer; padding: 0 2px; }
.ti-edit { display: flex; flex-direction: column; gap: 6px; }
.ti-edit textarea, .ti-edit input { width: 100%; background: var(--bg, #0d1117); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px; font: inherit; }
.ti-edit-acts { display: flex; gap: 6px; }
.ti-link-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; }
.ti-sugg-h { font-weight: 700; }
.ti-sugg { display: flex; align-items: center; gap: 10px; }
.ti-sugg img { width: 36px; height: 52px; object-fit: cover; border-radius: 4px; }
.ti-sugg-noimg { width: 36px; text-align: center; }
.ti-sugg-label { flex: 1; min-width: 0; }
.ti-paste { display: flex; gap: 6px; }
.ti-paste input { flex: 1; min-width: 0; background: var(--bg, #0d1117); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }

/* 9-oct (plan UB2): 📝 formulario de cierre (Unbranded LOCKED). */
.sv-card { display: flex; flex-direction: column; gap: 10px; }
.sv-card.sv-pending { border-color: var(--warn, #d29922); box-shadow: 0 0 0 1px var(--warn, #d29922) inset; }
.sv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-ok { border-color: #3fb950; color: #3fb950; }
.sv-wait { border-color: var(--warn, #d29922); color: var(--warn, #d29922); }
.sv-intro { margin: 0; }
.sv-body { display: flex; flex-direction: column; gap: 12px; }
.sv-q-h { margin-bottom: 6px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chip { border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; text-align: left; }
span.sv-chip { cursor: default; }
.sv-chip.sv-on { background: var(--accent, #00c8d7); border-color: var(--accent, #00c8d7); color: #04161a; font-weight: 700; }
.sv-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sv-problem { color: var(--warn, #d29922); margin-right: auto; }

/* 9-oct (Fernando): pastilla roja «Con correcciones» superpuesta a la imagen del UBA (arriba a la derecha, donde iría el sello). */
.uba-fix-pill { position: absolute; top: 10px; right: 8px; z-index: 2; background: #d32f2f; color: #fff; font-weight: 800; font-size: 12px;
  letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; }
.tmsg-link { color: var(--accent, #00c8d7); text-decoration: underline; word-break: break-all; }

/* 9-oct (Fernando): tarjetas Entrega R1 / Due / Review Netflix en la línea del título, arriba a la derecha. */
.head-stats { display: flex; gap: 10px; margin-left: auto; margin-right: 12px; align-self: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.head-stat { min-width: 132px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); }
.head-stat .hs-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.head-stat .hs-value { font-size: 22px; font-weight: 700; line-height: 1.25; margin-top: 2px; color: var(--text); }
.head-stat .hs-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.head-stat.hs-urgent { border-color: #e5534b; background: linear-gradient(180deg, #2a1717, #1c1416); }
.head-stat.hs-urgent .hs-value { color: #f47067; }
.head-stat.hs-urgent .hs-sub { color: #f4a19b; }
.head-stat.hs-soon { border-color: #c69026; }
.head-stat.hs-soon .hs-value { color: #f5c518; }
.head-stat.hs-done { opacity: .6; }
@media (max-width: 900px) {
  .head-stats { margin: 6px 0 0; width: 100%; justify-content: flex-start; }
  .head-stat { min-width: 0; flex: 1 1 100px; padding: 8px 12px; }
  .head-stat .hs-value { font-size: 18px; }
}

/* 9-oct (plan LG2): round de Logos en dos bloques + estado ⭐ del set. */
.lg-track-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.lg-track-h h3 { margin: 0; font-size: 16px; }
.lg-track-approved h3 { color: var(--text); }
.lg-star-wait { background: #f5c51822; border-color: #f5c518; color: #f5c518; }
.lg-star-done { background: #22c55e22; border-color: #2c5e3f; color: #4ade80; }
.lg-card.lg-flash { outline: 2px solid #f5c518; outline-offset: 3px; transition: outline-color .4s; }

/* 9-oct (Fernando: «botones que se salen de la card»): estado + acciones de cada variante en filas que se acomodan. */
.lg-var .lg-var-state { flex-wrap: wrap; row-gap: 4px; }
.lg-var .lg-var-state > .muted { white-space: nowrap; }
.lg-actions { flex-wrap: wrap; justify-content: flex-end; }
.lg-var .lg-actions .btn { padding: 2px 6px; min-width: 0; font-size: 12px; line-height: 1.3; }
.lg-set > .lg-meta:first-child { flex-wrap: wrap; row-gap: 4px; }
.lg-set > .lg-meta:first-child .lg-name { flex: 1 1 120px; }
.lg-set-acts .btn { padding: 2px 8px; font-size: 12px; }
.lg-lang-dialog { max-width: 420px; }
.lg-lang-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.lg-lang-opts label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 9-oct: panel de subidas oculto con subidas en curso → solo un botoncito «⬆ N». */
.qc-upload-panel.qup-mini { width: auto; padding: 0; }
.qup-mini-btn { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 700; padding: 6px 12px; cursor: pointer; }
@media (max-width: 760px) { .qc-upload-panel.qup-mini { left: auto; } }

/* 9-oct (Fernando, como el botón del login de Vultr): en los botones del Home un brillo radial rojo Netflix que SIGUE al
   mouse (--mx / --my los pone home.php) y crece al entrar. Sin JS queda centrado. */
.home-btn { position: relative; overflow: hidden; isolation: isolate; }
.home-btn::before { content: ''; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 0; height: 0; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, rgba(229, 9, 20, .55), rgba(229, 9, 20, 0));
  transition: width .25s ease-out, height .25s ease-out; z-index: -1; pointer-events: none; }
.home-btn:hover::before, .home-btn:focus-visible::before { width: 460px; height: 460px; }

/* 13-oct plan NB: recuadro HUECO sobre la zona de la N (nbadge-ui.js) SOLO si hay algo que resolver — rojo con
   «Falta N» / «Sacar N» adentro, punteado ámbar con «¿N? Confirmar». Bien = nada. */
.has-nb { position: relative; }
.nb-box { position: absolute; z-index: 4; box-sizing: border-box; border: 2px solid; border-radius: 3px; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-start; line-height: 1.1; }
.nb-box .nb-under { position: absolute; top: 100%; left: -2px; margin-top: 3px; display: flex; gap: 3px; align-items: center; }
.nb-box.nb-bad { border-color: #ff3b3b; background: rgba(255, 59, 59, .12); }
.nb-box.nb-unk { border: 2px dashed #f5c518; }
.nb-box .nb-label { font-weight: 800; color: #fff; background: #d81f1f; padding: 1px 4px; border-radius: 3px; text-align: center; }
.nb-box.nb-unk .nb-label { background: #b08900; }
.nb-box .nb-act { pointer-events: auto; font: inherit; font-weight: 700; white-space: nowrap; border: 0; border-radius: 999px;
  padding: 1px 6px; cursor: pointer; background: #fff; color: #111; }
.nb-box .nb-act:hover { background: var(--accent, #00c8d7); }
.nb-box .nb-act:disabled { opacity: .5; cursor: wait; }
/* Visor: el stage escala (--qc-s) → borde y textos compensan para medir lo mismo en pantalla. */
.nb-box.nb-stage { border-width: calc(2px / var(--qc-s, 1)); font-size: calc(13px / var(--qc-s, 1)); }
.nb-box.nb-stage .nb-under { margin-top: calc(4px / var(--qc-s, 1)); gap: calc(4px / var(--qc-s, 1)); left: calc(-2px / var(--qc-s, 1)); }
.nb-box.nb-stage.nb-unk { border-style: dashed; }
.nb-box.nb-stage .nb-label { padding: calc(1px / var(--qc-s, 1)) calc(5px / var(--qc-s, 1)); border-radius: calc(3px / var(--qc-s, 1)); }
.nb-box.nb-stage .nb-act { padding: calc(1px / var(--qc-s, 1)) calc(7px / var(--qc-s, 1)); }

/* 13-oct (Fernando): borde gris en el CANVAS del logo (el documento, no la celda) para ver dónde termina respecto del
   texto de adentro — grilla 🎨 Logos, slideshow y visor. outline = no mueve el layout; el gris cambia con el fondo ◐
   para que se vea sobre gris, claro y oscuro. En el visor el grosor compensa el zoom (--qc-s, lo setea review.js). */
:root { --lg-frame: #4f4f4f; }
.ss[data-lgbg="light"], .viewport.rv-airy[data-lgbg="light"] { --lg-frame: #a3a3a3; }
.ss[data-lgbg="dark"], .viewport.rv-airy[data-lgbg="dark"] { --lg-frame: #6f6f6f; }
.lg-thumb img, .ss-lg-img img { outline: 1px solid var(--lg-frame); }
.viewport.rv-airy .stage > img:not(.ai-layer) { outline: calc(1px / var(--qc-s, 1)) solid var(--lg-frame); }

/* 13-oct: «Ocultar ❌ Killed» — interruptor dentro de la fila de filtros de estado. */
.chip.hide-killed { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-left: 8px; }
.chip.hide-killed input { margin: 0; accent-color: var(--accent); }
.chip.hide-killed.chip-active .muted { color: inherit; opacity: .75; }

/* 13-oct: con UBAs seleccionados la barra de acciones queda fija arriba (se ve cuántos hay mientras se baja por la grilla). */
.uba-bulk-bar.uba-bulk-active { position: sticky; top: 8px; z-index: 20; background: var(--bg, #0d1117); border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.uba-bulk-bar.uba-bulk-active #uba-selection-count { color: var(--accent); font-weight: 700; }
.dp-mk-help { justify-content: flex-start; }

/* 14-oct: index de Logos del deck Marketing KA — 4×3 como el deck (PNG transparente sobre el fondo del slide, N° + variante debajo). */
.dp-mk-logos { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3.2% 2.5%; padding: 1.5% 1.6%; }
.dp-mk-logo { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.dp-mk-logo > div { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.dp-mk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dp-mk-logo figcaption { color: #F3F3F3; font: 400 11px/1 "Helvetica Neue", Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 20-oct 🎞 Crudos del UBA: botón de la card, panel y slide «Crudos» de la vista previa (mismo armado que el deck). */
.uba-crudos { margin-left: 4px; }
.uba-crudos-on { background: #2b3d4f; border-color: var(--accent); color: #e6fbfd; }
dialog.crudos-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
dialog.crudos-dialog.is-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.crudos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crudos-head h2 { margin: 0; font-size: 1.15rem; }
.crudos-sub { margin: 14px 0 8px; font-size: .95rem; }
.crudos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.crudos-cell { margin: 0; background: #131a22; border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.crudos-cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #0b0f14; border-radius: 4px; }
.crudos-cell figcaption { font-size: .72rem; color: var(--text-muted); overflow-wrap: anywhere; }
.crudos-cell-tools { display: flex; gap: 4px; justify-content: flex-end; }
.crudos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.crudos-lib { margin-top: 6px; border-top: 1px solid var(--border); }
.crudos-lib-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.crudos-search { flex: 1; min-width: 0; }
.crudos-lib-cell { cursor: pointer; }
.crudos-lib-cell.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.crudos-lib-cell.is-linked { opacity: .5; cursor: default; }
.dp-crudos { display: grid; grid-template-columns: 52fr 48fr; gap: 12px; width: 100%; height: 100%; }
.dp-crudos-left { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 0; }
.dp-crudos-left .dp-uba-img { aspect-ratio: 1.9; height: auto; }
.dp-crudos-info { margin: 0; font: inherit; font-size: .8rem; white-space: pre-wrap; color: var(--text); }
.dp-crudos-panel { border: 1px solid #595959; padding: 8px 10px; min-height: 0; overflow: hidden; }
.dp-crudos-panel h4 { margin: 0 0 6px; font-weight: 400; font-size: .85rem; color: #d9d9d9; }
.dp-crudos-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 8px; }
.dp-crudo { margin: 0; min-width: 0; }
.dp-crudo img { width: 100%; aspect-ratio: 1.5; object-fit: contain; background: #131a22; border: 1px solid #434343; }
.dp-crudo figcaption { font-size: .62rem; color: #b7b7b7; overflow-wrap: anywhere; }
@media (max-width: 640px) { .crudos-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }
/* 20-oct 🎞 slideshow: slide «Crudos» (UBA + marcas GenFill + GenAI Tools | recuadro «Original Images»). */
.ss-crudos { width: 100vw; height: 100vh; padding: 56px 4vw 70px; box-sizing: border-box; display: grid; grid-template-columns: 52fr 48fr; gap: 2.5vw; cursor: default; }
.ss-crudos-left { display: flex; flex-direction: column; gap: 18px; min-height: 0; justify-content: center; }
.ss-crudos-uba { position: relative; }
.ss-crudos-uba img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.ss-crudos-uba .ss-crudos-gf { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-crudos-info { margin: 0; font: inherit; font-size: clamp(13px, 1.2vw, 18px); color: #e6edf3; white-space: pre-wrap; }
.ss-crudos-panel { border: 1px solid #595959; padding: 18px 20px; min-height: 0; overflow: auto; }
.ss-crudos-panel h3 { margin: 0 0 14px; font-weight: 400; font-size: clamp(15px, 1.4vw, 22px); color: #d9d9d9; }
.ss-crudos-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 18px 22px; }
.ss-crudo { margin: 0; min-width: 0; }
.ss-crudo img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: contain; background: #0b0f14; border: 1px solid #434343; }
.ss-crudo figcaption { margin-top: 6px; font-size: clamp(10px, .8vw, 13px); color: #b7b7b7; overflow-wrap: anywhere; }
@media (max-width: 760px) { .ss-crudos { grid-template-columns: 1fr; overflow: auto; } }
.crudos-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.crudos-saved { margin-right: auto; color: #3ddc84; }

/* 20-oct 📸 Deck Stills: recuadro / banda / link oculto, cartelera, revisión antes de subir, panel del still y notas. */
.round-card.rc-stills { --rc-border: #c9a27e; --rc-fill: #3a2c1f; }
.stills-band { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid #c9a27e; border-radius: 12px; background: rgba(201, 162, 126, .10); }
.stills-band > span:nth-child(2) { flex: 1; min-width: 0; }
.stills-band-icon { font-size: 28px; }
.stills-hidden-link { display: inline-block; align-self: center; margin: 8px 4px; color: var(--text-muted); font-size: .85rem; }
.stills-new { color: #ffd166; }
.stills-space { width: 100%; grid-column: 1 / -1; }   /* el splash es una grilla de recuadros: la cartelera ocupa todo el ancho */
.stills-space.is-drop { outline: 2px dashed #c9a27e; outline-offset: 4px; border-radius: 10px; }
.stills-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.stills-for select { min-width: 180px; }
.stills-intro { margin: 0 0 14px; }
.stills-empty { padding: 30px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; }
.stills-group { margin-bottom: 18px; }
.stills-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.stills-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dc, #6e7681); }
.stills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.still-card { margin: 0; cursor: pointer; background: var(--bg-raised); border: 1px solid var(--border); border-top: 3px solid var(--dc, #6e7681); border-radius: 8px; overflow: hidden; }
.still-card:hover, .still-card:focus-visible { border-color: var(--dc, var(--accent)); outline: none; }
.still-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0f14; }
.still-card figcaption { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: .75rem; }
.still-name { overflow-wrap: anywhere; }
.still-meta { white-space: nowrap; color: var(--text-muted); }
dialog.stills-review, dialog.stills-lib { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.stills-review-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.stills-review-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.stills-review-row img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: #0b0f14; }
.stills-review-ref { outline: 2px solid #ffd166; }
.stills-review-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.tone-ok { color: #3ddc84; } .tone-warn { color: #ffd166; } .tone-block { color: var(--danger); }
.stills-review-btns { display: flex; gap: 6px; }
dialog.still-panel { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; position: relative; }
.still-panel-x { position: absolute; top: 10px; right: 10px; }
.still-panel-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.still-panel-img { width: 100%; max-height: 72vh; object-fit: contain; background: #0b0f14; border-radius: 8px; }
.still-panel-info h2 { margin: 0 32px 4px 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.still-panel-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.still-notes h3 { margin: 0 0 8px; font-size: .95rem; }
.still-thread { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; margin-bottom: 10px; }
.still-note { padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; }
.still-note.is-reply { margin-left: 22px; border-left: 3px solid #c9a27e; }
.still-note-body { margin: 4px 0; overflow-wrap: anywhere; }
.still-note-body .mention { color: var(--accent); font-weight: 600; }
.still-note-tools { display: flex; gap: 4px; justify-content: flex-end; }
.still-note-input { width: 100%; box-sizing: border-box; resize: vertical; }
.still-mention-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
@media (max-width: 760px) { .still-panel-body { grid-template-columns: 1fr; } .stills-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* 20-oct ⚖ Comparar 2 piezas (compare.js): pantalla completa, lado a lado / onion / auto onion. */
.cmp2-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #05080b; color: var(--text, #e6edf3); display: flex; flex-direction: column; }
.cmp2-dialog:not([open]) { display: none; }
.cmp2-dialog::backdrop { background: #000; }
.cmp2-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border, #30363d); }
.cmp2-modes { display: inline-flex; gap: 6px; }
.cmp2-op { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cmp2-op[hidden] { display: none; }
.cmp2-op input { width: 180px; accent-color: var(--accent); }
.cmp2-swap { margin-left: auto; }
.cmp2-stage { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 12px 16px; }
.cmp2-pane { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp2-imgbox { position: relative; flex: 1; min-height: 0; }
.cmp2-imgbox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cmp2-pane figcaption { font-size: 13px; text-align: center; }
.cmp2-pane figcaption a { color: var(--accent); margin-left: 6px; font-size: 12px; }
.cmp2-tag { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 4px; background: var(--accent); color: #0d1117; font-weight: 700; font-size: 11px; }
@media (max-width: 700px) { .cmp2-side { flex-direction: column; } .cmp2-swap { margin-left: 0; } }

/* 20-oct: ✔ OK de AD en la card de Logos (versión corregida esperando el OK). */
.lg-ok-due { border-color: #22c55e; color: #4ade80; }
/* 23-oct: «Seleccionar todas» del importador de Drive (drive-picker.js). */
.drive-row-all { font-weight: 700; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 2px; }
/* 23-oct ❄ almacenamiento en frío (cold-banner.js). */
.cold-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 14px; border-radius: 10px;
  font-size: 13px; border: 1px solid var(--border); background: var(--bg-raised); }
.cold-banner[hidden] { display: none; }
.cold-banner-idle { color: var(--text-muted); font-size: 12px; padding: 5px 12px; }
.cold-banner-cold { border-color: #00C8D7; background: rgba(0, 200, 215, 0.08); }
.cold-banner-busy { border-color: #00C8D7; }
.cold-banner-progress { background: linear-gradient(90deg, rgba(0, 200, 215, 0.30) var(--cold-pct, 0%), var(--bg-raised) var(--cold-pct, 0%));
  transition: --cold-pct 0.8s ease-out; }   /* 23-oct: el cartel entero es la barra (cold-banner.js) */
@property --cold-pct { syntax: '<percentage>'; inherits: false; initial-value: 0%; }   /* así la barra avanza suave */
.cold-banner .cold-pct { font-weight: 700; color: #00C8D7; min-width: 3.2em; font-variant-numeric: tabular-nums; }
.cold-banner .cold-error { color: #ff6b6b; }
/* 23-oct (Fernando): UBA aprobado con MockUps sin aprobar → sin sello; pastilla ámbar «✔ UBA · Falta aprobar N MockUp(s)». */
.uba-pending-pill { background: #f0b429; color: #1a1200; }
/* 23-oct: lista de piezas sin aprobar antes de exportar un deck. */
.deck-unapproved { max-height: 40vh; overflow: auto; margin: 6px 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.deck-unapproved-warn { color: #f0b429; margin-bottom: 0; }
/* 23-oct (Fernando): «Aprobada 100%» + un ✔ por team (Diseño / AD / Producción), prendido solo si ese team firmó. */
.state-ticks { margin-left: 4px; letter-spacing: 1px; white-space: nowrap; }
.state-tick { color: var(--muted); opacity: .35; }
.state-tick.on { color: #4ade80; opacity: 1; font-weight: 800; }
/* 23-oct (Fernando): tarjeta de /bugs — acciones arriba, cartel «te toca» con el mensaje entero, historia de lo nuevo a lo viejo. */
.bug-subject { margin: 6px 0 8px; font-size: 14px; font-weight: 600; }
.bug-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bug-fixver-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bug-fixver-wrap .bug-fixver { width: 90px; margin: 0; }
.bug-card.bug-card-you { border-left-color: #f0a437; box-shadow: 0 0 0 1px rgba(240, 164, 55, .35); }
.bug-you { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; border: 2px solid #f0a437; background: rgba(240, 164, 55, .10); }
.bug-you-failed { border-color: #ff7a7a; background: rgba(255, 122, 122, .10); }
.bug-you-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: #f0a437; }
.bug-you-failed .bug-you-title { color: #ff7a7a; }
.bug-you-msg { padding: 10px 12px; border-radius: 8px; background: var(--bg, #0d1117); font-size: 14px; line-height: 1.5; }
.bug-you-hint { margin: 8px 0 0; font-weight: 700; color: #f0a437; }
.bug-reply { flex-direction: column; align-items: stretch; }
.bug-reply-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.bug-reply textarea { width: 100%; min-width: 0; }
.bug-reply button { align-self: flex-end; }
.bug-reply-you textarea { border: 2px solid #f0a437; }
.bug-note-box { margin-top: 10px; }
.bug-note-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.bug-note-draft { font-weight: 700; color: #f0a437; margin-left: 6px; }
.bug-note-ok { font-weight: 600; color: #4ade80; margin-left: 6px; }
.bug-note-box .bug-note { width: 100%; resize: vertical; font-size: 13px; line-height: 1.45; }
.bug-tl-title { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.bug-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bug-tl-item { padding: 8px 12px; border-radius: 8px; background: rgba(127, 127, 127, .06); border-left: 3px solid var(--border); }
.bug-tl-item .bug-msg-body { white-space: normal; line-height: 1.5; }
.bug-tl-item .bug-msg-body ul, .bug-tl-item .bug-msg-body ol, .bug-you-msg ul, .bug-you-msg ol { margin: 4px 0; padding-left: 22px; }
.bug-tl-latest { background: rgba(240, 164, 55, .08); box-shadow: inset 0 0 0 1px rgba(240, 164, 55, .4); }
.bug-tl-new { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #f0a437; color: #1a1200; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.bug-tl-report { border-left-color: #8b98a5; }
.bug-agent-summary-box { margin: 0 0 8px; font-size: 13px; }
.bug-agent-summary-box .bug-agent-summary { white-space: normal; line-height: 1.5; }
/* 23-oct (Fernando: «Falta OK de AD en 2 MockUps es muy largo y se corta»): el chip de estado de la card baja de línea, nunca se corta. */
.uba-card .uba-meta .state { white-space: normal; max-width: 100%; line-height: 1.3; }
/* 23-oct: ⬇ descargar la variante aprobada (mismo lugar que el 👁, que solo aparece en las pendientes). */
.ls-download { position: absolute; right: 6px; top: 6px; text-decoration: none; }

/* 26-oct 📩 (Michelle): nota del cliente sobre el round anterior arriba de la grilla + aviso en el diálogo leído desde el N */
.fb-prev-note { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; background: var(--bg-raised); }
.fb-prev-note summary { cursor: pointer; font-weight: 600; }
.fb-prev-note .fb-rich { margin: 8px 0; white-space: pre-wrap; }
.fb-from-note { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: var(--bg-input); }

/* 26-oct 🧩 (Fernando): pestañas de idioma también abajo + panel de «Aprobar UBA + MockUps» */
.family-lang-bottom .family-lang-tabs { margin: 0; }
.family-combo-confirm { flex-basis: 100%; }

/* 26-oct 🧩: ▣ SafeZone sobre el slide del UBA (misma medida que el UBA → mismo encuadre que la imagen) */
.fam-uba-board .fam-uba-sz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fam-uba-board .fam-uba-sz[hidden] { display: none; }
/* botón fantasma prendido (chip-active): con el hover el texto cyan quedaba sobre fondo cyan */
.btn-ghost.chip-active:hover { color: #06282c; }