/* =====================================================================
   Páginas — biblioteca y creación de libros
   ===================================================================== */

:root {
    --bg:            #f6f4ef;
    --bg-raised:     #fffdf9;
    --ink:           #23201c;
    --ink-soft:      #6b645a;
    --ink-faint:     #9c948a;
    --line:          #e2ddd2;
    --accent:        #7a3d2e;
    --accent-soft:   #f0e6df;
    --ok:            #3f6b4f;
    --warn:          #97722a;
    --radius:        10px;
    --shadow:        0 1px 2px rgba(35,32,28,.05), 0 8px 24px rgba(35,32,28,.06);
    --serif:         Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #16151a;
        --bg-raised:   #1e1d23;
        --ink:         #e8e4dd;
        --ink-soft:    #a19b93;
        --ink-faint:   #6f6a63;
        --line:        #2e2c33;
        --accent:      #d09274;
        --accent-soft: #2a2229;
        --shadow:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    }
}

/* Tema fijado a mano (Ajustes → Apariencia): un selector con atributo
   tiene más especificidad que el :root de la media query de arriba, así
   que gana en cualquiera de las dos direcciones sin necesitar !important.
   Sin data-theme puesto, sigue mandando prefers-color-scheme como antes. */
:root[data-theme="dark"] {
    --bg:          #16151a;
    --bg-raised:   #1e1d23;
    --ink:         #e8e4dd;
    --ink-soft:    #a19b93;
    --ink-faint:   #6f6a63;
    --line:        #2e2c33;
    --accent:      #d09274;
    --accent-soft: #2a2229;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
:root[data-theme="light"] {
    --bg:            #f6f4ef;
    --bg-raised:     #fffdf9;
    --ink:           #23201c;
    --ink-soft:      #6b645a;
    --ink-faint:     #9c948a;
    --line:          #e2ddd2;
    --accent:        #7a3d2e;
    --accent-soft:   #f0e6df;
    --shadow:        0 1px 2px rgba(35,32,28,.05), 0 8px 24px rgba(35,32,28,.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* --- cabecera ------------------------------------------------------ */
.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--bg-raised);
    position: sticky; top: 0; z-index: 20;
}
.site-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 68px; padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap;
}
.header-actions { display: flex; gap: 8px; align-items: center; flex: none; }

/* Aviso discreto de "verifica tu correo" — no bloquea nada, sólo recuerda. */
/* Recordatorio de un libro a medias en el asistente de creación (sección 25). */
.draft-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 18px; margin-bottom: 20px; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--line);
}
.draft-banner .draft-banner-text { flex: 1; min-width: 200px; font-size: .88rem; }
.draft-banner .draft-banner-text b { display: block; font-size: .95rem; margin-bottom: 2px; }
.draft-banner .draft-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.verify-banner { background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.verify-banner-inner {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 8px 24px; font-size: .82rem; color: var(--ink-soft); text-align: center;
}
.header-actions .btn { white-space: nowrap; }
.brand {
    font-family: var(--serif);
    font-size: 1.35rem;
    letter-spacing: .01em;
    text-decoration: none;
    display: flex; align-items: baseline; gap: 10px;
    min-width: 0; overflow: hidden;
}
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El logo tiene letras claras (pensadas para un fondo oscuro): sin caja
   detrás, se oscurece con un filtro en tema claro para seguir
   distinguiéndose de --bg-raised, y se deja tal cual en tema oscuro. */
.brand-mark { display: inline-flex; align-items: center; flex: none; }
.brand-mark img { display: block; width: auto; filter: brightness(.3); }
.brand-mark img.brand-mark-full { height: 96px; }
.brand-mark img.brand-mark-compact { display: none; height: 40px; }
@media (prefers-color-scheme: dark) {
    .brand-mark img { filter: none; }
}
.brand small {
    font-family: var(--sans);
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- botones ------------------------------------------------------- */
.btn {
    font: inherit;
    font-size: .92rem;
    padding: 9px 17px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: var(--accent-soft); }
.btn-danger:hover { border-color: #a33; color: #a33; }
.btn-sm { padding: 6px 11px; font-size: .84rem; }

/* --- botones flotantes (crear / subir) ------------------------------
   Antes vivían en la cabecera como botones con texto; se sacan de ahí
   para no competir por espacio con el resto de enlaces (biblioteca
   pública, menú de usuario) y quedan como el flotante típico, sólo
   icono, siempre a mano sin desplazarse a la cabecera. */
.fab-group {
    position: fixed; right: 20px; bottom: 20px; z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fab {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .1s, filter .15s;
}
.fab:hover { transform: translateY(-1px); }
.fab:active { transform: translateY(0); }
.fab svg { width: 22px; height: 22px; }
.fab-primary { width: 58px; height: 58px; background: var(--accent); border-color: var(--accent); color: #fff; }
.fab-primary:hover { filter: brightness(1.07); }
.fab-quiet { background: var(--bg-raised); color: var(--ink-soft); }
.fab-quiet:hover { color: var(--ink); }

/* --- páginas ------------------------------------------------------- */
.page { padding: 40px 0 80px; }
.page-head { margin-bottom: 28px; margin-left: 13px; }
.page-head h1 {
    font-family: var(--serif); font-weight: 400;
    font-size: 1.9rem; margin: 0 0 6px;
}
.page-head p { margin: 0; color: var(--ink-soft); }

/* --- páginas de texto largo (privacidad, condiciones) --------------- */
.legal-page { max-width: 720px; }
.legal-page .page-head, .legal-page article { padding: 0 16px; }
.legal-page article { color: var(--ink); font-size: .96rem; line-height: 1.7; }
.legal-page article h2 {
    font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
    margin: 34px 0 12px;
}
.legal-page article p { margin: 0 0 16px; }
.legal-page article ul, .legal-page article ol { margin: 0 0 16px; padding-left: 22px; }
.legal-page article li { margin-bottom: 8px; }
.legal-page article code {
    background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; font-size: .88em;
}
.legal-page article a { color: var(--accent); }
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-table-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.legal-table-wrap th, .legal-table-wrap td {
    text-align: left; padding: 9px 12px; border: 1px solid var(--line); vertical-align: top;
}
.legal-table-wrap th { background: var(--accent-soft); font-weight: 600; }

.site-footer { border-top: 1px solid var(--line); padding: 20px 0 40px; }
.site-footer .wrap { text-align: center; font-size: .78rem; color: var(--ink-faint); }
.site-footer a { color: inherit; }

/* --- buscador de la biblioteca -------------------------------------- */
.search-bar {
    display: flex; align-items: center; gap: 10px;
    margin: 20px 13px 22px;
}
.search-bar input[type="search"] {
    flex: 1 1 auto; min-width: 0;
    font: inherit; font-size: .92rem;
    padding: 10px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink);
}
.filters-wrap { position: relative; flex: none; }
#filters-btn { position: relative; }
.filters-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700;
}
.filters-badge.hidden { display: none; }
#filters-panel { top: 42px; width: 250px; padding: 12px; }
#filters-panel .field { margin-bottom: 12px; }
#filters-panel .field:last-of-type { margin-bottom: 8px; }
#filters-panel .field > label {
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 5px;
}
.filter-check {
    display: flex; align-items: center; gap: 7px;
    font-size: .86rem; color: var(--ink-soft); margin-bottom: 4px; cursor: pointer;
}
.filter-check input { margin: 0; }

/* --- esqueleto de carga: misma forma que .book-card, para que la
   estantería no salte de tamaño cuando llegan los datos reales -------- */
.skeleton-card { display: flex; flex-direction: column; gap: 10px; }
.skeleton-cover { aspect-ratio: 2 / 3; border-radius: var(--radius); box-shadow: var(--shadow); }
.skeleton-line { height: 11px; border-radius: 6px; width: 70%; }
.skeleton-line.short { width: 40%; }
.skeleton-cover, .skeleton-line {
    background: linear-gradient(100deg, var(--line) 30%, var(--bg-raised) 50%, var(--line) 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-cover, .skeleton-line { animation: none; background: var(--line); }
}

/* --- rejilla de libros --------------------------------------------- */
.shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 22px;
    margin-left: 8px;
    margin-right: 13px;
}

/* Estilo Kindle: la tarjeta es la portada. El título va debajo, sencillo,
   no estampado encima de la imagen. Todo lo demás —leer, proceso, EPUB,
   portada, eliminar— vive en un velo que sólo aparece al pasar el ratón o
   al tocar la portada; en reposo no hay nada más que la cubierta. */
.book-card {
    background: transparent;
    border: 0;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: none;
}
.book-card.is-revoked .cover { filter: grayscale(.7) brightness(.7); }
.book-card.is-revoked .cover-note { opacity: .75; font-style: italic; }

.cover {
    aspect-ratio: 2 / 3;
    display: block;
    text-decoration: none;
    background: linear-gradient(155deg, #2f2a26, #4a3f37 55%, #6b5a4c);
    color: #f3ece3;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .16s ease, box-shadow .16s ease;
}
.book-card:hover .cover,
.book-card:focus-within .cover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(35,32,28,.09), 0 16px 32px rgba(35,32,28,.14); }

.cover.is-epub { background: linear-gradient(155deg, #26343a, #34505a 55%, #4c7183); }
.cover.has-image { background-size: cover; background-position: center; }

/* El título va siempre integrado en la propia cubierta, como en un libro
   de verdad: anclado abajo, con el degradado (de la imagen, o el propio
   fondo liso) dándole el contraste necesario para leerse sobre cualquier
   artwork sin quedar plano encima. */
.cover {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px 20px 18px;
}
.cover:not(.has-image)::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 7px;
    background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(255,255,255,.06));
}
.cover .cover-title {
    font-family: var(--serif); font-weight: 500; font-size: 1.14rem; line-height: 1.22;
    margin: 0 0 6px; letter-spacing: .003em;
    text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 14px rgba(0,0,0,.25);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cover .cover-author {
    font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
    opacity: .82; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.cover .cover-meta {
    display: flex; align-items: center; gap: 5px;
    font-size: .72rem; color: #f3ece3; opacity: .82; margin: 12px 0 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.cover .source-badge { display: inline-flex; flex: none; }
.cover .source-badge svg { width: 11px; height: 11px; }
/* Notas discretas dentro de la portada (compartido por, leído entero...):
   más pegadas entre sí que el resto, no cada una con su propio hueco.
   Oculta hasta fijarse en la tarjeta (ratón encima, foco, o el instante
   del toque en táctil) — menos ruido en la rejilla cuando no hace falta
   ese detalle. */
/* max-height:0 (no sólo opacity:0): oculto de verdad ocupa CERO alto —
   si no, aunque invisible, seguía empujando hacia arriba la barra de
   progreso de las tarjetas compartidas (con esta nota) frente a las
   propias (sin ella), y las barras no quedaban a la misma altura entre
   tarjetas — bug real, visto en vivo. */
.cover .cover-note {
    margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .15s ease, opacity .15s ease, margin-top .15s ease;
}
.book-card:hover .cover-note,
.book-card:focus-within .cover-note { margin-top: 4px; max-height: 32px; opacity: .78; }

/* Estado del libro (finalizado/creciendo/pausado): pedido explícito de
   que se note sin tener que fijarse. Esquina opuesta a la cinta de
   género, siempre visible. */
/* Junto al botón de "seguir" (o solo, si esa portada no lo lleva —
   libro propio): mismo rincón, a su izquierda cuando los dos conviven.
   .cover-top-right envuelve a ambos para que se acomoden solos sin
   coordenadas fijas. */
.cover-top-right { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 6px; }
.cover-state-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    background: rgba(20,17,15,.55); color: #f3ece3; backdrop-filter: blur(2px);
    font-size: .66rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.cover-state-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cover-state-badge.state-growing { color: #f0c894; }
.cover-state-badge.state-finished { color: #8fd0a3; }
.cover-state-badge.state-paused { color: #cfc8bf; }

/* Cinta de clasificación: género (y "con decisiones" si aplica), en la
   esquina como una faja de libro de verdad. .cover ya recorta
   (overflow:hidden), así que la cinta rotada queda limpia sin más. */
/* 135px/.6rem/.09em se quedaba corto con etiquetas largas ("Cuento
   infantil", "Narrativa contemporánea") — el texto salía cortado a
   media palabra sin ni siquiera puntos suspensivos. Más ancha y con
   menos letter-spacing: cabe entera hasta "Narrativa contemporánea". */
.cover-ribbon {
    position: absolute; top: 15px; left: -38px; z-index: 1;
    width: 160px; padding: 3px 0; text-align: center;
    transform: rotate(-45deg);
    background: var(--accent); color: #fff;
    font-size: .58rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cover-ribbon.is-branching { background: #4a6b7a; }

/* Insignia discreta de "leído entero"/"completo": un icono chiquitito en
   la esquina, no una línea de texto más — el tooltip nativo (title=) ya
   explica qué significa al pasar el ratón o mantener el dedo encima. */
.cover-done {
    /* Vive dentro de .cover-top-right, junto a la insignia de estado si la hay. */
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(20,17,15,.55); color: #f3ece3;
    backdrop-filter: blur(2px);
}
.cover-done svg { width: 13px; height: 13px; }

/* Marcador de "sigues este libro" en la Woodoteca — mismo lenguaje
   visual que .cover-done (insignia redonda en la esquina), pero el
   propio icono ya distingue el estado (relleno/contorno), así que se
   enseña siempre, no sólo cuando es verdad. */
.cover-follow-badge {
    /* Ya no fija su propia esquina: vive dentro de .cover-top-right,
       junto a la insignia de estado si la hay. */
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(20,17,15,.55); color: #f3ece3;
    backdrop-filter: blur(2px);
    border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cover-follow-badge svg { width: 14px; height: 14px; }
.cover-follow-badge.is-following { background: var(--accent); color: #fff; }

/* Autoría real en la Woodoteca (quién lo creó de verdad, no el nombre de
   autor ficticio del libro): a diferencia de .cover-note (compartido por…
   en la biblioteca privada), este dato es relevante siempre en un libro
   ajeno, así que no se oculta hasta el hover. */
.cover .cover-creator {
    margin-top: 4px; font-size: .68rem; opacity: .75;
}

/* --- menú emergente de la tarjeta -------------------------------------
   Vive fuera de .cover (que tiene overflow:hidden para recortar la
   imagen): si estuviera dentro, un menú que necesita asomar por debajo
   del borde quedaría cortado. Se posiciona respecto a .book-card. */
.book-card { position: relative; }

.card-menu-toggle {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; background: rgba(10,8,7,.45); color: #fff; cursor: pointer;
    font-size: 1.1rem; line-height: 1;
    opacity: 0; transition: opacity .14s ease, background .14s ease;
}
.card-menu-toggle:hover,
.card-menu-toggle[aria-expanded="true"] { background: rgba(10,8,7,.72); }
.book-card:hover .card-menu-toggle,
.book-card:focus-within .card-menu-toggle,
.card-menu-toggle.is-visible,
.card-menu-toggle[aria-expanded="true"] { opacity: 1; }
@media (hover: none) {
    /* Sin ratón: el botón siempre está ahí para poder abrir el menú. */
    .card-menu-toggle { opacity: 1; }
}

.card-menu {
    position: absolute; top: 42px; right: 8px; z-index: 50;
    min-width: 190px;
    background: var(--bg-raised); color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20,16,14,.22), 0 2px 6px rgba(20,16,14,.14);
    padding: 6px;
    opacity: 0; transform: translateY(-4px) scale(.98);
    pointer-events: none;
    transition: opacity .13s ease, transform .13s ease;
}
.card-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.card-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border-radius: 7px; border: 0; background: none;
    font: inherit; font-size: .86rem; color: inherit; text-align: left;
    text-decoration: none; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-menu-item:hover { background: var(--accent-soft); }
.card-menu-item svg { flex: none; width: 15px; height: 15px; opacity: .75; }
.card-menu-item.is-danger { color: #b03a3a; }
.card-menu-item.is-danger:hover { background: rgba(176,58,58,.1); }
.card-menu-item[disabled] { opacity: .45; cursor: default; }
.card-menu-item[disabled]:hover { background: none; }
.card-menu-sep { height: 1px; margin: 5px 4px; background: var(--line); }

/* --- submenú dentro del menú de la tarjeta (p.ej. "Descargar") --------
   Acordeón, no un flyout lateral: la tarjeta es estrecha y el menú ya
   vive pegado al borde derecho, así que un submenú que se abriera hacia
   un lado se saldría de la pantalla casi siempre. */
.card-submenu-toggle .submenu-chevron { margin-left: auto; flex: none; width: 14px; height: 14px; opacity: .55; transition: transform .14s ease; }
.card-submenu-toggle[aria-expanded="true"] .submenu-chevron { transform: rotate(90deg); }
.card-submenu {
    display: grid; grid-template-rows: 0fr; overflow: hidden;
    transition: grid-template-rows .16s ease;
}
.card-submenu > * { min-height: 0; }
.card-submenu.open { grid-template-rows: 1fr; }
.card-submenu .card-menu-item { padding-left: 30px; font-size: .82rem; }

/* --- campanita de notificaciones (menú de usuario) ------------------ */
.user-menu { display: flex; align-items: center; gap: 10px; position: relative; }
.bell-wrap { position: relative; }
.icon-btn.bell, .icon-btn.search-toggle {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; border: 1px solid var(--line);
    background: var(--bg-raised); color: var(--ink-soft); cursor: pointer;
    position: relative;
}
.icon-btn.bell:hover, .icon-btn.search-toggle:hover,
.icon-btn.bell[aria-expanded="true"], .icon-btn.search-toggle[aria-expanded="true"] {
    background: var(--accent-soft); color: var(--ink);
}
.icon-btn.bell svg, .icon-btn.search-toggle svg { width: 18px; height: 18px; }
.bell-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: .64rem; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--bg-raised);
}
.bell-badge.hidden { display: none; }

/* --- insignia de Wood (menú de usuario) ------------------------------ */
.wood-badge {
    display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised);
    color: var(--ink-soft); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.wood-badge:hover { background: var(--accent-soft); color: var(--ink); }
.wood-badge.is-low { border-color: #a33; color: #a33; }
.wood-badge.hidden { display: none; }

/* --- "Mi plan" --------------------------------------------------- */
.dlg-my-plan { max-width: 620px; }
.my-plan-body { padding-bottom: 8px; }
.my-plan-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 4px;
}
.my-plan-head h2 { margin: 0; }
.my-plan-head-right { display: flex; align-items: center; gap: 8px; flex: none; }
.my-plan-badge {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 600;
}
.my-plan-manage-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
    font-size: .82rem; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.my-plan-manage-btn:hover { border-color: var(--accent); color: var(--accent); }
.my-plan-manage-btn[disabled] { opacity: .5; cursor: not-allowed; }
.my-plan-subtitle { margin: 18px 0 2px; font-weight: 600; font-size: .95rem; }
.my-plan-subnote {
    display: flex; align-items: center; gap: 7px; margin: 0 0 18px;
    color: var(--ink-faint); font-size: .8rem;
}

.my-plan-hero-wrap {
    padding: 16px 18px; margin-bottom: 16px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.my-plan-hero { display: flex; align-items: center; gap: 16px; }
.my-plan-hero-icon {
    flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; border-radius: 12px; background: var(--accent-soft);
}
.my-plan-hero-body { flex: 1; min-width: 0; }
.my-plan-hero-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--ink-soft);
}
.my-plan-hero-label .fa-circle-question { color: var(--ink-faint); font-size: .78rem; cursor: help; }
.my-plan-hero-num { display: block; margin: 2px 0 8px; font-size: 1.6rem; font-family: var(--serif); font-weight: 400; }
.my-plan-hero-num small { font-size: .95rem; color: var(--ink-faint); font-family: var(--sans); }
.my-plan-hero-caption { display: block; margin-top: 8px; font-size: .74rem; color: var(--ink-faint); }
.my-plan-breakdown-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 0; border: 0; background: none; color: var(--accent); font: inherit;
    font-size: .76rem; font-weight: 600; cursor: pointer;
}
.my-plan-breakdown-btn i { font-size: .68rem; transition: transform .15s ease; }
.my-plan-breakdown-btn.is-open i { transform: rotate(180deg); }
.my-plan-breakdown { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.my-plan-breakdown-row {
    display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .78rem;
}
.my-plan-breakdown-icon {
    flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: .68rem;
}
.my-plan-breakdown-label { flex: none; width: 110px; color: var(--ink-soft); }
.my-plan-breakdown-bar {
    flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.my-plan-breakdown-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.my-plan-breakdown-wood {
    flex: none; min-width: 34px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;
}
.my-plan-ring { position: relative; flex: none; width: 76px; height: 76px; }
.my-plan-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.my-plan-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.my-plan-ring .ring-bg { stroke: var(--line); }
.my-plan-ring .ring-fg { stroke: var(--accent); transition: stroke-dasharray .4s ease; }
.my-plan-ring span {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: .66rem; line-height: 1.25; font-weight: 600; color: var(--ink-soft); text-align: center;
}

.my-plan-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
.my-plan-stat {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
    padding: 14px 16px;
}
.my-plan-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.my-plan-stat-icon {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 10px; font-size: .95rem;
    background: color-mix(in srgb, var(--stat-color) 16%, transparent);
    color: color-mix(in srgb, var(--stat-color) 70%, var(--ink) 30%);
}
.my-plan-stat-pct {
    font-size: .72rem; font-weight: 700; color: var(--ink-faint);
    background: var(--accent-soft); padding: 2px 8px; border-radius: 999px;
}
.my-plan-stat-pct.my-plan-stat-unlimited { color: var(--ink-soft); }
.my-plan-stat-pct.my-plan-stat-blocked { color: #a33; background: rgba(163,51,51,.14); }
.my-plan-stat-label { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: 2px; }
.my-plan-stat-num { display: block; font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
.my-plan-stat-num small { font-size: .74rem; font-weight: 400; color: var(--ink-faint); }
.my-plan-stat-note { margin: 8px 0 0; font-size: .72rem; line-height: 1.4; color: var(--ink-faint); }

.my-plan-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    border-radius: var(--radius); background: var(--accent-soft); color: var(--ink-soft); font-size: .8rem;
}
.my-plan-note .fa-wand-magic-sparkles { color: var(--accent); margin-top: 2px; }
.my-plan-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; text-align: center;
}
.my-plan-cta .fa-chevron-right { font-size: .72rem; opacity: .8; }

@media (max-width: 560px) {
    .my-plan-hero { flex-wrap: wrap; }
    .my-plan-ring { margin-left: auto; }
    .my-plan-grid { gap: 9px; }
    .my-plan-stat { padding: 11px 12px; }
    .my-plan-stat-icon { width: 30px; height: 30px; font-size: .85rem; }
    .my-plan-stat-label { font-size: .72rem; }
    .my-plan-stat-num { font-size: 1rem; }
    .my-plan-breakdown-label { width: 84px; font-size: .74rem; }
}
@media (max-width: 340px) {
    .my-plan-grid { grid-template-columns: 1fr; }
}

.notif-panel { width: 340px; max-width: calc(100vw - 32px); padding: 0; top: 46px; }
.notif-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
    font-size: .84rem; font-weight: 600;
}
.btn-link {
    font: inherit; font-size: .76rem; font-weight: 500; color: var(--accent);
    background: none; border: 0; cursor: pointer; padding: 0;
}
.btn-link:hover { text-decoration: underline; }

.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
    display: flex; align-items: stretch; width: 100%;
    border-bottom: 1px solid var(--line); position: relative;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--accent-soft); }
.notif-item.is-unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-item.is-unread::before {
    content: ""; position: absolute; top: 18px; left: 4px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.notif-item.is-unread .notif-item-title,
.notif-item.is-unread .notif-item-body { padding-left: 12px; }
.notif-item-main {
    display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0;
    padding: 11px 4px 11px 14px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer;
}
.notif-item-title { font-size: .86rem; font-weight: 600; color: var(--ink); }
.notif-item-body {
    font-size: .8rem; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time { font-size: .72rem; color: var(--ink-faint); }
.notif-item-delete {
    flex: none; align-self: center; width: 26px; height: 26px; margin-right: 8px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: none; color: var(--ink-faint); cursor: pointer;
    opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.notif-item-delete svg { width: 14px; height: 14px; }
.notif-item:hover .notif-item-delete,
.notif-item-delete:focus-visible { opacity: 1; }
.notif-item-delete:hover { background: rgba(176,58,58,.12); color: #b03a3a; }
@media (hover: none) {
    /* Sin ratón no hay ":hover" que lo revele: visible pero discreto. */
    .notif-item-delete { opacity: .55; }
}

.notif-panel .empty-note { padding: 24px 14px; text-align: center; color: var(--ink-faint); font-size: .84rem; margin: 0; }

/* Varios avisos del mismo libro, plegados bajo su título — igual que
   .settings-section, pero a la escala más estrecha del panel. */
.notif-group { border-bottom: 1px solid var(--line); }
.notif-group:last-child { border-bottom: 0; }
.notif-group-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 11px 14px; cursor: pointer; list-style: none;
}
.notif-group-head::-webkit-details-marker { display: none; }
.notif-group-title { font-size: .86rem; font-weight: 600; color: var(--ink); }
.notif-group-meta { font-size: .72rem; color: var(--ink-faint); white-space: nowrap; }
.notif-group-body .notif-item { padding-left: 22px; border-bottom: 1px solid var(--line); }
.notif-group-body .notif-item:last-child { border-bottom: 0; }
.notif-group-body .notif-item.is-unread::before { left: 12px; }

.notif-prefs { border-top: 1px solid var(--line); }
.notif-prefs > summary {
    padding: 10px 14px; cursor: pointer; font-size: .8rem; font-weight: 600;
    color: var(--ink-soft); list-style: none;
}
.notif-prefs > summary::-webkit-details-marker { display: none; }
.notif-prefs[open] > summary { color: var(--ink); }
.notif-push-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0 14px 10px; font-size: .78rem; color: var(--ink-soft);
}
#notif-prefs-body { padding: 2px 14px 12px; }
.notif-pref-grid {
    display: grid; grid-template-columns: 1fr repeat(3, 30px);
    align-items: center; row-gap: 10px; font-size: .78rem;
}
.notif-pref-grid > span { display: flex; align-items: center; justify-content: center; }
.notif-pref-grid > span:first-child,
.notif-pref-label { justify-content: flex-start; color: var(--ink-soft); }
.notif-pref-grid svg { width: 15px; height: 15px; color: var(--ink-faint); }
.notif-pref-grid input[type="checkbox"] { margin: 0; }

@media (max-width: 640px) {
    .notif-panel { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; }
}

/* El título ya va integrado en la propia portada: repetirlo aquí debajo
   era redundante. Sólo queda el progreso de lectura/escritura. */
.book-body { padding: 0 2px; display: flex; flex-direction: column; gap: 6px; }
.book-meta { font-size: .78rem; color: var(--ink-soft); margin: 0; }
.book-stats {
    display: flex; gap: 12px; margin: 0; font-size: .74rem; color: var(--ink-faint);
}
.book-stats span { display: inline-flex; align-items: center; gap: 4px; }
.book-stats svg { width: 13px; height: 13px; }
/* Botón de "me gusta" metido en la misma fila de recuentos: mismo tamaño
   y trazo que los recuentos de sólo lectura de al lado, pero clicable. */
.book-like-btn {
    display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0;
    font: inherit; font-size: .74rem; color: var(--ink-faint); cursor: pointer;
}
.book-like-btn svg { width: 13px; height: 13px; }
.book-like-btn:hover { color: var(--accent); }
.book-like-btn.is-liked { color: var(--accent); }
.book-like-btn[disabled] { opacity: .6; cursor: default; }
.btn-icon { padding: 6px 9px; font-size: .95rem; line-height: 1; }

/* --- progreso de generación ---------------------------------------- */
.progress {
    height: 4px; border-radius: 3px; background: var(--line); overflow: hidden;
}
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }

/* Dentro de la portada, justo bajo título y autor: el fondo siempre es
   oscuro ahí (el degradado de la imagen, o el propio gradiente liso), así
   que la pista necesita su propio contraste en vez del de fuera. */
/* Portada generándose: tapa la imagen (si la había) con un aviso claro
   de que va a cambiar, en vez de dejar el botón "Generando…" un instante
   y luego nada hasta que aparece sola 8s después. */
.cover-generating {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(20,17,15,.72); color: #f3ece3; text-align: center; padding: 0 24px;
}
.cover-generating span { font-size: .78rem; letter-spacing: .04em; }
.cover-generating .progress { width: 70%; background: rgba(255,255,255,.25); }
.cover-generating .progress > i { background: #fff; }

/* Invitación pendiente: en medio de la propia portada, no debajo — es
   lo primero que hay que ver y decidir, no un dato más de la tarjeta. */
.cover-invite {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(20,17,15,.78); color: #f3ece3; text-align: center; padding: 0 20px;
}
.cover-invite span { font-size: .8rem; letter-spacing: .02em; }
.cover-invite-actions { display: flex; align-items: center; gap: 8px; }
/* .btn-quiet asume texto oscuro sobre fondo claro — aquí el fondo es
   siempre oscuro (la propia capa de invitación), así que necesita su
   propio contraste en vez del de fuera. */
.cover-invite .btn-quiet { color: #f3ece3; border: 1px solid rgba(243,236,227,.35); }
.cover-invite .btn-quiet:hover { background: rgba(243,236,227,.14); }

.cover .progress-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: #f3ece3; }
.cover .progress-row .progress { flex: 1; margin-top: 0; }
.cover .progress-count { flex: none; font-size: .68rem; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
/* .source-badge (icono IA/subido) reaparece aquí, a la izquierda de la
   barra, en la biblioteca privada — en la Woodoteca nunca hace falta
   (todo lo que se sigue ahí es generativo). */
.cover .progress-row .source-badge { opacity: .82; }
.cover .progress {
    background: rgba(255,255,255,.25);
}
.cover .progress > i { background: #fff; }

/* Sin ni un capítulo todavía: no hay nada más que enseñar en la portada,
   así que el aviso ocupa el centro entero — igual que "generando
   portada" o la invitación pendiente, no una línea más ahí abajo. */
.cover-status {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,17,15,.45); text-align: center; padding: 0 20px;
}

/* Portada con reverso — clic en una tarjeta legible la da la vuelta
   (como un libro de verdad) en vez de entrar a leer directamente; el
   reverso trae la sinopsis y el botón "Leer" real. .cover conserva su
   propio aspect-ratio/sombra/hover tal cual para el resto de sitios
   donde se usa sin envoltorio (Woodoteca) — aquí sólo se le añade
   position:absolute al quedar dentro del envoltorio 3D. */
.cover-flip { aspect-ratio: 2 / 3; perspective: 1400px; }
.cover-flip .cover-flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .5s cubic-bezier(.4,.1,.2,1); transform-style: preserve-3d;
}
.cover-flip.is-flipped .cover-flip-inner { transform: rotateY(180deg); }
.cover-flip .cover {
    position: absolute; inset: 0; aspect-ratio: auto; backface-visibility: hidden;
}
.cover-back {
    position: absolute; inset: 0; backface-visibility: hidden; transform: rotateY(180deg);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    background: linear-gradient(155deg, #2f2a26, #4a3f37 55%, #6b5a4c);
    color: #f3ece3; cursor: pointer;
    display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px;
}
.cover-back h4 {
    margin: 0; font-family: var(--serif, Georgia, serif); font-weight: 400;
    font-size: 1rem; line-height: 1.25;
}
.cover-back p {
    margin: 0; flex: 1; min-height: 0; overflow-y: auto;
    font-size: .82rem; line-height: 1.5; color: rgba(243,236,227,.82);
}
.cover-back .btn { align-self: stretch; flex: 1; justify-content: center; cursor: pointer; }
.cover-back-actions { display: flex; align-items: center; gap: 8px; }
/* Recuento de vistas/seguidores del propio libro, en el hueco entre la
   sinopsis y los botones — mismo dato que ya se ve bajo la portada en la
   rejilla, repetido aquí porque de este lado sobraba espacio en blanco. */
.cover-back-stats {
    display: flex; gap: 14px; margin: 0 0 10px; flex: none;
    font-size: .76rem; color: rgba(243,236,227,.65);
}
.cover-back-stats span { display: inline-flex; align-items: center; gap: 4px; }
.cover-back-stats svg { width: 13px; height: 13px; }
/* Enlace a la sala de máquinas, encima de "Leer"/"Compartir" — flex:none
   a propósito: es hijo directo de .cover-back (la misma columna flex de
   la sinopsis), y sin esto heredaba el flex:1 de ".cover-back .btn" y
   competía con la sinopsis por el espacio sobrante. */
.cover-back-machine {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-bottom: 8px; text-decoration: none; cursor: pointer;
    color: #f3ece3; border: 1px solid rgba(243,236,227,.35);
}
.cover-back-machine:hover { background: rgba(243,236,227,.14); }
.cover-back-machine svg { width: 15px; height: 15px; }
/* .btn-quiet asume texto oscuro sobre fondo claro — aquí el fondo es
   siempre oscuro (el propio reverso de la portada), mismo criterio que
   .cover-invite .btn-quiet más abajo. flex:none: sin esto heredaba el
   flex:1 de ".cover-back .btn" de arriba y "Compartir" se estiraba a
   partes iguales con "Leer" en vez de quedarse compacto. */
.cover-back-actions .btn-quiet {
    color: #f3ece3; border: 1px solid rgba(243,236,227,.35);
    display: inline-flex; align-items: center; justify-content: center; padding: 7px 9px;
    flex: none;
}
.cover-back-actions .btn-quiet:hover { background: rgba(243,236,227,.14); }
.cover-back-actions .btn-quiet svg { width: 16px; height: 16px; }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px;
    background: var(--accent-soft); color: var(--ink-soft);
}
.badge.is-working::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--warn); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.badge.is-done { background: transparent; color: var(--ink-faint); padding-left: 0; }

/* --- diálogo de creación ------------------------------------------- */
dialog {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-raised);
    color: var(--ink);
    padding: 0;
    max-width: 520px; width: calc(100% - 32px);
    box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
dialog::backdrop { background: rgba(20,18,16,.55); backdrop-filter: blur(2px); }
.dialog-body { padding: 26px 28px 22px; }

/* --- vista ampliada de una tarjeta (biblioteca/Woodoteca) -------------
   Clic en una portada: se amplía y se centra en la pantalla, como en
   otras plataformas, y en cuanto termina de crecer gira sola para
   enseñar la sinopsis — mismo .cover-flip/.cover-back que ya usa la
   rejilla, sólo que aquí vive dentro de este <dialog> centrado en vez
   de en su sitio de la rejilla. Ver openCardZoom() en library.js /
   public-library.js. */
.card-zoom-dlg {
    border: 0; border-radius: 0; background: transparent; padding: 0;
    max-width: none; width: min(360px, 86vw); box-shadow: none; overflow: visible;
}
.card-zoom-dlg::backdrop { background: rgba(10,8,7,.72); backdrop-filter: blur(3px); }
.card-zoom-wrap { position: relative; }
.card-zoom-dlg .cover-flip {
    aspect-ratio: 2 / 3; animation: card-zoom-in .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes card-zoom-in {
    from { transform: scale(.72); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.card-zoom-close {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.card-zoom-close:hover { background: rgba(255,255,255,.24); }
.card-zoom-close svg { width: 16px; height: 16px; }

/* Modal de páginas legales: mucho más grande que el resto de diálogos
   (lleva un documento entero dentro, no un formulario). display:flex sólo
   con [open]: puesto sin condición, un <dialog> cerrado se ve igual
   (display manda por encima del display:none nativo de UA), metido en
   medio de la página en vez de cerrado. */
.dlg-legal { max-width: 760px; width: calc(100% - 32px); height: 82vh; padding: 0; }
.dlg-legal[open] { display: flex; flex-direction: column; }
.dlg-legal-foot { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex: none; }
.dlg-legal-foot #legal-title { height: 22px; width: auto; display: block; }
.dlg-legal #legal-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); }
.dialog-body h2 { font-family: var(--serif); font-weight: 400; margin: 0 0 4px; font-size: 1.4rem; }
.dialog-body > p { margin: 0 0 22px; color: var(--ink-soft); font-size: .9rem; }
.dialog-foot {
    padding: 16px 28px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.invite-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line);
}
.invite-row:last-child { border-bottom: 0; }
.invite-row strong { display: block; font-size: .9rem; }
.invite-row span { display: block; margin-top: 2px; color: var(--ink-faint); font-size: .78rem; }
#user-invitations-status { color: var(--ink-soft); font-size: .86rem; }

.field { margin-bottom: 18px; }
.field > label {
    display: block; font-size: .78rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
    font: inherit; font-size: .85rem;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
    cursor: pointer;
}
.chip[aria-pressed="true"] {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
textarea, input[type="text"], input[type="email"], input[type="number"] {
    width: 100%; font: inherit; font-size: .92rem;
    padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    resize: vertical;
}
select {
    width: 100%; font: inherit; font-size: .92rem;
    padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
#user-invitations-quota.is-empty { color: var(--accent); }

/* --- Compartir libro (diálogo de la biblioteca) ----------------------
   Diseño entregado por el usuario (2026-09-09): cabecera con portada,
   fila correo+permiso+Compartir, tarjetas de permiso, lista de personas
   con avatar y menú "⋯", y la transferencia de propiedad plegada en
   "Opciones avanzadas". */
dialog.share-dlg { max-width: 640px; }
.share-dlg-body { position: relative; padding: 26px 28px 24px; }
.share-dlg-close {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint);
    font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.share-dlg-close:hover { background: var(--accent-soft); color: var(--ink); }
.share-dlg-head { display: flex; gap: 22px; align-items: flex-start; padding-right: 36px; margin-bottom: 20px; }
.share-dlg-cover {
    flex: 0 0 84px; height: 126px; border-radius: 8px;
    background: var(--accent-soft) center / cover no-repeat; border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.share-dlg-head-text { min-width: 0; }
.share-dlg-body h2 { font-family: var(--serif); font-weight: 400; font-size: 1.85rem; margin: 6px 0 4px; line-height: 1.15; }
.share-dlg-book { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 10px; color: var(--ink); overflow-wrap: anywhere; }
.share-dlg-sub { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.share-dlg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; margin-bottom: 14px; }
.share-dlg-input {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
    color: var(--ink-faint);
}
.share-dlg-input:focus-within { border-color: var(--accent); }
.share-dlg-input input, .share-dlg-input select {
    border: 0; background: transparent; padding: 13px 0; box-shadow: none; min-width: 0; width: 100%;
}
.share-dlg-input input:focus, .share-dlg-input select:focus { outline: none; }
.share-dlg-select { position: relative; padding-right: 36px; }
.share-dlg-select select { appearance: none; -webkit-appearance: none; padding-right: 8px; width: auto; min-width: 88px; cursor: pointer; }
.share-dlg-caret { position: absolute; right: 14px; font-size: .75rem; pointer-events: none; }
.share-dlg-send {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 20px; border-radius: 10px; white-space: nowrap;
}

.share-dlg-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.share-dlg-roles button {
    display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
    align-items: start; text-align: left; padding: 14px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit;
}
.share-dlg-roles button:hover { border-color: var(--ink-faint); }
.share-dlg-roles.is-locked button { cursor: default; }
.share-dlg-roles.is-locked button:not(.is-selected) { opacity: .45; }
.share-dlg-roles.is-locked button:not(.is-selected):hover { border-color: var(--line); }
.share-dlg-roles button.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.share-dlg-roles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-dlg-role-icon {
    grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font-size: 1.05rem;
}
.share-dlg-roles button.is-selected .share-dlg-role-icon { background: rgba(255,255,255,.12); color: var(--ink); }
.share-dlg-roles b { font-weight: 600; font-size: .95rem; }
.share-dlg-roles small { color: var(--ink-soft); font-size: .8rem; line-height: 1.35; }

.share-dlg-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--ink-faint); font-size: .82rem; line-height: 1.45; }
.share-dlg-note i { margin-top: 3px; }
.share-dlg-feedback { margin: 10px 0 0; font-size: .86rem; min-height: 0; }
.share-dlg-feedback:empty { display: none; }

.share-dlg-people { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.share-dlg-people h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 4px; }
.share-user-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
    padding: 12px 0; border-top: 1px solid var(--line);
}
.share-user-row:first-child { border-top: 0; }
.share-user-avatar {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.share-user-who { min-width: 0; }
.share-user-who strong { display: block; font-weight: 500; font-size: .98rem; overflow-wrap: anywhere; }
.share-user-who span { display: block; color: var(--ink-faint); font-size: .8rem; overflow-wrap: anywhere; }
.share-user-who em { font-style: normal; color: var(--accent); }
.share-user-row select { width: auto; min-width: 120px; font-size: .88rem; padding: 9px 12px; border-radius: 9px; }
.share-user-owner { color: var(--accent); font-size: .9rem; }
.share-user-crown { color: #d9a441; font-size: 1.05rem; text-align: center; width: 36px; }
.share-user-more {
    width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft);
    cursor: pointer; font-size: 1rem; display: grid; place-items: center;
}
.share-user-more:hover { background: var(--accent-soft); color: var(--ink); }
.share-user-menu-wrap { position: relative; }
.share-user-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; min-width: 200px;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,.25); display: none;
}
.share-user-menu-wrap.is-open .share-user-menu { display: block; }
.share-user-menu label, .share-user-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; text-align: left;
}
.share-user-menu label:hover, .share-user-menu button:hover { background: var(--accent-soft); }
.share-user-menu button[data-revoke-share] { color: #c0392b; }

.share-dlg-advanced { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.share-dlg-advanced summary {
    list-style: none; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 14px 18px 14px 14px; cursor: pointer;
}
.share-dlg-advanced summary::-webkit-details-marker { display: none; }
.share-dlg-gear {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--ink); font-size: 1.1rem;
}
.share-dlg-advanced-text b { display: block; font-weight: 500; font-size: 1rem; }
.share-dlg-advanced-text small { display: block; color: var(--ink-faint); font-size: .84rem; margin-top: 2px; }
.share-dlg-advanced-caret { color: var(--ink-faint); transition: transform .18s; }
.share-dlg-advanced[open] .share-dlg-advanced-caret { transform: rotate(90deg); }
.share-transfer-box { padding: 0 18px 18px; }
.share-transfer-box > p { margin: 0 0 14px; color: var(--ink-faint); font-size: .82rem; line-height: 1.45; }
.share-transfer-box .field { margin-bottom: 12px; }
.share-transfer-box .btn-danger { width: 100%; }

@media (max-width: 600px) {
    .share-dlg-body { padding: 22px 18px 20px; }
    .share-dlg-head { gap: 14px; }
    .share-dlg-cover { flex-basis: 64px; height: 96px; }
    .share-dlg-body h2 { font-size: 1.5rem; }
    /* Apiladas: correo, permiso y Compartir a todo el ancho — antes el
       selector de permiso sólo ocupaba una de las dos columnas del grid
       de escritorio y dejaba media fila vacía al lado. */
    .share-dlg-row { grid-template-columns: 1fr; }
    .share-dlg-select select { width: 100%; }
    .share-dlg-roles { grid-template-columns: 1fr; }
    /* Móvil: avatar | nombre | «⋯» en la primera línea y el rol debajo
       del nombre — con cuatro columnas el menú se salía de la fila y no
       se veía (no había forma de quitar una compartición desde el móvil). */
    .share-user-row { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 6px; }
    .share-user-avatar { width: 40px; height: 40px; grid-row: 1 / 3; }
    .share-user-who { grid-column: 2; grid-row: 1; }
    .share-user-row select, .share-user-owner { grid-column: 2; grid-row: 2; justify-self: start; min-width: 0; }
    .share-user-menu-wrap, .share-user-crown { grid-column: 3; grid-row: 1 / 3; width: auto; }
}
}

/* --- formulario avanzado de creación (protagonistas, dónde/cuándo…) - */
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-suggest {
    flex: none; font: inherit; font-size: .74rem; letter-spacing: normal; text-transform: none;
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.btn-suggest:hover { background: var(--accent-soft); color: var(--ink); }
.btn-suggest:disabled { opacity: .5; cursor: default; }

#protagonist-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.protagonist-card { display: flex; flex-direction: column; gap: 6px; }
.protagonist-row { display: flex; gap: 8px; align-items: center; }
.protagonist-row .protagonist-name { flex: 1 1 auto; min-width: 0; }
.protagonist-row select { flex: 0 0 132px; width: auto; }
.protagonist-row-detail { padding-left: 2px; }
.protagonist-row-detail { flex-wrap: wrap; }
.protagonist-row-detail input { flex: 1 1 210px; min-width: 0; font-size: .86rem; }
.protagonist-row .btn-suggest,
.protagonist-row .btn-icon-remove,
.chapter-row .btn-icon-remove {
    flex: none; width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--line); background: transparent;
    color: var(--ink-soft); cursor: pointer; font-size: .92rem;
}
.protagonist-row .btn-suggest:hover,
.protagonist-row .btn-icon-remove:hover,
.chapter-row .btn-icon-remove:hover { background: var(--accent-soft); color: var(--ink); }

/* --- pantalla de revisión de importación (PDF/EPUB) ----------------- */
#chapter-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.chapter-row { display: flex; gap: 8px; align-items: center; }
.chapter-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.chapter-row .btn-icon-remove[data-up],
.chapter-row .btn-icon-remove[data-down] { font-size: 1.05rem; }

/* --- árbol de configuración (menú de usuario → Ajustes) ------------- */
.settings-section {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 12px; overflow: hidden;
}
.settings-section > summary {
    padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: .92rem;
    list-style: none; display: flex; align-items: center; justify-content: space-between;
    background: var(--accent-soft);
}
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after {
    content: "+"; font-size: 1.1rem; color: var(--ink-faint); transition: transform .15s;
}
.settings-section[open] > summary::after { content: "−"; }
.settings-section-body { padding: 16px; }
.settings-section-body .field:last-child { margin-bottom: 0; }

/* --- dictado por voz: un micrófono flotante sobre cada campo -------- */
.field-input { position: relative; }
.field-input textarea, .field-input input[type="text"] { padding-right: 40px; }
.dictate-btn {
    position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: transparent; color: var(--ink-faint);
    cursor: pointer;
}
.dictate-btn svg { width: 16px; height: 16px; }
.dictate-btn:hover { background: var(--accent-soft); color: var(--ink); }
.dictate-btn.is-listening {
    background: var(--accent); color: #fff;
    animation: dictate-pulse 1.2s ease-in-out infinite;
}
@keyframes dictate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* --- editor ampliado del prompt de portada ------------------------- */
.cover-prompt-label {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* --- estados vacíos y avisos --------------------------------------- */
.empty {
    text-align: center; padding: 70px 20px; color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: 14px;
}
.empty h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0 0 8px; }

/* --- arrastrar y soltar un archivo sobre la biblioteca -------------- */
#dropzone-hint {
    display: none; position: fixed; inset: 0; z-index: 90;
    align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
#dropzone-hint p {
    margin: 0; padding: 34px 52px; border-radius: 16px;
    border: 2px dashed var(--accent); background: var(--bg-raised);
    font-family: var(--serif); font-size: 1.3rem; color: var(--ink);
    box-shadow: var(--shadow);
}
body.is-dragover #dropzone-hint { display: flex; }

.toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    background: var(--ink); color: var(--bg);
    padding: 11px 20px; border-radius: 999px; font-size: .88rem;
    box-shadow: var(--shadow); z-index: 100;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

.hidden { display: none !important; }
/* Red de seguridad: cualquier regla con display fijo sin condición
   (p.ej. .btn { display: inline-flex }) le gana siempre al display:none
   por defecto del atributo [hidden] del navegador — bug real ya
   encontrado en editor.css/monitor.css esta misma sesión (un botón con
   hidden=true seguía viéndose). Con !important queda cerrado aquí para
   todo lo que use el atributo en vez de la clase .hidden. */
[hidden] { display: none !important; }

@media (max-width: 620px) {
    .wrap { padding: 0 22px; }
    .shelf { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px 12px; }
    .page { padding: 22px 0 50px; }
    .page-head h1 { font-size: 1.55rem; }
    /* "Ver un adelanto" + "Aceptar invitación" lado a lado no caben en
       una tarjeta estrecha: uno debajo del otro. */
    .cover-invite-actions { flex-direction: column; width: 100%; }
    .cover-invite-actions .btn { width: 100%; }

    /* La cabecera no tiene sitio para "Páginas · biblioteca" completo más
       dos botones de texto: se sacrifica el subtítulo y se acortan los
       botones antes que dejar que "Crear nuevo libro" parta en 3 líneas. */
    .site-header .wrap { min-height: 58px; gap: 8px; }
    .brand small { display: none; }
    /* El wordmark completo (~240px de ancho a 96px de alto) no cabe junto
       a los botones en móvil y se recorta contra el overflow:hidden de
       .brand: se sustituye por el símbolo suelto, cuadrado y compacto.
       Sólo en la cabecera (.site-header) — el login no tiene botones al
       lado y debe quedarse siempre con el logo grande. */
    .site-header .brand-mark img.brand-mark-full { display: none; }
    .site-header .brand-mark img.brand-mark-compact { display: block; }
    .header-actions { gap: 6px; }
    .header-actions .btn { padding: 7px 11px; font-size: .8rem; }

    .cover-ribbon { top: 12px; left: -34px; width: 140px; font-size: .53rem; letter-spacing: .01em; }

    .field-grid-2 { grid-template-columns: 1fr; }
    .protagonist-row select { flex-basis: 108px; }

    /* El menú deja de ser un desplegable anclado al botón (en dos
       columnas estrechas, el de la tarjeta izquierda no tenía sitio a la
       derecha y se salía de la pantalla) y pasa a ser una hoja fija,
       centrada, que cabe siempre entera sea cual sea la tarjeta. */
    /* Sólo el de las tarjetas de la biblioteca: el menú de usuario
       (arriba, junto al avatar) comparte la clase .card-menu por estilo,
       pero no por comportamiento, y debe seguir anclado a su botón. */
    .book-card .card-menu {
        position: fixed; top: auto; right: auto; bottom: 14px;
        left: 50%; transform: translateX(-50%) translateY(8px);
        width: min(320px, calc(100vw - 28px));
        min-width: 0;
        padding: 8px;
    }
    .book-card .card-menu.open { transform: translateX(-50%) translateY(0); }
    .card-menu-item { padding: 12px 12px; font-size: .92rem; }
}

/* --- cola de tareas en segundo plano: mismo sitio y estilo en cualquier
   página que la cargue (esquina inferior derecha, estilo panel de
   subidas de Drive) — sustituye a la antigua franja de "trabajando"
   arriba del todo, que no decía qué se estaba haciendo ni si había más
   de una cosa a la vez. Ver window.CbProgress en taskqueue.js. --- */
.cbq-panel {
    position: fixed; right: 20px; bottom: 20px; z-index: 200;
    width: min(320px, calc(100vw - 40px));
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.cbq-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; border: 0; background: none; cursor: pointer;
    color: var(--ink); font: inherit; font-weight: 600; font-size: .88rem; text-align: left;
}
.cbq-toggle-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbq-toggle-chevron { color: var(--ink-faint); font-size: .8rem; transition: transform .15s ease; }
.cbq-toggle[aria-expanded="true"] .cbq-toggle-chevron { transform: rotate(180deg); }
.cbq-list {
    max-height: 260px; overflow-y: auto;
    border-top: 1px solid var(--line);
}
.cbq-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; font-size: .84rem; color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}
.cbq-item:last-child { border-bottom: 0; }
.cbq-item-label { min-width: 0; word-break: break-word; }
.cbq-item-message { display: block; margin-top: 2px; color: var(--ink-faint); font-size: .8rem; }
.cbq-item-error .cbq-item-label { color: #a33; }

.cbq-toggle-spinner,
.cbq-icon-spinner {
    flex: none; width: 16px; height: 16px; margin-top: 1px;
    border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--accent);
    animation: cbq-spin .7s linear infinite;
}
.cbq-icon-done { color: #2e7d4f; }
.cbq-icon-error { color: #a33; }
.cbq-icon-done, .cbq-icon-error { flex: none; margin-top: 2px; font-size: .9rem; }
@keyframes cbq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .cbq-toggle-spinner, .cbq-icon-spinner { animation: none; }
}

@media (max-width: 480px) {
    .cbq-panel { right: 10px; bottom: 10px; left: 10px; width: auto; }
}

/* --- guía de instalación como app (onboarding.js) ---------------------- */
.onboarding-guide p { margin: 0 0 12px; }
.onboarding-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.onboarding-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; line-height: 1.45; }
.onboarding-steps li i {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font-size: .85rem; margin-top: 1px;
}
.onboarding-hint { font-size: .8rem; color: var(--ink-faint); margin: 0; }

/* Claves de API (Ajustes → Integraciones). */
.api-keys-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.api-key-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px; font-size: .84rem;
}
.api-key-row .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-key-row .meta { font-size: .74rem; color: var(--ink-faint); white-space: nowrap; }
.api-key-row .prefix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-faint); }
.api-key-row .btn-revoke { flex: none; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.api-key-row .btn-revoke:hover { color: #a8452f; background: rgba(168,69,47,.1); }
.api-key-new { display: flex; gap: 8px; flex-wrap: wrap; }
.api-key-new input { flex: 1 1 220px; min-width: 0; }
.api-key-reveal-box {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px dashed var(--accent); border-radius: 8px; background: var(--accent-soft);
}
.api-key-reveal-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: .8rem; }