/* Fuentes alojadas en BooksIve (antes, Google Fonts): una conexión externa menos en el camino crítico del pintado y
 * ninguna IP de visitante enviada a Google. Mismos bloques, pesos y rangos de caracteres que servía Google, así que el
 * texto se ve igual: `latin` cubre español, inglés, francés y alemán; `latin-ext` solo se descarga si aparece un
 * carácter que no está en `latin` (nombres de autores polacos, checos, etc.). Los ficheros llevan la versión en el
 * nombre porque se sirven con caché de un año: si se actualizan, hay que cambiar el nombre (ver static/fonts/README.md). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-italic-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-italic-v15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-v15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-v15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f2efe9;
  --border: #e8e4dc;
  --border-strong: #d4cfc4;
  --text: #1d1b18;
  --text-muted: #6b665d;
  --accent: #2c4a7c;
  --star-on: #e0a526;
  --star-off: #d9d3c6;
  --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%);
    --star-on: #e0a526;
    --star-off: #3d3933;
  }
}

: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%);
  --star-on: #e0a526;
  --star-off: #3d3933;
}

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

/* ---------- Portada para quien llega sin sesión ----------
   Titular de beneficio, botón de registro, línea de confianza y un móvil con el producto; debajo, «Cómo funciona».
   Con sesión (`data-session="yes"`, ver el <head> de index.html) todo esto se esconde y la portada es el muro de siempre:
   la cita literaria rota solo para quien tiene sesión. */
.btn-lg { font-size: 1.05rem; padding: 0.85rem var(--space-6); }

.home-hero-cta { display: grid; gap: var(--space-6); align-items: center; margin-bottom: 0; }
.home-hero-text .lead { margin-top: var(--space-3); }
.home-hero-actions { margin: var(--space-5) 0 0; }
.home-hero-trust { margin: var(--space-3) 0 0; font-size: 0.9rem; letter-spacing: 0.02em; color: rgb(255 255 255 / 78%); }
.home-hero-login { margin: var(--space-4) 0 0; font-size: 0.9rem; color: rgb(255 255 255 / 72%); }
.home-hero-login a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.home-hero-login a:hover { text-decoration-thickness: 2px; }

/* Un móvil con el producto. En pantallas estrechas solo asoma la parte de arriba, difuminada, para no empujar el botón. */
.home-hero-visual { display: flex; justify-content: center; max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.phone-frame {
  width: min(100%, 250px);
  border: 7px solid #2a2622;
  border-radius: 34px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 48px -18px rgb(0 0 0 / 55%);
}
.phone-frame img { display: block; width: 100%; height: auto; }

:root:not([data-session="yes"]) .home-hero { min-height: 0; }
:root:not([data-session="yes"]) .home-hero-inner { width: min(100% - 2rem, 1040px); padding-block: var(--space-7) var(--space-6); }
:root:not([data-session="yes"]) .quote-carousel,
:root:not([data-session="yes"]) .quote-dots { display: none; }

@media (min-width: 880px) {
  .home-hero-cta { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); }
  .home-hero-text { text-align: left; }
  .home-hero-cta .lead { margin-inline: 0; }
  .home-hero-visual { max-height: none; -webkit-mask-image: none; mask-image: none; }
}

.how-it-works { padding-block: var(--space-7); text-align: center; }
.how-it-works > h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: var(--space-6); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); }
.how-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.how-step-text { max-width: 30ch; }
.how-step-text h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1.15rem; }
.how-step-text p { margin: 0; }
.how-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
:root[data-theme="dark"] .how-num { color: #11151f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .how-num { color: #11151f; } }
.phone-frame-sm { width: min(100%, 220px); box-shadow: var(--shadow); margin-top: auto; } /* las columnas miden lo mismo: los móviles quedan a la misma altura aunque los textos ocupen distinto */
:root[data-theme="dark"] .phone-frame-sm { border-color: #3d3933; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone-frame-sm { border-color: #3d3933; } }
.how-cta { margin: var(--space-7) 0 0; }
.how-more { margin: var(--space-4) 0 0; font-size: 0.95rem; }
.how-more a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 880px) { .how-steps { grid-template-columns: 1fr; } }
:root[data-session="yes"] .how-it-works { display: none; }

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

/* El pie queda siempre al final de la ventana, aunque la página tenga poco contenido (una biblioteca vacía, un 404): el
 * cuerpo es una columna que ocupa al menos toda la altura y el contenido se estira para empujar el pie hacia abajo. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ---------- 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); }
/* Fila de un libro del círculo: título a la izquierda; a la derecha, el propietario (pequeño y suave) y el botón. */
.book-row-title { flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.pending-item .actions { align-items: center; }
.book-row-owner { font-size: 0.82rem; color: var(--text-muted); text-align: right; }

.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 {
  position: relative;
  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%); }

/* En la biblioteca, el navegador no calcula el diseño ni pinta las tarjetas que no se ven (con 120 libros, recalcular el
 * layout pasa de ~12 ms a menos de 1 ms). `auto` en el tamaño recuerda la altura real una vez vista, y 160px es la
 * estimación hasta entonces, para que la barra de desplazamiento no salte. Esa técnica recorta lo que se sale de la
 * tarjeta, y el menú «⋯» se sale por abajo: mientras está abierto (clase puesta por library.js) no se aplica. */
#library-list > .book-card { content-visibility: auto; contain-intrinsic-size: auto 160px; }
#library-list > .book-card.has-menu-open { content-visibility: visible; }

.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);
}
/* Icono del libro, dibujado con una máscara (la misma figura que antes era un SVG dentro del marcador): sin nodos extra. */
.book-cover-placeholder::before {
  content: "";
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: var(--icon-book) center / contain no-repeat;
  mask: var(--icon-book) center / contain no-repeat;
}

.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-warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); 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;
}
/* El selector de estado de lectura nace con una sola opción (ver library.js). El navegador dimensionaba el ancho por la
 * opción más larga («Estado de lectura…»), igual en todas las tarjetas; sin las demás, hay que fijarlo para que no se
 * encoja según el estado. 8.875rem = el ancho de antes con el texto en español. */
.book-body .actions select.reading-select { min-width: min(8.875rem, 100%); }

/* ---------- 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); }
/* Los tres puntos, dibujados con una máscara (antes, un SVG con tres círculos dentro de cada botón). */
.card-menu-trigger::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-dots) center / contain no-repeat;
  mask: var(--icon-dots) center / contain no-repeat;
}

.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 botón va arriba del formulario (registro y entrada): primero Google, después el separador que dice qué hay debajo
   («o regístrate con tu correo») y el formulario. En el registro, la aceptación de los términos va pegada al botón,
   porque tocarlo también crea la cuenta. */
.sso { margin: var(--space-4) 0 var(--space-5); }
.sso-terms { text-align: center; margin: var(--space-3) 0 0; }
.sso-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.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; }
}

/* Diálogo de confirmación de una acción que no se puede deshacer (borrar la cuenta). */
.confirm-dialog { width: min(30rem, calc(100vw - 2rem)); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgb(20 18 15 / 55%); backdrop-filter: blur(3px); }
.confirm-dialog .form { margin-top: 0; }
.confirm-phrase { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; background: var(--surface-2); border-radius: 4px; padding: 0.1rem 0.4rem; user-select: all; }

.not-found { text-align: center; padding-block: var(--space-7); }
.not-found .eyebrow { font-size: 0.9rem; }

/* ---------- Multiselección de libros ---------- */
.selection-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.selection-bar .selection-all { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; font-size: 0.9rem; }
.selection-bar #library-selected-count, .selection-bar #books-selected-count { flex: 1; }
.selection-bar input[type="checkbox"], .row-select, .book-select { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.row-select { flex: 0 0 auto; margin-right: var(--space-2); }

/* En la tarjeta, la casilla flota sobre la esquina de la portada. */
.book-card.is-selectable { position: relative; cursor: pointer; }
.book-card .book-select { position: absolute; top: calc(var(--space-3) + 6px); left: calc(var(--space-3) + 6px); z-index: 1; box-shadow: 0 0 0 3px rgb(255 255 255 / 85%); border-radius: 3px; }
.book-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Botones de un diálogo repartidos a los extremos: uno en cada esquina. */
.form-actions-split { justify-content: space-between; margin-top: var(--space-4); }

/* ---------- Preguntas frecuentes ---------- */
.faq h1 { margin-bottom: var(--space-2); }
.faq-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.faq-item:last-of-type { border-bottom: none; }
.faq-item h2 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.faq-item p { margin: 0; color: var(--text-muted); max-width: 68ch; }
.faq-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.faq-cta .btn { text-decoration: none; }

/* ---------- Requisitos de la contraseña ---------- */
.password-rules { list-style: none; margin: calc(var(--space-2) * -1) 0 var(--space-3); padding: 0; display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--text-muted); }
.password-rules li::before { content: "○"; display: inline-block; width: 1.25rem; }
.password-rules li.met { color: var(--ok); }
.password-rules li.met::before { content: "✓"; font-weight: 700; }

/* ---------- Recomendaciones ---------- */
.reco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.reco-item { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.reco-cover { width: 64px; min-height: 96px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.reco-cover img { display: block; width: 64px; height: auto; }
.reco-body h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.reco-body p { margin: 0 0 var(--space-2); }
.reco-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.reco-actions .btn { text-decoration: none; }
@media (max-width: 540px) { .reco-item { grid-template-columns: 48px 1fr; } .reco-cover, .reco-cover img { width: 48px; } }
#reco-affiliate { margin-top: var(--space-4); }

/* ---------- Insignias ---------- */
.badge-family { margin-top: var(--space-5); }
.badge-family > h2 { margin-bottom: var(--space-3); }
.badge-row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.badge-row:first-of-type { border-top: 0; }
.badge-row-title { flex: 0 0 11rem; font-weight: 600; }
.badge-row-title .muted { display: block; font-weight: 400; font-size: .85rem; }
.badge-pair { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.badge-item { display: flex; flex-direction: column; align-items: center; width: 8.5rem; text-align: center; font-size: .85rem; }
.badge-item img { width: 6rem; height: 6rem; }
.badge-item.is-locked img { filter: grayscale(1); opacity: .5; }
.badge-item .badge-caption { margin-top: var(--space-2); }
.badge-item.is-locked .badge-caption { color: var(--text-muted); }
.feed-badge { vertical-align: middle; margin-right: .35rem; }
@media (max-width: 36rem) {
  .badge-row { flex-direction: column; gap: var(--space-2); }
  .badge-row-title { flex-basis: auto; }
}

/** Listas de libros de la portada: filas horizontales de portadas con enlace de afiliado. */
.book-lists { margin: var(--space-6) 0; }
.book-list { margin-bottom: var(--space-5); }
.book-list h3 { margin: 0 0 var(--space-3); }
.book-list-track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-1) var(--space-1) var(--space-3);
  scroll-snap-type: x proximity;
}
.book-list-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  line-height: 0;
  box-shadow: var(--shadow);
  transition: transform 150ms var(--ease);
}
.book-list-item:hover, .book-list-item:focus-visible { transform: translateY(-3px); }
.book-list-item img {
  width: 128px;
  height: 192px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2, #eee);
}

/** Valoración en la tarjeta del libro: cinco estrellas y la nota; en pantallas estrechas, una estrella y la nota.
 * Las estrellas son un solo elemento: una máscara con la figura de la estrella repetida cada 17px (16px + 1px de
 * separación) y un degradado duro que pinta de `--star-on` las `--rating` primeras y de `--star-off` el resto. */
:root {
  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.5 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E");
  --icon-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='1.75'/%3E%3Ccircle cx='12' cy='12' r='1.75'/%3E%3Ccircle cx='12' cy='19' r='1.75'/%3E%3C/svg%3E");
  --icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
}
.book-rating { display: flex; align-items: center; gap: var(--space-2); margin: 2px 0; font-size: 0.875rem; font-weight: 600; }
.book-rating .rating-stars {
  flex: 0 0 auto;
  width: 84px; /* 5 × 16px + 4 × 1px */
  height: 16px;
  background: linear-gradient(to right, var(--star-on) calc(var(--rating, 0) * 17px), var(--star-off) 0);
  -webkit-mask: var(--icon-star) 0 0 / 17px 16px repeat-x;
  mask: var(--icon-star) 0 0 / 17px 16px repeat-x;
}
@media (max-width: 480px) {
  /* Una sola estrella (siempre rellena: la nota mínima es 1) y el número. */
  .book-rating .rating-stars { width: 16px; }
}

/** Franja diagonal «Prestado» en la esquina inferior derecha de la tarjeta del libro. */
.loan-ribbon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-bottom-right-radius: var(--radius);
  pointer-events: none;
}
.loan-ribbon span {
  position: absolute;
  right: -34px;
  bottom: 16px;
  width: 140px;
  padding: 3px 0;
  text-align: center;
  transform: rotate(-45deg);
  background: #b45309;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

/** Fila de un préstamo: portada pequeña a la izquierda, el texto en el centro y los botones a la derecha
 * (en pantallas estrechas los botones pasan debajo). Clase propia: `.pending-item` se usa también en otras páginas. */
.loan-item .loan-cover { width: 48px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; flex: 0 0 auto; border-radius: 3px 4px 4px 3px; box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 1px 2px 5px -2px rgb(0 0 0 / 25%); }
.loan-item .book-cover-placeholder.loan-cover { box-shadow: none; }
.loan-item .book-cover-placeholder.loan-cover::before { width: 18px; height: 18px; }
.loan-item .loan-info { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/** Avatar circular de una persona (js/avatar.js): foto o avatar generado. El tamaño lo da --avatar-size. */
.avatar {
  --avatar-size: 40px;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  vertical-align: middle;
}
.avatar img, .avatar svg { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.avatar-bg { fill: var(--surface-2); }
/* Avatar + nombre en una fila (Amigos, solicitudes, búsqueda). */
.person { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.search-result .person { flex: 1; }
.profile-title { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.profile-title h1 { margin: 0; }
.avatar-editor { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-5); }
.avatar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/** Desplegable con los amigos de un amigo (biblioteca de un amigo). */
.friends-of-friend { margin: 0; padding: var(--space-3) var(--space-4); }
.friends-of-friend summary { cursor: pointer; font-weight: 600; padding: var(--space-1) 0; }
.friends-of-friend[open] summary { margin-bottom: var(--space-2); }
.fof-list { max-height: 60vh; overflow-y: auto; margin-top: var(--space-2); }
/* Biblioteca de un amigo: su biblioteca a la izquierda y la lista de sus amigos en una columna a la derecha. En
   pantallas estrechas las columnas se apilan y la lista de amigos pasa arriba (cerrada, ocupa una línea). */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.profile-side { position: sticky; top: var(--space-4); }
/* Fila de la lista de amigos: avatar y nombre a la izquierda (el nombre se ajusta) y la acción pequeña siempre a la derecha. */
.profile-side .person { gap: var(--space-2); flex: 1 1 auto; }
.profile-side .pending-item { flex-wrap: nowrap; gap: var(--space-2); }
.profile-side .pending-item > .btn, .profile-side .pending-item > .badge { flex: 0 0 auto; }
.profile-side .btn-small { padding: 0.2rem 0.55rem; font-size: 0.78rem; }
@media (max-width: 860px) {
  .profile-layout { grid-template-columns: 1fr; gap: var(--space-3); }
  .profile-side { position: static; order: -1; }
}

/** Opciones de importar («Desde CSV», «Desde una foto») dentro del panel de «Añadir libro»: aparecen bajo los botones, separadas del resto por una línea. */
.import-option { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.import-option h3 { margin: 0 0 var(--space-2); }
.add-search .btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/** Paginación de «Actividad reciente»: «Más recientes» a la izquierda y «Más antiguas» a la derecha. */
.feed-pager { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.feed-pager-start { display: flex; gap: var(--space-2); }
.feed-pager-first { padding-inline: var(--space-3); display: inline-flex; align-items: center; }

/* ---------- Vista de estantería (biblioteca) ---------- */
.shelf-view { margin-top: var(--space-4); }
.shelf-view h2, .shelf-view h3 { margin: 0; }
.shelf-view .row-header p { margin: 2px 0 0; }
.shelf-layout { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-3); }
.shelf-stage { position: relative; padding-bottom: var(--space-3); }
.shelf-svg { display: block; width: 100%; height: auto; max-height: 760px; overflow: visible; }
.shelf-skeleton { height: 280px; margin-top: var(--space-3); }
.shelf-empty { text-align: center; margin: var(--space-2) 0 0; }

.shelf-reading h3 { margin-bottom: var(--space-2); font-size: 1rem; }
.shelf-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.shelf-table th, .shelf-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.shelf-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.shelf-book-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 150px; }
.shelf-cover { flex: none; width: 36px; height: 54px; object-fit: cover; border-radius: 3px; background: var(--surface-2); }

/* Movimiento lento y solo con CSS: los libros entran uno a uno y los que estás leyendo asoman y vuelven a su sitio. */
/* Etiqueta con el título del libro bajo el puntero, y el libro un poco más claro. */
.shelf-book[data-i] { cursor: default; transition: filter 120ms var(--ease); }
.shelf-book[data-i]:hover { filter: brightness(1.16); }
.shelf-tooltip {
  position: absolute;
  z-index: 5;
  max-width: min(260px, 90%);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 0.85rem;
  line-height: 1.3;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.shelf-tooltip strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.shelf-tooltip small { display: block; margin-top: 1px; opacity: 0.75; font-size: 0.78rem; }

@keyframes shelf-in { from { opacity: 0; transform: translateY(-14px); } }
@keyframes shelf-nudge {
  0%, 100% { transform: translate(var(--px), var(--py)); }
  50% { transform: translate(calc(var(--px) * 1.6), calc(var(--py) * 1.6)); }
}
.shelf-book { animation: shelf-in 520ms var(--ease) backwards; animation-delay: var(--d, 0ms); }
.shelf-pull { transform: translate(var(--px), var(--py)); animation: shelf-nudge 6s ease-in-out infinite; }

@media (max-width: 760px) {
  .shelf-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-book, .shelf-pull, .room-light { animation: none; }
}

/* ---------- Feature enabler (Admin) ---------- */
.features-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.feature-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.feature-text p { margin: 2px 0 0; }
.feature-switch { display: flex; align-items: center; gap: var(--space-2); flex: none; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); }
.feature-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feature-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); transition: background 160ms var(--ease); }
.feature-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform 160ms var(--ease); }
.feature-switch input:checked + .feature-track { background: var(--accent); }
.feature-switch input:checked + .feature-track::after { transform: translateX(18px); }
.feature-switch input:focus-visible + .feature-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.feature-switch input:disabled + .feature-track { opacity: 0.6; }

/* Etiqueta de una función que solo ven los administradores. */
.feature-tag { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 600; }

/* Habitación de la estantería: cada parte del dibujo lleva una clase para que cambie con el tema. */
:root {
  --room-wall-back: #dfe6df;
  --room-wall-side: #cdd6cd;
  --room-wall-cut: #bfc9bf;
  --room-floor-top: #c9b79a;
  --room-floor-front: #a99674;
  --room-floor-side: #917f60;
  --room-floor-line: #b8a58a;
  --room-skirt-front: #f1ece2;
  --room-skirt-side: #dcd6c9;
  --room-skirt-top: #fbf8f2;
  --room-rug: #b9644d;
  --room-rug-border: #8f4a39;
  --room-shadow: rgb(40 30 20 / 16%);
  --room-light: rgb(255 244 205 / 55%);
  --room-window-frame: #f4efe5;
  --room-window-glass: #b9d4e6;
  --room-poster: #faf6ec;
  --room-poster-border: #c9bda3;
  --room-poster-tape: #e0cf9f;
  --room-poster-ink: #3a342b;
  --room-poster-muted: #7a7366;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --room-wall-back: #2b322d;
    --room-wall-side: #232a25;
    --room-wall-cut: #1b211d;
    --room-floor-top: #4a4034;
    --room-floor-front: #372f26;
    --room-floor-side: #2b251e;
    --room-floor-line: #3f362b;
    --room-skirt-front: #4a4d47;
    --room-skirt-side: #3b3e39;
    --room-skirt-top: #5a5d56;
    --room-rug: #7d4638;
    --room-rug-border: #5c3328;
    --room-shadow: rgb(0 0 0 / 35%);
    --room-light: rgb(255 226 150 / 18%);
    --room-window-frame: #5a5d56;
    --room-window-glass: #2f4658;
    --room-poster: #e8e1d2;
    --room-poster-border: #6d6556;
    --room-poster-tape: #a8955f;
  }
}
:root[data-theme="dark"] {
  --room-wall-back: #2b322d;
  --room-wall-side: #232a25;
  --room-wall-cut: #1b211d;
  --room-floor-top: #4a4034;
  --room-floor-front: #372f26;
  --room-floor-side: #2b251e;
  --room-floor-line: #3f362b;
  --room-skirt-front: #4a4d47;
  --room-skirt-side: #3b3e39;
  --room-skirt-top: #5a5d56;
  --room-rug: #7d4638;
  --room-rug-border: #5c3328;
  --room-shadow: rgb(0 0 0 / 35%);
  --room-light: rgb(255 226 150 / 18%);
  --room-window-frame: #5a5d56;
  --room-window-glass: #2f4658;
  --room-poster: #e8e1d2;
  --room-poster-border: #6d6556;
  --room-poster-tape: #a8955f;
}
.room-wall-back { fill: var(--room-wall-back); }
.room-wall-side { fill: var(--room-wall-side); }
.room-wall-cut { fill: var(--room-wall-cut); }
.room-floor-top { fill: var(--room-floor-top); }
.room-floor-front { fill: var(--room-floor-front); }
.room-floor-side { fill: var(--room-floor-side); }
.room-floor-line { fill: var(--room-floor-line); }
.room-skirt-front { fill: var(--room-skirt-front); }
.room-skirt-side { fill: var(--room-skirt-side); }
.room-skirt-top { fill: var(--room-skirt-top); }
.room-rug { fill: var(--room-rug); }
.room-rug-border { fill: var(--room-rug-border); }
.room-shadow { fill: var(--room-shadow); }
.room-light { fill: var(--room-light); animation: room-light 9s ease-in-out infinite; }
.room-window-frame { fill: var(--room-window-frame); }
.room-window-glass { fill: var(--room-window-glass); }
.room-poster { fill: var(--room-poster); }
.room-poster-border { fill: var(--room-poster-border); }
.room-poster-tape { fill: var(--room-poster-tape); opacity: 0.85; }
.room-poster-title { font-family: var(--font-display); font-weight: 600; fill: var(--room-poster-ink); }
.room-poster-line { font-family: var(--font); fill: var(--room-poster-ink); }
.room-poster-more { font-family: var(--font); fill: var(--room-poster-muted); }
@keyframes room-light { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }