/* 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; }
.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; }
.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;
}
.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: #E50914; }
.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-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: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: #ffb1b1; border-color: #7a3a3a; }
.state-approved { color: #4ade80; border-color: #2c5e3f; }

/* 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); }
.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; }
.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-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;
}
.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: 360px; max-height: 70vh; overflow: auto;
  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); }
.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); }
.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); }
.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: 40vh; }
.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: 48px; }
.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: 40px; font-size: 13px; }
.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; }
.piece-killed-chip { color: #f88; border-color: #b34; }
/* Cards: estado «esperando versión nueva» + chips 📩 + brief del cliente. */
.state-client_fix { color: #f0a437; border-color: #f0a437; font-weight: 600; }
.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;
}
.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: 1; min-width: 260px; max-width: 420px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--border); padding-left: 14px; }
.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 textarea { flex: 1; margin: 0; min-height: 30px; font-size: 12.5px; resize: vertical; }
.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; }
.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: var(--accent);
  background: rgba(0,0,0,.45); border: 1px solid var(--accent-dim); border-radius: 8px;
  padding: 2px 9px; font-size: 13px; line-height: 1.4;
}
.round-card .rc-play:hover { border-color: var(--accent); background: rgba(0, 200, 215, 0.15); }
/* 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; }

/* 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; }
.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); }
.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 { 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; }
.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;
}
.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; }
#mat-categories label.mat-cat-row img { width: 56px; height: 56px; }
#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-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 { 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; }
.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: auto; padding-bottom: 8px; }
.ss-grid-3x3 .ss-sum-cell, .ss-grid-4x4 .ss-mk-cell { height: auto; }
.ss-grid-3x3 .ss-sum-cell img, .ss-grid-4x4 .ss-mk-cell img { flex: none; height: auto; }
.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; }
.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; }
/* 🎨 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; }

  /* ---- 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; }
}