/* Forever Engine Image - estilo oscuro */
:root {
  --bg: #1e1e1e;
  --bg-elev: #252526;
  --bg-elev-2: #2d2d30;
  --border: #3c3c3c;
  --text: #e6e6e6;
  --text-muted: #9b9b9b;
  --accent: #4ec9b0;
  --accent-2: #569cd6;
  --danger: #f48771;
  --warning: #dcdcaa;
  --success: #6a9955;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Monaco", "Menlo", "Cascadia Code", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* === Topbar === */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* === Van Helsing Forever (la mascota de la casa) === */
.vanhelsing {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  user-select: none;
}
.vanhelsing__img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 3px rgba(242, 92, 98, 0.35));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.vanhelsing:hover .vanhelsing__img {
  transform: scale(1.9) translateY(6px);
  filter: drop-shadow(0 0 8px rgba(242, 92, 98, 0.7));
}
.vanhelsing__motto {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.vanhelsing:hover .vanhelsing__motto {
  color: #F25C62;
  text-shadow: 0 0 10px rgba(242, 92, 98, 0.5);
}
.brand .logo { font-size: 18px; }
.brand .title { font-size: 15px; letter-spacing: 0.2px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok    { background: var(--success); box-shadow: 0 0 8px var(--success); }
.dot--warn  { background: var(--warning); }
.dot--err   { background: var(--danger); }
.dot--idle  { background: var(--text-muted); }

/* === Tabs === */
.tabs {
  display: flex; gap: 2px; padding: 0 24px;
  background: var(--bg-elev); border-bottom: 1px solid var(--border);
}
.tab {
  background: transparent; border: 0; color: var(--text-muted);
  padding: 10px 16px; font-size: 13px; cursor: pointer;
  border-bottom: 2px solid transparent; font-family: inherit;
}
.tab:hover { color: var(--text); }
.tab--active { color: var(--accent); border-bottom-color: var(--accent); }

/* === Main === */
main {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.view { display: none; }
.view--active { display: block; }

/* === Grid === */
.grid {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3 { grid-template-columns: 1fr; } }

/* === Cards === */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--bg-elev-2); }

.card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.card__value {
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.card__value--small { font-size: 14px; font-weight: 400; }
.card__detail { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.card--list { padding: 0; }

.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 32px 0 12px 0;
  font-weight: 500;
}

/* === Order list (dashboard) === */
.order {
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.order:last-child { border-bottom: 0; }
.order__ref { font-family: var(--mono); color: var(--accent-2); }
.order__time { color: var(--text-muted); font-size: 12px; }
.order__duration { color: var(--text-muted); font-size: 12px; font-family: var(--mono); }

/* === Badges === */
.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.badge--ok      { background: rgba(106, 153, 85, 0.2);  color: var(--success); }
.badge--err     { background: rgba(244, 135, 113, 0.2); color: var(--danger);  }
/* INCOMPLETO: el TIF se genero pero NO es imprimible (le falta el logo del
   marmolista y esta en la carpeta _SIN_LOGO). Ambar, para que no se confunda
   ni con un OK ni con un error: el pedido no fallo, pero no puede ir al horno. */
.badge--warn    { background: rgba(220, 165, 60, 0.22);  color: #e0a83c; }
.badge--run     { background: rgba(86, 156, 214, 0.2);  color: var(--accent-2); animation: pulse 1.5s ease-in-out infinite; }
.badge--pending { background: rgba(220, 220, 170, 0.15); color: var(--warning); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.ok-text  { color: var(--success); font-weight: 500; }
.err-text { color: var(--danger);  font-weight: 500; }

.empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.placeholder {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  text-align: center;
}
.placeholder h2 { margin: 0 0 12px 0; color: var(--accent); font-weight: 500; }

.muted { color: var(--text-muted); font-size: 13px; }
code, .mono { font-family: var(--mono); }

/* === Dropzone === */
.dropzone {
  padding: 0;
  cursor: pointer;
  border: 1px dashed var(--border);
  transition: all 0.15s ease;
}
.dropzone:hover, .dropzone.dropzone--hover {
  border-color: var(--accent);
  background: rgba(78, 201, 176, 0.05);
}
.dropzone__inner { padding: 32px; text-align: center; }
.dropzone__icon { font-size: 32px; margin-bottom: 8px; }
.dropzone__title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.dropzone__hint { color: var(--text-muted); font-size: 12px; }
.dropzone__status { margin-top: 12px; font-size: 12px; min-height: 18px; }
.dropzone__status.ok { color: var(--success); }
.dropzone__status.err { color: var(--danger); }

.link {
  background: none;
  border: 0;
  color: var(--accent-2);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

/* === Filtros (Cola) === */
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.filter:hover { color: var(--text); border-color: var(--bg-elev-2); }
.filter--active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(78, 201, 176, 0.08);
}
.filter__count {
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-family: var(--mono);
  min-width: 18px;
  text-align: center;
}
.filter--active .filter__count { background: var(--accent); color: var(--bg); }

/* === Queue rows === */
.queue-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto auto auto;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: rgba(255, 255, 255, 0.02); }
.queue-row__ref { font-family: var(--mono); color: var(--accent-2); font-weight: 500; }
.queue-row__error {
  color: var(--danger);
  font-size: 11px;
  margin-top: 2px;
  font-family: var(--mono);
}
.queue-row__meta { color: var(--text-muted); font-size: 12px; }
.queue-row__dur { color: var(--text-muted); font-size: 12px; font-family: var(--mono); }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn--danger { border-color: var(--border); }
.icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }

/* === Modal === */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.modal__content {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal__close:hover { color: var(--text); }
.modal h2 {
  margin: 0 0 16px 0;
  color: var(--accent);
  font-weight: 500;
  font-size: 16px;
}
.detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row__label { color: var(--text-muted); font-size: 12px; }
.detail-row__value { font-family: var(--mono); word-break: break-all; font-size: 12px; }

/* === Settings === */
.settings-block { margin-bottom: 28px; }
.setting { margin-bottom: 12px; }
.setting__label { font-size: 13px; margin-bottom: 12px; color: var(--text); }
.setting--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.setting--row .setting__label { margin-bottom: 4px; }

.setting__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.radio:hover { background: rgba(255, 255, 255, 0.03); }
.radio input[type="radio"] { accent-color: var(--accent); margin: 0; }
.radio__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.setting__inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.num-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 13px;
  width: 80px;
}
.num-input:focus { outline: none; border-color: var(--accent); }

.btn {
  border: 0;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--primary:hover:not(:disabled) { background: #5fd6bd; }
.btn--secondary {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--accent); }

.settings-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
/* Auto-inject */
.auto-inject-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.auto-inject__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.auto-inject__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.state-dot--on  { background: var(--success); box-shadow: 0 0 10px var(--success); animation: pulse 2s ease-in-out infinite; }
.state-dot--off { background: var(--text-muted); }

.auto-inject__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .auto-inject__stats { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  text-align: center;
}
.stat__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.stat__value {
  font-size: 20px;
  color: var(--accent);
  font-weight: 600;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 28px;
  transition: 0.2s;
}
.toggle__slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: 0.2s;
}
.toggle input:checked + .toggle__slider {
  background: rgba(78, 201, 176, 0.2);
  border-color: var(--accent);
}
.toggle input:checked + .toggle__slider::before {
  transform: translateX(24px);
  background: var(--accent);
}

.text-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  width: 100%;
}
/* Toolbar de cola */
.queue-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.queue-toolbar .filters { margin-bottom: 0; }

.btn--small {
  padding: 6px 12px;
  font-size: 12px;
}

/* Fase y formato en filas de cola */
.queue-row__phase {
  font-size: 11px;
  color: var(--accent-2);
  font-family: var(--mono);
  margin-top: 2px;
}
.fmt-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  margin-right: 4px;
}
.fmt-tag--tiff { color: var(--accent-2); }
.fmt-tag--psd  { color: var(--warning); }
.fmt-tag--both { color: var(--accent); }

/* Logs */
.logs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.logs-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.checkbox-inline {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.checkbox-inline input { accent-color: var(--accent); }

.logs-panel {
  padding: 12px;
  font-family: var(--mono);
  font-size: 12px;
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.7;
}
.log-line {
  display: grid;
  grid-template-columns: 70px 70px 1fr;
  gap: 10px;
  padding: 2px 4px;
  border-radius: 3px;
}


/* Fila enriquecida con barra de fases */
.queue-row--rich {
  grid-template-columns: 48px 1fr auto auto auto auto;
  align-items: start;
  padding: 14px 18px;
}
.queue-row__body { min-width: 0; }

.phase-timer {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 6px;
}

/* Barra de fases */
.phase-bar {
  display: flex;
  align-items: center;
  margin-top: 8px;
  gap: 0;
}
.phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.phase-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.phase-dot--done {
  background: var(--success);
  border-color: var(--success);
}
.phase-dot--active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.phase-step__label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.phase-link {
  height: 1px;
  width: 22px;
  background: var(--border);
  margin: 0 2px;
  margin-bottom: 14px;
}

.stall-warn {
  margin-top: 8px;
  font-size: 11px;
  color: var(--warning);
  background: rgba(220, 220, 170, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 2px solid var(--warning);
}
.btn--danger-outline {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn--danger-outline:hover {
  background: rgba(244, 135, 113, 0.1);
}

/* Barra superior derecha */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Campana */
.bell {
  position: relative;
  cursor: pointer;
  font-size: 18px;
  user-select: none;
  line-height: 1;
}
.bell__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--mono);
}

/* Desplegable de alertas */
.alerts-dropdown {
  position: absolute;
  top: 52px;
  right: 24px;
  width: 360px;
  max-height: 70vh;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.alerts-dropdown[hidden] { display: none; }
.alerts-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.alerts-dropdown__actions { display: flex; gap: 12px; }
.alerts-dropdown__list {
  overflow-y: auto;
  max-height: 60vh;
}
.alert-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.queue-search {
  margin-bottom: 16px;
}
.queue-search .text-input {
  max-width: 400px;
}

.assets-search {
  margin-bottom: 16px;
}
.assets-search .text-input {
  max-width: 500px;
}
.asset-row {
  display: grid;
  grid-template-columns: 140px 1fr auto auto;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.asset-row:last-child { border-bottom: 0; }
.asset-row:hover { background: rgba(255,255,255,0.02); }
.asset-row__key { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.asset-row__path {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}
.asset-row__size { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.asset-row__strategy {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  color: var(--accent-2);
  text-transform: uppercase;
}
.modal-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.missing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.missing-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.missing-row:last-child { border-bottom: 0; }
.missing-row__asset { font-family: var(--mono); color: var(--danger); font-weight: 500; }
.missing-row__count {
  font-family: var(--mono);
  background: rgba(244, 135, 113, 0.15);
  color: var(--danger);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
.cache-breakdown {
  margin-top: 8px;
}
.cache-folder {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.psd-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.psd-row:last-child { border-bottom: 0; }
.psd-row:hover { background: rgba(255,255,255,0.02); }
.psd-row__ref { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.psd-row__source {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  background: var(--bg-elev-2);
}
.missing-row__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.faq-intro {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.faq-intro h2 { margin: 0 0 10px; font-size: 18px; }
.faq-intro p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.faq-search { margin-bottom: 20px; }
.faq-search .text-input { max-width: 100%; }

.faq-group { margin-bottom: 28px; }
.faq-group__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-2);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--bg-elev);
}
.faq-item__q {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.faq-item__q:hover { background: rgba(255,255,255,0.02); }
.faq-item__arrow { color: var(--text-muted); transition: transform 0.15s; flex-shrink: 0; }
.faq-item--open .faq-item__arrow { transform: rotate(90deg); }
.faq-item__a {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, padding 0.2s ease;
  color: var(--text-muted);
  line-height: 1.65;
  font-size: 13px;
}
.faq-item--open .faq-item__a { padding: 0 18px 16px; max-height: 1500px; }
.faq-item__a code {
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
}
.detail-preview {
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.detail-preview img {
  max-width: 100%;
  max-height: 400px;
  display: block;
}
.order__thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.queue-row__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  align-self: center;
}
.queue-row__thumb--empty {
  background: transparent;
  border: 0;
}

/* ETIQUETA "DL" SOBRE LA MINIATURA  (26 ago 2026)
   Va superpuesta por CSS y NO quemada en el JPG, para que al ampliar con la
   lupa se vea la lápida limpia. Un diseño libre se distingue así de un vistazo
   en la lista sin abrir nada. */
.queue-row__thumbwrap {
  position: relative;
  align-self: center;
  line-height: 0;
  flex: 0 0 auto;
}
.queue-row__dl {
  position: absolute;
  left: 2px;
  bottom: 2px;
  font-family: var(--mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  color: #fff;
  background: rgba(20, 20, 24, .82);
  border: 1px solid rgba(255, 255, 255, .35);
  pointer-events: none;   /* que no estorbe al clic que abre la lupa */
  user-select: none;
}
/* En el detalle la imagen es mucho mayor, así que la marca también. */
.detail-preview { position: relative; }
.detail-preview .queue-row__dl {
  left: 8px;
  bottom: 8px;
  font-size: 12px;
  padding: 3px 7px;
}

/* TRIÁNGULO DE TEXTOS MONTADOS  (26 ago 2026)
   Arriba a la derecha para no chocar con la marca DL, que va abajo a la
   izquierda: un pedido puede llevar las dos. Ámbar, el mismo color que el resto
   de avisos de validar — el rojo está reservado a los pedidos reventados.
   Va superpuesto por CSS, así que al ampliar con la lupa la lápida sale limpia. */
.queue-row__solape {
  position: absolute;
  right: 1px;
  top: 1px;
  font-size: 11px;
  line-height: 1;
  color: #1a1a1e;
  background: var(--warn, #e0a030);
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 700;
  pointer-events: none;   /* que no estorbe al clic que abre la lupa */
  user-select: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.detail-preview .queue-row__solape {
  right: 8px;
  top: 8px;
  font-size: 16px;
  padding: 3px 7px;
}

/* EDITOR DE COLOCACIÓN  (26 ago 2026)
   Cajas arrastrables sobre la miniatura de la lápida. Todo va en % del lienzo,
   así que se adaptan solas al tamaño que tenga la imagen en pantalla.
   Semitransparentes a propósito: hay que VER el texto de debajo para saber si
   está bien colocado. */
/* EL TEXTO DE VERDAD DENTRO DE LA CAJA  (26 ago 2026)
   El PNG que pintó el motor ocupa todo el hueco de la caja — así es exactamente
   como lo coloca el compositor, con su pad de desahogo. Al arrastrar se ve
   moverse la letra, no un borde.
   La primera versión solo pintaba rectángulos y era engañosa: las cajas no se
   tocaban mientras el texto se montaba medio renglón. */
.ed-caja__png {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* el arrastre lo maneja la caja, no la imagen */
  user-select: none;
}
/* Sin PNG (pedido viejo o caché limpiada): se avisa con rayas, para que se sepa
   que ese bloque va por su caja y no por su tinta. */
.ed-caja--sinpng {
  background: repeating-linear-gradient(45deg,
    rgba(224, 160, 48, .10) 0 6px, rgba(224, 160, 48, .22) 6px 12px);
}

.ed-caja {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(80, 170, 255, .9);
  background: rgba(80, 170, 255, .10);
  cursor: grab;
  user-select: none;
}
/* Con el texto dentro, el relleno azul estorba: basta el borde para saber dónde
   se agarra. Al pasar por encima se marca un poco más. */
.ed-caja { background: transparent; }
.ed-caja:active { cursor: grabbing; }
.ed-caja:hover { background: rgba(80, 170, 255, .14); }
/* Las imágenes en otro color: no se detectan choques entre ellas y un texto,
   porque un texto sobre un motivo suele ser lo que se busca. */
.ed-caja--img {
  border-color: rgba(150, 150, 160, .8);
  background: rgba(150, 150, 160, .08);
}
/* Se pisan: rojo. Se recalcula sobre la TINTA mientras arrastras, no sobre la
   caja — que es lo que hacía la primera versión y por eso engañaba. */
.ed-caja--choca {
  border-color: #e05252;
  background: rgba(224, 82, 82, .22);
}
/* Movida respecto al original: borde discontinuo, para distinguir de un vistazo
   lo que has tocado de lo que sigue como estaba. */
.ed-caja--tocada { border-style: dashed; border-width: 2px; }
.ed-caja__et {
  position: absolute;
  left: 0;
  top: -15px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  padding: 1px 3px;
  border-radius: 2px;
  color: #fff;
  background: rgba(20, 20, 24, .8);
  pointer-events: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-caja__tirador {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #333;
  border-radius: 2px;
  cursor: nwse-resize;
}
/* El editor reutiliza la capa de la lupa, pero su lienzo tiene que dejar sitio
   a la barra de botones y no recortar las etiquetas de las cajas. */
#editorOverlay .lupa__lienzo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px 12px;
  overflow: auto;
}
.help-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.help-switch__btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.help-switch__btn:hover { color: var(--text); }
.help-switch__btn--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Documentación técnica */
.tech-doc { line-height: 1.7; }
.tech-doc h2 {
  font-size: 18px;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.tech-doc h2:first-child { margin-top: 0; }
.tech-doc h3 { font-size: 14px; margin: 18px 0 8px; color: var(--accent-2); }
.tech-doc p { color: var(--text-muted); margin: 8px 0; }
.tech-doc ul { color: var(--text-muted); margin: 8px 0; padding-left: 22px; }
.tech-doc li { margin: 5px 0; }
.tech-doc code {
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}
.tech-doc strong { color: var(--text); }
.tech-doc__cmd {
  position: relative;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 10px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #d4d4d4;
  white-space: pre-wrap;
  word-break: break-all;
}
.tech-doc__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.tech-doc__copy:hover { color: var(--text); }
.tech-doc__note {
  background: rgba(86,156,214,0.08);
  border-left: 3px solid var(--accent-2);
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
}
.tech-doc__warn {
  background: rgba(244,135,113,0.08);
  border-left: 3px solid var(--warning);
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
}
/* Logo Forever Engine Image (topbar) */
.fei-logo { flex-shrink: 0; display: block; }
.fei-logo__w  { stroke: var(--text, #f5f5f5); }
.fei-logo__wf { fill: var(--text, #f5f5f5); }
.fei-logo__a  { fill: #c98b97; }
.fei-logo__as { stroke: #c98b97; }
.fei-logo__gear { transform-origin: 150px 150px; animation: feiSpin 26s linear infinite; }
.fei-logo__arc  { transform-origin: 150px 150px; animation: feiSpinRev 18s linear infinite; }
.fei-logo__core { transform-origin: 150px 150px; animation: feiCore 3.4s ease-in-out infinite; }

@keyframes feiSpin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes feiSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes feiCore    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .fei-logo__gear, .fei-logo__arc, .fei-logo__core { animation: none; }
}
/* Logo isotipo (topbar) */
.fei-logo-img {
  height: 56px;
  width: auto;
  display: block;
  flex-shrink: 0;
}


.faq-intro--logo {
  text-align: center;
}
.faq-logo {
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}
.tab-sep {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 8px;
}
.tab--dev {
  color: #d8a657;
}
.tab--dev.tab--active {
  color: #d8a657;
  border-bottom-color: #d8a657;
}

.dev-banner {
  background: rgba(216,166,87,0.12);
  border: 1px solid rgba(216,166,87,0.4);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: #d8a657;
}
.sandbox-tool { max-width: 720px; }
.sandbox-dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--text-muted);
}
.sandbox-dropzone:hover, .sandbox-dropzone--over {
  border-color: #d8a657;
  background: rgba(216,166,87,0.05);
}
.sandbox-dropzone__icon { font-size: 32px; margin-bottom: 8px; }
.sandbox-options {
  display: flex;
  gap: 16px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.sandbox-opt { display: flex; flex-direction: column; gap: 6px; }
.sandbox-opt label { font-size: 12px; color: var(--text-muted); }
.sandbox-opt .text-input { width: 140px; }
.sandbox-status { margin: 12px 0; font-size: 13px; min-height: 20px; }
.sandbox-status.err { color: var(--warning, #f48771); }
.sandbox-status.ok { color: var(--accent-2, #4ec9b0); }
.sandbox-result {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.sandbox-result__preview {
  background: repeating-conic-gradient(#3a3a3a 0% 25%, #2a2a2a 0% 50%) 50% / 24px 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.sandbox-result__preview img { max-width: 400px; max-height: 400px; display: block; border-radius: 4px; }

/* Editor de efectos del sandbox */
.sb-editor {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  margin-top: 20px;
  align-items: start;
}
/* (reglas del antiguo editor embebido eliminadas; el editor vive en el overlay .sb-fs__*) */
.sb-editor__controls { display: flex; flex-direction: column; gap: 18px; }

.sb-field { display: flex; flex-direction: column; gap: 8px; }
.sb-field > label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.sb-field--row { flex-direction: row; gap: 16px; }
.sb-field--row > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sb-field--row label { font-size: 12px; color: var(--text-muted); }

.sb-val {
  display: inline-block;
  background: var(--bg-elev-2);
  color: var(--accent-2);
  padding: 0 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 6px;
}

.sb-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sb-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  transition: border-color .15s, background .15s, color .15s;
}
.sb-type:hover { border-color: var(--accent-2); }
.sb-type--active {
  border-color: var(--accent-2);
  background: rgba(78,201,176,0.08);
  color: var(--text);
}
.sb-type__icon { font-size: 22px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-2);
  cursor: pointer;
  border: 2px solid var(--bg);
}

.sb-bg-toggle { display: flex; gap: 8px; }
.sb-bg {
  flex: 1;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
}
.sb-bg--active { border-color: var(--accent-2); background: rgba(78,201,176,0.08); color: var(--text); }

.sb-actions { display: flex; gap: 10px; margin-top: 6px; }

@media (max-width: 800px) {
  .sb-editor { grid-template-columns: 1fr; }
}


/* Toggles con sub-controles del sandbox */
.sb-toggle-field {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.sb-toggle-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-toggle-title { font-size: 13px; font-weight: 500; color: var(--text); }
.sb-sub {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-sub label { font-size: 12px; color: var(--text-muted); }

.sb-presets { display: flex; gap: 6px; margin: 4px 0; }
.sb-preset {
  flex: 1;
  padding: 6px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
}
.sb-preset:hover { border-color: var(--accent-2); color: var(--text); }
.sb-preset--active { border-color: var(--accent-2); background: rgba(78,201,176,0.1); color: var(--text); }

/* Línea arrastrable sobre el preview (posición del desvanecido) */
.sb-editor__preview { position: relative; }
.sb-fade-line {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 2px dashed var(--accent-2);
  cursor: ns-resize;
  z-index: 5;
  display: none;
}
.sb-fade-line--start { border-top-color: #4ec9b0; }
.sb-fade-line--end { border-top-color: #e0843c; }
.sb-fade-line::after {
  position: absolute;
  right: 6px;
  top: -18px;
  font-size: 10px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
}
.sb-fade-line--start::after { content: "empieza"; color: #4ec9b0; }
.sb-fade-line--end::after { content: "acaba"; color: #e0843c; }
.sb-fade-line--visible { display: block; }

.sb-history-bar { display: flex; gap: 8px; margin-top: 8px; }
.sb-history {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  min-height: 4px;
}
.sb-history__step {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: repeating-conic-gradient(#3a3a3a 0% 25%, #2a2a2a 0% 50%) 50% / 12px 12px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.sb-history__step img { width: 100%; height: 100%; object-fit: contain; }
.sb-history__step--active { border-color: var(--accent-2); }
.sb-history__step--consolidated::after {
  content: "📐";
  position: absolute;
  bottom: 1px; right: 2px;
  font-size: 10px;
}

.sb-loader {
  height: 4px;
  background: var(--bg-elev-2);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 4px;
  position: relative;
}
.sb-loader__bar {
  position: absolute;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  animation: sbLoaderSlide 1.1s ease-in-out infinite;
}
@keyframes sbLoaderSlide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ===== Editor a pantalla completa (sandbox) ===== */
.sb-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
}
.sb-fullscreen[hidden] { display: none; }

.sb-fs__topbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.sb-fs__title { font-size: 14px; font-weight: 600; color: var(--text); }
.sb-fs__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.sb-fs__close:hover { color: var(--text); border-color: var(--warning, #f48771); }

.sb-fs__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.sb-fs__canvas {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-width: 0;
  min-height: 0;
  background:
    repeating-conic-gradient(#252525 0% 25%, #1f1f1f 0% 50%) 50% / 28px 28px;
}
.sb-fs__canvas .sb-editor__preview {
  position: relative;
  border: 2px solid #555;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  /* tamaño fijado por JS (sizeFrame) — evita el bug de aspect-ratio en flex de Firefox */
  width: 70vmin;
  height: 70vmin;
  display: block;
  overflow: hidden;
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
.sb-fs__canvas .sb-editor__preview--white {
  background: #ffffff;
}
.sb-fs__canvas .sb-editor__preview img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}
.sb-fs__panel {
  flex: 0 0 320px;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-fs__history {
  flex: 0 0 96px;
  height: 96px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}
.sb-fs__history .sb-history {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  min-height: 0;
}
.sb-fs__history .sb-history-bar { flex: 0 0 auto; display: flex; gap: 8px; }

/* Presets de curvatura del desvanecido (mismo aspecto que sb-preset) */
.sb-cpreset {
  flex: 1;
  padding: 6px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
}
.sb-cpreset:hover { border-color: var(--accent-2); color: var(--text); }
.sb-cpreset--active { border-color: var(--accent-2); background: rgba(78,201,176,0.1); color: var(--text); }


/* Borrador del sandbox */
.sb-erase-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;           /* sobre la imagen y las líneas (5) */
  cursor: none;          /* el cursor lo dibuja .sb-brush-cursor */
  touch-action: none;
}
.sb-brush-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 7;
  border: 1.5px solid #fff;
  outline: 1.5px solid rgba(0,0,0,0.55); /* visible sobre claro y oscuro */
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.sb-brush-cursor--square { border-radius: 0; }

.sb-eshape {
  flex: 1;
  padding: 6px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
}
.sb-eshape:hover { border-color: var(--accent-2); color: var(--text); }
.sb-eshape--active { border-color: var(--accent-2); background: rgba(78,201,176,0.1); color: var(--text); }

.faq-item__a strong { color: var(--text); }
.faq-item__a ul { margin: 8px 0; padding-left: 20px; }
.faq-item__a li { margin: 4px 0; }
.faq-empty { color: var(--text-muted); padding: 20px; text-align: center; }
.psd-row__source--local { color: var(--accent-2); }
.psd-row__source--dropbox { color: var(--warning); }
.psd-row__date { font-size: 11px; color: var(--text-muted); }
.cache-folder:last-child { border-bottom: 0; }
.cache-folder__name { font-family: var(--mono); color: var(--accent-2); }
.cache-folder__desc { font-size: 11px; color: var(--text-muted); }
.cache-folder__size { font-family: var(--mono); font-size: 12px; }
.cache-folder__count { font-size: 11px; color: var(--text-muted); }
.missing-row__seen { font-size: 11px; color: var(--text-muted); }
.reprocess-status { font-size: 12px; }
.reprocess-status.ok { color: var(--success); }
.reprocess-status.err { color: var(--danger); }
.alert-item:last-child { border-bottom: 0; }
.alert-item--unread { background: rgba(86, 156, 214, 0.06); }
.alert-item__icon { font-size: 16px; line-height: 1.2; }
.alert-item__body { flex: 1; min-width: 0; }
.alert-item__title { font-weight: 600; margin-bottom: 2px; }
.alert-item__msg { color: var(--text-muted); word-break: break-word; }
.alert-item__time { color: var(--text-muted); font-size: 10px; margin-top: 4px; }
.alert-item--error   .alert-item__title { color: var(--danger); }
.alert-item--warning .alert-item__title { color: var(--warning); }
.alert-item--info    .alert-item__title { color: var(--accent-2); }
.log-line:hover { background: rgba(255,255,255,0.03); }
.log-line__time { color: var(--text-muted); }
.log-line__ref  { color: var(--accent-2); }
.log-line__msg  { color: var(--text); }
.log-line--warn    .log-line__msg { color: var(--warning); }
.log-line--error   .log-line__msg { color: var(--danger); }
.log-line--success .log-line__msg { color: var(--success); }
.text-input:focus { outline: none; border-color: var(--accent); }
.save-status { font-size: 12px; }
.save-status.ok { color: var(--success); }
.save-status.err { color: var(--danger); }

.sb-enhance-tool {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.sb-mode {
  flex: 1;
  padding: 8px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
}
.sb-mode:hover { border-color: var(--accent-2); color: var(--text); }
.sb-mode--active { border-color: var(--accent-2); background: rgba(78,201,176,0.12); color: var(--text); }


.sb-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.sb-tool-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, transform .15s;
}
.sb-tool-card:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.sb-tool-card__icon { font-size: 40px; margin-bottom: 12px; }
.sb-tool-card__title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.sb-tool-card__desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.sb-back {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  margin-bottom: 14px;
}
.sb-back:hover { color: var(--accent-2); }
.sb-up {
  flex: 1;
  padding: 8px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
}
.sb-up:hover { border-color: var(--accent-2); color: var(--text); }
.sb-up--active { border-color: var(--accent-2); background: rgba(78,201,176,0.12); color: var(--text); }

.sb-ctype {
  flex: 1;
  padding: 10px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
}
.sb-ctype:hover { border-color: var(--accent-2); color: var(--text); }
.sb-ctype--active { border-color: var(--accent-2); background: rgba(78,201,176,0.12); color: var(--text); }

/* En modo motivo, ocultar los controles que solo aplican a retratos */
#sbEditor.sb-mode-motivo .sb-only-face { display: none; }

/* ==========================================================================
   PENDIENTES DE VALIDAR  (21 ago 2026)
   --------------------------------------------------------------------------
   El tercer cajon del motor, dentro de la fila de la cola. TODO EN AMBAR, no
   en rojo: el rojo es para pedidos reventados. Un pedido a validar tiene su
   TIF hecho y solo espera que alguien lo mire. Si las dos cosas se pintan
   igual, el color deja de decir nada y se acaban ignorando las dos.
   ========================================================================== */
.queue-row--validar {
  border-left: 3px solid var(--warning);
  background: rgba(220, 220, 170, 0.05);
}
.queue-row__validar {
  font-size: 12.5px;
  color: var(--warning);
  margin-top: 4px;
}
.queue-row__validar b { color: var(--warning); }
/* El parte medido: en monoespaciada y apagado, para que se lea si hace falta
   pero no compita con el motivo. */
.queue-row__parte {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  margin-top: 4px;
}
.valida__acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.valida__nota {
  width: 150px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 7px;
}
.valida__nota:focus { outline: none; border-color: var(--accent); }

/* Elegir version del motivo (24 ago 2026). Botones discretos: es una decision
   poco frecuente y no debe competir con Aprobar/Rechazar. */
.valida__ops {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
}
.valida__op {
  background: var(--bg-elev-2);
  border: 1px solid var(--warning);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 10px;
}
.valida__op:hover { background: rgba(220, 220, 170, 0.12); }
.valida__op b { font-family: var(--mono); color: var(--warning); }

/* Casillas del ajuste A MEDIDA (D-97, 27 ago 2026).
   Los tres botones fijos mandan 6 % / 95 % / 90 %, y se quedan cortos en cuanto
   el desvio pasa de ahi: P010S143441 necesitaba un 9,2 % y por eso el texto
   seguia partiendose. Con estas dos casillas se escribe el numero medido. */
.valida__num {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 6px;
}
.valida__num:focus {
  border-color: var(--warning);
  outline: none;
}

/* El filtro "A validar", del mismo ambar que las filas. */
.filter--validar { color: var(--warning); }
.filter--validar.filter--active { border-color: var(--warning); }

/* ==========================================================================
   LUPA  (21 ago 2026)
   --------------------------------------------------------------------------
   Ver la lapida a tamaño grande. Sin esto no se puede decidir si un texto
   montado es tolerable: la miniatura de la fila mide 48 px y la del detalle
   400, y una lapida de 74 cm en 400 px no deja leer nada.
   ========================================================================== */
.queue-row__thumb--ampliable { cursor: zoom-in; }
.queue-row__thumb--ampliable:hover { border-color: var(--accent); }
.lupa {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
}
.lupa[hidden] { display: none; }
.lupa__barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.lupa__titulo {
  font-family: var(--mono);
  color: var(--accent-2);
  font-size: 14px;
}
.lupa__ayuda { font-size: 11px; }
.lupa__cerrar {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 5px 10px;
}
.lupa__cerrar:hover { border-color: var(--danger); color: var(--danger); }
/* El lienzo lleva su propio scroll: a tamaño real la imagen no cabe, y es
   justo entonces cuando hace falta recorrerla. */
.lupa__lienzo {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lupa__lienzo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  background: #fff;
}
/* Tamaño real: se sueltan los topes y aparece el scroll. */
.lupa__lienzo img.lupa__img--real {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
  margin: auto;
}

@media (max-width: 700px) {
  .valida__acciones { justify-content: flex-start; }
  .valida__nota { width: 100%; }
}