.books-toolbar {
  display: flex;
  justify-content: center;
  padding: 4px 4px 8px;
  margin-bottom: 6px;
}

#view-books {
  padding: 1px 10px;
  padding-bottom: calc(10px + var(--nav-total-h) + var(--nav-gap, 20px));
  overflow-y: auto;
  overflow-x: hidden;
}

#books-charts-section {
  margin-bottom: 10px;
}

.books-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 4px 12px;
  padding: 12px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.02), transparent),
    var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.books-filters-header {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.books-filters > .filters-toggle-icon {
  display: none;
}

.filter-search-row {
  flex: 1;
}

.filters-toggle-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt);
  padding: 10px 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.filters-toggle-btn:active {
  transform: scale(0.98);
}

.filters-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.books-filters-body {
  overflow: hidden;
  max-height: 800px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
/* 
.books-filter-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.books-filter-select-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.books-filter-select-label {
  font-size: 12px;
  color: var(--txt-soft);
}

.books-filter-select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 12px;
  background: rgba(7, 8, 14, 0.9);
  color: var(--txt);
  font-size: 14px;
}

.books-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(127, 93, 255, 0.4);
} */

.books-filters.is-collapsed .books-filters-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.books-filters.is-collapsed .filters-toggle-icon {
  transform: rotate(-90deg);
}

@media (max-width: 640px) {
  .books-filter-select-grid {
    grid-template-columns: 1fr;
  }
}

.filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label,
.filter-row .field-label {
  font-size: 13px;
  color: var(--txt-soft);
}



.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-chip-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-chip-group-title {
  font-size: 12px;
  color: var(--txt-soft);
  letter-spacing: 0.01em;
}

.filter-chip-empty {
  font-size: 12px;
  color: var(--txt-soft);
  opacity: 0.85;
  padding: 2px 0;
}

.filter-chip {
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.2s ease;
}

.filter-chip.is-active {
  background: rgba(127, 93, 255, 0.25);
  border-color: rgba(127, 93, 255, 0.8);
  box-shadow: 0 10px 25px rgba(127, 93, 255, 0.25);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  font-size: 14px;
}

.toggle-pill input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}



.books-watchlist, .books-finished{
  margin: 10px 4px 2px;
  padding: 2px 2px 1px;
  border-radius: 16px;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(18,16,26,0.92), rgba(9,10,16,0.94));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.books-watchlist::before{
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'%3E%3Cpath d='M6 16c20 10 34 32 42 56m22 10C58 84 40 90 20 112m84-78c-2 24 4 42 18 58m24 12c-22 2-38 12-50 30m-20-6c8-12 10-26 6-44M32 18c26-2 52 4 78 18' stroke='white' stroke-width='2' stroke-opacity='.28'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M18 18c30 10 54 32 70 62m20 6c-26 6-46 24-60 54m100-138c-4 32 4 58 22 80m32 6c-30 6-52 22-66 48m-22-12c6-18 6-38-2-60M36 26c36-6 72 2 108 24' stroke='white' stroke-width='2' stroke-opacity='.22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px 12px, calc(100% - 26px) 6px;
  background-size: 120px 120px, 150px 150px;
  opacity: 0.18;
  filter: blur(0.4px);
  mix-blend-mode: screen;
}

.books-watchlist::after{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,0.06), transparent 52%),
    radial-gradient(120% 90% at 92% 12%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(160% 160% at 50% 120%, rgba(0,0,0,0.18), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 5px);
  opacity: 0.38;
  mix-blend-mode: soft-light;
}

.watchlist-summary{
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}
.watchlist-title{
  font-weight: 400;
  color: var(--txt);
  margin-left: 10px;
  font-size: 16px;
}

.watchlist-summary::-webkit-details-marker{ display: none; }

.watchlist-subtitle{
  font-size: 13px;
  color: var(--txt-soft);
}

.watchlist-count{
  min-width: 30px;
  text-align: center;
  padding: 8px 0px;
  border-radius: 999px;
  color: #f3e6ff;
  font-weight: 400;
}

.watchlist-empty{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: var(--txt-soft);
  font-size: 14px;
}

.watchlist-summary-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.watchlist-caret{
  opacity: 0;
  transition: transform .16s ease;
}

.books-watchlist[open] .watchlist-caret{
  transform: rotate(-180deg);
}

.watchlist-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 24px 12px;
  overflow-x: hidden;
}

.watchlist-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tarjeta libro */

.book-card {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 17, 29, 0.92), rgba(8, 10, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.58);
  min-height: 146px;
}

.book-progress-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f7bff, #6d4dff);
  box-shadow: 0 6px 16px rgba(127, 93, 255, 0.45);
}

.progress-bar-fill.is-finished {
  background: linear-gradient(90deg, #49e999, #2bcf78);
  box-shadow: 0 6px 16px rgba(46, 234, 123, 0.36);
}

.progress-value,
.progress-pages {
  font-size: 12px;
  color: var(--txt);
  min-width: 46px;
  text-align: center;
  font-weight: 600;
}

.progress-pages {
  color: var(--txt-soft);
  min-width: 70px;
}

.book-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.book-title-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.book-title {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-status-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 12, 20, 0.9);
  color: var(--txt-soft);
}

.book-meta {
  font-size: 12px;
  color: var(--txt-soft);
}

.book-meta span + span::before {
  content: " \00B7 ";
  opacity: 0.7;
}

.book-pages-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--txt-soft);
  margin-top: 4px;
}

.book-actions {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 8px;
}

.book-page-input {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--txt-soft);
}

.book-page-input input {
  width: 72px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 6, 12, 0.95);
  color: var(--txt);
  padding: 4px 8px;
  font-size: 13px;
}

.book-card-buttons {
  display: flex;
  gap: 6px;
  padding: 0px;
  font-size: 8px;
}
.book-card-buttons .btn{ padding: 6px; }
/* Stats */

.stats-wrapper {
  padding: 6px 4px 8px;
  margin-top: 10px;
  min-height: 404px;
}

.stats-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.stat-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(13, 19, 33, 0.96), rgba(8, 12, 21, 0.98));
  box-shadow:
    0 18px 38px rgba(3, 7, 16, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 30px -18px rgba(255, 103, 103, 0.42);
  border-radius: 18px;
  --summary-glow: rgba(255, 103, 103, 0.42);
  --summary-accent: rgba(255, 134, 134, 0.72);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: -18% -32% auto -10%;
    height: 86px;
    background: radial-gradient(circle, rgba(103, 202, 255, 0.244) 0%, transparent 70%);
    opacity: 0.95;
    pointer-events: none;
}

.stat-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(134 152 255 / 72%), transparent);
    opacity: 0.9;
}

.stat-label {
  font-size: 8px;
  color: rgb(255, 255, 255);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
#stat-books-read-range{
  display: none;
}
.stat-value {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  margin-bottom: 10px;
  text-shadow: 0 0 26px rgba(255, 107, 124, 0.32);
}


/* Calendario */




.books-shelf-toolbar{
  display: grid;
  gap: 6px;
  margin: 8px 4px 12px;
}
.shelf-search-label{
  font-size: 12px;
  color: var(--txt-soft);
}
.shelf-search-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.shelf-search-input:focus{
  outline: 2px solid rgba(255,255,255,.18);
}
.books-shelf-results{
  font-size: 12px;
  color: var(--txt-soft);
}
.shelf-favorites-label{
  font-weight: 600;
  margin: 4px 0 -4px;
}
.books-shelf-empty{
  padding: 8px;
  font-size: 12px;
  color: var(--txt-soft);
}


/* Libros leídos (selector rango) */
.stat-card-clickable{
  cursor: pointer;
}

.stat-label-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.stat-range-select{
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 999px;
  border: 0px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: var(--txt-soft);
  outline: none;
  width: 20px;
}

.stat-range-select:focus{
  border-color: transparent;
}


.dot-finished{
  background: rgba(61, 255, 133, 0.9);
}
.books-finished, .books-watchlist{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  overflow: hidden;
}

.books-finished-summary{
  list-style: none;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.books-finished-summary::-webkit-details-marker{ display:none; }

.books-finished-count, .books-watchlist-count{
  opacity: .75;
  font-size: 12px;
}


.book-card-finished{
  opacity: .72;
  filter: saturate(.85);
}

/* --- Compact tweak --- */
.book-card{ padding: 12px 12px; }
.book-main{ gap: 6px; }
.book-actions{ gap: 10px; flex-wrap: wrap; }
.book-card-buttons{ flex-wrap: wrap; gap: 10px; }
.book-card-buttons .btn{ min-width: 112px; }
.book-card.book-card-finished .book-page-input{ display:none; }
.book-card.book-card-finished .book-pages-row{ opacity: 0.85; }
.progress-pages{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.progress-pages-input{
  width: 4ch;
  max-width: 6ch;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: right;
  appearance: textfield;
}

.progress-pages-input::-webkit-outer-spin-button,
.progress-pages-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.progress-pages-input::placeholder{
  color: inherit;
  opacity: 1;
}

.progress-pages-input:focus{
  border-bottom: 1px solid rgba(255,255,255,.22);
}

/* Estantería de libros terminados */
.books-shelf-row {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.books-shelf-row-watchlist{
  padding-top: 10px;
}
.books-shelf-row-favorites{
  padding-top: 6px;
}

.books-shelf-row::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(7,8,12,.85));
  border-radius: 10px;

}

.book-spine{
  --spine-height: 120px;
  --spine-color-1: #7f5dff;
  --spine-color-2: #4ec5ff;
  --spine-depth: linear-gradient(
    90deg,
    rgba(0,0,0,0.26) 0%,
    rgba(0,0,0,0.16) 8%,
    rgba(255,255,255,0.06) 24%,
    rgba(255,255,255,0.14) 38%,
    rgba(255,255,255,0.06) 52%,
    rgba(0,0,0,0.12) 70%,
    rgba(0,0,0,0.22) 100%
  );
  position: relative;
  flex: 0 0 auto;                            /* FIX: no encoger */
  width: var(--spine-width, 46px);           /* FIX */
  min-width: var(--spine-width, 46px);       /* FIX */
  height: var(--spine-height);
  background:
    var(--spine-depth),
    linear-gradient(160deg, var(--spine-color-1), var(--spine-color-2));
  border-radius: 10px 10px 8px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 12px 24px rgba(0,0,0,.2),
    inset 8px 0 12px rgba(0,0,0,.16),
    0 10px 18px rgba(0,0,0,.45);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 6px 10px;
  gap: 8px;
  color: #0b0d12;
  text-shadow: 0 1px 1px rgba(255,255,255,.52), 0 0 8px rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
  scroll-snap-align: start;
}

.book-spine::before{
  content: "";
  position: absolute;
  inset: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,.2) 100%);
  opacity: .4;
  pointer-events: none;
}
.book-spine::after{
  content: "";
  position: absolute;
  inset: 10px 12px;
  border-radius: 7px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.2) 58%, transparent 74%);
  opacity: .18;
  filter: blur(.5px);
  pointer-events: none;
}
.book-spine:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 12px 24px rgba(0,0,0,.22),
    0 12px 20px rgba(0,0,0,.55);
}
.book-spine-favorite{
  --spine-color-1: #f8e6aa;
  --spine-color-2: #d3a74a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 10px 22px rgba(0,0,0,.2),
    0 12px 22px rgba(212,163,64,.45);
}
.book-spine-star{
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  color: #e5b200;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

.book-spine-title{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-shadow: 0 1px 1px rgba(255,255,255,.5), 0 0 10px rgba(0,0,0,.32);
  font-weight: 700;
  font-size: 12px;
  color: rgba(5,6,12,.92);
}
.book-spine-meta-pendiente{
  display:none;
}
.book-spine-pill{
  display: none;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 11px;
  font-weight: 800;
  color: rgba(6,7,10,.85);
  text-shadow: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.book-spine-actions{
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.book-spine-cta{
  border: none;
  border-radius: 10px;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.06);
  color: rgba(7,8,12,.9);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.book-spine-cta:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 12px rgba(0,0,0,.25);
  transform: rotate(180deg) translateY(-2px);
}
.book-spine-cta:active{
  opacity: .9;
  transform: rotate(180deg) translateY(-1px);
}
.book-spine-cta-secondary{
  background: rgba(0,0,0,0.12);
  color: rgba(7,8,12,.75);
  border: 1px solid rgba(0,0,0,.1);
}
.book-spine-planned{
  justify-content: flex-start;
  gap: 10px;
  padding-top: 10px;
}

.book-spine-pct{
  font-weight: 800;
  font-size: 11px;
  opacity: .9;
  color: rgba(5,6,12,.9);
  text-shadow: 0 1px 1px rgba(255,255,255,.5), 0 0 10px rgba(0,0,0,.32);
}


.favorite-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.favorite-toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.favorite-icon{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: all .15s ease;
}
.favorite-toggle input:checked + .favorite-icon{
  background: radial-gradient(circle at 30% 30%, #fff6d0, #f1c85d);
  color: #c28b00;
  box-shadow:
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.favorite-toggle input:checked + .favorite-icon + span{
  color: #f1d27b;
}

.book-detail-modal .modal-body{
  padding: 6px 12px 4px;
}
.book-detail-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 10px;
  background: radial-gradient(circle at 10% -10%, rgba(255,255,255,.04), transparent);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.book-detail-modal{
  background: rgba(10, 12, 18, 0.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.book-detail-modal .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 8px;
}
.book-detail-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.book-detail-status{
  padding: 6px 10px;
  background: rgba(127,93,255,.12);
  border: 1px solid rgba(127,93,255,.3);
  color: #f7e7ff;
  border-radius: 10px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.book-detail-body .spec-block{
  padding: 8px 10px;
  border-radius: 12px;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.book-detail-body .spec-grid{
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
}
.book-detail-body .spec-item{
  gap: 1px;
}
.book-detail-body .spec-label{
  font-size: 10px;
}
.book-detail-body .spec-value{
  font-size: 13px;
  color: #f7f7ff;
}
.book-detail-rate-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.book-detail-rate-item{
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.book-detail-rate-item span{
  display: block;
  font-size: 10px;
  line-height: 1.2;
  color: var(--txt-soft);
}
.book-detail-rate-item strong{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.25;
  color: #f7f7ff;
  overflow-wrap: anywhere;
}
.book-detail-estimate-note{
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--txt-soft);
}
.book-detail-chart-block .chart-card-header{
  margin-bottom: 8px;
}
.book-detail-chart-host{
  min-height: 190px;
  padding: 8px;
}
.book-detail-footer{
  --detail-footer-h: 72px; /* ajusta si tu footer mide más */
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7, 8, 14, 0.8);
  backdrop-filter: blur(12px);
  position: sticky;
  bottom: 0;
}

/* =========================
   Estantería (leyendo)
========================= */
.books-shelf-row-reading{
  padding-top: 18px; /* espacio para el marcador */
}

/* Progreso dentro del lomo (zona "no leída" oscurecida) */
.book-spine-reading{
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) calc(var(--p, 0) * 1%),
      rgba(0,0,0,0.55) calc(var(--p, 0) * 1%),
      rgba(0,0,0,0.55) 100%
    ),
    var(--spine-depth),
    linear-gradient(160deg, var(--spine-color-1), var(--spine-color-2));
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 8px;
  gap: 10px;
}

/* Marcador superior */
.book-bookmark{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  z-index: 2;
}

.book-bookmark-input{
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: center;
  appearance: textfield;
}

.book-bookmark-input::-webkit-outer-spin-button,
.book-bookmark-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.book-bookmark-input::placeholder{
  color: inherit;
  opacity: 0.95;
}

/* =========================
   Ajustes: marcador tipo 🔖 + stats verticales
========================= */
.book-spine-reading .book-spine-title{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 20px;
}

.book-spine-stats{
  display: flex;
  flex-direction: column;      /* antes: column */
  align-items: center;
  justify-content: center;
  gap: 0px;                 /* ajusta a gusto */
  padding: 0px;
  font-size: 6px;
  color: white;
  white-space: nowrap;      /* evita salto de línea */
  margin: 0;
  max-height: 10px;
  min-height: 10px;

}


.book-spine-pct, .book-spine-meta{
  writing-mode: vertical-rl;
  transform: rotate(270deg);
  text-align: center;
  color: white;
  font-size: 8px;
  padding: 0;
  margin: 0;
  gap: 0;
  line-height: 0.9em;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.35);
}

.book-bookmark{
  top: -8px;               /* va “en el borde”, no flotando */
  width: 30px;
  height: 58px;
  padding: 10px 0 12px;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.456), rgba(255,255,255,0)),
    rgba(27, 0, 179, 0.513);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.587),
    0 10px 18px rgba(255, 255, 255, 0.398);
}

.book-bookmark-input{
  width: 18px;
  height: 46px;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  margin-left: 2px;
}

.book-bookmark-input:focus{
  outline: none;
  filter: drop-shadow(0 0 10px rgba(127,93,255,.25));
}


/* ===== Selector Categoría + botón + ===== */
.field-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.field-inline select{
  flex: 1;
}
.genre-add-btn,
.genre-remove-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.genre-remove-btn{
  background: rgba(255, 255, 255, 0.04);
}

/* ===== Gráficas (donut 2D) bajo Terminados ===== */
.books-charts{
  margin-top: 12px;
  border-radius: 20px;
  padding: 10px 10px 12px;
  background: rgba(9, 11, 20, 0.661);
  border: 1px solid rgba(255,255,255,0.12);
}
.books-charts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px){
  .books-charts-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.chart-card{
  border-radius: 18px;
  padding: 10px 10px 12px;
  background: radial-gradient(circle at top, rgba(245, 230, 166, 0.12), transparent),
    rgba(8, 10, 18, 0.68);
  border: 1px solid rgba(255,255,255,0.10);
}
.chart-card-title{
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
.chart-title-group{
  min-width: 0;
}
.pages-timeline-summary{
  margin-top: 1px;
  color: var(--txt-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.chart-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.chart-header-controls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.chart-selector{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--txt-soft);
  font-size: 12px;
}
.chart-selector-input{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: 0;
}
.chart-book-select{
  max-width: 210px;
}
.chart-range-select{
  max-width: 96px;
}
.chart-selector-input:focus{
  outline: 2px solid rgba(245,230,166,0.45);
  outline-offset: 1px;
}
.donut-host{
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: visible;
}
.donut-svg{
  width: 100%;
  max-width: 520px;
  min-width: 240px;
  height: auto;
  overflow: visible;
}
.donut-ring-base{
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-linecap: round;
}
.donut-slice{
  fill: transparent;
  stroke: rgba(255,255,255,0.22);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 160ms ease, stroke 160ms ease, filter 160ms ease, stroke-width 160ms ease;
}
.donut-slice:hover,
.donut-slice:focus-visible{
  stroke: rgba(255,255,255,0.36);
  filter: drop-shadow(0 0 0 2px rgba(245,230,166,0.22));
  outline: none;
}
.donut-slice.active{
  fill: #f5e6a6;
  stroke: #e3c45a;
  filter: drop-shadow(0 8px 16px rgba(245,230,166,0.38));
  stroke-width: 2.4;
}
.donut-callout{
  transition: color 120ms ease, fill 120ms ease, stroke 120ms ease;
  cursor: pointer;
}
.donut-label{
  font-size: 10px;
  fill: rgba(255,255,255,0.82);
  font-weight: 600;
}
.donut-label-value{
  fill: rgba(255,255,255,0.65);
  font-weight: 500;
}
.donut-callout.active .donut-label,
.donut-callout.active .donut-label-value{
  fill: #fff7d1;
}
.donut-line{
  stroke: rgba(255,255,255,0.30);
  stroke-width: 1;
}
.donut-callout:focus-visible .donut-label,
.donut-callout:focus-visible .donut-label-value{
  fill: #fff7d1;
}
.donut-callout:focus-visible .donut-line{
  stroke: rgba(245,230,166,0.9);
}
.donut-callout.active .donut-line{
  stroke: rgba(245,230,166,0.9);
}
.donut-center{
  font-size: 14px;
  fill: rgba(255,255,255,0.9);
  font-weight: 700;
  letter-spacing: .02em;
}
.donut-center-sub{
  font-size: 10px;
  fill: rgba(255,255,255,0.65);
}
.donut-center-focus{
  font-size: 11px;
  fill: rgba(255,255,255,0.72);
  font-weight: 600;
}

/* === Mapas de países === */
.geo-section{
  margin: 12px 0;
}
.geo-card{
  border-radius: 20px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(12, 14, 22, 0.398), rgba(7, 8, 14, 0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.geo-header{
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.geo-title{
  font-weight: 700;
  font-size: 15px;
}
.geo-subtitle{
  color: white;
  font-size: 13px;
}
.geo-map{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  background: radial-gradient(circle at 20% 20%, rgba(245,230,166,0.08), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(127,93,255,0.06), transparent 45%),
    rgba(5, 7, 12, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.geo-empty{
  text-align: center;
  padding: 18px 10px;
  color: var(--txt-soft);
  font-size: 14px;
}
.geo-list{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 6px 10px 10px;
  background: rgba(255,255,255,0.03);
}
.geo-list-summary{
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}
.geo-list-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.geo-list-item{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geo-list-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.geo-list-row-button{
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.geo-list-row-button:hover,
.geo-list-row-button:focus-visible{
  border-color: rgba(245,230,166,0.42);
  background: rgba(245,230,166,0.07);
  outline: none;
}
.geo-list-row-button.is-active{
  border-color: rgba(245,230,166,0.62);
  background: rgba(245,230,166,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.geo-country-books{
  padding: 0 4px 4px;
  overflow: hidden;
}
.geo-list-name{
  font-weight: 700;
  letter-spacing: 0.01em;
}
.geo-list-value{
  font-size: 13px;
  color: var(--txt-soft);
}

#book-detail-backdrop{
  padding: 0;
}
.modal.book-detail-modal{
  max-height: 850px;
  margin-bottom: 0px;
  bottom: 0px;
}
.modal-footer.book-detail-footer.sticky-footer{
    margin-bottom: 0px;
  bottom: 0px;
}
.book-detail-quotes-body{
  max-height: 300px;
  min-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.book-detail-quotes-search{
border-radius: 10px;
padding: 8px;
color: white;
border: 1px solid rgba(255,255,255,0.12);
background-color: transparent;
width: 100%;
}
.book-title.card-toggle {
  cursor: pointer;
  position: relative;
  padding-right: 16px;
  user-select: none;
}

.book-title.card-toggle::after {
  content: "▾";
  position: absolute;
  right: -2px;
  top: 50%;
  opacity: .55;
  font-size: 14px;
  line-height: 1.2;
  transform: translateY(-50%);
}

.book-card.is-collapsed .book-title.card-toggle::after {
  content: "▸";
}

.book-card.is-collapsed{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  padding: 10px 12px !important;
  min-height: unset;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}

.book-card.is-collapsed .book-main{ order: 1; }
.book-card.is-collapsed .book-progress-line{ order: 2; }

.book-card.is-collapsed .book-meta,
.book-card.is-collapsed .book-pages-row,
.book-card.is-collapsed .book-actions{
  display: none !important;
}

.book-card.book-card-finished.is-collapsed{
  --progress-fill: rgba(46, 234, 123, 0.28);
}

.book-detail-quotes {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  height: 100%;
  min-height: 100%;
}

.book-detail-quotes-panel{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}

.book-detail-quotes-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.book-detail-quotes-feedback{
  min-height: 18px;
  font-size: 12px;
  color: var(--txt-soft);
}

.book-detail-quotes-feedback[data-tone="error"]{
  color: #ffb3b8;
}

.book-detail-quotes-feedback[data-tone="success"]{
  color: #9af5c4;
}

.book-detail-quotes summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
}

.book-detail-quotes summary::-webkit-details-marker { display: none; }

.book-quote-card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(245, 230, 166, 0.08), transparent 42%),
    rgba(255,255,255,.03);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.book-quote-card blockquote{
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(245,230,166,.45);
  color: #f7f7ff;
  font-size: 14px;
  line-height: 1.5;
}

.book-quote-card blockquote::before,
.book-quote-card blockquote::after{
  color: rgba(245,230,166,.85);
}

.book-quote-card blockquote::before{
  content: "“";
  margin-right: 2px;
}

.book-quote-card blockquote::after{
  content: "”";
  margin-left: 2px;
}

.book-quote-card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.book-quote-card-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.book-quote-card-author{
  font-size: 13px;
  font-weight: 600;
  color: #f0e7bb;
}

.book-quote-card-page{
  font-size: 12px;
  color: var(--txt-soft);
}

.book-quote-card-note{
  font-size: 12px;
  color: var(--txt-soft);
}

.book-quote-card-actions{
  display: flex;
  gap: 6px;
  align-items: center;
}

.book-quote-empty{
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: var(--txt-soft);
  text-align: center;
  font-size: 13px;
}

.book-detail-quote-list{
  max-height: 220px;
  overflow-y: auto;
}

.book-detail-quote-card{
  position: relative;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.book-detail-quote-text{
  margin: 0;
  padding-right: 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  font-style: italic;
  color: #f6f7fb;
}

.book-detail-quote-meta{
  margin-top: 10px;
  font-size: 0.78rem;
  opacity: 0.72;
  text-align: right;
  color: var(--txt-soft);
}

.book-detail-quote-delete{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.book-quote-modal{
  width: min(520px, calc(100vw - 20px));
}

.book-quote-modal-subtitle{
  font-size: 12px;
  color: var(--txt-soft);
  margin-top: 2px;
}

.book-quote-author-pill{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #f0e7bb;
  font-size: 12px;
}

.book-quote-modal textarea,
.book-quote-modal input{
  width: 100%;
  box-sizing: border-box;
}

.book-quote-modal textarea{
  resize: vertical;
  min-height: 112px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,8,14,.88);
  color: var(--txt);
  padding: 10px 12px;
  font: inherit;
}

.book-quote-modal .field input{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,8,14,.88);
  padding: 10px 12px;
}

.book-quote-form-error{
  min-height: 18px;
  margin: 8px 0 0;
  color: #ffb3b8;
  font-size: 12px;
}

.form-grid {
  display: grid;
  gap: 10px;
}

.form-grid.row-2 {
  grid-template-columns: 1fr 1fr;
}

.isbn-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.isbn-status {
  margin-top: 6px;
  font-size: 12px;
  color: var(--txt-soft);
}

.isbn-status[data-tone="error"] {
  color: #ff9da5;
}

.isbn-status[data-tone="success"] {
  color: #9af5c4;
}

.isbn-results {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.isbn-results-title {
  font-size: 13px;
  color: var(--txt);
  font-weight: 600;
}

.isbn-result-item {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--txt);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.12);
  transition: border-color .15s ease, transform .15s ease;
}

.isbn-result-item:hover,
.isbn-result-item:focus-visible {
  border-color: rgba(127,93,255,.6);
  outline: none;
  transform: translateY(-1px);
}

.isbn-result-title {
  font-weight: 600;
  color: var(--txt);
  font-size: 14px;
}

.isbn-result-meta {
  font-size: 12px;
  color: var(--txt-soft);
  margin-top: 2px;
}

.checkbox-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.checkbox-field-title {
  font-weight: 600;
}

.checkbox-field-hint {
  font-size: 12px;
  opacity: .65;
}

.checkbox-field input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.videosWorkspace__modal .sheet-section {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 12px;
}

.videosWorkspace__modal .sheet-section-title {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 6px;
}

.videosWorkspace__modal .field {
  gap: 4px;
  margin-bottom: 6px;
}

.videosWorkspace__modal .field input,
.videosWorkspace__modal .field select {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
  background: transparent;
  padding: 6px 0;
}

.videosWorkspace__modal .modal-header {
  padding-bottom: 4px;
}

.videosWorkspace__modal .sheet-body {
  padding-top: 6px;
}

#paginas-hoy{
  display: none;
}

/* ===== SISTEMA DE TABS: PRINCIPAL Y ESTADÍSTICAS ===== */
.books-subtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.books-subtab {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--txt-soft);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.books-subtab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}

.books-subtab.is-active {
  background: rgba(245, 230, 166, 0.16);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.186);
  color: #fffb00;
  border-color: rgba(245, 230, 166, 0.45);
  box-shadow: 0 4px 12px rgba(14, 12, 4, 0.612);
}

.books-panel {
  display: none;
}

.books-panel.is-active {
  display: block;
}

/* Ajustar padding de view-books para trabajar con tabs */
#view-books {
  padding: 1px 10px;
  padding-bottom: calc(10px + var(--nav-total-h) + var(--nav-gap, 20px));
  overflow-y: auto;
  overflow-x: hidden;
}

#books-subtabs{
  margin-top: 50px;
}

/* Chart timeline styling */
.books-chart-timeline {
  margin-top: 12px;
  margin-bottom: 12px;
}

.books-chart-timeline .chart-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 340px;
}

.books-chart-timeline .chart-card-header {
  flex-shrink: 0;
}

.chart-timeline-host {
  width: 100%;
  min-height: 280px;
  height: auto;
  overflow: visible;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px;
  box-sizing: border-box;
  position: relative;
}
.chart-empty-note{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  color: var(--txt-soft);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.books-publication-timeline{
  margin-top: 12px;
  margin-bottom: 12px;
}

.books-publication-timeline .chart-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.publication-timeline-subtitle{
  margin-top: 2px;
  color: var(--txt-soft);
  font-size: 12px;
}

.publication-timeline-scroll{
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  min-height: 88px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top, rgba(245,230,166,0.08), transparent 48%),
    rgba(255,255,255,0.025);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.publication-timeline-scroll::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 43px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(245,230,166,0.48), rgba(255,255,255,0.12));
}

.publication-year-marker{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 54px;
  border: 0;
  background: transparent;
  color: var(--txt-soft);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  cursor: pointer;
  scroll-snap-align: end;
}

.publication-year-line{
  width: 3px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22);
  transition: height .16s ease, background .16s ease, box-shadow .16s ease;
}

.publication-year-label{
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
}

.publication-year-count{
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
}

.publication-year-marker.is-active{
  color: #fff7d1;
}

.publication-year-marker.is-active .publication-year-line{
  height: 54px;
  background: #f5e6a6;
  box-shadow: 0 0 18px rgba(245,230,166,0.38);
}

.publication-year-marker:focus-visible{
  outline: 2px solid rgba(245,230,166,0.72);
  outline-offset: 4px;
  border-radius: 10px;
}

.publication-timeline-books{
  overflow: hidden;
}

.publication-book-row,
.geo-country-book-row{
  padding-top: 12px;
}

@media (max-width: 640px) {
  .books-chart-timeline .chart-card-header{
    align-items: flex-start;
  }

  .chart-header-controls{
    width: 100%;
    justify-content: flex-start;
  }

  .chart-book-select{
    flex: 1 1 160px;
    max-width: none;
  }

  .book-detail-rate-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-detail-quotes-toolbar{
    grid-template-columns: 1fr;
  }

  .book-detail-quotes-toolbar .btn{
    width: 100%;
  }

  .book-quote-card-footer{
    align-items: stretch;
  }

  .book-quote-card-actions{
    width: 100%;
    justify-content: flex-end;
  }
}
/* #region vista detallada libro */

.spec-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
#book-detail-quotes-search{
  margin: 0px;
  width: 100%;
}

/* #endregion vista detallada libro */

/* #region CONSERVAR */

/* VISTA LIBROS */
.books-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 0px;
  min-height: 200px;
}

.books-list[data-loading="1"] {
  position: relative;
}

.books-list[data-loading="1"]::before {
  content: "";
  display: block;
  min-height: 260px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(20, 17, 29, 0.92), rgba(8, 10, 18, 0.95)),
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
}
.books-list-finished{
  padding: 10px 24px 12px;
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
}
/* VISTA LIBROS */

/* VISTA SELECTORES Y BARRA BUSQUEDA */
#books-filter-selects{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 12px;
}

.books-filter-select-label{
  display: none;
}
/* VISTA SELECTORES Y BARRA BUSQUEDA */

/*  #endregion CONSERVAR */