:root {
  /* Paleta por defecto: Musgo (pedido explícito del usuario, 22 ago 2026,
     "me encanta" viendo esta combinación) — coincide con
     body[data-accent="musgo"] más abajo, igual que antes coincidía con
     Óxido. Si algún día cambia el valor de una paleta, actualizar aquí
     también para que el "por defecto" no se desincronice. */
  --accent-primary: #495C40;   /* acento de FICHAS: botones, progreso, estados */
  --accent-hover: #38452F;
  --accent-sage: #495C40;      /* acento de SELLO Y PERFIL: sello, avatar, valoraciones */
  --accent-pen: #C86D51;       /* acento de SUBRAYADO: citas, anotaciones, detalles a mano */
  --bg-main: #EDE9DE;
  --bg-card: #F9F7F1;
  --text-primary: #22201B;
  /* Era #6F695B: daba exactamente 4.50:1 sobre el papel, justo en el mínimo
     de WCAG AA y sin ningún margen. #645E51 sube a 5.31:1 sin cambiar el tono. */
  --text-secondary: #645E51;
  --border-subtle: #D8D2C2;
  --highlight: #F4D75E;
  --shadow-soft: 0 2px 8px rgba(32, 28, 23, 0.05);
  --radius: 2px;
  --font-heading: 'Newsreader', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* COLOR DE FICHAS — botones, barras de progreso, estados, precios */
body[data-accent="oxido"]     { --accent-primary: #7A2E2E; --accent-hover: #5E2222; }
body[data-accent="terracota"] { --accent-primary: #C86D51; --accent-hover: #B35B41; }
body[data-accent="tinta"]     { --accent-primary: #2B4A6F; --accent-hover: #1F3752; }
body[data-accent="musgo"]     { --accent-primary: #495C40; --accent-hover: #38452F; }

/* COLOR DE SELLO Y PERFIL — logo, avatares, valoraciones, pestaña activa */
body[data-accent2="oxido"]     { --accent-sage: #7A2E2E; }
body[data-accent2="terracota"] { --accent-sage: #C86D51; }
body[data-accent2="tinta"]     { --accent-sage: #2B4A6F; }
body[data-accent2="musgo"]     { --accent-sage: #495C40; }

/* COLOR DE SUBRAYADO — citas, marcas manuscritas de las anotaciones */
body[data-accent-pen="oxido"]     { --accent-pen: #7A2E2E; }
body[data-accent-pen="terracota"] { --accent-pen: #C86D51; }
body[data-accent-pen="tinta"]     { --accent-pen: #2B4A6F; }
body[data-accent-pen="musgo"]     { --accent-pen: #495C40; }

/* MODO OSCURO */
body.dark-mode {
  --bg-main: #1C1A16;
  --bg-card: #262320;
  --text-primary: #EDE8DF;
  --text-secondary: #A39C8E;
  --border-subtle: #3A362F;
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Los acentos están pensados para papel claro; sobre fondo oscuro quedan casi
   negros y el texto/los bordes que los usan dejan de leerse. En modo oscuro se
   sustituyen por versiones más luminosas del mismo tono. */
body.dark-mode                                  { --accent-primary: #94AE86; --accent-hover: #A9C09C; --accent-sage: #94AE86; --accent-pen: #E09274; }
/* El óxido claro daba 4.44:1 sobre el fondo oscuro — no llegaba a AA. */
body.dark-mode[data-accent="oxido"]             { --accent-primary: #D07E6D; --accent-hover: #DD9483; }
body.dark-mode[data-accent="terracota"]         { --accent-primary: #E09274; --accent-hover: #EDA88C; }
body.dark-mode[data-accent="tinta"]             { --accent-primary: #7BA3D0; --accent-hover: #96B8DE; }
body.dark-mode[data-accent="musgo"]             { --accent-primary: #94AE86; --accent-hover: #A9C09C; }

body.dark-mode[data-accent2="oxido"]            { --accent-sage: #D07E6D; }
body.dark-mode[data-accent2="terracota"]        { --accent-sage: #E09274; }
body.dark-mode[data-accent2="tinta"]            { --accent-sage: #7BA3D0; }
body.dark-mode[data-accent2="musgo"]            { --accent-sage: #94AE86; }

body.dark-mode[data-accent-pen="oxido"]         { --accent-pen: #D07E6D; }
body.dark-mode[data-accent-pen="terracota"]     { --accent-pen: #E09274; }
body.dark-mode[data-accent-pen="tinta"]         { --accent-pen: #8FA9DC; }
body.dark-mode[data-accent-pen="musgo"]         { --accent-pen: #94AE86; }

/* Al aclarar el acento, el texto blanco encima deja de contrastar: se invierte. */
body.dark-mode .btn-primary,
body.dark-mode .pricing-card-tag,
body.dark-mode .size-toggle button.active,
body.dark-mode .segmented-control button.active,
body.dark-mode .visibility-toggle button.active { color: #1C1A16; }

/* SELLO — marca reutilizable en cabeceras (logo) y avatares */
.stamp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--accent-sage); color: var(--accent-sage);
  position: relative; flex-shrink: 0;
}
.stamp-mark::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--accent-sage); border-radius: 50%; }
.stamp-mark span { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; z-index: 1; }

/* MARCA — el logo de "El Margen" (corchete + el gesto a mano), distinta de
   .stamp-mark de arriba a propósito: .stamp-mark se deja libre por si hace
   falta para avatares o valoraciones más adelante. Color en --accent-pen
   (el mismo token de "subrayado", personalizable en Cuenta > Paleta de
   color) en vez de --accent-sage: el logo ES un trazo de tinta en el
   margen, así que usa el acento pensado para eso — y de paso, su valor por
   defecto (Tinta, #2B4A6F) ya es azul sin tener que fijarlo a mano. */
/* Geométricamente (centro de la caja del SVG contra el centro de la caja
   del texto) queda centrado al pixel, pero a ojo se ve desplazado hacia
   abajo -- el propio dibujo del corchete pesa visualmente más hacia
   abajo (el trazo a mano sale por su lado inferior), así que el centro
   ÓPTICO no coincide con el geométrico. Confirmado por el usuario con una
   captura real (23 ago 2026); pequeño ajuste manual para compensarlo. */
.brand-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transform: translateY(-2px); }

/* Sin esto, una anotación (u otro texto libre) sin ningún espacio — una
   URL pegada, o alguien escribiendo sin soltar el dedo — se sale de su
   tarjeta en horizontal en vez de partirse, rompiendo el layout entero
   (aviso del usuario, 22 ago 2026, probándolo con una cita así de larga).
   Regla global a propósito: cualquier texto libre del sitio (anotaciones,
   sinopsis, biografía, títulos...) puede recibir la misma entrada sin
   espacios, no solo el sitio donde se detectó. */
* { box-sizing: border-box; margin: 0; padding: 0; overflow-wrap: break-word; }

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-body);
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  line-height: 1.5;
  transition: background-color 0.3s, color 0.3s;
}

.subtitle { color: var(--text-secondary); font-size: 0.95rem; }
.header-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.nav-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem 0.7rem;
}

.nav-btn.active {
  color: var(--accent-primary);
  font-weight: 500;
  border-bottom-color: var(--accent-primary);
}

.view-section { display: none; }
.view-section.active { display: block; }

.btn {
  border: 1px solid transparent;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary { background-color: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background-color: transparent; color: var(--text-primary); border-color: var(--border-subtle); }
.btn-secondary:hover { border-color: var(--text-primary); background-color: var(--bg-card); }
.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--text-secondary); font-family: var(--font-heading); font-size: 0.92rem; text-transform: none; letter-spacing: normal; border-color: transparent; }
.btn-full-width { width: 100%; margin-top: 0.5rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  padding: 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.stat-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.5rem; }
.stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; }

/* Franja compacta de estadísticas del Catálogo: mismos datos que arriba,
   en una sola línea discreta en vez de 4 tarjetas — ya se repiten en
   Inicio y en Estadísticas, aquí solo hacen falta de un vistazo. */
.stats-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.stats-strip-item { display: flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; }
.stats-strip-item .val { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--accent-primary); }
.stats-strip-item .lbl { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.quick-log-toggle { margin-left: auto; align-self: center; }

.quick-log-card {
  background: var(--bg-card);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  margin-bottom: 2.5rem;
}

.quick-log-card h2 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 1rem; }
.log-form { display: flex; gap: 0.8rem; flex-wrap: wrap; }

input, select, textarea {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-family: inherit;
  background: var(--bg-main);
  color: var(--text-primary);
  width: 100%;
}

.log-form select { flex: 1; min-width: 140px; }
.log-form input { flex: 1; min-width: 120px; }
.log-form .annot-details-toggle { flex-basis: 100%; margin: 0.1rem 0 0; }
.log-date-fields { display: flex; gap: 0.8rem; flex-basis: 100%; }

/* Buscador, estado, orden, (a partir de 12 libros) categoría y "+ Añadir
   libro" — todo lo que sirve para encontrar o crear un libro, en una sola
   fila en vez de repartido en dos (y de un botón suelto en la cabecera).
   Fija arriba al hacer scroll: antes "+ Añadir libro" vivía en la cabecera
   y desaparecía en cuanto bajabas la página. */
.search-sort-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 0.6rem 0 0.8rem;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-main);
}

#search-input { flex: 2; min-width: 220px; }
.sort-wrapper { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 200px; }
.search-bar-add { margin-left: auto; flex-shrink: 0; }
.sort-wrapper label { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }

.filter-tabs { display: flex; gap: 0.5rem; overflow-x: auto; }

.tab {
  background: none;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
}

.tab.active { background: transparent; border-color: var(--accent-sage); color: var(--accent-sage); font-weight: 500; }

.category-filter-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.category-filter-wrapper label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.book-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.book-card:hover { border-color: var(--accent-primary); }

.book-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  background-color: var(--border-subtle);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  filter: sepia(0.22) saturate(0.9) contrast(1.02);
}

.book-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }

.book-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.book-badge.category-badge { background: var(--border-subtle); color: var(--text-primary); font-weight: 500; border-color: transparent; }
.book-badge.rating-badge { background: transparent; border-color: var(--accent-sage); color: var(--accent-sage); font-weight: 600; }
.book-badge.visibility-badge { background: transparent; border-color: var(--accent-sage); color: var(--accent-sage); }
.book-badge.annot-badge { background: transparent; border-color: var(--border-subtle); color: var(--text-secondary); }

.book-title { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.2rem; }
.book-author { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.8rem; }

.hidden { display: none !important; }

.finish-title-highlight {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0.2rem;
}

.progress-bar-bg { width: 100%; height: 6px; background: var(--border-subtle); border-radius: 3px; overflow: hidden; margin-bottom: 0.4rem; }
.progress-bar-fill { height: 100%; background: var(--accent-primary); width: 0%; transition: width 0.3s; }
.progress-text { font-size: 0.75rem; color: var(--text-secondary); text-align: right; }

.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-subtle);
}

.btn-card-action { background: none; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 500; }
.btn-annot-quick { color: var(--accent-pen); }
.btn-mark-status { color: var(--accent-primary); text-align: left; }
.btn-edit { color: var(--accent-sage); }
.btn-delete { color: #B03A3A; } /* era #c94a4a: 4.30:1 sobre la ficha, por debajo de AA */
body.dark-mode .btn-delete { color: #E58E7D; }

.goals-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.goal-card { background: var(--bg-card); padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); }
.goal-card h3 { font-family: var(--font-heading); font-size: 1.2rem; }
.goal-progress-box { margin: 1.5rem 0; }
.goal-progress-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.goal-number { font-size: 2rem; font-family: var(--font-heading); font-weight: 600; color: var(--accent-primary); }
.goal-percent { font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-secondary); }
.goal-remaining { font-size: 0.82rem; color: var(--text-secondary); margin: 0.6rem 0 0; }
.goal-config { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; }
.goal-config input { width: 80px; }

.stats-filter-bar {
  background: var(--bg-card);
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.filter-group { display: flex; align-items: center; gap: 0.5rem; }
.charts-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.chart-container { background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); }
.canvas-wrapper { position: relative; height: 260px; width: 100%; }

/* ESTILOS DE AJUSTES */
.settings-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.settings-card { background: var(--bg-card); padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); }
.settings-card h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 0.2rem; }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; font-weight: 500; }
.toggle-checkbox { width: 22px; height: 22px; cursor: pointer; accent-color: var(--accent-primary); }

.settings-note { font-size: 0.85rem; color: var(--text-secondary); margin-top: 1rem; }
.settings-note a { color: var(--accent-primary); }

/* MODALES */
.modal {
  border: none;
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  margin: auto;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-large { max-width: 600px; }
.modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.modal-form { display: flex; flex-direction: column; gap: 0.9rem; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.form-group label { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.api-search-box { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.api-search-box input { flex: 1; }

/* Opciones de plataforma en el popup "Importar desde otra plataforma"
   (billing.html) -- botones en vez de radios porque cada uno dispara la
   acción al instante (abre el selector de archivo), no hay un segundo paso
   de "confirmar". */
.import-platform-options { display: flex; flex-direction: column; gap: 0.7rem; }
.import-platform-opt {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left;
  width: 100%; font: inherit; cursor: pointer;
  padding: 0.85rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius);
  background: var(--bg-main); color: var(--text-primary);
}
.import-platform-opt:hover { border-color: var(--accent-primary); }

/* Portadas candidatas (varias fuentes distintas para el mismo libro) —
   pedido del usuario, 21 ago 2026, para no quedarse en silencio con la
   primera que encuentra la búsqueda. */
.cover-candidates-list { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cover-candidate {
  width: 60px; height: 90px; border-radius: 2px; cursor: pointer; object-fit: cover;
  border: 2px solid var(--border-subtle); background: var(--bg-main);
}
.cover-candidate:hover { border-color: var(--accent-primary); }
.cover-candidate.active { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }

/* Portada elegida a mano (subida desde galería/cámara, o URL pegada) —
   mismo tamaño/proporción que .cover-candidate para que no salte al
   pasar de una vista previa a la otra. */
.cover-field-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.cover-preview {
  width: 70px; height: 105px; border-radius: 2px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-subtle); background: var(--bg-main);
}
.cover-field-controls { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.cover-field-controls .btn { align-self: flex-start; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

.detail-container { position: relative; }
.btn-close-icon {
  position: absolute;
  top: -10px;
  right: -10px;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--text-secondary);
}

/* --- FICHA DE DETALLE (modal ancho, cabecera + 2 columnas) --- */
.modal-detail { max-width: 980px; width: 95%; padding: 0; max-height: 92vh; overflow: hidden; }
.modal-detail .detail-container { display: flex; flex-direction: column; max-height: 92vh; }
.modal-detail .btn-close-icon {
  top: 0.6rem; right: 0.8rem; z-index: 3; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-card); color: var(--text-primary); opacity: 0.85;
}
.modal-detail .btn-close-icon:hover { opacity: 1; }

/* Cabecera: la portada del propio libro, difuminada, hace de fondo */
.detail-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.detail-hero-bg {
  position: absolute; inset: -40px;
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.3); opacity: 0.35; transform: scale(1.1);
}
.detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, var(--bg-card) 96%); }
.detail-hero-inner { position: relative; z-index: 2; display: flex; gap: 1.5rem; padding: 1.8rem; flex-wrap: wrap; }
.detail-cover { width: 132px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; flex-shrink: 0; background-color: var(--border-subtle); box-shadow: 0 6px 20px rgba(0,0,0,0.28); filter: sepia(0.22) saturate(0.9) contrast(1.02); }
.detail-info { flex: 1; min-width: 210px; align-self: center; }
.detail-info h2 { font-family: var(--font-heading); font-size: 1.7rem; margin-top: 0.4rem; margin-bottom: 0.15rem; line-height: 1.2; }

.detail-columns { display: grid; grid-template-columns: 230px 1fr; gap: 1.6rem; padding: 1.5rem 1.8rem; overflow-y: auto; flex: 1; }
.detail-side { display: flex; flex-direction: column; gap: 1.1rem; align-content: start; }
.side-block { display: flex; flex-direction: column; gap: 0.45rem; }
.side-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.side-block select { font-size: 0.88rem; padding: 0.45rem 0.6rem; }
.side-hint { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; margin: 0; }

.visibility-toggle { display: flex; border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
.visibility-toggle button {
  flex: 1; border: none; background: var(--bg-main); cursor: pointer; padding: 0.45rem 0.3rem;
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.visibility-toggle button.active { background: var(--accent-primary); color: #fff; }

.reading-actions-box { border: 1px dashed var(--accent-primary); border-radius: var(--radius); padding: 0.9rem; }
.pages-left-text { font-size: 0.8rem; color: var(--text-secondary); margin: 0; line-height: 1.45; }
.quick-add-pages-row { display: flex; gap: 0.4rem; }
.quick-add-pages-row input { flex: 1; min-width: 0; font-size: 0.85rem; padding: 0.4rem 0.5rem; }
.quick-add-pages-row .btn { white-space: nowrap; padding: 0.4rem 0.6rem; font-size: 0.8rem; }

/* Pestañas dentro de la ficha */
.detail-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.1rem; }
.detail-tab {
  border: none; background: none; cursor: pointer; padding: 0.55rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.detail-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.tab-count { font-size: 0.66rem; opacity: 0.75; }
.detail-panel > .detail-section:first-child { margin-top: 0; }

/* Formulario de anotaciones */
.annotation-form { background: var(--bg-main); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.3rem; }
.annotation-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.annotation-form-row label, .annotation-form .form-group label { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); display: block; margin-bottom: 0.25rem; }
.annotation-form select, .annotation-form input[type="text"], .annotation-form textarea { width: 100%; font-size: 0.88rem; padding: 0.45rem 0.6rem; }
/* Sin esto, el tirador nativo del textarea deja arrastrar también en
   horizontal — al pegar un texto largo (aviso del usuario, 22 ago 2026) es
   fácil arrastrarlo sin querer y el cuadro se sale del formulario/modal,
   rompiendo el layout. Mismo criterio que .profile-bio-edit textarea, que
   ya iba solo en vertical: dejar crecer hacia abajo (si hace falta más
   sitio) pero nunca hacia los lados. */
.annotation-form textarea { resize: vertical; }
.optional-tag { text-transform: none; letter-spacing: 0; opacity: 0.7; font-style: italic; }
.annotation-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap; }
.annot-details-toggle { display: block; margin: 0.5rem 0 0.9rem; }
.share-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.83rem; color: var(--text-secondary); cursor: pointer; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
/* La regla global de arriba pone width:100% a todo input — la casilla necesita su tamaño real */
.share-check input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; margin: 0; accent-color: var(--accent-primary); }
.annotation-form-footer .btn { flex-shrink: 0; }

/* Lista de anotaciones — la cita, el concepto o la nota son el
   protagonista; el resto (ubicación, favorita, publicar, editar/borrar)
   se reduce a texto pequeño alrededor, no a controles con su propio marco. */
.annotations-list { display: flex; flex-direction: column; gap: 1rem; }
.annotation-card { position: relative; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-pen); border-radius: var(--radius); background: var(--bg-card); padding: 1.1rem 1.3rem 1rem; }
.annotation-card.type-concepto { border-left-color: var(--accent-primary); padding-left: 1.5rem; }
.annotation-card.type-nota { border-left-color: var(--border-subtle); }

.annot-fav-toggle {
  position: absolute; top: 0.75rem; right: 0.9rem;
  background: none; border: none; padding: 0.2rem; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--border-subtle);
}
.annot-fav-toggle:hover { color: var(--accent-pen); }
.annot-fav-toggle.on { color: var(--accent-pen); }

.annotation-meta-line { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; padding-right: 1.6rem; }
.annotation-kind-text { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.annotation-pub-tag { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--accent-pen); }

.annotation-text { font-size: 0.95rem; line-height: 1.6; margin: 0; white-space: pre-wrap; }

/* CITA: la voz del libro — grande, en cursiva, con una comilla grande
   en el color de subrayado elegido. */
.annotation-card.type-cita .annotation-text {
  font-family: var(--font-heading); font-style: italic; font-size: 1.22rem; line-height: 1.55;
}
.annotation-card.type-cita .annotation-text::before {
  content: '\201C'; display: inline; font-family: var(--font-heading); font-style: normal; font-weight: 600;
  font-size: 2.1rem; color: var(--accent-pen); opacity: 0.6;
  float: left; line-height: 0.6; margin: 0.36rem 0.2rem 0 -0.1rem;
}

/* CONCEPTO: tu síntesis — cuerpo normal, como una entrada de glosario */
.annotation-card.type-concepto .annotation-text { font-size: 0.98rem; }

/* NOTA: tu voz en el margen — mismo cuerpo que un concepto; lo que la
   distingue es la etiqueta y el borde neutro, no una tipografía aparte. */
.annotation-card.type-nota .annotation-text { font-size: 0.98rem; }

.annotation-comment { font-family: var(--font-heading); font-style: italic; font-size: 0.9rem; color: var(--accent-pen); margin: 0.55rem 0 0; line-height: 1.5; }
.annotation-empty { font-size: 0.88rem; color: var(--text-secondary); text-align: center; padding: 1.8rem 1rem; border: 1px dashed var(--border-subtle); border-radius: var(--radius); }

.annotation-footer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--border-subtle); }
.annotation-source { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.annotation-source-cover { width: 22px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); filter: sepia(0.22) saturate(0.9) contrast(1.02); flex-shrink: 0; }
.annotation-footer-actions { display: flex; gap: 0.9rem; margin-left: auto; }
.annot-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; font-family: var(--font-body); }
.annot-link:hover { color: var(--accent-primary); text-decoration: underline; }
.annot-link.danger:hover { color: #c94a4a; }

/* AVISO DE RELECTURA — discreto y descartable, nunca bloquea. Aparece justo
   donde se acaba de registrar la lectura (ficha, "Libro terminado" o
   Catálogo) cuando el tramo recién leído atraviesa una página ya anotada. */
.reread-reminder {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-pen);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-soft);
}
.reread-reminder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; margin-bottom: 0.9rem; }
.reread-reminder-title { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-pen); font-weight: 600; }
.reread-reminder-title em { font-style: italic; text-transform: none; letter-spacing: normal; }
.reread-reminder-close { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 0.7; color: var(--text-secondary); padding: 0; flex-shrink: 0; }
.reread-reminder-close:hover { color: var(--text-primary); }
.reread-reminder-body { display: flex; flex-direction: column; gap: 0.8rem; }
.reread-reminder-body .annotation-card { box-shadow: none; }

/* Popup propio de confirmación de relectura (modal-reread-confirm) — sustituye
   al confirm() nativo del navegador, que se veía ajeno al resto del sitio. */
.reread-confirm-message { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; line-height: 1.5; }
.reread-confirm-message strong { color: var(--accent-primary); }
/* mbAlert()/mbConfirm() usan textContent (nunca HTML sin escapar) — un
   salto de línea doble en el mensaje se respeta como párrafo en vez de
   colapsarse. */
#modal-alert-message, #modal-confirm-message { white-space: pre-line; }

/* Barra de filtros (sección global y, en versión compacta, dentro de la ficha) */
.annot-filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.4rem; }
.annot-filter-bar input, .annot-filter-bar select { width: auto; font-size: 0.86rem; padding: 0.45rem 0.6rem; }
.annot-filter-bar input[type="search"] { flex: 1 1 200px; min-width: 150px; }
.annot-filter-bar #annot-filter-locvalue, .annot-filter-bar #book-annot-filter-locvalue { width: 70px; flex: 0 0 auto; }
.annot-filter-bar.compact { gap: 0.45rem; margin-bottom: 1rem; }

/* Buscador de libro (título o autor a la vez) en Filtros → Libro, en vez
   de un <select> plano — pedido explícito del usuario, 21 ago 2026: con
   muchos libros, desplazarse por un desplegable es incómodo. */
.book-search-combo { position: relative; flex: 1 1 220px; min-width: 200px; }
.annot-filter-bar .book-search-input { width: 100%; }
.book-search-options {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.3rem; z-index: 30;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  max-height: 260px; overflow-y: auto; box-shadow: var(--shadow-soft);
}
.book-search-option { padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.86rem; line-height: 1.35; }
.book-search-option:hover { background: var(--bg-main); }
.book-search-option-author { display: block; color: var(--text-secondary); font-size: 0.76rem; }
.book-search-empty { padding: 0.6rem 0.7rem; font-size: 0.82rem; color: var(--text-secondary); }
.annot-filter-bar.compact input, .annot-filter-bar.compact select { font-size: 0.8rem; padding: 0.35rem 0.5rem; }
.annot-filter-bar.compact input[type="search"] { flex: 1 1 130px; min-width: 110px; }
/* .btn-ghost hereda font-size 1.2rem (pensado para los modales): aquí es un control más de la barra */
.annot-filter-bar .btn-ghost { font-size: 0.86rem; border: 1px solid var(--border-subtle); padding: 0.45rem 0.9rem; }

.annot-global-list { display: flex; flex-direction: column; gap: 1rem; max-width: 780px; }
/* Sin el límite de ancho de arriba -- solo para el aviso de "todavía no
   hay nada", que si no se ve descuadrado frente al resto de la fila. */
.annot-global-list-empty { display: flex; flex-direction: column; gap: 1rem; }

/* Tres columnas por tipo — antes todo (citas, conceptos, notas) caía
   apelotonado en una sola lista. Solo se usa cuando el filtro de tipo está
   en "todos"; si ya hay un tipo elegido, se queda en la lista de siempre. */
.annot-global-list.annot-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: none; align-items: start; }
.annot-column { display: flex; flex-direction: column; min-width: 0; }
.annot-column-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.6rem; margin-bottom: 1.1rem; }
.annot-column-head h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; font-style: italic; }
.annot-column-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); }
.annot-column-list { display: flex; flex-direction: column; gap: 1rem; }
.annot-column-list .annotation-empty { padding: 1.2rem 1rem; font-size: 0.82rem; }

@media (max-width: 860px) {
  .annot-global-list.annot-columns { grid-template-columns: 1fr; gap: 2rem; }
}

.modal-detail .modal-actions { margin: 0; padding: 1rem 1.8rem; border-top: 1px solid var(--border-subtle); flex-shrink: 0; }

/* ELEGIR A MANO QUÉ ANOTACIONES SE DESCARGAN EN PDF */
.annot-select-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem;
  padding: 0.7rem 1rem; margin-bottom: 1.4rem;
  border: 1px solid var(--accent-primary);
  background: var(--bg-card);
}
.annot-select-bar.hidden { display: none; }
.annot-select-count {
  font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
}
.annot-select-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.annot-select-actions .btn { font-size: 0.72rem; }
.annot-select-actions .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* La casilla ocupa el sitio del ★, que se corre a la izquierda mientras
   dura el modo. `width/height` explícitos: la regla global `input {
   width: 100% }` de este archivo estira si no se le pone freno. */
.annot-pick { position: absolute; top: 0.7rem; right: 0.85rem; cursor: pointer; line-height: 0; }
.annot-pick input {
  position: absolute; opacity: 0;
  width: 18px; height: 18px; margin: 0; cursor: pointer;
}
.annot-pick-box {
  display: block; width: 18px; height: 18px;
  border: 1px solid var(--text-secondary); background: var(--bg-main);
}
.annot-pick input:checked + .annot-pick-box {
  background: var(--accent-primary); border-color: var(--accent-primary);
}
.annot-pick input:checked + .annot-pick-box::after {
  content: '✓'; display: block; text-align: center;
  color: var(--bg-card); font-size: 0.78rem; line-height: 17px;
}
.annot-pick input:focus-visible + .annot-pick-box { outline: 2px solid var(--accent-pen); outline-offset: 2px; }

/* Con el modo activo el ★ deja sitio a la casilla. */
.annot-select-bar:not(.hidden) ~ .annot-global-list .annot-fav-toggle { right: 2.6rem; }
.annotation-card.is-picked { background: var(--bg-main); border-color: var(--accent-primary); }

@media (max-width: 780px) {
  .detail-columns { grid-template-columns: 1fr; }
  .annotation-form-row { grid-template-columns: 1fr; }
}

.detail-section {
  margin-top: 1rem;
  background: var(--bg-main);
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
}

.detail-section h4 { font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--accent-primary); }
.detail-section p { font-size: 0.95rem; white-space: pre-wrap; line-height: 1.6; color: var(--text-primary); }

/* Primera letra a modo de capitular, como en una edición cuidada */
#detail-synopsis-text::first-letter {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--accent-primary);
  float: left;
  line-height: 0.75;
  padding-top: 0.15rem;
  margin: 0 0.2rem 0 0;
}

/* Citas memorables: tratadas como cita destacada, no como texto plano */
#detail-notes-box {
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-card);
}
#detail-notes-box p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ============================================================
   FASE 0 — PÁGINAS NUEVAS (landing, auth, perfil, feed, cuenta)
   ============================================================ */

/* NAV PÚBLICA (páginas de marketing: landing / login / registro) */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
/* gap bajado de 0.5rem a 0.3rem (22 ago 2026, pedido explícito): el
   corchete y "El Margen" se veían demasiado separados. */
.site-logo { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; }
.site-nav-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.6rem; }
.site-nav-links a.nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.site-nav-links a.nav-link:hover { color: var(--accent-primary); }

@media (max-width: 480px) {
  .site-nav-links { gap: 0.8rem; width: 100%; }
  .site-nav-links a.nav-link { display: none; }
}

/* NAV DE APP (páginas ya autenticadas: perfil, feed, cuenta) */
.app-header-lite { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.app-nav-lite { display: flex; gap: 0.4rem; border-bottom: 2px solid var(--border-subtle); padding-bottom: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.app-nav-lite a { text-decoration: none; }
.account-menu-trigger {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  color: var(--text-primary); text-decoration: none; font-size: 0.85rem; font-weight: 500;
}
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--accent-sage); color: var(--accent-sage);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; flex-shrink: 0;
  position: relative;
}
.avatar-circle::after { content: ''; position: absolute; inset: 2px; border: 1px solid var(--accent-sage); border-radius: 50%; }
.avatar-circle span { position: relative; z-index: 1; }
.avatar-circle img.avatar-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}

.profile-photo-row { display: flex; align-items: center; gap: 1.2rem; }
.profile-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.profile-photo-actions .btn { cursor: pointer; }
.avatar-circle.lg { width: 96px; height: 96px; font-size: 1.7rem; }
.avatar-circle.lg::after { inset: 5px; }
.avatar-circle.md { width: 44px; height: 44px; font-size: 0.95rem; }
.avatar-circle.md::after { inset: 3px; }

/* HERO */
.hero {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 3.5rem 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
}
.hero-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 1.2rem;
}
/* align-items: center descentraba el punto en móvil, donde el texto pasa
   a dos líneas -- centraba el punto respecto al bloque entero (quedaba
   "flotando" entre las dos líneas) en vez de respecto a la primera línea.
   flex-start + este margen lo centra respecto a la altura de una sola
   línea de texto (line-height del body, 1.5), sin depender de si el
   texto acaba ocupando una línea o dos. */
.hero-badge::before { content: ''; width: 7px; height: 7px; margin-top: 0.45em; background: var(--accent-primary); border-radius: 50%; flex-shrink: 0; display: inline-block; }
.hero h1 { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 600; line-height: 1.2; max-width: 32rem; margin: 0 auto 1rem; text-wrap: balance; }
.hero p.hero-sub { font-size: 1.08rem; color: var(--text-secondary); max-width: 34rem; margin: 0 auto 2rem; }
.hero-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn { padding: 0.8rem 1.6rem; font-size: 1rem; }

.section-heading { text-align: center; margin-bottom: 2.2rem; }
.section-heading h2 { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 600; margin-bottom: 0.5rem; }
.section-heading p { color: var(--text-secondary); max-width: 32rem; margin: 0 auto; }

/* CARACTERÍSTICAS */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 3.5rem; }
.feature-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.6rem; }
.feature-icon { color: var(--accent-primary); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 1.3rem; margin-bottom: 1rem; }
.feature-card h3 { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 0.4rem; }
.feature-card p { font-size: 0.9rem; color: var(--text-secondary); }

/* PRECIOS */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 640px; margin: 0 auto 3.5rem; }
.pricing-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.8rem; display: flex; flex-direction: column; }
.pricing-card.featured { border: 2px solid var(--accent-primary); position: relative; }
.pricing-card-tag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--accent-primary); color: #fff; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.7rem; border-radius: var(--radius); }
.pricing-card h3 { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 0.3rem; }
.pricing-card .plan-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.2rem; }
.price-amount { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 600; }
.price-period { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; }
.price-annual-note { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.3rem; }
.price-annual-save { color: var(--accent-sage); }
.pricing-features { list-style: none; margin: 1.4rem 0; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.pricing-features li { font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: baseline; }
.pricing-features li .check { color: var(--accent-sage); font-weight: 700; }
.pricing-features li.unavailable { color: var(--text-secondary); }
.pricing-features li.unavailable .check { color: var(--text-secondary); }

.how-it-works { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 3.5rem; }
.how-step { text-align: center; }
.how-step .step-number { font-family: var(--font-heading); font-size: 1.8rem; color: var(--accent-primary); margin-bottom: 0.5rem; }
.how-step h3 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.4rem; }
.how-step p { font-size: 0.88rem; color: var(--text-secondary); }

/* "POR QUÉ EXISTE" — la idea de marca, antes de pedir el registro */
#por-que { max-width: 42rem; margin: 0 auto 3.5rem; text-align: center; }
.quote-hero blockquote {
  font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1.4;
  color: var(--text-primary); margin: 0 0 1.6rem; text-wrap: balance;
}
.quote-hero-body { font-size: 0.98rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 1rem; }
.quote-hero-link a { color: var(--accent-primary); font-weight: 500; text-decoration: none; }
.quote-hero-link a:hover { text-decoration: underline; }

.site-footer { text-align: center; padding: 2rem 0 1rem; color: var(--text-secondary); font-size: 0.85rem; border-top: 1px solid var(--border-subtle); margin-top: 2rem; }
.site-footer a { color: var(--text-secondary); }
.site-footer-legal { margin-top: 0.4rem; font-size: 0.78rem; }

/* PÁGINAS LEGALES */
/* 42rem → 54rem (21 ago 2026, mismo pedido y misma proporción +28% que el
   body: ver "ANCHO DE PÁGINA" en CONTEXTO-PROYECTO.txt): esta página no
   heredaba el ensanchado general porque tiene su propio max-width, pensado
   para no alargar demasiado la línea en párrafos largos — se sube, pero
   sin llegar a los 1280px del body, que ahí sí haría las líneas
   incómodas de leer. */
.legal-page { max-width: 54rem; margin: 0 auto 3rem; }
/* La cabecera y el pie ocupan por defecto todo el ancho del body (1280px),
   pero estas páginas tienen su propio contenido más estrecho (54rem,
   arriba) centrado aparte — sin esto, el logo (pegado al borde izquierdo
   de la cabecera) queda visiblemente más a la izquierda que el título y el
   texto de abajo. Se igualan al mismo ancho en vez de a todo el body, para
   que ambos compartan el mismo margen izquierdo. (Aviso del usuario, 22
   ago 2026, viendo sobre-nosotros.html con sesión iniciada.) */
body:has(main.legal-page) .site-header,
body:has(main.legal-page) .site-footer { max-width: 54rem; margin-left: auto; margin-right: auto; }
.legal-draft-notice {
  background: var(--bg-card); border: 1px dashed var(--accent-primary); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 2.5rem; line-height: 1.6;
}
.legal-draft-notice strong { color: var(--text-primary); }
.legal-page h1 { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; margin-bottom: 0.4rem; }
.legal-updated { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 2rem; }
.legal-page h2 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; margin: 2rem 0 0.7rem; }
.legal-page p { font-size: 0.92rem; line-height: 1.7; color: var(--text-primary); margin-bottom: 0.9rem; }
.legal-page ul { margin: 0 0 0.9rem 1.3rem; }
.legal-page li { font-size: 0.92rem; line-height: 1.7; margin-bottom: 0.4rem; }
.legal-page a { color: var(--accent-primary); }
.legal-placeholder { background: var(--border-subtle); border-radius: 3px; padding: 0.05rem 0.35rem; }

/* SOBRE NOSOTROS */
.about-page strong { color: var(--text-primary); }
.about-page .quote-hero blockquote { font-size: 1.35rem; margin-bottom: 0; }
.about-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2rem; }
.about-principle h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--accent-primary); margin-bottom: 0.4rem; }
.about-principle p { font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 0; }
.about-closing { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); font-size: 0.95rem; }

/* AUTENTICACIÓN */
.auth-page-wrapper { display: flex; justify-content: center; padding: 2rem 0 4rem; }
.auth-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 2.2rem; max-width: 400px; width: 100%; }
.auth-card h1 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.3rem; }
.auth-card p.auth-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.6rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form[hidden] { display: none; }
.auth-row-split { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.auth-row-split a { color: var(--accent-primary); text-decoration: none; font-weight: 500; }
.auth-check-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: var(--text-secondary); }
.auth-check-row input { width: auto; margin-top: 0.2rem; accent-color: var(--accent-primary); }
.auth-divider { text-align: center; font-size: 0.85rem; color: var(--text-secondary); margin-top: 1.4rem; }
.auth-divider a { color: var(--accent-primary); font-weight: 500; text-decoration: none; }

/* PERFIL PÚBLICO */
.profile-header-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 2rem; display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; }
.profile-meta { flex: 1; min-width: 220px; }
.profile-meta h1 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.15rem; }
.profile-username { font-family: var(--font-mono); color: var(--text-secondary); font-size: 0.82rem; margin-bottom: 0.8rem; }
.profile-bio { font-size: 0.92rem; line-height: 1.5; margin-bottom: 1rem; max-width: 34rem; }
.profile-bio-empty { color: var(--text-secondary); font-style: italic; }
.profile-bio-edit { max-width: 34rem; margin-bottom: 1rem; }
.profile-bio-edit textarea { font-size: 0.92rem; line-height: 1.5; resize: vertical; }
.profile-bio-edit-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.profile-stats-row { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.profile-stat { display: flex; flex-direction: column; }
.profile-stat-clickable { cursor: pointer; }
.profile-stat-clickable:hover .num { color: var(--accent-primary); }
/* Un recuadro por perfil (pedido explícito, 24 ago 2026) en vez de filas
   sueltas separadas solo por una línea -- cada persona en su propia
   tarjeta, con espacio entre unas y otras. */
.follow-list-row {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem;
  background: var(--bg-main); border: 1px solid var(--border-subtle); border-radius: var(--radius);
}
.follow-list-row + .follow-list-row { margin-top: 0.6rem; }
.follow-list-row .who { flex: 1; min-width: 0; }
.follow-list-empty { padding: 1rem 0; color: var(--text-secondary); font-size: 0.88rem; }
.profile-stat .num { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; }
.profile-stat .label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.profile-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }

.profile-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.5rem; }
.profile-tabs .tab { padding: 0.6rem 1rem; }

/* FEED */
/* Tres columnas (24 ago 2026, pedido explícito): "Recomendado para ti" a la
   IZQUIERDA del feed, no encima ni en la barra lateral derecha. Misma
   anchura que la barra lateral derecha (260px) -- pedido explícito de
   estrecharla, salía demasiado ancha frente al feed. */
.feed-layout { display: grid; grid-template-columns: 260px 1fr 260px; gap: 1.8rem; align-items: start; }
.recs-column { min-width: 0; }
/* En una columna de 300px la reseña no cabe al lado de la portada (salía una
   palabra por línea) -- aquí la portada y el título van arriba en su propia
   fila, y la reseña ocupa todo el ancho de la columna. */
.recs-column .corner { padding: 1.3rem 1.4rem; margin-bottom: 0; }
.recs-column .rec-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.recs-column .rec-row-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.recs-column .rec-row-head .rec-title { margin-bottom: 0.1rem; }
.recs-column .rec-reason { font-size: 0.85rem; line-height: 1.55; }
.recs-column .rec-buy { align-self: flex-start; }
.feed-list { display: flex; flex-direction: column; gap: 1rem; }
.feed-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.2rem; display: flex; gap: 0.9rem; }
.feed-item-body { flex: 1; }
.feed-item-head { font-size: 0.92rem; margin-bottom: 0.2rem; }
.feed-item-head strong { font-weight: 600; }
.feed-item-head .book-ref { font-style: italic; color: var(--accent-primary); }
.feed-item-time { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.feed-item-quote { font-size: 0.88rem; color: var(--text-primary); background: var(--bg-main); border-radius: var(--radius); padding: 0.7rem 0.9rem; line-height: 1.5; font-style: italic; }

/* Cita destacada de un libro (no una reacción personal): una frase del propio texto, subrayada por alguien */
.feed-quote-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-primary); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.3rem 1.5rem; }
.feed-quote-card blockquote { font-family: var(--font-heading); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--text-primary); margin: 0 0 0.8rem; }
.feed-quote-card .quote-attribution { font-size: 0.82rem; color: var(--text-secondary); }
.feed-quote-card .quote-attribution strong { color: var(--text-primary); font-weight: 600; }
.feed-quote-card .quote-attribution .book-ref { font-style: italic; color: var(--accent-primary); }

.feed-sidebar { display: flex; flex-direction: column; gap: 1.2rem; }
.sidebar-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.2rem; }
.sidebar-card h4 { font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 0.9rem; }
.suggest-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
/* min-width:0 para que el nombre pueda envolver dentro de un flex item sin
   empujar al botón "Seguir" fuera de la tarjeta. Corregido (24 ago 2026,
   pedido explícito): antes se recortaba con "..." -- ahora, si un nombre no
   cabe en una línea, la FILA crece a dos líneas para enseñarlo entero, en
   vez de esconder parte del nombre. */
.suggest-row .who { flex: 1; min-width: 0; }
.suggest-row .who .name { font-size: 0.85rem; font-weight: 600; }
.suggest-row .who .handle { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }
.suggest-row .btn { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
/* Por debajo de ~1080px no caben tres columnas: la de recomendaciones pasa a
   ocupar todo el ancho arriba, y el feed vuelve a su maqueta de dos columnas. */
@media (max-width: 1080px) {
  .feed-layout { grid-template-columns: 1fr 260px; }
  .recs-column { grid-column: 1 / -1; }
}
/* La fila EN HORIZONTAL (portada+título al lado de la reseña) solo tiene
   sitio de sobra en un hueco tipo tablet -- en un MÓVIL real (avisó el
   usuario con una captura) no cabe, y la reseña salía una palabra por
   línea con "Comprarlo" saliéndose de la tarjeta. Por debajo de 480px se
   queda en columna (portada+título arriba, la etiqueta, LUEGO la reseña
   debajo, y "Comprarlo" a todo el ancho, sin salirse). */
@media (min-width: 481px) and (max-width: 1080px) {
  .recs-column .rec-row { flex-direction: row; align-items: flex-start; }
  .recs-column .rec-row-head { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .recs-column .rec-buy { align-self: stretch; text-align: center; white-space: normal; }
}
@media (max-width: 720px) { .feed-layout { grid-template-columns: 1fr; } }

/* COMPOSER (publicar en Comunidad, Fase 2) */
.post-composer { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.1rem; }
.post-composer textarea { width: 100%; resize: vertical; min-height: 3rem; font-family: inherit; font-size: 0.9rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 0.6rem 0.8rem; background: var(--bg-main); color: var(--text-primary); }
.post-composer-photo-preview { margin-top: 0.7rem; position: relative; display: inline-block; }
.post-composer-photo-preview img { max-height: 160px; border-radius: var(--radius); display: block; }
.post-composer-photo-preview button { position: absolute; top: 0.3rem; right: 0.3rem; }
.post-composer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.7rem; }
.post-composer-actions .btn-ghost { padding: 0.4rem 0.6rem; }

/* Publicación con foto dentro de un feed-item */
.feed-item-caption { font-size: 0.9rem; line-height: 1.55; color: var(--text-primary); margin: 0.35rem 0 0.5rem; }
.feed-item-photo { margin: 0.6rem 0 0.7rem; border-radius: var(--radius); max-width: 100%; max-height: 420px; object-fit: cover; display: block; }

/* Barra de "me gusta" / "Para tu margen" */
.feed-item-actions { display: flex; gap: 1rem; margin-top: 0.7rem; }
.feed-item-action-btn { display: flex; align-items: center; gap: 0.35rem; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); padding: 0.2rem 0.3rem; border-radius: var(--radius); }
.feed-item-action-btn:hover { color: var(--text-primary); }
.feed-item-action-btn.active { color: var(--accent-primary); font-weight: 600; }

/* Repost ("Para tu margen"): cabecera del reposteador encima de la tarjeta original */
.feed-repost-header { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.03em; }

.profile-link { cursor: pointer; }
.feed-load-more-sentinel { height: 1px; }

/* Chat del club (24 ago 2026, pedido explícito) -- ahora en su propia
   página (club-chat.html), no en un <dialog> pequeño, para tener sitio
   de sobra según se le vayan sumando más funciones (encuestas...). */
.club-chat-messages { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem; background: var(--bg-main); border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.club-chat-messages-page { max-height: 60vh; padding: 1.2rem; }
.club-chat-msg { max-width: 80%; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 0.5rem 0.7rem; align-self: flex-start; position: relative; }
.club-chat-msg.mine { align-self: flex-end; background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.club-chat-msg-author { display: block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; margin-bottom: 0.15rem; }
.club-chat-msg-text { font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
/* Foto en un mensaje del chat (24 ago 2026, pedido explícito) -- mismo
   reescalado que las fotos de publicaciones antes de subirse, aquí solo
   se limita el alto para que no domine toda la burbuja del mensaje. */
.club-chat-msg-photo { display: block; max-width: 100%; max-height: 220px; border-radius: calc(var(--radius) - 2px); margin-bottom: 0.3rem; }
/* Mensaje borrado (24 ago 2026, pedido explícito, "tipo WhatsApp") --
   igual que el resto pero en cursiva y apagado, en vez de desaparecer sin
   dejar rastro (eso solo pasa cuando lo borra un admin). */
.club-chat-msg-deleted { font-style: italic; opacity: 0.65; }
.club-chat-msg-delete {
  position: absolute; top: 0.2rem; right: 0.3rem; background: none; border: none; cursor: pointer;
  font-size: 0.7rem; padding: 0.15rem 0.3rem; color: inherit; opacity: 0.5;
}
.club-chat-msg-delete:hover { opacity: 1; }

/* Aviso discreto de "nuevas recomendaciones" (24 ago 2026, pedido
   explícito) -- toast, no un popup que interrumpa. */
.recs-toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(32, 28, 23, 0.18);
  padding: 0.8rem 1.1rem; font-size: 0.88rem; z-index: 500;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.recs-toast.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -6px); }
.recs-toast.hidden { display: none; }
.recs-toast a { color: var(--accent-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.recs-toast a:hover { text-decoration: underline; }

/* "REELS" (24 ago 2026, pedido explícito) -- SOLO móvil, ver el botón de
   entrada oculto en escritorio más abajo. */
.reels-entry-btn { display: none; width: 100%; margin: -0.5rem 0 1rem; }
@media (max-width: 720px) { .reels-entry-btn { display: block; } }

.reels-overlay { position: fixed; inset: 0; z-index: 1000; background: #0b0a08; }
.reels-overlay.hidden { display: none; }
body.reels-open { overflow: hidden; }
.reels-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.reels-scroll { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.reels-card {
  height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
/* Por defecto la foto se enseña ENTERA, sin recortar (una foto ancha o
   cuadrada queda fatal si se fuerza a rellenar la pantalla, avisó el
   usuario) -- el difuminado de fondo rellena el hueco que deja. Si al
   cargar resulta que su proporción ya se parece a la de la pantalla, JS
   (openReels()) añade .reels-photo-cover y ahí sí rellena sin dejar
   franjas. */
.reels-card-bg-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) brightness(0.55); transform: scale(1.15); }
.reels-card-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.reels-card-bg-photo.reels-photo-cover { object-fit: cover; }
.reels-card-photo:has(.reels-photo-cover) .reels-card-bg-blur { display: none; }
.reels-card-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0)); }
.reels-card-text { background: var(--bg-main); justify-content: center; align-items: center; }
.reels-card-body { position: relative; z-index: 1; padding: 1.5rem 1.3rem 3rem; width: 100%; box-sizing: border-box; }
.reels-card-text .reels-card-body { padding: 1.5rem; text-align: center; }
.reels-card-photo .reels-card-body, .reels-card-photo .feed-item-head, .reels-card-photo .feed-item-time, .reels-card-photo .feed-repost-header {
  color: #fff;
}
.reels-card-photo .feed-item-action-btn { color: #f0ede4; }
.reels-card-photo .feed-item-action-btn.active { color: #fff; }
.reels-text { font-size: 1.05rem; line-height: 1.6; margin: 0.5rem 0 1rem; }
.reels-card-photo .reels-text { color: #fff; }
.reels-sentinel {
  height: 45vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.82rem; background: var(--bg-main);
}

/* Enlaces de texto sueltos ("Ver perfil completo", "Volver a Comunidad")
   fuera de una tarjeta con estilo propio -- sin esto salen con el azul y
   subrayado por defecto del navegador (avisado el usuario, "muy
   antiestético"). Mismo tratamiento que ya usan .auth-row-split/
   .auth-divider en el resto del sitio. */
.text-link-plain { color: var(--accent-primary); text-decoration: none; font-weight: 500; }
.text-link-plain:hover { text-decoration: underline; }

/* Solicitudes de seguimiento, en la pestaña "Tu perfil" (24 ago 2026,
   pedido explícito: en la barra lateral de 260px no cabía nada). */
.follow-requests-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.3rem 1.5rem; margin: 1.5rem 0; }
.follow-requests-card h3 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 1rem; }
.follow-request-row { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; }
.follow-request-row + .follow-request-row { border-top: 1px solid var(--border-subtle); }
.follow-request-row .who { flex: 1; min-width: 0; }
.follow-request-row .who .name { font-size: 0.98rem; font-weight: 600; }
.follow-request-row .who .handle { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }
.follow-request-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
@media (max-width: 560px) {
  .follow-request-row { flex-wrap: wrap; }
  .follow-request-actions { width: 100%; justify-content: flex-end; }
}

/* RECOMENDADO PARA TI (widget de Inicio, recomendaciones por IA) */
.rec-list { display: flex; flex-direction: column; gap: 0.9rem; }
.rec-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.rec-row + .rec-row { padding-top: 0.9rem; border-top: 1px solid var(--border-subtle); }
.rec-row-body { flex: 1; min-width: 0; }
.rec-title { font-family: var(--font-heading); font-size: 0.98rem; margin-bottom: 0.1rem; }
.rec-author { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.35rem; }
.rec-cover-wrap { position: relative; flex-shrink: 0; }
/* ARREGLADO (23 ago 2026, avisó el usuario: "el asterisco en la esquina
   de la portada parece una estrella de favoritos") -- ya no va encima
   de la portada como un círculo con "*", ahora es una línea de texto
   pequeña debajo del título/razón, sin ninguna forma que se pueda
   confundir con una estrella o un marcador de "guardado". */
.rec-fake-cover-note {
  display: block; margin-top: 0.4rem; padding: 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-secondary); text-decoration: underline dotted;
}
.rec-fake-cover-note:hover { color: var(--accent-primary); }
.rec-fake-cover-note.hidden { display: none; }
.rec-saga-badge { margin-bottom: 0.4rem; background: transparent; border-color: var(--accent-pen); color: var(--accent-pen); }
.rec-bold-badge { margin-bottom: 0.4rem; background: transparent; border-color: var(--accent-primary); color: var(--accent-primary); }
.rec-reason { font-size: 0.82rem; font-style: italic; color: var(--text-primary); }
.rec-buy { flex-shrink: 0; padding: 0.35rem 0.7rem; font-size: 0.78rem; white-space: nowrap; }
.rec-disclosure { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-secondary); margin-top: 1rem; }
.rec-disclosure a { color: var(--text-secondary); }

/* FACTURACIÓN / CUENTA */
.billing-plan-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.8rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.billing-plan-name { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; }
.billing-plan-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--accent-sage); background: transparent; color: var(--accent-sage); margin-left: 0.6rem; vertical-align: middle; }
.billing-plan-badge.free { border-color: var(--border-subtle); color: var(--text-secondary); }
.billing-plan-price { color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.2rem; }
.billing-table-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 1.5rem; }
.billing-table-card h3 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 1rem; }
.billing-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.billing-table th { text-align: left; color: var(--text-secondary); font-weight: 500; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-subtle); }
.billing-table td { padding: 0.7rem 0; border-bottom: 1px solid var(--border-subtle); }
.billing-table tr:last-child td { border-bottom: none; }
.pill-status { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.55rem; border-radius: var(--radius); border: 1px solid var(--accent-sage); color: var(--accent-sage); font-weight: 500; }

/* ============================================================
   INICIO PERSONALIZABLE (dashboard de widgets)
   ============================================================ */
.dashboard-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.8rem; }
.dashboard-toolbar h2 { font-family: var(--font-heading); font-size: 1.4rem; }
.dashboard-add-wrap { position: relative; }

.widget-add-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 0.6rem; width: 280px; max-height: 360px; overflow-y: auto; z-index: 20;
}
.widget-add-panel p.empty-note { font-size: 0.85rem; color: var(--text-secondary); padding: 0.6rem; text-align: center; }
.widget-add-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle); }
.widget-add-tab {
  flex: 1; border: 1px solid var(--border-subtle); background: none; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--text-secondary); padding: 0.4rem 0.2rem; cursor: pointer; text-align: center; line-height: 1.3;
}
.widget-add-tab.active { border-color: var(--accent-sage); color: var(--accent-sage); background: var(--bg-main); }
.widget-add-option {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.7rem; border-radius: var(--radius); font-size: 0.88rem; cursor: pointer;
}
.widget-add-option:hover { background: var(--bg-main); }
.widget-add-option .add-icon { color: var(--accent-primary); font-weight: 700; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.dashboard-widget.widget-wide { grid-column: 1 / -1; }

.widget-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.widget-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.2rem 0.8rem; border-bottom: 1px solid var(--border-subtle);
}
.widget-card-head h3 { font-family: var(--font-heading); font-size: 1.02rem; }
.widget-card-head-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.widget-card-head-left h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-card-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.drag-handle { color: var(--text-secondary); cursor: grab; display: flex; flex-shrink: 0; touch-action: none; }
.drag-handle:active { cursor: grabbing; }

.size-toggle { display: inline-flex; background: var(--bg-main); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 0.15rem; }
.size-toggle button {
  border: none; background: none; width: 22px; height: 20px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  color: var(--text-secondary); border-radius: 3px; cursor: pointer;
}
.size-toggle button.active { background: var(--accent-primary); color: #fff; }

.widget-card.dragging { opacity: 0.4; }
.widget-card.drag-over { outline: 2px dashed var(--accent-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .dashboard-grid.editing .widget-card:not(.dragging) { animation: widget-jiggle 0.26s ease-in-out infinite; }
  @keyframes widget-jiggle {
    0% { transform: rotate(-0.4deg); }
    50% { transform: rotate(0.4deg); }
    100% { transform: rotate(-0.4deg); }
  }
}
.widget-ctrl-btn {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  width: 26px; height: 26px; border-radius: var(--radius); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.widget-ctrl-btn:hover { background: var(--bg-main); color: var(--text-primary); }
.widget-ctrl-btn.remove:hover { color: #c94a4a; }
.widget-card-body { padding: 1.1rem 1.2rem 1.3rem; }

.mini-book-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem 0; }
.mini-book-row + .mini-book-row { border-top: 1px solid var(--border-subtle); }
.mini-cover { width: 34px; aspect-ratio: 2 / 3; border-radius: 3px; object-fit: cover; background: var(--border-subtle); flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.2); filter: sepia(0.22) saturate(0.9) contrast(1.02); }
.mini-book-info { flex: 1; min-width: 0; }
.mini-book-info .t { font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-book-info .a { font-size: 0.78rem; color: var(--text-secondary); }
.mini-progress-bg { width: 100%; height: 4px; background: var(--border-subtle); border-radius: 2px; margin-top: 0.35rem; overflow: hidden; }
.mini-progress-fill { height: 100%; background: var(--accent-primary); }

.widget-empty-state {
  text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--border-subtle);
  border-radius: var(--radius); color: var(--text-secondary);
}
.widget-empty-state .btn { margin-top: 1rem; }

.mini-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.9rem; }
.mini-stat { text-align: center; }
.mini-stat .num { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--accent-primary); }
.mini-stat .lbl { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }

.reread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.reread-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--border-subtle); }
.reread-list li:last-child { border-bottom: none; padding-bottom: 0; }
.reread-title { font-family: var(--font-heading); font-size: 0.92rem; }
.reread-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-primary); flex-shrink: 0; }

.widget-footer-link { display: block; text-align: center; margin-top: 0.9rem; font-size: 0.82rem; color: var(--accent-primary); text-decoration: none; font-weight: 500; }
.widget-footer-link:hover { text-decoration: underline; }

/* Dentro de una tarjeta de widget, el feed-item no necesita su propia caja:
   ya está enmarcado por el widget-card que lo contiene. */
.widget-card-body .feed-item { background: none; border: none; box-shadow: none; border-radius: 0; padding: 0.7rem 0; }
.widget-card-body .feed-list { gap: 0; }
.widget-card-body .feed-item + .feed-item { border-top: 1px solid var(--border-subtle); }
.widget-card-body .feed-item:first-child { padding-top: 0; }
.widget-card-body .feed-item:last-child { padding-bottom: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   PERSONALIZACIÓN DE PERFIL (densidad / cabecera)
   ============================================================ */
.customize-panel {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 1.4rem 1.6rem; margin-bottom: 1.5rem;
}
.customize-panel h3 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.2rem; }
.customize-panel > p.subtitle { margin-bottom: 1.2rem; }
.customize-row { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; border-top: 1px solid var(--border-subtle); gap: 1rem; flex-wrap: wrap; }
.customize-row:first-of-type { border-top: none; }
.customize-row-label { font-size: 0.9rem; font-weight: 500; }
.customize-row-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.15rem; font-weight: 400; }

.segmented-control { display: inline-flex; background: var(--bg-main); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 0.2rem; }
.segmented-control button {
  border: none; background: none; padding: 0.4rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500;
  color: var(--text-secondary); border-radius: var(--radius); cursor: pointer;
}
.segmented-control button.active { background: var(--accent-primary); color: #fff; }

/* Paletas de color ya combinadas — sustituyen a los 3 selectores
   independientes de antes (fichas / sello / subrayado). */
.palette-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.8rem; }
.palette-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  background: var(--bg-main); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  padding: 1rem 1.3rem; cursor: pointer;
}
.palette-swatch.active { border-color: var(--text-primary); }
.palette-preview { display: flex; }
.palette-preview .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg-main); margin-left: -8px; }
.palette-preview .dot:first-child { margin-left: 0; }
.palette-name { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.palette-swatch.active .palette-name { color: var(--text-primary); font-weight: 600; }

.palette-preview-panel {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  margin-top: 1.1rem; padding: 1rem 1.2rem;
  background: var(--bg-main); border: 1px dashed var(--border-subtle); border-radius: var(--radius);
}
.palette-preview-avatar { flex-shrink: 0; }
.palette-preview-quote {
  font-family: var(--font-heading); font-style: italic; font-size: 0.88rem;
  color: var(--accent-pen); border-left: 2px solid var(--accent-pen); padding-left: 0.6rem;
}

/* PERSONALIZAR PUNTO DE LIBRO — editor con vista previa en vivo (21 ago
   2026, pedido explícito: "más grande el popup", "previsualización" y "más
   opciones"). Reutiliza .palette-swatch para las paletas rápidas; los
   colores en uso (preset o personalizados) se escriben como variables CSS
   en .bookmark-preview-strip para no redefinir la tarjeta entera en JS
   cada vez que cambian. El resto de la tira (papel, tinta, regla) queda en
   colores fijos a propósito, igual que en el PDF real: solo el filete y la
   comilla son personalizables. */
.modal-bookmark { max-width: 680px; }
.bookmark-editor { display: flex; gap: 1.6rem; align-items: flex-start; margin-top: 0.6rem; }
.bookmark-editor-controls { flex: 1; min-width: 0; }
.bookmark-color-pickers { display: flex; gap: 1.2rem; margin-top: 0.6rem; flex-wrap: wrap; }
.bookmark-color-pickers label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); flex: 1; min-width: 120px; }
.bookmark-color-pickers input[type="color"] { width: 100%; height: 34px; border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 2px; cursor: pointer; background: var(--bg-main); }

/* Portada, tamaño y favoritas (mismo pedido, ampliado el 21 ago 2026):
   reutiliza .setting-row/.toggle-checkbox tal cual (ya usados en Cuenta →
   Suscripción → Modo desarrollador) en vez de inventar un control nuevo,
   pero más compactos — aquí van tres seguidos en una columna estrecha, no
   uno solo en una tarjeta espaciosa. */
.bookmark-toggle-options .setting-row { margin-top: 0.9rem; font-weight: 400; }
.bookmark-toggle-options .setting-row label { font-size: 0.85rem; padding-right: 0.6rem; }

/* Ancho del punto de libro (22 ago 2026): "Estándar" prueba los 3 anchos
   solo, "Personalizar" los deja elegir a mano — y si con el primero no
   basta, aparece este mismo segmented-control una segunda vez para el
   ancho del segundo punto de libro. */
.bookmark-fit-status { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.6rem; line-height: 1.5; }
#bookmark-width2-row { margin-top: 0.9rem; }

.bookmark-editor-preview { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0 auto; }
/* El ancho (130px = 55mm, la escala la fija JS a partir de BOOKMARK_WIDTHS)
   y el aspect-ratio se ponen en línea desde refreshBookmarkPreview() en
   app.js, uno por cada ancho posible (55/65/75mm) — no hay una clase por
   tamaño, ya no son solo dos opciones fijas ("normal"/"grande"). */
.bookmark-preview-strip {
  --bm-accent: #7A2E2E; --bm-pen: #2B4A6F;
  width: 130px; aspect-ratio: 55 / 180; background: #F8F4E9;
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft);
  padding: 0.9rem 0.7rem; display: flex; flex-direction: column; overflow: hidden;
  transition: width 0.15s ease;
}
.bookmark-preview-cover { width: 44%; aspect-ratio: 2 / 3; object-fit: cover; align-self: center; margin-bottom: 0.6rem; box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
.bookmark-preview-rule { width: 30px; height: 2px; background: var(--bm-accent); margin-bottom: 0.5rem; }
.bookmark-preview-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.76rem; line-height: 1.25; color: #22201B; margin-bottom: 0.15rem; }
.bookmark-preview-author { font-family: var(--font-heading); font-style: italic; font-size: 0.6rem; color: #6F695B; margin-bottom: 0.7rem; }
.bookmark-preview-hr { border: none; border-top: 1px solid #D8D2C2; margin-bottom: 0.7rem; }
.bookmark-preview-label { font-family: var(--font-mono); font-size: 0.48rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bm-accent); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.6rem; }
.bookmark-preview-label::before { content: ''; width: 8px; height: 1.5px; background: var(--bm-accent); display: inline-block; }
.bookmark-preview-quote { position: relative; font-family: var(--font-heading); font-style: italic; font-size: 0.66rem; line-height: 1.4; color: #22201B; padding-left: 0.5rem; }
.bookmark-preview-quote::before { content: '\201C'; position: absolute; left: -0.3rem; top: -0.5rem; font-size: 1.3rem; color: var(--bm-pen); font-style: italic; }
.bookmark-preview-caption { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 600px) {
  .bookmark-editor { flex-direction: column; align-items: center; }
  .bookmark-editor-controls { width: 100%; }
}

/* Variante de cabecera: banner (por defecto ya definida en .profile-header-card) */
.profile-page.header-minimal .profile-header-card { flex-direction: row; padding: 1.2rem 1.6rem; background: transparent; border: none; box-shadow: none; }
.profile-page.header-minimal .avatar-circle.lg { width: 60px; height: 60px; font-size: 1.3rem; }
.profile-page.header-minimal .profile-bio { display: none; }
.profile-page.header-banner .profile-header-card {
  padding: 2.4rem 2rem;
}

/* Variante de densidad: compacta */
.profile-page.density-compacta .feed-item { padding: 0.7rem 1rem; }
.profile-page.density-compacta .feed-item-quote { display: none; }
.profile-page.density-compacta .feed-item-time { margin-bottom: 0; }
.profile-page.density-compacta .feed-list { gap: 0.6rem; }
.profile-page.density-compacta .profile-header-card { padding: 1.4rem; }
.profile-page.density-amplia .feed-item { padding: 1.4rem 1.6rem; }
.profile-page.density-amplia .feed-item-quote { font-size: 0.95rem; }

/* ============================================================
   RINCÓN DE LECTURA (cabecera de Inicio) Y "LO QUE GUARDASTE"
   ============================================================ */
.rincon-hero { position: relative; margin: -1rem -1.5rem 2.5rem; overflow: hidden; background: #332E26; }
.rincon-hero.empty { display: none; }
.rincon-shelf-strip { display: flex; gap: 0.9rem; padding: 2.6rem 1.5rem 7rem; justify-content: center; flex-wrap: wrap; }
.rincon-shelf-strip img { display: block; width: 96px; height: 144px; object-fit: cover; box-shadow: 0 8px 22px rgba(0,0,0,0.45); filter: sepia(0.28) saturate(0.85) contrast(1.04); background: #443E33; }
.rincon-shelf-strip img:nth-child(even) { transform: translateY(-10px); }
.rincon-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(51,46,38,0) 28%, rgba(51,46,38,0.92) 66%, rgba(51,46,38,0.97) 100%); }
.rincon-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.5rem; text-align: center; padding: 0 1rem; }
.rincon-caption h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 500; color: #F3EFE4; }
.rincon-caption h1 em { font-style: italic; position: relative; }
.rincon-caption h1 em svg { position: absolute; left: 0; bottom: -8px; width: 100%; height: 11px; }
.rincon-caption .sub { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: #B5AB98; margin-top: 0.6rem; }

.home-greeting { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.9rem 0 2.1rem; }
.home-greeting h1 { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 500; margin-bottom: 0.3rem; }
.home-greeting p { color: var(--text-secondary); font-size: 0.95rem; }

/* Rincón de lectura: "Lo que guardaste" a la izquierda, "Recomendado
   para ti" fijo a la derecha (23 ago 2026, pedido explícito -- antes
   las recomendaciones eran un widget más, arrastrable, ahora viven
   aquí siempre, no en el panel de widgets de más abajo). */
.rincon-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; }
.rincon-split > div { display: flex; flex-direction: column; }
.rincon-split > div .corner { flex: 1; display: flex; flex-direction: column; }
/* Cuando el contenido es solo el aviso vacío (una columna corta junto a
   otra más alta, p. ej. "Lo que guardaste" sin nada que enseñar junto a
   3 recomendaciones), se centra verticalmente en vez de quedarse pegado
   arriba en una caja ahora más alta de lo que su propio texto ocupa
   (aviso del usuario con captura, 23 ago 2026). Los demás contenidos de
   .corner (con cabecera + lista) no llevan estos márgenes automáticos,
   así que siguen apilándose desde arriba como siempre. */
.rincon-split > div .corner > .annotation-empty { margin-top: auto; margin-bottom: auto; }
@media (max-width: 860px) {
  .rincon-split { grid-template-columns: 1fr; }
}

.sec-head { display: flex; align-items: baseline; gap: 0.8rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.5rem; margin-bottom: 1.3rem; }
.sec-head h2 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; font-style: italic; }

.corner { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 1.7rem 2rem; margin-bottom: 1.4rem; position: relative; box-shadow: var(--shadow-soft); }
.corner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(var(--border-subtle), var(--border-subtle) 6px, transparent 6px, transparent 12px); }
.corner-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); }
.corner-synopsis { font-size: 0.95rem; line-height: 1.65; color: var(--text-primary); margin-bottom: 0.4rem; }
.corner-head img { width: 42px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,0.2); border-radius: 2px; filter: sepia(0.22) saturate(0.9) contrast(1.02); }
.corner-head .t { font-size: 1rem; font-weight: 600; }
.corner-head .a { font-size: 0.83rem; color: var(--text-secondary); font-style: italic; }
.corner .rating-stamp {
  margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--accent-primary); color: var(--accent-primary);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.68rem; transform: rotate(-9deg); flex-shrink: 0;
}

.annot { margin-bottom: 1.6rem; }
.annot:last-child { margin-bottom: 1.1rem; }
.annot-meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.annot-meta .loc { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.annot-meta .pub { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--accent-pen); }
.annot q { display: block; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.5; font-style: italic; quotes: none; }
.annot .said { font-family: var(--font-heading); font-style: italic; font-size: 0.9rem; color: var(--accent-pen); margin-top: 0.5rem; line-height: 1.5; }
.annot.concept q { font-style: normal; font-size: 1rem; }
.annot.concept { padding-left: 1rem; border-left: 2px solid var(--border-subtle); }

/* Personalizar cabecera (vive en Ajustes) */
.shelf-settings .ss-options { display: flex; flex-direction: column; gap: 0.7rem; }
.ss-opt { display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; padding: 0.85rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--bg-main); }
.ss-opt.active { border-color: var(--accent-primary); }
.ss-opt .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--text-secondary); flex-shrink: 0; margin-top: 0.2rem; position: relative; }
.ss-opt.active .radio { border-color: var(--accent-primary); }
.ss-opt.active .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-primary); }
.ss-opt strong { font-size: 0.95rem; display: block; margin-bottom: 0.15rem; }
.ss-desc { display: block; font-size: 0.82rem; color: var(--text-secondary); }
.ss-manual-picker { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--border-subtle); }
.ss-manual-picker.hidden { display: none; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.ss-pick { position: relative; border: none; padding: 0; background: none; cursor: pointer; opacity: 0.4; transition: opacity 0.15s; }
.ss-pick:hover { opacity: 0.7; }
.ss-pick.on { opacity: 1; }
.ss-pick img { width: 100%; height: auto; display: block; box-shadow: 0 3px 8px rgba(0,0,0,0.18); border-radius: 2px; }
.ss-pick .check {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-primary); color: #fff;
  align-items: center; justify-content: center; font-size: 0.6rem; display: none;
}
.ss-pick.on .check { display: flex; }

/* ============================================================
   ESTADOS VACÍOS Y AVISOS
   ============================================================ */
/* Antes, tanto "acabo de entrar y no tengo libros" como "he buscado algo
   que no existe" mostraban el mismo texto suelto ("No se encontraron
   libros"), sin salida ni invitación a hacer nada. */
.library-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--border-subtle);
  background: var(--bg-card);
}
.library-empty-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.library-empty-text {
  color: var(--text-secondary);
  max-width: 42ch;
  margin: 0 auto 1.4rem;
  line-height: 1.6;
}
.profile-activity-empty {
  color: var(--text-secondary);
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  background: var(--bg-card);
}
.preview-notice {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border: 1px dashed var(--border-subtle);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.6rem;
}
.form-message {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.4rem;
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-main);
  color: var(--text-primary);
}
.form-message[data-kind="info"] { border-left-color: var(--accent-sage); }
.form-message[hidden] { display: none; }

.backup-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0.7rem 0 0;
  max-width: 60ch;
}
.backup-note code { font-family: var(--font-mono); font-size: 0.9em; }

/* ============================================================
   CATÁLOGO: LÍNEA DE ESTADÍSTICAS
   ============================================================ */
.stats-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--border-subtle);
}
.stats-line-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.stats-line-item .val { color: var(--text-primary); font-weight: 500; }
.stats-line-sep { opacity: 0.45; }

/* ============================================================
   CUENTA: SALIR Y ELIMINAR
   ============================================================ */
.account-exit-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-subtle);
}
.btn-danger {
  background: none;
  border: 1px solid #8C3A2E;
  color: #8C3A2E;
}
.btn-danger:hover { background: #8C3A2E; color: var(--bg-card); }
body.dark-mode .btn-danger { border-color: #E08472; color: #E08472; }
body.dark-mode .btn-danger:hover { background: #E08472; color: #262320; }

.billing-usage-full { color: #8C3A2E; }
body.dark-mode .billing-usage-full { color: #E08472; }

/* ============================================================
   ETIQUETAS SEGÚN EL ANCHO (.only-desktop / .only-mobile)
   ============================================================ */
.only-mobile { display: none; }

/* ============================================================
   PASADA DE MÓVIL
   ============================================================ */
@media (max-width: 600px) {
  body { padding: 1.6rem 1rem; }

  /* El padding horizontal de body baja a 1rem aquí arriba; el margen
     negativo "a sangre" de .rincon-hero tiene que seguirle el paso o
     sobresale por los dos lados y provoca scroll horizontal. */
  .rincon-hero { margin-left: -1rem; margin-right: -1rem; }

  .only-desktop { display: none; }
  .only-mobile { display: inline; }

  /* Cabecera: de 155 px a 96 px de alto gracias a las etiquetas cortas
     de arriba y a que ya no se parte en dos filas. */
  .app-header-lite { gap: 0.5rem; }
  .site-header { gap: 0.8rem; }
  .header-actions { width: 100%; justify-content: space-between; gap: 0.4rem; flex-wrap: nowrap; }
  .header-actions .btn { padding-left: 0.7rem; padding-right: 0.7rem; font-size: 0.72rem; }
  .account-menu-trigger { flex-shrink: 0; }

  /* La cabecera de cuenta (arriba) solo tiene un elemento y cabe sin
     envolver, pero .header-actions se reutiliza también para los 4 botones
     de acción del Cuaderno — ahí el nowrap de arriba los apretaba tanto
     que el texto de cada botón se partía en varias líneas ("Punto de
     libro" en tres). Aquí se les devuelve el ajuste por filas en vez de
     encogerse (aviso del usuario, 21 ago 2026). */
  .dashboard-toolbar .header-actions { flex-wrap: wrap; justify-content: flex-start; }
  .dashboard-toolbar .header-actions .btn { white-space: nowrap; }
  .btn { min-height: 44px; }
  .site-logo { min-height: 44px; display: inline-flex; align-items: center; }

  /* La navegación y los filtros de estado del Catálogo no caben en una fila
     a este ancho: en vez de partirse en dos líneas, se desliza en
     horizontal, con un degradado en el borde derecho que sugiere que hay
     más — a 375 px "Cuenta" y "Estadísticas" quedaban fuera de pantalla sin
     ninguna pista de que se podían alcanzar arrastrando. */
  .app-nav-lite {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.6rem;
  }
  .app-nav-lite, .filter-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .app-nav-lite::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar { display: none; }
  .app-nav-lite .nav-btn { flex-shrink: 0; }

  /* Objetivos táctiles de 44 px — "Editar" y "Eliminar" medían 33x15 px
     pegados el uno al otro: con el dedo era muy fácil darle a Eliminar
     queriendo abrir el libro. */
  .app-nav-lite .nav-btn, .filter-tabs .tab,
  .btn-card-action, .widget-footer-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-card-action { padding: 0 0.55rem; font-size: 0.78rem; }
  .card-actions { flex-wrap: wrap; gap: 0.4rem; align-items: center; }
  .site-footer-legal a { display: inline-block; padding: 0.35rem 0; }

  /* Dos libros por fila en vez de uno: se ve más biblioteca sin scroll
     y las portadas (proporción 2:3) quedan a un tamaño natural. */
  .books-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .book-card { padding: 0.8rem; }
  .book-cover { margin-bottom: 0.7rem; }
  .book-title { font-size: 0.92rem; }
  .book-author { font-size: 0.78rem; margin-bottom: 0.6rem; }
  .book-badges { gap: 0.3rem; margin-bottom: 0.6rem; }
  .book-badge { font-size: 0.62rem; padding: 0.15rem 0.4rem; }

  .modal-detail .detail-hero-inner { padding: 1.2rem; }
  .detail-cover { width: 100px; }

  /* Línea de estadísticas del Catálogo: vuelve a una sola fila, con el
     texto encogiendo en vez de empujar el botón a una fila propia. */
  .stats-line { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.7rem; }
  .stats-line .quick-log-toggle { width: auto; flex-shrink: 0; font-size: 0.68rem; padding: 0 0.6rem; }
  .stats-line-text { flex: 1 1 auto; min-width: 0; font-size: 0.63rem; gap: 0.4rem; }

  /* "Ordenar por:" y "Categoría:" son redundantes en móvil: el propio
     desplegable ya dice lo que hace. Se quedan en el DOM para lectores
     de pantalla, solo se ocultan visualmente. */
  .search-sort-bar label,
  .category-filter-wrapper label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .search-sort-bar { gap: 0.5rem; }

  .account-exit-row .btn { width: 100%; }

  /* iOS Safari hace zoom automático al tocar un campo de formulario cuyo
     font-size sea menor de 16px. En escritorio muchos campos usan tamaños
     más pequeños (0.85rem, 0.88rem…) por estética; aquí se fuerza el
     mínimo de 16px para que el navegador no haga zoom al enfocarlos. */
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   ONBOARDING — recorrido guiado de 6 pasos para cuentas nuevas (23 ago
   2026, pedido explícito). Vive en onboarding.js (estado/lógica
   compartida) + código propio de cada página (home.js/app.js/
   billing.html) para el contenido de cada paso concreto. Dos formatos:
   .ob-card (tarjeta de rincón, con un elemento real resaltado detrás)
   para los pasos "en contexto", y .ob-fullscreen (pantalla completa)
   solo para el primer paso (bienvenida) y el último (cierre).
   ============================================================ */
.ob-card {
  position: fixed; z-index: 2000; bottom: 1.4rem; right: 1.4rem; left: 1.4rem;
  max-width: 380px; margin-left: auto;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(32, 28, 23, 0.18); padding: 1.3rem 1.4rem;
  animation: ob-card-in 0.25s ease;
}
@keyframes ob-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ob-card-step {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-primary); margin-bottom: 0.4rem;
}
.ob-card h3 { font-family: var(--font-heading); font-size: 1.05rem; margin-bottom: 0.4rem; }
.ob-card-text { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1rem; }
.ob-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.ob-card-actions .btn { font-size: 0.8rem; }

/* Aro suave alrededor del elemento real al que apunta la tarjeta --
   nunca oscurece el resto de la página (no hay overlay de fondo a
   propósito, para que se pueda seguir interactuando con todo mientras
   se lee la tarjeta, no solo con lo resaltado). */
.ob-highlight-ring {
  outline: 3px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius);
  animation: ob-pulse 1.6s ease-in-out infinite;
}
@keyframes ob-pulse { 0%, 100% { outline-color: var(--accent-primary); } 50% { outline-color: var(--accent-pen); } }

.ob-fullscreen {
  position: fixed; inset: 0; z-index: 2100;
  background: var(--bg-main); display: flex; align-items: center; justify-content: center; padding: 2rem;
  animation: ob-card-in 0.3s ease;
}
.ob-fullscreen-inner { max-width: 480px; text-align: center; }
.ob-fullscreen-mark { font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: var(--accent-pen); margin-bottom: 1.4rem; }
.ob-fullscreen h1 { font-family: var(--font-heading); font-size: 1.9rem; margin-bottom: 0.9rem; }
.ob-fullscreen p { font-size: 0.98rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
.ob-fullscreen-actions { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.ob-fullscreen-skip { background: none; border: none; font-size: 0.78rem; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }

/* Aviso pequeño de "sigue por aquí" cuando el onboarding está activo
   pero esta página/pestaña no es la del paso actual (23 ago 2026,
   pedido explícito) -- discreto a propósito, en la esquina opuesta a
   donde iría la tarjeta grande. */
.ob-resume-pill {
  position: fixed; z-index: 2000; bottom: 1.4rem; left: 1.4rem;
  background: var(--accent-primary); color: var(--bg-card); border: none; border-radius: 999px;
  padding: 0.6rem 1.1rem; font-family: var(--font-body); font-size: 0.82rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(32, 28, 23, 0.2); animation: ob-card-in 0.25s ease;
}
.ob-resume-pill:hover { background: var(--accent-hover); }

@media (max-width: 640px) {
  .ob-card { right: 0.8rem; left: 0.8rem; bottom: 0.8rem; max-width: none; padding: 1.1rem 1.2rem; }
}