/* tokens.css */
/* El siguiente libro: el diario de lecturas. Blanco de cuaderno, tres pasteles con trabajo fijo y tinta para leer. */
@font-face {
	font-family: "Karla";
	src: url("https://elsiguientelibro.es/wp-content/themes/ip10-elsiguientelibro/assets/fuentes/karla.woff2") format("woff2");
	font-weight: 400 800;
	font-display: swap;
}
/* Los números de orden, a mano: solo las cifras de Caveat (2,5 KB). */
@font-face {
	font-family: "Diario cifras";
	src: url("https://elsiguientelibro.es/wp-content/themes/ip10-elsiguientelibro/assets/fuentes/caveat-cifras.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0030-0039;
}
/* Letra de respaldo mientras llega Karla: Arial (Roboto en Android) ajustada a su ancho y a su altura de línea,
   para que al cambiar de letra los títulos no cambien de número de líneas. Proporciones medidas en los textos de la
   web por peso (21/10/2026): 400, 600 a 700 y 800 de Karla frente a Arial normal y negrita. */
@font-face { font-family: "Karla respaldo"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"); font-weight: 100 599; size-adjust: 99.3%; ascent-override: 92.3%; descent-override: 25.4%; line-gap-override: 0%; }
@font-face { font-family: "Karla respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 600 749; size-adjust: 98.6%; ascent-override: 93.0%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: "Karla respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Helvetica Bold"); font-weight: 750 1000; size-adjust: 103.8%; ascent-override: 88.3%; descent-override: 24.3%; line-gap-override: 0%; }

:root {
	/* El papel y la tinta */
	--papel: #ffffff;
	--papel-gris: #faf9fc;     /* fondos de aviso y de pie */
	--puntos: #e4e0eb;         /* la trama de puntos del cuaderno, en la cabeza de página */
	--puntos-suaves: #efecf3;  /* la misma trama, más suave, en todo el papel */
	--linea: #ebe8f0;          /* filetes */
	--linea-fuerte: #cfcadb;   /* bordes de controles */
	--tinta: #2b2a33;
	--tinta-suave: #5d5967;    /* 6,6:1 sobre blanco */
	--tinta-encima: #46444f;   /* la tinta del botón principal al pasar por encima */
	--circulo: #7d778e;        /* el borde del círculo sin marcar: 4,3:1 sobre blanco y 3,2:1 sobre rosa */

	/* Los pasteles, cada uno con su trabajo */
	--rosa: #f6d6e3;           /* lo que toca ahora: el siguiente libro, leyendo */
	--rosa-claro: #fcecf2;
	--rosa-hondo: #a8325f;     /* texto sobre blanco o rosa: 5,9:1 */
	--menta: #d3ecde;          /* leído */
	--menta-hondo: #2c6e52;
	--mantequilla: #fbe8b5;    /* pendiente */
	--lavanda: #e4ddf6;        /* navegación y rótulos de sección */
	--lavanda-claro: #f3f0fb;
	--lavanda-hondo: #5b48ad;  /* enlaces y foco: 7,4:1 */
	--estrella: #e8b03a;
	--estrella-borde: #9a6b07;

	/* Letras */
	--marco: "Karla", "Karla respaldo", system-ui, sans-serif;
	--lectura: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
	--mano: "Diario cifras", var(--marco);

	--t-h1: clamp(2.25rem, 1.55rem + 3.3vw, 4rem);
	--t-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
	--t-cuerpo: 1.125rem;
	--t-pequeno: 0.9375rem;
	--t-rotulo: 0.875rem;

	/* Ritmo */
	--e-1: 8px;
	--e-2: 16px;
	--e-3: 24px;
	--e-4: 40px;
	--e-5: 64px;
	--gutter: clamp(16px, 4vw, 32px);
	--ancho: 1240px;
	--medida: 34em;          /* unos 70 caracteres de la serif de lectura */
	--radio: 14px;
	--suave: cubic-bezier(0.22, 1, 0.36, 1);
}

/* base.css */
/* Base: el papel, la letra y las superficies del navegador. */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-color: var(--linea-fuerte) transparent;
	scroll-padding-top: var(--e-3);
}

body {
	margin: 0;
	background: radial-gradient(var(--puntos-suaves) 1px, transparent 1.3px) 0 0 / 22px 22px var(--papel);
	color: var(--tinta);
	font-family: var(--marco);
	font-size: var(--t-cuerpo);
	line-height: 1.5;
	font-variant-numeric: lining-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--rosa); color: var(--tinta); }

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--marco); text-wrap: balance; }
p, li { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; height: auto; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }

a {
	color: inherit;
	text-decoration-color: var(--lavanda-hondo);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}
a:hover { color: var(--lavanda-hondo); }

:focus-visible {
	outline: 2.5px solid var(--lavanda-hondo);
	outline-offset: 3px;
	border-radius: 6px;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { caret-color: var(--rosa-hondo); }
::placeholder { color: var(--tinta-suave); opacity: 1; }

.esl-saltar {
	position: absolute;
	left: var(--gutter);
	top: -100px;
	z-index: 100;
	padding: var(--e-1) var(--e-2);
	border-radius: 999px;
	background: var(--tinta);
	color: var(--papel);
	font-weight: 700;
}
.esl-saltar:focus { top: var(--e-1); }

.screen-reader-text,
.esl-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.esl-contenedor {
	width: 100%;
	max-width: calc(var(--ancho) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* componentes.css */
/* El diario de lecturas: cabecera, pestañas, cabeza de página, filas del orden, entradas de libro y pie. */

/* ---------- Cabecera ---------- */
.esl-cabecera { background: var(--papel); border-bottom: 1px solid var(--linea); }
.esl-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	min-height: 64px;
}
.esl-marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding-block: 10px;
	color: var(--tinta);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
}
.esl-marca:hover { color: var(--tinta); }
.esl-marca__icono { width: 26px; height: 26px; flex: none; }
.esl-cabecera__acciones { display: flex; align-items: center; gap: 4px; }
.esl-cuenta-enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 0 12px;
	border-radius: 999px;
	color: var(--tinta);
	font-weight: 600;
	font-size: var(--t-pequeno);
	white-space: nowrap;
	text-decoration: none;
}
.esl-cuenta-enlace:hover { background: var(--lavanda-claro); color: var(--tinta); }
.esl-i { width: 20px; height: 20px; flex: none; fill: currentColor; }
.esl-lupa { width: 20px; height: 20px; }
@media (max-width: 439px) {
	.esl-cabecera__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.esl-cuenta-enlace { padding: 0 10px; }
}

/* La búsqueda de la cabecera */
.esl-busca { background: var(--lavanda-claro); border-top: 1px solid var(--linea); }
.esl-busca[hidden] { display: none; }
.esl-busca__fila { display: flex; gap: 8px; padding-block: 12px; }
.esl-busca input[type="search"],
.esl-busca-grande input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	background: var(--papel);
	font-family: var(--marco);
	font-size: 1.0625rem;
}
.esl-busca input[type="search"]:focus-visible,
.esl-busca-grande input[type="search"]:focus-visible { border-color: var(--lavanda-hondo); outline-offset: 2px; }

/* ---------- Botones ---------- */
.esl-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid var(--tinta);
	border-radius: 999px;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--marco);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.2s var(--suave);
}
.esl-boton:hover { background: var(--lavanda-claro); color: var(--tinta); }
.esl-boton--principal { background: var(--tinta); color: var(--papel); }
.esl-boton--principal:hover { background: var(--tinta-encima); color: var(--papel); }
.esl-boton--peligro { border-color: var(--rosa-hondo); color: var(--rosa-hondo); }

/* ---------- Pestañas de sección ---------- */
.esl-rail { background: var(--papel); border-bottom: 1px solid var(--linea); }
/* Las pestañas van dentro del contenedor; si no caben, se deslizan y el borde derecho se desvanece. */
.esl-rail__lista {
	display: flex;
	gap: 2px;
	max-width: calc(var(--ancho) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: calc(var(--gutter) - 10px);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.esl-rail__lista::-webkit-scrollbar { display: none; }
.esl-rail__item { flex: none; }
.esl-rail__item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 10px;
	color: var(--tinta-suave);
	font-weight: 600;
	font-size: var(--t-pequeno);
	white-space: nowrap;
	text-decoration: none;
}
.esl-rail__item > a:hover { color: var(--tinta); }
.esl-rail__item.is-actual > a { color: var(--tinta); font-weight: 700; }
.esl-rail__item.is-actual > a::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--lavanda-hondo);
}

/* ---------- Cabeza de página: la hoja de cuaderno ---------- */
.esl-campo {
	padding-block: clamp(28px, 6vw, 56px) clamp(20px, 4vw, 32px);
	background: radial-gradient(var(--puntos) 1.1px, transparent 1.4px) 0 0 / 20px 20px var(--papel);
	border-bottom: 1px solid var(--linea);
}
.esl-campo h1 {
	max-width: 12em;
	font-size: var(--t-h1);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
}
.esl-campo__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin-top: var(--e-2);
	color: var(--tinta-suave);
	font-size: var(--t-pequeno);
}
.esl-miga {
	padding: 3px 14px 4px;
	background: var(--rosa);
	transform: rotate(-1deg);
	-webkit-mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% 6px repeat-y;
	mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% 6px repeat-y;
}
.esl-miga ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.esl-miga li + li::before { content: "/"; margin-right: 8px; color: var(--rosa-hondo); }
.esl-miga a { color: var(--tinta); text-decoration: none; padding-block: 8px; }
.esl-miga a:hover { color: var(--lavanda-hondo); text-decoration: underline; }
.esl-miga [aria-current] { color: var(--tinta); }
.esl-campo__cuenta {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--lavanda);
	color: var(--tinta);
	font-weight: 700;
}

/* ---------- El cuerpo de la página ---------- */
.esl-pagina { padding-block: var(--e-4) var(--e-5); }
.esl-contenido > * + * { margin-top: var(--e-3); }
.esl-contenido > h2,
.esl-orden__titulo {
	position: relative;
	max-width: 100%;
	margin-top: var(--e-5);
	font-size: var(--t-h2);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
/* El rótulo de sección escrito sobre una tira de cinta washi lavanda (la navegación: el índice salta a ellos).
   La cinta sigue cada línea del rótulo, con los extremos rasgados, y el rótulo va apenas torcido. */
.esl-washi {
	padding: 0.06em 0.34em 0.1em;
	background: var(--lavanda);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% 6px repeat-y;
	mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% 6px repeat-y;
}
.esl-contenido > h2 .esl-washi,
.esl-orden__titulo .esl-washi { line-height: 1.32; }
.esl-contenido > h2,
.esl-orden__titulo { margin-left: -0.3em; transform: rotate(-0.6deg); transform-origin: left center; }
.esl-contenido > h2 + * { margin-top: var(--e-2); }
.esl-contenido > h3 { margin-top: var(--e-4); font-size: 1.375rem; font-weight: 800; }

.esl-ventana { max-width: var(--medida); }
.esl-ventana p,
.esl-ventana li,
.esl-contenido > p,
.esl-contenido > ul li,
.esl-contenido > ol li {
	font-family: var(--lectura);
	font-size: var(--t-cuerpo);
	line-height: 1.62;
}
.esl-ventana p + p,
.esl-ventana p + ul,
.esl-ventana ul + p,
.esl-ventana ol + p,
.esl-ventana p + ol { margin-top: 0.8em; }
.esl-ventana ul,
.esl-ventana ol { padding-left: 1.2em; }
.esl-ventana li + li { margin-top: 0.35em; }
.esl-ventana h3 { margin-top: var(--e-3); font-size: 1.25rem; font-weight: 800; }
.esl-ventana h3:first-child { margin-top: 0; }
.esl-ventana h3 + p,
.esl-ventana h3 + ol,
.esl-ventana h3 + ul { margin-top: 0.4em; }
.esl-ventana--entrada p { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.55; }
.esl-ventana--aviso { padding: var(--e-2) var(--e-3); border-radius: var(--radio); background: var(--mantequilla); }
.esl-ventana a,
.esl-contenido > p a { text-decoration-line: underline; }

/* ---------- El círculo de estado: vacío, a medias, lleno ---------- */
.esl-circulo {
	position: relative;
	display: inline-block;
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--circulo);
	border-radius: 50%;
	background: transparent;
	transition: background 0.35s var(--suave), border-color 0.2s;
}
.esl-circulo[data-estado="pendiente"] { border: 2px solid var(--tinta); background: var(--mantequilla); }
.esl-circulo[data-estado="leyendo"] { border: 2px solid var(--tinta); background: linear-gradient(90deg, var(--tinta) 0 50%, var(--rosa) 50% 100%); }
.esl-circulo[data-estado="leido"] { border: 2px solid var(--tinta); background: var(--menta); }
.esl-circulo[data-estado="leido"]::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid var(--tinta);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	animation: esl-tic 0.35s var(--suave);
}
@keyframes esl-tic { from { transform: rotate(45deg) scale(0.3); opacity: 0; } }

.esl-circulo-boton {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
}
.esl-circulo-boton:hover .esl-circulo[data-estado=""] { border-color: var(--tinta-suave); }

/* ---------- El orden de lectura: filas de diario ---------- */
.esl-orden { margin-top: var(--e-5); }
.esl-contenido > .esl-orden:first-child,
.esl-contenido > .esl-ventana--entrada + .esl-orden { margin-top: var(--e-4); }
.esl-orden__estado { margin-top: var(--e-1); color: var(--tinta-suave); font-size: 1rem; }
.esl-orden__estado b { color: var(--tinta); }
.esl-orden__lista {
	position: relative;
	max-width: 760px;
	margin-top: var(--e-2);
	border-top: 1px solid var(--linea);
}
/* La marca rosa del siguiente libro: se desliza de fila en fila. */
.esl-orden__marca {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 0;
	border-radius: var(--radio);
	background: var(--rosa);
	pointer-events: none;
}
.esl-orden__marca.is-viva { transition: transform 0.55s var(--suave), height 0.55s var(--suave); }
.esl-fila {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 26px 52px minmax(0, 1fr) 48px;
	align-items: center;
	column-gap: 12px;
	padding: 12px 6px 12px 4px;
	border-bottom: 1px dashed var(--linea-fuerte);
}
/* Sin JavaScript, el siguiente libro lleva su propio fondo; con la marca, el fondo es la marca. */
.esl-fila.is-siguiente { border-bottom-color: transparent; }
.esl-fila--actual:not(.is-siguiente) .esl-fila__senal { color: var(--tinta-suave); }
.esl-orden__lista:not(:has(.esl-orden__marca)) .esl-fila.is-siguiente { border-radius: var(--radio); background: var(--rosa); }
.esl-fila__n {
	font-family: var(--mano);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1;
	color: var(--tinta-suave);
	text-align: right;
}
.esl-fila__portada { display: block; }
.esl-fila__portada img,
.esl-fila__portada .esl-sin-portada {
	width: 52px;
	height: 78px;
	object-fit: contain;
	object-position: center bottom;
}
.esl-fila__portada img { filter: drop-shadow(0 2px 4px rgb(43 42 51 / 0.16)); }
.esl-fila__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esl-fila__titulo {
	padding-block: 5px;
	margin-block: -5px;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
	text-decoration: none;
}
.esl-fila__titulo:hover { text-decoration: underline; }
.esl-fila__dato { color: var(--tinta-suave); font-size: var(--t-rotulo); }
.esl-fila__senal { width: fit-content; color: var(--rosa-hondo); font-weight: 700; font-size: var(--t-rotulo); }
.esl-fila__senal:empty { display: none; }
.esl-fila__etiqueta { width: fit-content; margin-block: 2px; padding: 1px 10px; border-radius: 999px; background: var(--menta); color: var(--menta-hondo); font-weight: 700; font-size: var(--t-rotulo); }
.esl-fila__estrellas { display: inline-flex; gap: 2px; margin-top: 2px; }
.esl-fila__estrellas:empty { display: none; }
.esl-fila.is-leido .esl-fila__titulo { color: var(--tinta-suave); }
.esl-fila__compra,
.esl-fila__panel { grid-column: 3 / -1; }
.esl-fila__compra { margin-top: 6px; }
.esl-fila__compra .esl-tiendas,
.esl-fila__compra .esl-sin-venta { margin-top: 0; font-size: var(--t-pequeno); }
.esl-fila__compra .esl-tienda { flex: 0 1 auto; min-width: 0; min-height: 36px; padding-inline: 14px; font-size: var(--t-pequeno); background: var(--papel); } /* la fila del siguiente ya es rosa */
.esl-fila__compra .esl-tienda:hover { background: var(--rosa-claro); }
.esl-fila__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding: 12px;
	border-radius: var(--radio);
	background: var(--papel);
	box-shadow: 0 6px 20px rgb(43 42 51 / 0.10), 0 1px 2px rgb(43 42 51 / 0.08);
	animation: esl-abre 0.3s var(--suave);
}
@keyframes esl-abre { from { opacity: 0; transform: translateY(-6px); } }
.esl-fila__resena { flex-basis: 100%; display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.esl-fila__resena textarea { width: 100%; }
.esl-fila__resena .esl-panel__estado-envio:empty { display: none; }
.esl-fila.is-abierta { z-index: 2; }
@media (max-width: 479px) {
	.esl-fila__panel { grid-column: 1 / -1; }
	.esl-fila__compra { grid-column: 2 / -1; }
}

/* La lista completa (autores con muchos libros): las mismas filas, sin portada. */
.esl-cartel { max-width: 760px; }
.esl-cartel__titulo { font-weight: 800; font-size: 1.25rem; margin-bottom: var(--e-1); }
.esl-cartel__lista { border-top: 1px solid var(--linea); }
.esl-fila--compacta { grid-template-columns: 34px minmax(0, 1fr) 48px; padding-block: 6px; }
.esl-fila--compacta.is-siguiente { border-radius: var(--radio); background: var(--rosa); }
.esl-fila--compacta .esl-fila__panel { grid-column: 2 / -1; }

/* ---------- Libros sin portada conocida ---------- */
.esl-sin-portada {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 3;
	padding: 6px;
	border: 1.5px dashed var(--linea-fuerte);
	border-radius: 4px;
	background: var(--papel-gris);
	color: var(--tinta-suave);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	overflow: hidden;
}
.esl-libro__portada .esl-sin-portada { width: 100%; font-size: 0.9375rem; padding: 12px; }

/* ---------- Entradas de libro ---------- */
.esl-libros { max-width: 880px; border-top: 1px solid var(--linea); }
.esl-libro {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 18px;
	padding-block: var(--e-3);
	border-bottom: 1px solid var(--linea);
}
.esl-libro--numerado { grid-template-columns: 22px 96px minmax(0, 1fr); column-gap: 12px; }
.esl-libro__n {
	grid-row: 1 / span 2;
	font-family: var(--mano);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--tinta-suave);
	text-align: right;
}
.esl-libro__portada { position: relative; grid-row: 1 / span 2; align-self: start; }
.esl-libro__portada img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 6px 12px rgb(43 42 51 / 0.14));
}
/* En el móvil el cuerpo se reparte: título y datos junto a la portada, el resto a todo lo ancho. */
.esl-libro__cuerpo { display: contents; }
.esl-libro__titulo,
.esl-libro__datos { grid-column: -2 / -1; }
.esl-libro__titulo { align-self: end; font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.esl-libro__titulo a { text-decoration: none; padding-inline: 6px; margin-inline: -6px; }
.esl-libro__titulo a:hover { text-decoration: underline; }
.esl-libro__datos {
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	margin-top: 6px;
	color: var(--tinta-suave);
	font-size: var(--t-pequeno);
}
.esl-libro__datos span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 3px; border-radius: 50%; background: var(--linea-fuerte); }
.esl-libro__datos a { padding-block: 4px; }
.esl-libro__texto,
.esl-libro .esl-tiendas,
.esl-libro .esl-sin-venta,
.esl-libro .esl-acciones { grid-column: 1 / -1; }
.esl-libro__texto { margin-top: var(--e-2); }
.esl-libro__texto p { max-width: var(--medida); font-family: var(--lectura); font-size: 1.0625rem; line-height: 1.6; }
.esl-libro__texto p + p { margin-top: 0.7em; }
.esl-libro__texto strong { font-family: var(--marco); font-weight: 700; }
@media (min-width: 600px) {
	.esl-libro { grid-template-columns: 150px minmax(0, 1fr); column-gap: 28px; }
	.esl-libro--numerado { grid-template-columns: 30px 150px minmax(0, 1fr); column-gap: 18px; }
	.esl-libro__titulo { align-self: start; font-size: 1.5rem; }
	.esl-libro__datos { align-self: auto; }
	.esl-libro__titulo,
	.esl-libro__datos,
	.esl-libro__texto,
	.esl-libro .esl-tiendas,
	.esl-libro .esl-sin-venta,
	.esl-libro .esl-acciones { grid-column: -2 / -1; }
	.esl-libro__portada { grid-row: 1 / span 6; }
	.esl-libro__n { grid-row: 1 / span 6; }
}
/* El libro por el que empezar: la hoja rosa de lo que toca ahora. */
.esl-libro--destacado {
	margin-inline: calc(-1 * min(var(--gutter), 20px));
	padding-inline: min(var(--gutter), 20px);
	border-bottom-color: transparent;
	border-radius: 18px;
	background: var(--rosa-claro);
}
.esl-libro--imprimible .esl-libro__portada img { border: 1px solid var(--linea); filter: drop-shadow(0 2px 6px rgb(43 42 51 / 0.12)); }

/* La cinta washi pegada en la esquina de la portada */
.esl-cinta {
	position: absolute;
	top: -9px;
	left: 50%;
	z-index: 2;
	padding: 4px 12px 5px;
	background: rgb(246 214 227 / 0.94);
	color: var(--tinta);
	font-size: var(--t-rotulo);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-50%) rotate(-3deg);
	-webkit-mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% 6px repeat-y;
	mask: conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% 6px repeat-y, conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% 6px repeat-y;
}
.esl-cinta--sello { background: rgb(251 232 181 / 0.96); }

/* Tiendas: un botón por tienda, todos iguales (Roberto, 22/10/2026: "como estaba antes con los botones"). */
.esl-tiendas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e-2); }
.esl-tienda {
	display: inline-flex;
	flex: 1 1 auto;            /* las tres caben en una fila de 320 px; si no, la última baja entera */
	align-items: center;
	justify-content: center;
	min-width: 88px;
	max-width: 240px;
	min-height: 44px;
	padding: 0 14px;
	white-space: nowrap;
	border: 1.5px solid var(--tinta);
	border-radius: 999px;
	background: var(--rosa);   /* el rosa de lo que toca ahora: no se confunden con Guardar o Compartir */
	color: var(--tinta);
	font-family: var(--marco);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s var(--suave);
}
.esl-tienda:hover { background: var(--rosa-claro); color: var(--tinta); }
.esl-sin-venta { margin-top: var(--e-2); color: var(--tinta-suave); font-size: var(--t-pequeno); font-style: italic; }

/* ---------- Estado de un libro, estrellas y compartir ---------- */
.esl-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--e-2); }
.esl-acciones__mas { display: flex; flex-wrap: wrap; gap: 8px; }
.esl-estado {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	background: var(--papel);
}
.esl-estado__op {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 13px 0 9px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tinta-suave);
	font-weight: 600;
	font-size: var(--t-pequeno);
	transition: background-color 0.25s var(--suave), color 0.2s;
}
.esl-estado__op .esl-circulo { width: 18px; height: 18px; }
.esl-estado__op .esl-circulo[data-estado="leido"]::after { left: 4px; top: 1px; width: 5px; height: 9px; border-width: 0 2px 2px 0; animation: none; }
.esl-estado__op:hover { color: var(--tinta); background: var(--lavanda-claro); }
/* En los móviles más estrechos, los tres estados ocupan el ancho y se reparten el sitio. */
@media (max-width: 379px) {
	.esl-estado { display: flex; width: 100%; }
	.esl-estado__op { flex: 1; justify-content: center; gap: 5px; padding: 0 6px; font-size: var(--t-rotulo); }
}
.esl-estado__op[aria-pressed="true"] { color: var(--tinta); font-weight: 700; }
.esl-estado__op[data-esl-estado-op="pendiente"][aria-pressed="true"] { background: var(--mantequilla); }
.esl-estado__op[data-esl-estado-op="leyendo"][aria-pressed="true"] { background: var(--rosa); }
.esl-estado__op[data-esl-estado-op="leido"][aria-pressed="true"] { background: var(--menta); }

/* Leyendo: la página por la que vas y el porcentaje, en su propia línea bajo los estados (Roberto, 22/10/2026). */
.esl-progreso {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 14px;
	border-radius: var(--radio);
	background: var(--rosa-claro);
	font-size: var(--t-pequeno);
}
.esl-progreso__etiqueta { color: var(--tinta); font-weight: 600; }
.esl-progreso__par { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }   /* página, "de" y total no se separan */
.esl-progreso__pagina {
	width: 4.6em;
	min-height: 44px;
	padding: 0 8px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 10px;
	background: var(--papel);
	color: var(--tinta);
	font: 600 1rem/1 var(--marco);   /* 16 px: el móvil no hace zoom al escribir */
	text-align: center;
}
.esl-progreso__pagina:focus-visible { outline: 2.5px solid var(--lavanda-hondo); outline-offset: 2px; }
.esl-progreso__total { color: var(--tinta-suave); }
.esl-progreso__barra { flex: 1 1 120px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.esl-progreso__barra > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--rosa-hondo); transition: width 0.4s var(--suave); }
.esl-progreso__por { min-width: 3.4em; color: var(--rosa-hondo); font-weight: 800; text-align: right; }
.esl-progreso__por:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .esl-progreso__barra > span { transition: none; } }
.esl-fila__progreso { width: fit-content; color: var(--rosa-hondo); font-weight: 700; font-size: var(--t-rotulo); }
.esl-fila__progreso:empty { display: none; }

.esl-accion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--marco);
	font-weight: 600;
	font-size: var(--t-pequeno);
	text-decoration: none;
	transition: background-color 0.2s var(--suave), border-color 0.2s;
}
.esl-accion:hover { border-color: var(--tinta-suave); background: var(--lavanda-claro); }
.esl-accion[aria-expanded="true"] { border-color: var(--tinta); background: var(--lavanda); }
.esl-accion .esl-i { width: 18px; height: 18px; }
.esl-accion--peligro { border-color: var(--rosa-hondo); color: var(--rosa-hondo); }

/* Estrellas: las de leer (media, opiniones) y las de poner */
.esl-estrellas { display: inline-flex; gap: 2px; vertical-align: -3px; }
.esl-estrella { position: relative; display: inline-block; width: 18px; height: 18px; }
.esl-estrella .esl-i { width: 18px; height: 18px; fill: var(--papel); stroke: var(--estrella-borde); stroke-width: 1.6px; }
.esl-estrella__llena { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.esl-estrella__llena .esl-i { fill: var(--estrella); }
.esl-estrellas-poner { display: inline-flex; gap: 0; }
.esl-estrellas-poner[hidden] { display: none; }
.esl-estrellas-poner button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
}
.esl-estrellas-poner .esl-i { width: 28px; height: 28px; fill: var(--papel); stroke: var(--estrella-borde); stroke-width: 1.5px; transition: fill 0.2s, transform 0.2s var(--suave); }
.esl-estrellas-poner button.is-llena .esl-i { fill: var(--estrella); }
.esl-estrellas-poner button:hover .esl-i { transform: scale(1.12); }

/* El menú de listas que abre Guardar en una lista */
.esl-menu-listas {
	flex-basis: 100%;
	display: grid;
	gap: 2px;
	max-width: 22rem;
	padding: 10px 12px;
	border-radius: var(--radio);
	background: var(--papel);
	box-shadow: 0 8px 24px rgb(43 42 51 / 0.12), 0 1px 2px rgb(43 42 51 / 0.08);
}
.esl-menu-listas label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--t-pequeno); }
.esl-menu-listas input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--lavanda-hondo); }
.esl-menu-listas__nueva { display: flex; gap: 6px; margin-top: 6px; }
.esl-menu-listas__nueva input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--linea-fuerte); border-radius: 999px; font-size: var(--t-pequeno); }

/* ---------- Lo que va aparte ---------- */
.esl-aparte { margin-top: var(--e-3); }
.esl-aparte__titulo { font-weight: 800; font-size: 1.125rem; }
.esl-aparte__lista {
	display: flex;
	gap: 18px;
	margin-top: var(--e-2);
	padding-bottom: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.esl-aparte__libro { flex: none; width: 100px; scroll-snap-align: start; }
.esl-aparte__libro a { display: block; text-decoration: none; }
.esl-aparte__libro img,
.esl-aparte__libro .esl-sin-portada { width: 100px; height: 150px; object-fit: contain; object-position: center bottom; }
.esl-aparte__libro img { filter: drop-shadow(0 3px 6px rgb(43 42 51 / 0.14)); }
.esl-aparte__libro span { display: block; margin-top: 8px; font-weight: 700; font-size: var(--t-rotulo); line-height: 1.25; }
.esl-aparte__libro a:hover span { text-decoration: underline; }
.esl-aparte__libro small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: var(--t-rotulo); }

/* ---------- Enlaces a otras páginas: filas con sus portadas en abanico ---------- */
.esl-enlaces { max-width: 880px; border-top: 1px solid var(--linea); }
.esl-enlace {
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	column-gap: 18px;
	align-items: center;
	padding-block: 18px;
	border-bottom: 1px solid var(--linea);
}
.esl-enlace__portadas { position: relative; grid-row: 1 / span 3; height: 92px; }
.esl-enlace__portadas img {
	position: absolute;
	bottom: 0;
	width: 56px;
	height: 84px;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 3px 6px rgb(43 42 51 / 0.18));
}
.esl-enlace__portadas img:nth-child(1) { left: 0; transform: rotate(-5deg); }
.esl-enlace__portadas img:nth-child(2) { left: 24px; z-index: 1; }
.esl-enlace__portadas img:nth-child(3) { left: 48px; transform: rotate(5deg); }
.esl-enlace__titulo { font-size: 1.1875rem; font-weight: 800; line-height: 1.2; }
.esl-enlace__titulo a { text-decoration: none; }
.esl-enlace__titulo a::after { content: ""; position: absolute; inset: 0; }
.esl-enlace:hover .esl-enlace__titulo a { text-decoration: underline; }
.esl-enlace__resumen { margin-top: 4px; color: var(--tinta-suave); font-family: var(--lectura); font-size: var(--t-pequeno); line-height: 1.45; }
.esl-enlace__cuenta { margin-top: 6px; width: fit-content; padding: 1px 10px; border-radius: 999px; background: var(--lavanda-claro); font-weight: 700; font-size: var(--t-rotulo); }
.esl-enlace:focus-within { outline: 2.5px solid var(--lavanda-hondo); outline-offset: 2px; border-radius: 8px; }
.esl-enlace__titulo a:focus-visible { outline: none; }

/* ---------- Todos los autores de la A a la Z ---------- */
/* Arriba, una pestaña de índice lavanda de 44 px por letra. Debajo, por letra, los nombres en dos columnas en el
   móvil y tres desde 768 px; cada nombre es una fila de 44 px que toma lavanda clara al pasar. */
.esl-az__saltos { max-width: 880px; }
.esl-az__saltos ul { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.esl-az__saltos a {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--lavanda-claro);
	color: var(--tinta);
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.2s var(--suave);
}
.esl-az__saltos a:hover { background: var(--lavanda); }
.esl-az { max-width: 880px; border-top: 1px solid var(--linea); }
.esl-az__grupo { padding-block: var(--e-3) var(--e-2); border-bottom: 1px solid var(--linea); }
.esl-az__letra { scroll-margin-top: var(--e-2); color: var(--lavanda-hondo); font-size: 1.625rem; font-weight: 800; line-height: 1; }
.esl-az__nombres { columns: 2; column-gap: var(--e-2); margin-top: var(--e-1); padding: 0; list-style: none; }
.esl-az__nombres li { break-inside: avoid; }
.esl-az__nombres a {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-left: -8px;
	padding: 6px 8px;
	border-radius: 10px;
	color: var(--tinta);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color 0.2s var(--suave);
}
.esl-az__nombres a:hover { background: var(--lavanda-claro); color: var(--lavanda-hondo); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
	.esl-az__nombres { columns: 3; }
}

/* ---------- El catálogo completo: filas de obra, ediciones y fuente ---------- */
/* Una obra por fila, como un apunte del diario: portada pequeña (o su hueco), título, subtítulo y datos. */
.esl-cat { max-width: 760px; margin-top: var(--e-2); border-top: 1px solid var(--linea); }
.esl-cat__obra {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	padding: 12px 4px;
	border-bottom: 1px dashed var(--linea-fuerte);
}
.esl-cat__obra:hover { background: var(--lavanda-claro); }
.esl-cat__obra:focus-within { outline: 2.5px solid var(--lavanda-hondo); outline-offset: 2px; border-radius: 8px; }
.esl-cat__portada img,
.esl-cat__portada .esl-sin-portada { width: 52px; height: 78px; object-fit: contain; object-position: center bottom; }
.esl-cat__portada img { filter: drop-shadow(0 2px 4px rgb(43 42 51 / 0.16)); }
.esl-cat__portada .esl-sin-portada { font-size: 0.5rem; padding: 3px; }
.esl-cat__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esl-cat__titulo { padding-block: 2px; font-weight: 700; font-size: 1.0625rem; line-height: 1.25; text-decoration: none; }
.esl-cat__titulo::after { content: ""; position: absolute; inset: 0; }
.esl-cat__titulo:focus-visible { outline: none; }
.esl-cat__obra:hover .esl-cat__titulo { text-decoration: underline; text-decoration-color: var(--lavanda-hondo); }
.esl-cat__sub { color: var(--tinta-suave); font-family: var(--lectura); font-size: var(--t-pequeno); line-height: 1.35; }
.esl-cat__datos { display: flex; flex-wrap: wrap; color: var(--tinta-suave); font-size: var(--t-rotulo); }
.esl-cat__datos span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 3px; border-radius: 50%; background: var(--linea-fuerte); }
.esl-cat__ficha { width: fit-content; margin-top: 4px; padding: 1px 10px; border-radius: 999px; background: var(--menta); font-weight: 700; font-size: var(--t-rotulo); }
/* El autor de cada obra del catálogo se puede pinchar: por encima del enlace que cubre la fila. */
.esl-cat__autor { position: relative; z-index: 1; padding-block: 4px; color: inherit; text-decoration-line: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.esl-cat__autor:hover { color: var(--lavanda-hondo); text-decoration-color: var(--lavanda-hondo); }
/* En el buscador, Búscalo en Amazon: botón pequeño, por encima del enlace que cubre toda la fila. */
.esl-cat__tienda {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 36px;
	margin-top: 6px;
	padding: 0 14px;
	border: 1.5px solid var(--tinta);
	border-radius: 999px;
	background: var(--rosa);
	color: var(--tinta);
	font-family: var(--marco);
	font-weight: 700;
	font-size: var(--t-pequeno);
	text-decoration: none;
	transition: background-color 0.2s var(--suave);
}
.esl-cat__tienda:hover { background: var(--rosa-claro); color: var(--tinta); }
.esl-cat__intro,
.esl-contenido > .esl-cat__intro { max-width: var(--medida); margin-top: var(--e-1); font-family: var(--marco); color: var(--tinta-suave); font-size: var(--t-pequeno); }
/* En las bibliografías, sin portadas: solo título y datos, en dos columnas cuando hay sitio. */
.esl-cat__obra--texto { grid-template-columns: minmax(0, 1fr); padding-block: 10px; }
@media (min-width: 760px) {
	.esl-cat--biblio { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-3); max-width: none; }
}
.esl-paginas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--e-3); }

/* Las ediciones de una obra: el año a la izquierda, los datos detrás. */
.esl-ediciones { max-width: 760px; margin-top: var(--e-2); padding: 0; list-style: none; border-top: 1px solid var(--linea); font-family: var(--marco); }
.esl-ediciones li {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	column-gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px dashed var(--linea-fuerte);
	font-size: var(--t-pequeno);
}
.esl-ediciones__datos span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 3px; border-radius: 50%; background: var(--linea-fuerte); }
.esl-ediciones__anio { font-weight: 700; }
/* Las ediciones que pasan de 40, en un desplegable con forma de botón secundario. */
.esl-ediciones__mas { max-width: 760px; }
.esl-ediciones__mas > summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-top: var(--e-2);
	padding: 0 18px;
	border: 1.5px solid var(--tinta);
	border-radius: 999px;
	font-family: var(--marco);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.2s var(--suave);
}
.esl-ediciones__mas > summary::-webkit-details-marker { display: none; }
.esl-ediciones__mas > summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.2s var(--suave); }
.esl-ediciones__mas[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.esl-ediciones__mas > summary:hover { background: var(--lavanda-claro); }
.esl-ediciones__mas[open] > .esl-ediciones { margin-top: var(--e-2); }
.esl-ediciones__isbn { font-variant-numeric: tabular-nums; }
.esl-fuente { max-width: var(--medida); margin-top: var(--e-3); color: var(--tinta-suave); font-size: var(--t-rotulo); }

/* ---------- Preguntas ---------- */
.esl-preguntas { max-width: var(--medida); }
.esl-preguntas h3 { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--linea); font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }
.esl-preguntas h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.esl-preguntas p { margin-top: 0.5em; font-family: var(--lectura); font-size: 1.0625rem; line-height: 1.6; }

/* ---------- Aviso de afiliado y pie ---------- */
.esl-aviso {
	max-width: var(--medida);
	margin-top: var(--e-5);
	padding: var(--e-2) 20px;
	border-radius: var(--radio);
	background: var(--papel-gris);
	color: var(--tinta-suave);
	font-family: var(--lectura);
	font-size: var(--t-pequeno);
	line-height: 1.55;
}
.esl-aviso strong { color: var(--tinta); font-family: var(--marco); }

.esl-pie { margin-top: var(--e-4); border-top: 1px solid var(--linea); background: var(--papel-gris); }
.esl-pagina { background: transparent; }
.esl-pie__cuerpo { display: grid; gap: var(--e-3); padding-block: var(--e-4) var(--e-3); }
@media (min-width: 768px) { .esl-pie__cuerpo { grid-template-columns: 1.4fr 1fr 1fr; } }
.esl-pie__texto { max-width: 40ch; margin-top: var(--e-1); color: var(--tinta-suave); font-family: var(--lectura); font-size: var(--t-pequeno); }
.esl-pie__titulo { font-weight: 800; font-size: var(--t-pequeno); }
.esl-pie ul { margin-top: 4px; }
.esl-pie ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-suave); font-size: var(--t-pequeno); text-decoration: none; }
.esl-pie ul a:hover { color: var(--lavanda-hondo); text-decoration: underline; }
.esl-pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--e-3); padding-block: var(--e-2); border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: var(--t-rotulo); }
/* La firma de IP10, que hace la web (Roberto, 22/10/2026: "la web debe estar firmada por IP10 aunque no sea cliente"). */
.esl-pie__firma a { display: inline-block; padding-block: 4px; color: inherit; }
.esl-pie__izq { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e-2); }
/* Reabre el aviso de cookies (Complianz 7.5 solo escucha un botón .cmplz-manage-consent). */
.esl-pie__cookies { padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--lavanda-hondo); text-underline-offset: 0.22em; cursor: pointer; }
.esl-pie__cookies:hover { color: var(--lavanda-hondo); }

/* ---------- ¿Lo tienes en casa? (subir la portada de un libro que no la tiene) ---------- */
.esl-subir-portada {
	max-width: 760px;
	margin-top: var(--e-3);
	padding: var(--e-3);
	border: 1.5px dashed var(--linea-fuerte);
	border-radius: var(--radio);
	background: var(--papel-gris);
	scroll-margin-top: var(--e-3);
}
.esl-subir-portada__titulo { font-weight: 800; font-size: 1.125rem; }
.esl-subir-portada__texto { max-width: var(--medida); margin-top: 4px; color: var(--tinta-suave); font-family: var(--lectura); font-size: var(--t-pequeno); }
.esl-subir-portada > p:last-child:not(.esl-subir-portada__texto) { margin-top: var(--e-2); }
.esl-subir-portada__caja { margin-top: var(--e-2); }
.esl-subir-portada__caja > summary { list-style: none; width: fit-content; }
.esl-subir-portada__caja > summary::-webkit-details-marker { display: none; }
.esl-subir-portada__caja[open] > summary { background: var(--lavanda-claro); }
.esl-subir-portada__form { margin-top: var(--e-2); }
.esl-subir-portada__form input[type="file"] { padding: 10px; font-family: var(--marco); font-size: var(--t-pequeno); }
.esl-subir-portada__espera { width: fit-content; margin-top: var(--e-2); padding: 12px 16px; border-radius: 12px; background: var(--menta); font-weight: 700; }

/* ---------- ¿Podemos mejorar algo? (sugerencias, en el pie) ---------- */
.esl-sugerir { padding-block: var(--e-3); border-top: 1px solid var(--linea); scroll-margin-top: var(--e-3); }
.esl-sugerir__titulo { font-weight: 800; font-size: 1.125rem; }
.esl-sugerir__texto { max-width: 46ch; margin-top: 4px; color: var(--tinta-suave); font-family: var(--lectura); font-size: var(--t-pequeno); }
.esl-sugerir__caja { margin-top: var(--e-2); }
.esl-sugerir__caja > summary { list-style: none; width: fit-content; }
.esl-sugerir__caja > summary::-webkit-details-marker { display: none; }
.esl-sugerir__caja[open] > summary { background: var(--lavanda-claro); }
.esl-sugerir__form { margin-top: var(--e-2); }
.esl-sugerir__gracias { width: fit-content; margin-top: var(--e-2); padding: 12px 16px; border-radius: 12px; background: var(--menta); font-weight: 700; }

/* ---------- Pasatiempos ---------- */
.esl-reglas h3 { font-size: 1.25rem; font-weight: 800; }
.esl-acertijos { display: grid; max-width: 880px; border-top: 1px solid var(--linea); }
.esl-acertijo { padding-block: var(--e-4); border-bottom: 1px solid var(--linea); }
.esl-acertijo h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.esl-acertijo__nivel { width: fit-content; margin-top: 8px; padding: 2px 12px; border-radius: 999px; background: var(--mantequilla); font-weight: 700; font-size: var(--t-rotulo); }
.esl-acertijo > p:not(.esl-acertijo__nivel),
.esl-acertijo li,
.esl-acertijo details p { max-width: var(--medida); font-family: var(--lectura); font-size: 1.0625rem; line-height: 1.6; }
.esl-acertijo > p:not(.esl-acertijo__nivel) { margin-top: var(--e-2); }
.esl-acertijo__plano { max-width: 560px; margin: var(--e-3) 0 0; }
.esl-acertijo__plano svg { width: 100%; height: auto; }
.esl-acertijo__leyenda { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: var(--e-2) !important; }
.esl-acertijo__leyenda li { font-size: var(--t-pequeno); }
.esl-acertijo__pistas { margin-top: var(--e-3); padding-left: 1.4em; }
.esl-acertijo__pistas li + li { margin-top: 0.4em; }
.esl-acertijo details { margin-top: var(--e-2); }
.esl-acertijo summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--t-pequeno);
	cursor: pointer;
	list-style: none;
}
.esl-acertijo summary::-webkit-details-marker { display: none; }
.esl-acertijo summary:hover { background: var(--lavanda-claro); }
.esl-acertijo details[open] > summary { border-color: var(--tinta); background: var(--menta); }
.esl-acertijo details > :not(summary) { margin-top: var(--e-2); }

.esl-rail__lista.is-desborda { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), #0000); mask: linear-gradient(90deg, #000 calc(100% - 36px), #0000); }
/* En escritorio, todas las pestañas en una sola línea, repartidas de borde a borde del contenedor (alineadas con
   la marca y con "Entrar"). Por debajo de unos 1150 px no caben y vuelven a deslizarse con el borde desvanecido. */
@media (min-width: 1024px) {
	.esl-rail__lista { justify-content: space-between; gap: 0; padding-inline: calc(var(--gutter) - 4px); }
	.esl-rail__item > a { padding: 0 4px; font-size: 0.875rem; }
	.esl-rail__item.is-actual > a::after { left: 4px; right: 4px; }
}
@media (min-width: 1360px) {
	.esl-rail__item > a { font-size: var(--t-pequeno); }
}

/* ---------- El margen del diario (pantallas anchas) ---------- */
/* La columna de lectura y, a su derecha, el margen: el índice, otras páginas y, en la ficha, parecidos y dónde sale.
   El hueco no pasa de 56 px para que la columna no estreche en pantallas muy anchas. */
.esl-margen { display: none; }
@media (min-width: 1100px) {
	.esl-pagina__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 4vw, 56px); align-items: start; }
	.esl-margen { display: block; align-self: stretch; min-width: 0; }
	.esl-orden__lista,
	.esl-cartel,
	.esl-libros,
	.esl-enlaces,
	.esl-az,
	.esl-az__saltos { max-width: none; }
}
.esl-margen__pegado { position: sticky; top: var(--e-3); display: grid; gap: var(--e-4); }
.esl-margen__rotulo { margin-bottom: 12px; color: var(--tinta-suave); font-weight: 700; font-size: var(--t-rotulo); }


.esl-margen__indice ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--lavanda); }
.esl-margen__indice a {
	display: block;
	padding: 7px 0 7px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--tinta-suave);
	font-size: var(--t-pequeno);
	line-height: 1.3;
	text-decoration: none;
}
.esl-margen__indice a:hover { border-left-color: var(--lavanda-hondo); color: var(--tinta); }

.esl-margen__mas ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.esl-margen__mas a { display: flex; align-items: center; gap: 14px; padding: 8px; margin-inline: -8px; border-radius: 12px; text-decoration: none; }
.esl-margen__mas a:hover { background: var(--lavanda-claro); }
.esl-margen__mini { position: relative; flex: none; width: 58px; height: 62px; }
.esl-margen__mini img { position: absolute; bottom: 0; width: 40px; height: 60px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 2px 4px rgb(43 42 51 / 0.16)); }
.esl-margen__mini img:first-child { left: 0; transform: rotate(-5deg); }
.esl-margen__mini img + img { left: 18px; transform: rotate(4deg); }
.esl-margen__mini img:only-child { left: 9px; transform: rotate(-3deg); }
.esl-margen__mas b { display: block; font-size: var(--t-pequeno); line-height: 1.25; }
.esl-margen__mas small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: var(--t-rotulo); }

/* cuenta.css */
/* Cuenta del lector: formularios, panel de estrellas y comentario, opiniones, Mis libros, listas y perfiles. */

/* ---------- Formularios ---------- */
.esl-form { display: grid; gap: var(--e-2); max-width: 34rem; }
.esl-campo-form { display: grid; gap: 6px; }
.esl-campo-form label,
.esl-form legend { font-weight: 700; font-size: 1rem; }
.esl-campo-form input,
.esl-campo-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 12px;
	background: var(--papel);
	font-family: var(--lectura);
	font-size: 1.0625rem;
}
.esl-campo-form textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.esl-campo-form input:focus-visible,
.esl-campo-form textarea:focus-visible { border-color: var(--lavanda-hondo); outline-offset: 2px; }
.esl-campo-form input[aria-invalid="true"] { border-color: var(--rosa-hondo); }
.esl-campo-form__ayuda { color: var(--tinta-suave); font-family: var(--lectura); font-size: var(--t-pequeno); }
.esl-campo-form__error,
.esl-error-suelto { color: var(--rosa-hondo); font-weight: 700; font-size: var(--t-pequeno); }
.esl-form__error { padding: 12px 16px; border-radius: 12px; background: var(--rosa-claro); font-family: var(--lectura); }
.esl-form fieldset { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.esl-form legend { width: 100%; margin-bottom: 8px; padding: 0; }
.esl-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Opciones como píldoras (estado, quién lo ve) */
.esl-opcion {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	background: var(--papel);
	font-weight: 600;
	font-size: var(--t-pequeno);
	cursor: pointer;
}
.esl-opcion input,
.esl-valorar__estrella input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.esl-opcion:hover { background: var(--lavanda-claro); }
.esl-opcion:has(input:checked) { border-color: var(--tinta); background: var(--lavanda); font-weight: 700; }
.esl-panel__estado .esl-opcion:has(input[value="pendiente"]:checked) { background: var(--mantequilla); }
.esl-panel__estado .esl-opcion:has(input[value="leyendo"]:checked) { background: var(--rosa); }
.esl-panel__estado .esl-opcion:has(input[value="leido"]:checked) { background: var(--menta); }
.esl-opcion:has(input:focus-visible),
.esl-valorar__estrella:has(input:focus-visible) { outline: 2.5px solid var(--lavanda-hondo); outline-offset: 3px; }
.esl-opcion-suelta { font-family: var(--lectura); font-size: 1rem; line-height: 1.45; }
.esl-opcion-suelta label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.esl-opcion-suelta label > span { flex: 1; min-width: 0; }
.esl-opcion-suelta input { width: 24px; height: 24px; margin-top: 1px; flex: none; accent-color: var(--lavanda-hondo); }
.esl-enlace-suelto a { display: inline-flex; align-items: center; min-height: 44px; }

/* Las estrellas del panel: cinco radios dibujados como estrellas */
.esl-valorar { display: grid !important; gap: 4px; }
.esl-valorar__estrellas { display: flex; }
.esl-valorar__estrella { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.esl-valorar__estrella .esl-i { width: 32px; height: 32px; fill: var(--papel); stroke: var(--estrella-borde); stroke-width: 1.4px; transition: fill 0.15s, transform 0.2s var(--suave); }
.esl-valorar__estrellas:has(.esl-valorar__estrella:nth-child(1) input:checked) .esl-valorar__estrella:nth-child(-n+1) .esl-i,
.esl-valorar__estrellas:has(.esl-valorar__estrella:nth-child(2) input:checked) .esl-valorar__estrella:nth-child(-n+2) .esl-i,
.esl-valorar__estrellas:has(.esl-valorar__estrella:nth-child(3) input:checked) .esl-valorar__estrella:nth-child(-n+3) .esl-i,
.esl-valorar__estrellas:has(.esl-valorar__estrella:nth-child(4) input:checked) .esl-valorar__estrella:nth-child(-n+4) .esl-i,
.esl-valorar__estrellas:has(.esl-valorar__estrella:nth-child(5) input:checked) .esl-valorar__estrella:nth-child(-n+5) .esl-i { fill: var(--estrella); }
.esl-valorar__estrella:hover .esl-i { transform: scale(1.1); }
.esl-valorar__sin { width: fit-content; }

/* ---------- Panel de la ficha ---------- */
.esl-panel {
	max-width: 44rem;
	padding: var(--e-3);
	border-radius: 18px;
	background: var(--lavanda-claro);
}
.esl-panel p { font-family: var(--lectura); }
.esl-panel p + p { margin-top: var(--e-2); }
.esl-panel__titulo { margin-bottom: var(--e-2); font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.esl-panel__estrellas a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; font-family: var(--marco); font-weight: 700; text-decoration: none; }
.esl-panel__estrellas .esl-estrellas { gap: 4px; }
.esl-panel__estrellas .esl-estrella,
.esl-panel__estrellas .esl-estrella .esl-i { width: 28px; height: 28px; }
.esl-panel__estrellas a:hover span:last-child { text-decoration: underline; }
.esl-panel .esl-form { max-width: none; }
.esl-panel__aviso { padding: 10px 14px; border-radius: 12px; background: var(--mantequilla); }
.esl-panel__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.esl-panel__estado-envio { font-weight: 700; font-size: var(--t-pequeno); }

/* ---------- Opiniones ---------- */
.esl-opiniones { max-width: 44rem; }
.esl-seccion__titulo { font-size: var(--t-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.esl-opiniones__media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--e-2); font-size: 1rem; }
.esl-opiniones__lista { margin-top: var(--e-2); border-top: 1px solid var(--linea); }
.esl-opinion { padding-block: var(--e-2); border-bottom: 1px solid var(--linea); }
.esl-opinion__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-weight: 700; }
.esl-opinion p:not(.esl-opinion__cabeza) { margin-top: 6px; font-family: var(--lectura); line-height: 1.6; }

/* Reseña con spoilers: cerrada hasta que se pulsa */
.esl-spoiler { margin-top: 8px; border-radius: 14px; background: var(--rosa-claro); }
.esl-spoiler > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 10px 14px; font-family: var(--marco); font-size: var(--t-pequeno); line-height: 1.35; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.esl-spoiler > summary::-webkit-details-marker { display: none; }
.esl-spoiler__aviso { font-weight: 700; }
.esl-spoiler__pulsa { text-decoration: underline; text-underline-offset: 3px; }
.esl-spoiler[open] > summary .esl-spoiler__pulsa { display: none; }
.esl-spoiler[open] > summary { padding-bottom: 0; }
.esl-spoiler > p { padding: 0 14px 12px; }
.esl-spoiler > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 14px; }

/* ---------- Reseñas: debajo de la ficha y en Mis reseñas ---------- */
.esl-resenas { max-width: 44rem; }
.esl-resenas__titulo { font-size: var(--t-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.esl-resenas__vacio { margin-top: var(--e-1); color: var(--tinta-suave); font-family: var(--lectura); }
.esl-resenas > .esl-mia,
.esl-resenas > .esl-resenas__entrar { margin-top: var(--e-2); }
.esl-mia [hidden],
[data-esl-sin-resenas][hidden] { display: none !important; }
.esl-opinion--mia { padding: var(--e-2); border: 0; border-radius: 18px; background: var(--lavanda-claro); }
.esl-opinion--mia:focus:not(:focus-visible) { outline: none; }
.esl-opinion__sin { color: var(--tinta-suave); font-weight: 600; }
.esl-mia .esl-opinion.esl-opinion--mia p.esl-opinion__quien { color: var(--tinta-suave); font-family: var(--marco); font-size: var(--t-pequeno); line-height: 1.4; }
.esl-mia__botones,
.esl-mia__confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.esl-mia .esl-opinion.esl-opinion--mia p.esl-mia__botones,
.esl-mia .esl-opinion.esl-opinion--mia p.esl-mia__confirmar { margin-top: var(--e-2); font-family: var(--marco); }
.esl-mia__confirmar span { flex-basis: 100%; font-weight: 600; }
.esl-mia > .esl-panel { margin-top: var(--e-2); }
.esl-mia > [data-esl-mia-estado] { margin-top: var(--e-1); }
.esl-mia > [data-esl-mia-estado]:empty { display: none; }
.esl-mis-resenas .esl-actividad__cabeza { font-size: 1.125rem; line-height: 1.25; }
.esl-mis-resenas .esl-opinion--mia { margin-top: 6px; padding: 0; background: none; }
.esl-mis-resenas .esl-actividad__portada { text-decoration: none; }
.esl-mis-resenas .esl-actividad__portada .esl-sin-portada { width: 72px; height: 108px; padding: 6px; font-size: 0.6875rem; }

/* ---------- Página /cuenta/ ---------- */
.esl-aviso-cuenta { max-width: 880px; padding: 12px var(--e-2); border-radius: 12px; background: var(--mantequilla); font-weight: 600; }
.esl-cuenta-doble { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 900px) { .esl-cuenta-doble { grid-template-columns: 1fr 1fr; } }
.esl-cuenta-doble .esl-ventana > p + .esl-form,
.esl-cuenta-doble .esl-form + p { margin-top: var(--e-2); }
.esl-cuenta-doble h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--e-1); }
.esl-cuenta__dato { margin-top: var(--e-2) !important; color: var(--tinta-suave); }
.esl-ventana section + section,
.esl-contenido > section.esl-ventana + section.esl-ventana { margin-top: var(--e-4); }

/* Pestañas de Mis libros */
.esl-pestanas ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.esl-pestanas a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	color: var(--tinta);
	font-weight: 600;
	font-size: var(--t-pequeno);
	white-space: nowrap;
	text-decoration: none;
}
.esl-pestanas a:hover { background: var(--lavanda-claro); color: var(--tinta); }
.esl-pestanas a[aria-current="page"] { border-color: var(--tinta); background: var(--tinta); color: var(--papel); font-weight: 700; }

/* Portadas en rejilla (leídos, leyendo, listas) */
.esl-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 16px; max-width: 1080px; }
.esl-rejilla__libro { display: flex; flex-direction: column; gap: 8px; }
.esl-rejilla__libro > a { position: relative; display: block; text-decoration: none; }
.esl-rejilla__libro img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 8px rgb(43 42 51 / 0.14)); }
.esl-rejilla__sin { display: grid; place-items: center; aspect-ratio: 2 / 3; padding: 10px; border: 1.5px dashed var(--linea-fuerte); border-radius: 4px; text-align: center; font-weight: 700; font-size: var(--t-rotulo); }
.esl-rejilla__nota { display: block; margin-top: 8px; }
.esl-rejilla__titulo { display: block; margin-top: 6px; font-weight: 700; font-size: var(--t-rotulo); line-height: 1.25; }
.esl-rejilla__progreso { display: block; margin-top: 4px; color: var(--rosa-hondo); font-weight: 700; font-size: var(--t-rotulo); line-height: 1.25; }
.esl-rejilla__fecha { display: block; margin-top: 4px; color: var(--menta-hondo); font-weight: 600; font-size: var(--t-rotulo); line-height: 1.25; }

/* Retos de lectura: el del mes y el del año arriba en Mis libros, y la pestaña Retos */
.esl-retos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--e-2); max-width: 880px; }
.esl-reto { display: grid; gap: 6px; align-content: start; padding: var(--e-2); border: 1px solid var(--linea); border-radius: 18px; background: var(--papel); }
.esl-reto.is-cumplido { border-color: transparent; background: var(--menta); }
.esl-reto__titulo { font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.esl-reto__titulo::first-letter { text-transform: uppercase; }
.esl-reto__fechas { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.esl-reto__cuenta { font-size: 1rem; }
.esl-reto__cuenta b { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.esl-reto__paginas { margin-top: -0.35em; color: var(--tinta-suave); font-size: var(--t-pequeno); }
.esl-reto__barra { display: block; height: 10px; border-radius: 999px; background: var(--lavanda); overflow: hidden; }
.esl-reto__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--rosa-hondo); }
.esl-reto.is-cumplido .esl-reto__barra { background: var(--papel); }
.esl-reto.is-cumplido .esl-reto__barra > span { background: var(--menta-hondo); }
.esl-reto.is-superado .esl-reto__barra { background: var(--rosa-hondo); }
.esl-reto.is-superado .esl-reto__barra > span { border-radius: 999px 0 0 999px; box-shadow: 2px 0 0 var(--papel); }
.esl-reto__extra { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--papel); color: var(--rosa-hondo); font-size: var(--t-pequeno); font-weight: 800; vertical-align: 0.2em; }
.esl-reto__msg { color: var(--tinta-suave); font-size: var(--t-pequeno); line-height: 1.4; }
.esl-reto.is-cumplido .esl-reto__msg { color: var(--menta-hondo); font-weight: 700; }
.esl-reto__borrar summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: var(--rosa-hondo); font-weight: 600; font-size: var(--t-pequeno); cursor: pointer; }
.esl-reto__borrar .esl-form { margin-top: 6px; }
.esl-retos-resumen { max-width: 880px; }
.esl-retos-resumen__mas { margin-top: var(--e-1); font-weight: 600; font-size: var(--t-pequeno); }
.esl-retos-objetivos,
.esl-reto-nuevo { max-width: 34rem; margin-top: var(--e-2); }
.esl-retos-objetivos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.esl-retos-objetivos > p:last-child { grid-column: 1 / -1; }
.esl-reto-nuevo__fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); align-items: end; }
.esl-reto-nuevo__fechas > p,
.esl-retos-objetivos > p { min-width: 0; margin: 0; }
.esl-reto-nuevo__fechas input,
.esl-retos-objetivos input { width: 100%; min-width: 0; }
/* Arriba en Mis libros, los dos retos juntos y en pequeño para que no empujen la lista hacia abajo. */
.esl-retos-resumen .esl-retos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.esl-retos-resumen .esl-reto { gap: 4px; padding: 14px; border-radius: 16px; }
.esl-retos-resumen .esl-reto__titulo { font-size: 1rem; }
.esl-retos-resumen .esl-reto__cuenta { font-size: var(--t-pequeno); }
.esl-retos-resumen .esl-reto__cuenta b { font-size: 1.5rem; }
.esl-retos-resumen .esl-reto__barra { height: 8px; }
.esl-contenido > section + section { margin-top: var(--e-4); }
.esl-panel__nota { margin-bottom: var(--e-2); color: var(--tinta-suave); font-size: var(--t-pequeno); }
.esl-rejilla__libro > a:hover .esl-rejilla__titulo { text-decoration: underline; }

/* Mis listas */
.esl-listas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); max-width: 1080px; }
.esl-lista { padding: var(--e-3) var(--e-2); border: 1px solid var(--linea); border-radius: 18px; }
@media (min-width: 768px) { .esl-lista { padding: var(--e-4); } }
.esl-lista__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-1) var(--e-2); }
.esl-lista__nombre { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.esl-lista__cuenta { color: var(--tinta-suave); font-weight: 600; font-size: var(--t-pequeno); }
.esl-lista__compartir { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--e-2) 0; }
.esl-lista__vacia { color: var(--tinta-suave); font-family: var(--lectura); }
.esl-lista-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tinta-suave); font-weight: 600; font-size: var(--t-pequeno); }

/* Perfil público y actividad de quienes sigues */
.esl-perfil__cuentas { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: var(--e-2); font-weight: 600; font-size: var(--t-pequeno); }
.esl-perfil__cuentas b { font-size: 1.375rem; font-weight: 800; }
.esl-seguidos { display: flex; flex-wrap: wrap; gap: 8px; }
.esl-actividad { display: grid; max-width: 880px; border-top: 1px solid var(--linea); }
.esl-actividad__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-2); padding-block: var(--e-2); border-bottom: 1px solid var(--linea); }
.esl-actividad__portada img { width: 72px; aspect-ratio: 2 / 3; object-fit: contain; object-position: center bottom; }
.esl-actividad__cabeza { font-weight: 700; }
.esl-actividad__cabeza span { color: var(--tinta-suave); font-weight: 400; }
.esl-actividad__nota { margin-top: 4px; }
.esl-actividad__texto p:not(.esl-actividad__cabeza):not(.esl-actividad__nota) { margin-top: 6px; font-family: var(--lectura); line-height: 1.55; }

/* Insignias y logros de lectura (Roberto, 23/10/2026) */
.esl-insignias { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--e-3) var(--e-2); max-width: 1080px; padding: 0; list-style: none; }
.esl-insignia-item { display: grid; justify-items: center; gap: 4px; text-align: center; }
.esl-insignia-item svg { width: 88px; height: 88px; margin-bottom: 6px; }
.esl-insignia-item b { font-size: 1rem; font-weight: 800; }
.esl-insignia-item span { color: var(--tinta-suave); font-size: var(--t-pequeno); line-height: 1.4; }
.esl-insignia-item a { color: inherit; }
.esl-insignia-item.is-siguiente b { color: var(--tinta-suave); }
.esl-insignia-item.is-siguiente svg { border-radius: 50%; outline: 2px dashed var(--linea-fuerte); outline-offset: 4px; }
.esl-insignias + * { margin-top: var(--e-4); }
.esl-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--e-2); max-width: 1080px; padding: 0; list-style: none; }
.esl-logro { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.esl-logro svg { flex: none; width: 64px; height: 64px; }
.esl-logro b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.25; }
.esl-logro span { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: var(--t-pequeno); line-height: 1.4; }
.esl-logro.is-pendiente { background: var(--papel-gris); }
.esl-logro.is-pendiente b { color: var(--tinta-suave); }
.esl-insignia-resumen { display: flex; align-items: center; gap: 12px; max-width: 880px; margin-top: var(--e-2); color: var(--tinta-suave); font-size: var(--t-pequeno); line-height: 1.45; }
.esl-insignia-resumen svg { flex: none; width: 44px; height: 44px; }
.esl-insignia-resumen a { font-weight: 700; }

/* El aviso al ganar una insignia o un logro: abajo, sin tapar la barra del móvil */
.esl-logro-aviso { position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 420px); padding: 14px 16px 10px; border-radius: 18px; background: var(--papel); box-shadow: 0 18px 48px rgba(43, 42, 51, 0.22), 0 0 0 1px var(--linea); transform: translateX(-50%); animation: esl-logro-entra 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.esl-logro-aviso[hidden] { display: none; }
.esl-logro-aviso.is-quieto { animation: none; }
.esl-logro-aviso__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.esl-logro-aviso__item { display: flex; align-items: center; gap: 12px; }
.esl-logro-aviso__item svg { flex: none; width: 56px; height: 56px; }
.esl-logro-aviso__item b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.25; }
.esl-logro-aviso__item span { display: block; color: var(--tinta-suave); font-size: var(--t-pequeno); line-height: 1.4; }
.esl-logro-aviso__pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@keyframes esl-logro-entra { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .esl-logro-aviso { animation: none; } }

/* Entrar con Google y enlace de Instagram del perfil (25/10/2026) */
.esl-google { margin-block-end: 1.5rem; }
.esl-google__boton { min-height: 44px; margin-block: .75rem; }
.esl-perfil__red a { font-weight: 600; }

/* ---------- Invitación a crear cuenta (visitantes sin sesión) ---------- */
.logged-in .esl-invita,
.logged-in .esl-invita-suelta { display: none; }
.esl-invita { display: grid; gap: var(--e-2); margin-block: var(--e-2) var(--e-3); padding: var(--e-3) var(--e-2); border-radius: 24px; background: var(--lavanda-claro); }
.esl-invita__rotulo { color: var(--rosa-hondo); font-family: var(--marco); font-size: var(--t-pequeno); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.esl-invita__titulo { margin-top: 4px; font-size: var(--t-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.esl-invita__lista { display: grid; gap: 10px; margin-top: var(--e-2); padding: 0; list-style: none; }
.esl-invita__lista li { position: relative; padding-left: 28px; font-family: var(--lectura); line-height: 1.5; }
.esl-invita__lista li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--papel); }
.esl-invita__leyendo::before { background: linear-gradient(90deg, var(--tinta) 50%, var(--papel) 50%) !important; }
.esl-invita__estrella::before { background: var(--estrella) !important; border-color: var(--estrella-borde) !important; }
.esl-invita__reto::before { background: var(--menta) !important; }
.esl-invita__listas::before { background: var(--rosa) !important; }
.esl-invita__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.esl-invita__entrar { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 760px) {
	.esl-invita { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: var(--e-3); }
	.esl-invita__botones { flex-direction: column; align-items: stretch; text-align: center; }
	.esl-invita__entrar { justify-content: center; }
}
.esl-invita-suelta { max-width: 34rem; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--lavanda-claro); font-size: var(--t-pequeno); line-height: 1.45; }
.esl-invita-suelta a { font-weight: 700; text-underline-offset: 3px; }