/* ══════════════════════════════════════════════════
   "Para leer" (ojos) + gestión de géneros
══════════════════════════════════════════════════ */
.eye-badge { display: inline-flex; color: var(--leido); }
.eye-badge svg { width: 19px; height: 19px; }

.card-eye {
  position: absolute; top: 7px; right: 7px;
  width: 25px; height: 25px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--leido);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.card-eye svg { width: 15px; height: 15px; }

.btn-eyes {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r);
  border: 1px solid var(--border2); background: transparent;
  color: var(--muted); cursor: pointer; font-size: .8rem;
  transition: all .18s; white-space: nowrap;
}
.btn-eyes svg { width: 19px; height: 19px; }
.btn-eyes:hover { border-color: var(--leido); color: var(--leido); }
.btn-eyes.is-open { background: var(--leido-bg); border-color: var(--leido); color: var(--leido); }

/* Grosor de "lomo": canto de páginas (ancho ∝ nº de páginas) */
.row-spine-wrap { display: flex; align-self: stretch; flex-shrink: 0; }
.book-spine {
  align-self: stretch; flex-shrink: 0;
  background: repeating-linear-gradient(90deg, #c9bea6 0, #c9bea6 1px, #f1ebdf 1px, #f1ebdf 3px);
  border-right: 1px solid var(--border2);
}
.card-coverwrap { position: relative; line-height: 0; }
.card-spine {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(90deg, #c9bea6 0, #c9bea6 1px, #f1ebdf 1px, #f1ebdf 3px);
  box-shadow: 1px 0 3px rgba(30,26,20,.18);
  pointer-events: none;
}

/* Chip de género editable (detalle) */
.detail-genre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.genre-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border2); background: var(--surface);
  font-size: .82rem; color: var(--ink2); cursor: pointer; transition: background .15s;
}
.genre-chip:hover { background: var(--bg2); }
.genre-chip svg { opacity: .5; }
.genre-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.genre-chip-empty { color: var(--muted); border-style: dashed; }
.genre-input {
  padding: 7px 11px; border: 1px solid var(--accent); border-radius: 20px;
  background: #fff; color: var(--ink); font-size: .85rem; outline: none;
  min-width: 180px; max-width: 100%;
}
.genre-x {
  border: none; background: none; cursor: pointer; padding: 0 0 0 2px;
  color: var(--muted); font-size: .72rem; line-height: 1;
}
.genre-x:hover { color: #b33; }
.genre-add-wrap { display: inline-flex; }

/* Input de etiquetas múltiples (formulario) */
.tags-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; min-height: 42px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg); cursor: text;
}
.tags-input:focus-within { border-color: var(--accent); background: #fff; }
.tags-input #f-generos-chips { display: contents; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 20px;
  border: 1.5px solid var(--border2); background: var(--surface);
  font-size: .8rem; color: var(--ink2);
}
.tag-x {
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--muted); font-size: .72rem; line-height: 1;
}
.tag-x:hover { color: #b33; }
#f-generos-input {
  flex: 1; min-width: 120px; border: none; background: transparent;
  outline: none; font-size: .95rem; color: var(--ink); padding: 4px 2px;
}

.manage-hint { font-size: .82rem; color: var(--ink2); line-height: 1.6; margin-bottom: 14px; }
.manage-empty { color: var(--muted); text-align: center; padding: 24px; }
.manage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 6px; cursor: pointer;
}
.manage-row:hover { background: var(--bg2); }
.manage-check { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.manage-color {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: none; cursor: pointer; flex-shrink: 0;
}
.manage-color::-webkit-color-swatch-wrapper { padding: 0; }
.manage-color::-webkit-color-swatch { border: 1px solid var(--border2); border-radius: 50%; }
.manage-color::-moz-color-swatch { border: 1px solid var(--border2); border-radius: 50%; }
.manage-name {
  flex: 1; min-width: 0; font-size: .9rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.manage-count {
  font-size: .72rem; color: var(--muted);
  background: var(--bg2); border-radius: 10px; padding: 2px 9px; flex-shrink: 0;
}
.manage-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.manage-actions input {
  flex: 1; min-width: 150px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--bg); color: var(--ink);
  font-size: .9rem; outline: none;
}
.manage-actions input:focus { border-color: var(--accent); background: #fff; }
.manage-actions .btn { flex-shrink: 0; }
.btn-manage-sidebar { margin-top: 8px; }

/* Subsección y sugerencias de gestión */
.manage-section-title {
  font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.manage-suggest-btn { margin-bottom: 12px; }
#manage-suggestions {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px; margin-bottom: 14px;
}
.suggest-head { font-size: .8rem; font-weight: 700; color: var(--ink2); margin-bottom: 8px; }
.suggest-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: .82rem; cursor: pointer; flex-wrap: wrap;
}
.suggest-check { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.suggest-canon {
  font-weight: 600; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 7px;
}
.suggest-arrow { color: var(--muted); flex-shrink: 0; }
.suggest-from { color: var(--muted); font-size: .76rem; flex: 1; min-width: 0; }
#btn-suggest-apply { margin-top: 10px; }

/* Clasificar con IA */
.classify-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--ink2); margin-bottom: 12px; cursor: pointer;
}
.classify-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.classify-listhead {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; color: var(--muted); margin-bottom: 6px;
}
.linkbtn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .76rem; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
#classify-books, #classify-results { max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
.classify-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 5px; cursor: pointer; font-size: .84rem;
}
.classify-row:hover { background: var(--bg2); }
.classify-check { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.classify-title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.classify-author { color: var(--muted); font-size: .78rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classify-cur { font-size: .72rem; font-weight: 600; flex-shrink: 0; }

.classify-resrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 6px;
}
.classify-rescheck { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.classify-resinfo { flex: 1; min-width: 0; }
.classify-restitle { font-size: .86rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classify-resauthor { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classify-resgenre {
  width: 150px; flex-shrink: 0; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-size: .82rem; outline: none;
}
.classify-resgenre:focus { border-color: var(--accent); background: #fff; }
#classify-input {
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg); color: var(--ink); font-size: .9rem;
  font-family: 'Nunito', sans-serif; resize: vertical; outline: none; margin-top: 4px;
}
#classify-input:focus { border-color: var(--accent); background: #fff; }

/* Completar datos que faltan */
.manage-complete-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.complete-resbadge {
  font-size: .72rem; color: var(--leido); background: var(--leido-bg);
  padding: 3px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
}
.complete-resval { width: 180px; flex-shrink: 0; }