/* ---------- Design tokens ---------- */
:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f2efe9;
  --border: #e8e4dc;
  --border-strong: #d4cfc4;
  --text: #1d1b18;
  --text-muted: #6b665d;
  --accent: #2c4a7c;
  --accent-strong: #1e3560;
  --accent-soft: #e8edf6;
  --ok: #3d7a44;
  --warn: #8a5c08;
  --error: #b4402f;
  /* Paleta categórica para gráficas (dataviz): orden fijo, nunca reasignar por rango. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;

  /* Espaciado: base 8px. Sustituye a los valores sueltos que antes decidía cada componente. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius: 14px;
  --radius-sm: 8px;
  /* Reservada para lo que de verdad flota sobre el contenido: modal, dropdown, tooltip.
     Nunca para una tarjeta en reposo — ahí el borde hace ese trabajo. */
  --shadow: 0 12px 28px -8px rgb(29 27 24 / 16%), 0 2px 6px -2px rgb(29 27 24 / 8%);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Modo oscuro: automático por preferencia del sistema (salvo que el switch de la
   cabecera haya fijado explícitamente "light"), o forzado por el switch con
   data-theme="dark" sin importar la preferencia del sistema. Los dos bloques
   repiten los mismos valores a propósito — es la única forma en CSS de combinar
   "el sistema pide oscuro" con "el usuario ha elegido oscuro" sin JS adicional. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161513;
    --surface: #1e1c19;
    --surface-2: #272521;
    --border: #2d2a26;
    --border-strong: #3d3933;
    --text: #efece6;
    --text-muted: #9c968b;
    --accent: #8fa9dc;
    --accent-strong: #b5c7ea;
    --accent-soft: #212a3d;
    --ok: #6fbf7a;
    --warn: #d9a441;
    --error: #e2776a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --shadow: 0 12px 28px -8px rgb(0 0 0 / 55%), 0 2px 6px -2px rgb(0 0 0 / 35%);
  }
}

:root[data-theme="dark"] {
  --bg: #161513;
  --surface: #1e1c19;
  --surface-2: #272521;
  --border: #2d2a26;
  --border-strong: #3d3933;
  --text: #efece6;
  --text-muted: #9c968b;
  --accent: #8fa9dc;
  --accent-strong: #b5c7ea;
  --accent-soft: #212a3d;
  --ok: #6fbf7a;
  --warn: #d9a441;
  --error: #e2776a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --shadow: 0 12px 28px -8px rgb(0 0 0 / 55%), 0 2px 6px -2px rgb(0 0 0 / 35%);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* El atributo hidden debe ganar siempre, aunque otra regla (p. ej. .form con display:flex)
   fije "display" en el mismo elemento — si no, elementos con hidden y una de esas clases
   se quedan visibles y togglear el atributo desde JS no tiene ningún efecto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

/* Entrada suave del contenido al cambiar de página; apenas perceptible, evita el "salto". */
main { animation: page-in 220ms var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }

h1, h2, h3 {
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
/* El serif queda para los títulos de página y la marca; las secciones van en sans, más legibles en interfaz. */
h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: -0.02em; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--accent); }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.container {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
}

.muted { color: var(--text-muted); }
.lead { font-size: 1.05rem; color: var(--text-muted); max-width: 56ch; }

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

/* ---------- Header ---------- */
.site-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
}

/* Marca: tres lomos de libro dibujados con CSS delante del nombre. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
}
.logo::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 4px / 5px 16px no-repeat,
    linear-gradient(var(--text), var(--text)) 7px 0 / 5px 20px no-repeat,
    linear-gradient(var(--text-muted), var(--text-muted)) 14px 6px / 5px 14px no-repeat;
  border-radius: 1px;
}

.main-nav {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
}

.main-nav a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.main-nav a:hover { color: var(--text); background: var(--surface-2); }
.main-nav a.active { background: var(--surface-2); color: var(--text); font-weight: 600; }

/* En móvil el menú pasa a una segunda fila deslizable en vez de apilarse en cuatro líneas. */
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; }
  .logo { order: 1; margin-right: auto; }
  #user-area { order: 2; }
  .lang-area { order: 3; }
  .theme-toggle-area { order: 4; }
  .main-nav {
    order: 5;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--space-2) * -1);
    padding-bottom: 2px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { white-space: nowrap; }
}
.main-nav a[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ---------- Layout ---------- */

/* ---------- Cabecera de inicio: estantería + carrusel de frases ----------
   Franja oscura fija, independiente del tema claro/oscuro del sitio — es
   una atmósfera deliberada ("biblioteca al anochecer"), no un componente
   que deba invertirse con el resto de la página. */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1915;
  color: #fff;
}

.home-hero-shelf {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 45%;
  display: block;
  z-index: 0;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 25, 21, 0.25) 0%, rgba(28, 25, 21, 0.8) 60%, rgba(28, 25, 21, 0.96) 100%);
  z-index: 1;
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 3rem, 720px);
  padding: var(--space-8) 0;
  text-align: center;
}

.quote-carousel { margin: 0; }

.quote-carousel blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  line-height: 1.4;
  margin: 0 0 var(--space-3);
  min-height: 3.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
  transition: opacity 400ms var(--ease);
}

.quote-carousel figcaption {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 70%);
  transition: opacity 400ms var(--ease);
}

.quote-fade { opacity: 0; }

.quote-dots { display: flex; gap: var(--space-2); justify-content: center; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.quote-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 35%);
  transition: background-color 300ms var(--ease);
}
.quote-dot.active { background: #fff; }

.home-hero-cta { margin-bottom: var(--space-7); }
.home-hero-cta h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.home-hero-cta .btn-primary { background: #f3ede1; color: #1d1b18; }
.home-hero-cta .btn-primary:hover { background: #fff; }
.home-hero-cta .btn-secondary { background: transparent; border-color: rgb(255 255 255 / 40%); color: #fff; }
.home-hero-cta .btn-secondary:hover { background: rgb(255 255 255 / 10%); }
.home-hero-cta .lead { color: rgb(255 255 255 / 78%); margin-inline: auto; }
.home-hero-cta p:last-child { margin: var(--space-4) 0 0; }

/* Fondo fijo y oscuro independiente del tema: el botón secundario necesita
   colores propios en vez de los tokens (que en modo oscuro casi se funden
   con el fondo) para seguir siendo legible en los dos temas. */

@media (max-width: 560px) {
  .home-hero { min-height: 44vh; }
}

.main-pad { padding-block: var(--space-6); }
main.container { padding-block: var(--space-6) var(--space-7); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

/* La cabecera de una página (título + acciones + filtros) es la portada de la sección, no una caja más:
   sin fondo ni borde, para que la lista de debajo sea lo que pesa. */
.card:has(> .row-header), .card:has(> h1:first-child:last-child) {
  background: transparent;
  border: none;
  padding: 0 0 var(--space-2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.grid .card { margin-bottom: 0; }
a.card, .grid .card { transition: border-color 160ms var(--ease); }
.grid .card:hover { border-color: var(--border-strong); }

/* ---------- Planes y precios ---------- */
.interval-toggle { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; flex-wrap: wrap; }
.plan-card { display: flex; flex-direction: column; }
.plan-card-plus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-price { font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 var(--space-4); }
.plan-features { list-style: none; margin: 0 0 var(--space-5); padding: 0; flex: 1; }
.plan-features li { position: relative; padding: 0.3rem 0 0.3rem 1.5rem; }
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) scale(0.9);
}
.interval-toggle .btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.container.medium { max-width: 760px; }

/* ---------- Status list ---------- */
.status-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.status-list li { display: flex; align-items: center; gap: var(--space-2); padding: 0.2rem 0; }

.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-muted);
}

.dot-ok { background: var(--ok); }
.dot-error { background: var(--error); }
.dot-wait { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0;
  margin-top: var(--space-7);
  font-size: 0.88rem;
}

/* ---------- Forms ---------- */
.container.narrow { max-width: 440px; }

.form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }

.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.95rem; }

.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 0.55rem var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  appearance: none;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filters input:focus,
.filters select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.field > span:first-child { font-weight: 500; font-size: 0.88rem; }

.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-6);
}

.field small { color: var(--text-muted); }

/* Etiqueta + control en línea, para un filtro suelto dentro de una cabecera de sección. */
.field-inline { display: flex; align-items: center; gap: var(--space-2); font-size: 0.88rem; font-weight: 500; }
.field-inline select {
  font: inherit;
  padding: 0.4rem var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-5);
}

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), transform 100ms var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #11151f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #11151f; } }
.btn-primary:hover { background: var(--accent-strong); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  padding-inline: var(--space-1);
}
.btn-ghost:hover { text-decoration: underline; }

.btn-danger {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--error);
}
.btn-danger:hover { background: color-mix(in srgb, var(--error) 12%, var(--surface)); border-color: var(--error); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-icon-expand {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: background-color 140ms var(--ease), padding-right 140ms var(--ease);
}
.btn-icon-expand:hover,
.btn-icon-expand:focus-visible {
  background: var(--surface-2);
  padding-right: var(--space-3);
}
.btn-icon-expand-icon { flex: 0 0 auto; width: 16px; height: 16px; margin: 0 8px; }
.btn-icon-expand-label {
  display: inline-block;
  max-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transition: max-width 140ms var(--ease), opacity 100ms var(--ease);
}
.btn-icon-expand:hover .btn-icon-expand-label,
.btn-icon-expand:focus-visible .btn-icon-expand-label {
  max-width: 140px;
  opacity: 1;
  transition: max-width 140ms var(--ease), opacity 140ms var(--ease) 40ms;
}

.small { font-size: 0.9rem; }

/* ---------- Alerts ---------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin: var(--space-4) 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.alert-error { background: color-mix(in srgb, var(--error) 15%, var(--surface)); color: var(--error); }
.alert-ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); }
.alert-warn { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); color: var(--warn); }
.alert-info { background: var(--accent-soft); color: var(--accent); }

/* ---------- Listas de filas (solicitudes, resultados de búsqueda, actividad, comentarios) ----------
   Una fila con divisor, no una caja con borde — la tarjeta se reserva para el libro. */
.pending-list, .search-results, .feed-list, .comment-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.pending-item, .search-result, .feed-item, .comment-item, .loan-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pending-item:last-child, .search-result:last-child, .feed-item:last-child,
.comment-item:last-child, .loan-history-item:last-child {
  border-bottom: none;
}

.pending-item { justify-content: space-between; }
.pending-item .actions { display: flex; gap: var(--space-2); }

.search-result img { width: 44px; height: auto; border-radius: 3px 5px 5px 3px; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); flex: 0 0 auto; }
.search-result div { flex: 1; }

.feed-item { align-items: baseline; gap: 0.3rem; }
.feed-user { font-weight: 600; }

.comment-item { display: block; padding: var(--space-2) 0; font-size: 0.92rem; }

.loan-history-list { list-style: none; margin: var(--space-3) 0; padding: 0; }
.loan-history-item { display: block; }
.loan-history-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.loan-history-head span:first-child { font-weight: 600; }

.user-menu { display: flex; align-items: center; gap: var(--space-2); }

.lang-area { display: flex; align-items: center; }
.lang-select {
  padding: 0.35rem var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
}

/* ---------- Switch claro/oscuro ---------- */
.theme-toggle-area { display: flex; align-items: center; }

.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 28px;
  padding: 0 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.theme-toggle:hover { border-color: var(--text-muted); }

.theme-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease);
}
.theme-toggle[aria-checked="true"] .theme-toggle-knob { transform: translateX(26px); }

.theme-toggle-icon {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 140ms var(--ease);
}
.theme-toggle[aria-checked="false"] .theme-toggle-sun { color: var(--warn); }
.theme-toggle[aria-checked="true"] .theme-toggle-moon { color: var(--accent); }

/* ---------- Library page ---------- */
.row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.row-header h1 { margin: 0; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.filters input,
.filters select {
  font: inherit;
  padding: 0.55rem var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  appearance: none;
}
.filters select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-5);
}

.filters input[type="search"] {
  flex: 1 1 260px;
  padding-left: 2.4rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23908a80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 0.8rem 50% / 16px no-repeat;
}

.add-search { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.add-search input {
  flex: 1 1 240px;
  font: inherit;
  padding: 0.55rem var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.add-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cover-preview { width: 80px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.form-section { margin-bottom: var(--space-5); }
.form-section:last-of-type { margin-bottom: 0; }

.form-actions { display: flex; gap: var(--space-2); }

.library-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: var(--space-3);
}

.book-card {
  display: flex;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.book-card:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px -10px rgb(29 27 24 / 25%); }

.book-card-skeleton { height: 150px; border-radius: var(--radius); }

.book-card img { width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px 6px 6px 4px; flex: 0 0 auto; box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 2px 3px 8px -2px rgb(0 0 0 / 25%); }

.book-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  aspect-ratio: 2 / 3;
  border-radius: 4px 6px 6px 4px;
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.book-cover-placeholder svg { width: 26px; height: 26px; }

.saga-heading {
  grid-column: 1 / -1;
  font-weight: 650;
  font-size: 1rem;
  color: var(--text);
  padding: var(--space-2) 0 0.35rem;
  border-bottom: 1px solid var(--border);
  margin-top: var(--space-4);
}

.saga-heading:first-child { margin-top: 0; }

.saga-count { font-family: var(--font); font-weight: 400; font-size: 0.8rem; color: var(--text-muted); margin-left: var(--space-2); }

.book-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1; padding-block: 2px; }
.book-body strong { line-height: 1.3; font-weight: 650; font-size: 1rem; letter-spacing: -0.01em; }

.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.badge {
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); font-weight: 600; }
.badge-muted { background: var(--surface-2); color: var(--text-muted); }

.book-body .actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: 0.25rem; max-width: 100%; }
.book-body .actions select {
  font: inherit;
  padding: 0.3rem var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  max-width: 100%;
  appearance: none;
}

/* ---------- Menú "⋯" de acciones de cada libro ---------- */
.card-menu-wrapper { position: relative; flex: 0 0 auto; }

.card-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.card-menu-trigger:hover { background: var(--surface-2); color: var(--text); }
.card-menu-trigger svg { width: 16px; height: 16px; }

.card-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-2);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.88rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.card-menu-item:hover { background: var(--surface-2); }
.card-menu-item.danger { color: var(--error); }

.card-menu-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-1) 0; }

/* ---------- Formulario de edición (siempre dentro del modal) ---------- */
.edit-form {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}

.edit-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.edit-form .field { font-size: 0.88rem; }

/* ---------- Location picker (quick add inline) ---------- */
.location-picker { display: flex; gap: var(--space-2); }
.location-picker select { flex: 1; min-width: 0; }

.btn-small { padding: 0.4rem var(--space-2); font-size: 0.82rem; white-space: nowrap; }

.new-location-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.new-location-form input,
.new-location-form select {
  font: inherit;
  padding: 0.4rem var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  flex: 1 1 160px;
  min-width: 0;
  appearance: none;
}

.new-location-form .alert { flex-basis: 100%; margin: 0.3rem 0 0; }

/* ---------- Modal de edición de libro ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(20 18 15 / 55%);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 100;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-box .edit-form { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- Menú de usuario (idioma, notificaciones, sesión) ---------- */
.user-menu-wrapper { position: relative; }

.user-menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}
.user-menu-trigger:hover { background: var(--surface-2); }

.user-menu-name {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-chevron { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; }

.user-menu-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--error);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  min-width: 1.2rem;
  text-align: center;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  width: min(300px, 90vw);
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.user-menu-section .lang-select { width: 100%; }

.user-menu-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.user-menu-section-head .eyebrow { margin-bottom: 0; }

.user-menu-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

.user-menu-link {
  display: block;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  padding: 0;
  color: var(--text);
  text-decoration: none;
}
.user-menu-link:hover { text-decoration: underline; }

.user-menu-logout {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--error);
  cursor: pointer;
}
.user-menu-logout:hover { text-decoration: underline; }

.notif-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.notif-item { padding: 0.4rem var(--space-2); border-radius: var(--radius-sm); font-size: 0.88rem; background: var(--bg); }
.notif-item.notif-unread { background: var(--accent-soft); }

/* ---------- Reseñas (perfil de amigo) ---------- */
.review-box {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0 var(--space-4);
}

/* ---------- Estado vacío ---------- */
.empty-state { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
#empty-message, [id$="-empty"] { padding: var(--space-5) var(--space-4); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.92rem; }
[id$="-empty"][hidden], #empty-message[hidden] { display: none; }
.empty-state p { margin: 0 0 var(--space-2); }

/* ---------- Carga (esqueleto) ---------- */
.skeleton-row { display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton-bar {
  height: 12px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.skeleton-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent);
  animation: shimmer 1.4s infinite;
}
@media (prefers-color-scheme: dark) {
  .skeleton-bar::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 8%), transparent); }
}
.skeleton-block {
  height: 200px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent);
  animation: shimmer 1.4s infinite;
}
@media (prefers-color-scheme: dark) {
  .skeleton-block::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 8%), transparent); }
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Gráficas (dashboard de admin) ---------- */

.metric-card + .metric-card { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.metric-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.metric-head h3 { margin: 0; font-size: 1rem; }
.metric-total { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }

.chart-svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-axis-label { fill: var(--text-muted); font-size: 11px; }
.chart-bar { transition: opacity 140ms var(--ease); cursor: pointer; }
.chart-bar:hover, .chart-bar:focus-visible { opacity: 0.75; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: var(--surface); stroke-width: 2; cursor: pointer; transition: r 140ms var(--ease); }
.chart-dot:hover, .chart-dot:focus-visible { r: 5; }
.chart-empty { padding: var(--space-6) 0; text-align: center; }

.chart-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--text);
  color: var(--bg);
  padding: 0.35rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  box-shadow: var(--shadow);
}
.chart-tooltip strong { font-size: 0.95rem; }

.hbar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hbar-row { display: grid; grid-template-columns: minmax(90px, 35%) 1fr auto; align-items: center; gap: var(--space-2); }
.hbar-label { font-size: 0.85rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 999px; }
.hbar-value { font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }

.kpi-cluster + .kpi-cluster { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-2); }
.kpi-stat { display: flex; flex-direction: column; gap: 2px; }
.kpi-value { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 0.82rem; color: var(--text-muted); }

.table-scroll { overflow-x: auto; }
#ranking-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
#ranking-table th, #ranking-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
#ranking-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
#ranking-table td:not(:first-child), #ranking-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Caja del enlace de invitación a un círculo (solo visible para sus admins). */
.invite-box {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.invite-box input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
}


/* El reclamo de la portada se sirve visible para que quien llega sin sesión lo vea de inmediato,
   incluso antes de que responda la API. Solo se esconde si el detector de sesión del <head> ha
   encontrado un token de Supabase; main.js corrige después con el dato real del servidor. */
:root[data-session="yes"] .home-hero-cta {
  display: none;
}

/* Páginas legales: texto largo y seguido, más cómodo de leer con medida corta y aire. */
.legal h2 {
  margin-top: 2rem;
  font-size: 1.15rem;
}

.legal p,
.legal li {
  max-width: 68ch;
  line-height: 1.65;
}

.legal ul {
  padding-left: 1.2rem;
}

.legal li {
  margin-bottom: 0.6rem;
}

/* Panel de importación de libros (CSV de Goodreads u hoja de cálculo). */
.import-help { margin: 0.75rem 0 1rem; }
.import-help summary { cursor: pointer; color: var(--text-muted); font-size: 0.95rem; }
.import-help ol { margin: 0.5rem 0 0; padding-left: 1.25rem; color: var(--text-muted); font-size: 0.95rem; }
.import-sample { margin: 0.5rem 0; padding-left: 1.25rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0 1rem; font-size: 0.95rem; }
.photo-import { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.photo-import h3 { margin: 0 0 0.25rem; }
.photo-list { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.5rem; }
.photo-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.photo-list li input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 600px) {
  .photo-list li { grid-template-columns: auto minmax(0, 1fr); }
  .photo-list li input[type="text"]:last-child { grid-column: 2; }
}

.scanner-dialog { width: min(32rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.scanner-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.scanner-dialog h2 { margin: 0 0 0.75rem; }
.scanner-view { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 8px; overflow: hidden; }
.scanner-view video { width: 100%; height: 100%; object-fit: cover; }
.scanner-guide { position: absolute; inset: 30% 10%; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.25); pointer-events: none; }
.scanner-error { color: var(--error); }

/* ---------- Tutorial ---------- */
.tutorial-head { margin-bottom: var(--space-6); }
.tutorial-toc { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tutorial-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); counter-reset: toc; }
.tutorial-toc li { counter-increment: toc; }
.tutorial-toc li::before { content: counter(toc) "."; color: var(--text-muted); margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.tutorial-toc a { text-decoration: none; color: var(--text); font-weight: 500; }
.tutorial-toc a:hover { color: var(--accent); }

.tutorial-section { margin-top: var(--space-7); scroll-margin-top: 5.5rem; }
.tutorial-section > h2 { font-size: 1.4rem; margin-bottom: var(--space-1); }
.tutorial-steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }

.tutorial-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-3); }
.tutorial-step-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.tutorial-step-body h3 { margin: 0.3rem 0 var(--space-1); font-size: 1.05rem; }
.tutorial-step-body p { margin: 0; color: var(--text-muted); max-width: 62ch; }
.tutorial-shot { grid-column: 2; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 0 10px 24px -14px rgb(29 27 24 / 28%); }
.tutorial-shot img { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .tutorial-step { grid-template-columns: 1fr; }
  .tutorial-shot { grid-column: 1; }
  .tutorial-step-num { width: 1.75rem; height: 1.75rem; }
  .tutorial-toc ol { flex-direction: column; }
}
.container.tutorial { max-width: 900px; }

.load-more { display: flex; justify-content: center; margin: var(--space-5) 0 0; }

/* Plus sin cobros activos: la tarjeta se ve, pero atenuada y sin acento, para que no parezca contratable. */
.plan-card-soon { border-color: var(--border); box-shadow: none; }
.plan-card-soon .plan-price { color: var(--text-muted); font-size: 1.25rem; }

/* ---------- Botón de acceso con Google ----------
   Sigue las pautas de marca de Google (https://developers.google.com/identity/branding-guidelines):
   fondo blanco (o casi negro en tema oscuro), borde fino, logotipo "G" a color de 18 px y texto en
   peso medio. No usa los tokens de la web a propósito: tiene que verse como el botón que la gente
   reconoce en cualquier otro sitio. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #747775;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-family: Roboto, var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  cursor: pointer;
  transition: background-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); }
.btn-google:active { background: #f1f3f4; }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; }
/* El "o" que separa el formulario del botón, centrado y con aire; y aire también debajo del botón. */
.card > p:has(+ .btn-google) { text-align: center; margin: var(--space-4) 0 var(--space-3); }
.btn-google { margin-bottom: var(--space-5); }
.btn-google .google-g { width: 18px; height: 18px; flex: 0 0 auto; }
:root[data-theme="dark"] .btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
:root[data-theme="dark"] .btn-google:hover { background: #1c1c1e; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
  :root:not([data-theme="light"]) .btn-google:hover { background: #1c1c1e; box-shadow: none; }
}