/*
 * Cuaderno: tapas, tonos de papel y mesas (las «skins» del Cuaderno). Aquí está la pintura de las 12 tapas, los 8 tonos de papel y las 6 mesas.
 *
 * Qué elige la persona (lo guarda y lo aplica src/comun/aspecto.js; NO se sincroniza, cada aparato tiene el suyo):
 *   data-tapa   amarilla (la de siempre) · cuero · marino · bosque · burdeos · negra · rosa · kraft · galaxia · oceano · atardecer · madera
 *   data-tono   crema (el de siempre) · blanco · hueso · amarillo · azul · menta · rosa · kraft
 *   data-mesa   madera · corcho · fieltro · marmol · pizarra · lino   («auto» no llega aquí: el motor la resuelve a la mesa por defecto del tema)
 * Los atributos van en <html>, pero estas reglas tienen que poder aplicarse a CUALQUIER ancestro que lleve el atributo (no solo a <html>):
 * las vistas previas del selector de Ajustes los ponen en una miniatura y esa miniatura se pinta con estas mismas reglas.
 * Así que NADA de html[data-tapa=…] ni :root[…]: escribe [data-tapa="cuero"] { … }.
 *
 * Orden de carga (PC y iPhone): hoja de la app → aspecto.css → … → cuaderno.css → ESTE archivo. Va después de cuaderno.css a propósito:
 * cuaderno.css deja los valores de respaldo en :root (la tapa amarilla, el papel crema y la mesa de lino de siempre) y aquí cada
 * bloque [data-…] los pisa con la misma prioridad (gana el último). Cada bloque define TODOS los tokens de su familia: así una vista
 * previa con data-tapa="cuero" dentro de una página con otra tapa no hereda nada de la de fuera.
 *
 * ── TOKENS (cuaderno.css los consume; contrato, sección 6) ──────────────────────────────────────────────────────────
 *   Ojo con la escala: la tapa se dibuja a la escala --k de la libreta, que NO existe todavía donde se declaran estos tokens (está en
 *   .cu-libreta). Por eso aquí NUNCA aparece var(--k): lo que depende de la escala va en números sueltos (grosor 4 = 4·k píxeles) y
 *   cuaderno.css hace la cuenta en el sitio donde lo usa.
 *
 *   TONO (papel de TODAS las hojas; siempre claro, con la tinta oscura de --cu-tinta)
 *     --cu-papel --cu-raya --cu-cuadro --cu-punto --cu-margen --cu-margen-2   colores del papel y de lo que se dibuja encima
 *     --cu-tinte-lomo --cu-tinte-borde --cu-tinte-grano       «r g b» del sombreado del lomo, de la viñeta y del grano (se usan como rgb(var(--…) / .2))
 *     --cu-canto-papel --cu-canto-linea                       el canto de las hojas apiladas (la hoja y su raya de sombra)
 *     --cu-dorso-1 --cu-dorso-2                               el reverso de la hoja mientras gira
 *     --cu-ficha-2 --cu-ficha-borde                           las fichas del índice (el principio del degradado es --cu-papel)
 *   MESA (lo que hay debajo de la libreta y detrás del índice)
 *     --cu-mesa-1 --cu-mesa-2        centro y borde de la mesa (colores; el texto del índice se lee sobre ellos)
 *     --cu-mesa-imagen --cu-mesa-tamano   la textura: pila de degradados y su lista de tamaños (el último degradado es el fondo base)
 *                                    Ojo con los bordes: una capa con tamaño fijo se REPITE como baldosa y, si su dibujo se sale de la baldosa,
 *                                    se corta en seco en la unión. Por eso (1) las vetas grandes (mármol) van a «100% 100%» y no se repiten, y
 *                                    (2) los dibujos con baldosa fija (madera, corcho, pizarra) caben enteros dentro de ella (una prueba lo vigila).
 *     --cu-sombra-mesa               la sombra que la libreta deja sobre ella
 *     --cu-mesa-texto --cu-mesa-texto-suave   texto del índice sobre la mesa (≥ 4,5:1 sobre --cu-mesa-1 y --cu-mesa-2)
 *     --cu-mesa-vela --cu-mesa-titulo   velo para el botón con el puntero encima y fondo (opaco) de las cintas de mes
 *   TAPA (la portada, el espiral, el marcapáginas)
 *     --cu-tapa-color --cu-tapa-fondo --cu-tapa-fondo-tam    color base y composición del frente (imágenes y su lista de tamaños)
 *     --cu-tapa-capas --cu-tapa-capas-tam                    luces, viñeta y textura por encima del fondo (en «Relieve: ninguno» no se pintan)
 *     --cu-tapa-dorso                                        la cara de dentro de la tapa
 *     --cu-tapa-marco-color/-estilo/-grosor/-radio/-brillo   el marco (o la costura) de la tapa (-brillo: solo sombras de fuera o de relieve; la línea de
 *                                                            dentro NO va aquí, ver el filete)
 *     --cu-tapa-filete-color/-grosor/-estilo                 el filete: una línea fina paralela al marco, más adentro (grosor en múltiplos de k; 0 = sin filete)
 *     --cu-tapa-foil                                         el degradado del estampado del título. La prueba de contraste lee ESTE degradado y lo compara con el
 *                                                            fondo que hay detrás del título (--cu-tapa-fondo y la luz de --cu-tapa-capas), no un color inventado
 *     --cu-tapa-foil-c1/-y1/-d1 y -c2/-y2/-d2                dos sombras del título: color, desplazamiento y desenfoque (en múltiplos de k)
 *     --cu-tapa-adorno --cu-tapa-adorno-brillo               la rayita bajo el título
 *     --cu-tapa-estado                                       color del texto «Abriendo tu cuaderno…» (la prueba lo mide contra el fondo de abajo de la tapa)
 *     --cu-tapa-etiqueta-fondo/-color/-borde/-borde-estilo/-texto/-raya/-sombra/-brillo/-giro/-radio   la etiqueta «Mi cuaderno» (texto ≥ 4,5:1 sobre -color; -radio en múltiplos de k)
 *     --cu-tapa-goma --cu-tapa-goma-sombra-1/-2              la goma elástica (o el cordel)
 *     --cu-anilla-metal --cu-anilla-fin --cu-anilla-sombra --cu-anilla-borde   las anillas del espiral
 *     --cu-cinta --cu-cinta-oscura                           el marcapáginas
 *   Ayuda de escala para las miniaturas: --cu-esc (1 = tamaño real de la tapa y de la mesa; la miniatura pone un número menor y las
 *   tramas grandes —lunares, olas, estrellas— se encogen con ella: calc(34px * var(--cu-esc, 1))).
 *
 * Reglas duras (contrato, sección 7): sin estilos en línea, sin @import ni imágenes ni recursos externos (todo son degradados);
 * la geometría de la hoja no cambia; nada de backdrop-filter ni filter: blur() sobre áreas grandes; el papel SIEMPRE es claro y la tinta
 * oscura; contraste de texto ≥ 4,5:1 en todas las tapas, tonos y mesas (lo comprueba pruebas/cuaderno-skins.test.js leyendo este archivo).
 * Con «Relieve: ninguno» las mesas quedan de color liso y las tapas sin luces ni textura, también en las vistas previas del selector (sección 5 de este
 * archivo); la portada conserva en todos los niveles las sombras de su etiqueta, su goma y sus anillas (son parte del objeto, no del «relieve»).
 * Con «Relieve: suaves» las fichas del índice llevan sombras más cortas (sección 6), las luces, la viñeta y la trama de la portada (y de su miniatura) se atenúan
 * a la mitad (opacidad de la capa, cuaderno.css) y el resto de sombras de cuaderno.css siguen a --e.
 *
 * Vistas previas del selector (src/comun/aspecto-ui.js). aspecto.css solo les da tamaño y un fondo neutro; la pintura es de este archivo.
 * Marcación de cada miniatura (todos los elementos son <span>; vuélvelos display:block o flex):
 *
 *   .as-prev.as-prev-tapa[data-tapa=<id>]         (64 × ancho de la tarjeta; 48 px de alto en la versión compacta)
 *     .as-tapa-lomo                               el lomo: franja a la izquierda
 *       .as-tapa-anilla                           × 3, las anillas del espiral
 *     .as-tapa-marco                              el marco de la tapa
 *       .as-tapa-titulo                           la barra del título (la «foil»)
 *       .as-tapa-etiqueta                         la etiqueta
 *     .as-tapa-goma                               la goma elástica (franja vertical a la derecha)
 *     .as-tapa-cinta                              el marcapáginas que asoma por abajo
 *
 *   .as-prev.as-prev-tono[data-tono=<id>]         una hoja de ese color sobre fondo neutro
 *     .as-hoja-mini                               la hoja
 *       .as-hoja-margen                           la línea vertical del margen
 *       .as-hoja-renglon                          × 4, los renglones
 *
 *   .as-prev.as-prev-mesa[data-mesa=<id>]         la mesa (para «Según el tema» el atributo ya trae la mesa por defecto del tema actual)
 *     .as-mesa-sombra                             la sombra de un cuaderno apoyado
 *     .as-mesa-hoja                               una hoja pequeña encima
 */

/* ───────────────────────────────────────────── 1. Tonos de papel ([data-tono]) ───────────────────────────────────────────── */

/* Crema: el de siempre. Es idéntico al respaldo de :root de cuaderno.css (una prueba lo comprueba). */
[data-tono="crema"] {
  --cu-papel: #fffdf6;
  --cu-raya: rgba(86, 134, 201, .46);
  --cu-cuadro: rgba(86, 134, 201, .34);
  --cu-punto: rgba(70, 96, 140, .55);
  --cu-margen: rgba(222, 72, 64, .6);
  --cu-margen-2: rgba(222, 72, 64, .38);
  --cu-tinte-lomo: 80 60 20;
  --cu-tinte-borde: 120 90 30;
  --cu-tinte-grano: 120 100 60;
  --cu-canto-papel: #fffdf6;
  --cu-canto-linea: #cfc8b2;
  --cu-dorso-1: #f1ecdb;
  --cu-dorso-2: #e8e1cb;
  --cu-ficha-2: #f7f1de;
  --cu-ficha-borde: rgba(86, 134, 201, .6);
}

/* Blanco: papel de imprenta, renglones azul cielo. */
[data-tono="blanco"] {
  --cu-papel: #ffffff;
  --cu-raya: rgba(96, 140, 210, .46);
  --cu-cuadro: rgba(96, 140, 210, .34);
  --cu-punto: rgba(80, 100, 140, .5);
  --cu-margen: rgba(228, 76, 76, .58);
  --cu-margen-2: rgba(228, 76, 76, .36);
  --cu-tinte-lomo: 50 60 90;
  --cu-tinte-borde: 70 80 110;
  --cu-tinte-grano: 100 110 130;
  --cu-canto-papel: #ffffff;
  --cu-canto-linea: #c9ced8;
  --cu-dorso-1: #f4f5f8;
  --cu-dorso-2: #e6e8ee;
  --cu-ficha-2: #f3f5f9;
  --cu-ficha-borde: rgba(86, 134, 201, .6);
}

/* Hueso: marfil apagado, renglones gris azulado. */
[data-tono="hueso"] {
  --cu-papel: #f5efdf;
  --cu-raya: rgba(104, 118, 140, .44);
  --cu-cuadro: rgba(104, 118, 140, .34);
  --cu-punto: rgba(90, 100, 120, .52);
  --cu-margen: rgba(196, 84, 72, .54);
  --cu-margen-2: rgba(196, 84, 72, .34);
  --cu-tinte-lomo: 90 74 40;
  --cu-tinte-borde: 120 100 50;
  --cu-tinte-grano: 120 105 70;
  --cu-canto-papel: #f7f2e4;
  --cu-canto-linea: #c4bb9f;
  --cu-dorso-1: #ebe4d0;
  --cu-dorso-2: #ddd5bc;
  --cu-ficha-2: #eee6d1;
  --cu-ficha-borde: rgba(104, 118, 140, .58);
}

/* Amarillo: como un bloc de notas, renglones azules y margen rojo. */
[data-tono="amarillo"] {
  --cu-papel: #fff6b8;
  --cu-raya: rgba(64, 110, 190, .5);
  --cu-cuadro: rgba(64, 110, 190, .36);
  --cu-punto: rgba(60, 90, 150, .56);
  --cu-margen: rgba(224, 60, 60, .62);
  --cu-margen-2: rgba(224, 60, 60, .4);
  --cu-tinte-lomo: 110 90 0;
  --cu-tinte-borde: 150 120 0;
  --cu-tinte-grano: 150 130 20;
  --cu-canto-papel: #fff8c8;
  --cu-canto-linea: #d2c36a;
  --cu-dorso-1: #f2e79c;
  --cu-dorso-2: #e6d986;
  --cu-ficha-2: #fff0a0;
  --cu-ficha-borde: rgba(64, 110, 190, .6);
}

/*
 * Azul claro: un toque de cielo; los renglones, cuadros y puntos van en azul oscuro, pero con la fuerza de los demás tonos: sobre este papel el azul oscuro
 * se notaba un 42 % más que en el crema (raya 2,42:1 frente a 1,71; cuadro 1,84 frente a 1,47; punto 3,29 frente a 2,40) y la hoja cansaba. Ahora quedan en
 * 1,77, 1,54 y 2,38 : 1, a la par del crema.
 */
[data-tono="azul"] {
  --cu-papel: #e8f1fb;
  --cu-raya: rgba(36, 72, 140, .34);
  --cu-cuadro: rgba(58, 92, 156, .3);
  --cu-punto: rgba(30, 60, 120, .46);
  --cu-margen: rgba(206, 70, 86, .56);
  --cu-margen-2: rgba(206, 70, 86, .36);
  --cu-tinte-lomo: 30 50 90;
  --cu-tinte-borde: 40 70 120;
  --cu-tinte-grano: 60 90 130;
  --cu-canto-papel: #eef5fc;
  --cu-canto-linea: #aebfd8;
  --cu-dorso-1: #dce8f6;
  --cu-dorso-2: #cddced;
  --cu-ficha-2: #dbe8f6;
  --cu-ficha-borde: rgba(36, 72, 140, .56);
}

/* Menta: verde clarito y fresco; renglones, cuadros y puntos en verdes. */
[data-tono="menta"] {
  --cu-papel: #e6f5ec;
  --cu-raya: rgba(30, 120, 84, .46);
  --cu-cuadro: rgba(30, 120, 84, .34);
  --cu-punto: rgba(24, 96, 66, .58);
  --cu-margen: rgba(214, 86, 100, .55);
  --cu-margen-2: rgba(214, 86, 100, .35);
  --cu-tinte-lomo: 20 70 40;
  --cu-tinte-borde: 30 90 60;
  --cu-tinte-grano: 60 110 80;
  --cu-canto-papel: #eef9f2;
  --cu-canto-linea: #a9cbb7;
  --cu-dorso-1: #d9eee1;
  --cu-dorso-2: #c8e2d3;
  --cu-ficha-2: #d8eee2;
  --cu-ficha-borde: rgba(30, 120, 84, .56);
}

/* Rosa: rosa pálido, renglones ciruela. */
[data-tono="rosa"] {
  --cu-papel: #fbe9ef;
  --cu-raya: rgba(172, 64, 116, .44);
  --cu-cuadro: rgba(172, 64, 116, .32);
  --cu-punto: rgba(150, 50, 100, .56);
  --cu-margen: rgba(196, 40, 92, .56);
  --cu-margen-2: rgba(196, 40, 92, .36);
  --cu-tinte-lomo: 100 40 60;
  --cu-tinte-borde: 130 60 80;
  --cu-tinte-grano: 140 80 100;
  --cu-canto-papel: #fdeff3;
  --cu-canto-linea: #dcaebf;
  --cu-dorso-1: #f3dae3;
  --cu-dorso-2: #e8c8d5;
  --cu-ficha-2: #f6dde6;
  --cu-ficha-borde: rgba(172, 64, 116, .56);
}

/*
 * Kraft: papel de estraza, renglones y margen en tinta marrón. Es el papel más oscuro, así que es el límite de lo cómodo para las tintas del Cuaderno:
 * sobre él la tinta naranja (#ea580c, fija) queda en 2,6 : 1 (en los demás tonos va de 3,05 a 3,56) y la roja en 3,6. Se aclaró un poco el papel (antes
 * #e9d8b6, naranja a 2,54) sin perder el color de estraza; no se aclara más porque dejaría de verse kraft. Una prueba fija ese mínimo.
 */
[data-tono="kraft"] {
  --cu-papel: #ecdcbc;
  --cu-raya: rgba(104, 76, 40, .48);
  --cu-cuadro: rgba(104, 76, 40, .36);
  --cu-punto: rgba(90, 64, 30, .58);
  --cu-margen: rgba(170, 60, 40, .62);
  --cu-margen-2: rgba(170, 60, 40, .4);
  --cu-tinte-lomo: 70 45 15;
  --cu-tinte-borde: 100 70 20;
  --cu-tinte-grano: 100 75 30;
  --cu-canto-papel: #eadcbc;
  --cu-canto-linea: #b79f72;
  --cu-dorso-1: #dac79f;
  --cu-dorso-2: #cdb88c;
  --cu-ficha-2: #dcc9a1;
  --cu-ficha-borde: rgba(104, 76, 40, .62);
}

/* ───────────────────────────────────────────── 2. Mesas ([data-mesa]) ───────────────────────────────────────────── */

/*
 * Madera: escritorio de nogal con tablas de 130 px, juntas oscuras, veta fina y un velo de luz arriba. El dibujo de la veta (los óvalos anidados de
 * cada tabla) vive en una baldosa de TRES tablas (1600 × 390 px) con una figura distinta en cada una y todas dentro de su tabla: así dos tablas
 * contiguas no se parecen y la baldosa no se nota (antes la veta era una sola baldosa de una tabla y todas llevaban lo mismo, como escamas).
 */
[data-mesa="madera"] {
  --cu-mesa-1: #86593a;
  --cu-mesa-2: #52331f;
  --cu-sombra-mesa: rgba(16, 7, 0, .66);
  --cu-mesa-texto: #fbf1df;
  --cu-mesa-texto-suave: #f3e6cf;
  --cu-mesa-vela: rgba(255, 244, 225, .14);
  --cu-mesa-titulo: #744c2d;
  --cu-mesa-imagen:
    radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0) 52%, rgba(8, 3, 0, .4) 100%),
    repeating-linear-gradient(180deg, transparent 0 126px, rgba(12, 5, 0, .62) 126px 128px, rgba(255, 222, 170, .13) 128px 129px, transparent 129px 130px),
    repeating-linear-gradient(180deg, rgba(255, 200, 140, .11) 0 130px, rgba(0, 0, 0, 0) 130px 260px, rgba(0, 0, 0, .11) 260px 390px),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(30, 12, 2, .2) 3px 4px, transparent 4px 8px, rgba(255, 214, 160, .09) 8px 9px, transparent 9px 17px, rgba(30, 12, 2, .14) 17px 18px, transparent 18px 26px, rgba(30, 12, 2, .1) 26px 28px, transparent 28px 41px),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(255, 214, 160, .07) 11px 12px, transparent 12px 23px, rgba(30, 12, 2, .12) 23px 24px, transparent 24px 37px),
    radial-gradient(ellipse 470px 54px at 40% 16.7%, transparent 0 18px, rgba(30, 12, 2, 0.12) 18px 19.8px, transparent 19.8px 31px, rgba(30, 12, 2, 0.12) 31px 32.8px, transparent 32.8px 45px, rgba(30, 12, 2, 0.12) 45px 46.8px, transparent 46.8px 63px, rgba(255, 214, 160, 0.06) 63px 64.3px, transparent 64.3px 79px, rgba(30, 12, 2, 0.14) 79px 80.8px, transparent 80.8px 98px, rgba(30, 12, 2, 0.09) 98px 99.8px, transparent 99.8px 113px, rgba(30, 12, 2, 0.13) 113px 114.8px, transparent 114.8px 128px, rgba(255, 214, 160, 0.10) 128px 129.3px, transparent 129.3px 140px, rgba(30, 12, 2, 0.09) 140px 141.8px, transparent 141.8px 156px, rgba(30, 12, 2, 0.15) 156px 157.8px, transparent 157.8px 172px, rgba(30, 12, 2, 0.15) 172px 173.8px, transparent 173.8px 188px, rgba(255, 214, 160, 0.09) 188px 189.3px, transparent 189.3px 205px, rgba(30, 12, 2, 0.10) 205px 206.8px, transparent 206.8px 219px, rgba(30, 12, 2, 0.10) 219px 220.8px, transparent 220.8px 231px, rgba(30, 12, 2, 0.14) 231px 232.8px, transparent 232.8px 247px, rgba(255, 214, 160, 0.09) 247px 248.3px, transparent 248.3px 259px, rgba(30, 12, 2, 0.11) 259px 260.8px, transparent 260.8px 275px, rgba(30, 12, 2, 0.14) 275px 276.8px, transparent 276.8px 291px, rgba(30, 12, 2, 0.12) 291px 292.8px, transparent 292.8px 304px, rgba(255, 214, 160, 0.07) 304px 305.3px, transparent 305.3px 324px, rgba(30, 12, 2, 0.13) 324px 325.8px, transparent 325.8px 336px, rgba(30, 12, 2, 0.13) 336px 337.8px, transparent 337.8px 352px, rgba(30, 12, 2, 0.14) 352px 353.8px, transparent 353.8px 366px, rgba(255, 214, 160, 0.08) 366px 367.3px, transparent 367.3px 384px, rgba(30, 12, 2, 0.13) 384px 385.8px, transparent 385.8px 401px, rgba(30, 12, 2, 0.14) 401px 402.8px, transparent 402.8px 417px, rgba(30, 12, 2, 0.14) 417px 418.8px, transparent 418.8px 431px, rgba(255, 214, 160, 0.08) 431px 432.3px, transparent 432.3px),
    radial-gradient(ellipse 500px 55px at 60% 50%, transparent 0 16px, rgba(30, 12, 2, 0.15) 16px 17.8px, transparent 17.8px 33px, rgba(30, 12, 2, 0.10) 33px 34.8px, transparent 34.8px 54px, rgba(30, 12, 2, 0.11) 54px 55.8px, transparent 55.8px 74px, rgba(255, 214, 160, 0.08) 74px 75.3px, transparent 75.3px 93px, rgba(30, 12, 2, 0.12) 93px 94.8px, transparent 94.8px 106px, rgba(30, 12, 2, 0.15) 106px 107.8px, transparent 107.8px 119px, rgba(30, 12, 2, 0.10) 119px 120.8px, transparent 120.8px 138px, rgba(255, 214, 160, 0.08) 138px 139.3px, transparent 139.3px 149px, rgba(30, 12, 2, 0.09) 149px 150.8px, transparent 150.8px 160px, rgba(30, 12, 2, 0.09) 160px 161.8px, transparent 161.8px 176px, rgba(30, 12, 2, 0.15) 176px 177.8px, transparent 177.8px 192px, rgba(255, 214, 160, 0.09) 192px 193.3px, transparent 193.3px 213px, rgba(30, 12, 2, 0.14) 213px 214.8px, transparent 214.8px 230px, rgba(30, 12, 2, 0.11) 230px 231.8px, transparent 231.8px 243px, rgba(30, 12, 2, 0.13) 243px 244.8px, transparent 244.8px 260px, rgba(255, 214, 160, 0.10) 260px 261.3px, transparent 261.3px 271px, rgba(30, 12, 2, 0.13) 271px 272.8px, transparent 272.8px 285px, rgba(30, 12, 2, 0.10) 285px 286.8px, transparent 286.8px 305px, rgba(30, 12, 2, 0.12) 305px 306.8px, transparent 306.8px 326px, rgba(255, 214, 160, 0.09) 326px 327.3px, transparent 327.3px 337px, rgba(30, 12, 2, 0.12) 337px 338.8px, transparent 338.8px 348px, rgba(30, 12, 2, 0.12) 348px 349.8px, transparent 349.8px 365px, rgba(30, 12, 2, 0.15) 365px 366.8px, transparent 366.8px 383px, rgba(255, 214, 160, 0.10) 383px 384.3px, transparent 384.3px 397px, rgba(30, 12, 2, 0.13) 397px 398.8px, transparent 398.8px 415px, rgba(30, 12, 2, 0.13) 415px 416.8px, transparent 416.8px 437px, rgba(30, 12, 2, 0.14) 437px 438.8px, transparent 438.8px 459px, rgba(255, 214, 160, 0.07) 459px 460.3px, transparent 460.3px 478px, rgba(30, 12, 2, 0.14) 478px 479.8px, transparent 479.8px),
    radial-gradient(ellipse 430px 52px at 50% 83.3%, transparent 0 20px, rgba(30, 12, 2, 0.09) 20px 21.8px, transparent 21.8px 35px, rgba(30, 12, 2, 0.15) 35px 36.8px, transparent 36.8px 54px, rgba(30, 12, 2, 0.11) 54px 55.8px, transparent 55.8px 72px, rgba(255, 214, 160, 0.06) 72px 73.3px, transparent 73.3px 88px, rgba(30, 12, 2, 0.09) 88px 89.8px, transparent 89.8px 101px, rgba(30, 12, 2, 0.13) 101px 102.8px, transparent 102.8px 117px, rgba(30, 12, 2, 0.10) 117px 118.8px, transparent 118.8px 136px, rgba(255, 214, 160, 0.09) 136px 137.3px, transparent 137.3px 149px, rgba(30, 12, 2, 0.12) 149px 150.8px, transparent 150.8px 163px, rgba(30, 12, 2, 0.09) 163px 164.8px, transparent 164.8px 180px, rgba(30, 12, 2, 0.13) 180px 181.8px, transparent 181.8px 192px, rgba(255, 214, 160, 0.07) 192px 193.3px, transparent 193.3px 211px, rgba(30, 12, 2, 0.10) 211px 212.8px, transparent 212.8px 228px, rgba(30, 12, 2, 0.12) 228px 229.8px, transparent 229.8px 240px, rgba(30, 12, 2, 0.15) 240px 241.8px, transparent 241.8px 258px, rgba(255, 214, 160, 0.09) 258px 259.3px, transparent 259.3px 274px, rgba(30, 12, 2, 0.09) 274px 275.8px, transparent 275.8px 289px, rgba(30, 12, 2, 0.09) 289px 290.8px, transparent 290.8px 306px, rgba(30, 12, 2, 0.10) 306px 307.8px, transparent 307.8px 323px, rgba(255, 214, 160, 0.08) 323px 324.3px, transparent 324.3px 341px, rgba(30, 12, 2, 0.11) 341px 342.8px, transparent 342.8px 356px, rgba(30, 12, 2, 0.12) 356px 357.8px, transparent 357.8px 375px, rgba(30, 12, 2, 0.13) 375px 376.8px, transparent 376.8px 394px, rgba(255, 214, 160, 0.06) 394px 395.3px, transparent 395.3px),
    radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: 100% 100%, auto, auto, auto, auto, 1600px 390px, 1600px 390px, 1600px 390px, 100% 100%;
}

/*
 * Corcho: tablero de corcho con granos claros y oscuros de varios tamaños. Cada grano es UNA capa con su propia baldosa y todas las baldosas
 * miden 31 px o más y tienen medidas primas entre sí: así los granos no forman filas ni columnas a la vista. Antes había dos capas de puntitos en
 * baldosas de 13 × 17 y 19 × 23 px (y otras dos de 29 a 41 px) que dibujaban una retícula regular; ahora faltan esas cuatro, las manchas grandes van
 * en baldosas de 600 a 900 px (así no se ve una cuadrícula de manchas) y la pila baja de 23 a 17 capas, que se nota menos al repintar la mesa. Los dos granos
 * de la baldosa más pequeña (31 × 37 y 43 × 47 px) se veían a 1:1 como una fila de puntitos cada 37 px: ahora son motitas suaves y de la mitad de fuerza (los
 * granos grandes, que son los que dan el carácter al corcho, no cambian). Probado: pasar esos granos a una baldosa grande empeoraba las filas.
 */
[data-mesa="corcho"] {
  --cu-mesa-1: #cfa06a;
  --cu-mesa-2: #bd8c52;
  --cu-sombra-mesa: rgba(52, 28, 6, .62);
  --cu-mesa-texto: #241405;
  --cu-mesa-texto-suave: #3a2309;
  --cu-mesa-vela: rgba(43, 25, 6, .12);
  --cu-mesa-titulo: #c4955c;
  --cu-mesa-imagen:
    radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0) 55%, rgba(60, 30, 8, .3) 100%),
    radial-gradient(circle at 17% 77%, rgba(76, 40, 12, .13) 0, rgba(76, 40, 12, .07) 1.1px, transparent 2.2px),
    radial-gradient(circle at 72% 61%, rgba(255, 232, 184, .18) 0, rgba(255, 232, 184, .09) 1.2px, transparent 2.4px),
    radial-gradient(circle at 44% 18%, rgba(80, 44, 16, .3) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 63% 71%, rgba(255, 236, 196, .3) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 26% 55%, rgba(76, 40, 12, .3) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 81% 29%, rgba(255, 238, 200, .28) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 53% 85%, rgba(80, 44, 16, .3) 0 1.6px, transparent 2.5px),
    radial-gradient(circle at 37% 64%, rgba(58, 28, 6, .38) 0 2.1px, transparent 3.2px),
    radial-gradient(circle at 74% 13%, rgba(58, 28, 6, .38) 0 2.3px, transparent 3.4px),
    radial-gradient(circle at 88% 82%, rgba(58, 28, 6, .38) 0 2.4px, transparent 3.5px),
    radial-gradient(ellipse 3.2px 2px at 28% 67%, rgba(58, 28, 6, .38) 0 60%, transparent 100%),
    radial-gradient(ellipse 4.2px 2.6px at 69% 38%, rgba(255, 240, 205, .34) 0 60%, transparent 100%),
    radial-gradient(ellipse 150px 100px at 30% 40%, rgba(255, 214, 150, .2), transparent 70%),
    radial-gradient(ellipse 190px 120px at 70% 65%, rgba(90, 52, 18, .16), transparent 70%),
    radial-gradient(ellipse 230px 150px at 40% 60%, rgba(100, 58, 20, .12), transparent 70%),
    radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: 100% 100%, 31px 37px, 43px 47px, 53px 59px, 61px 67px, 71px 73px, 79px 83px, 89px 97px, 101px 107px, 109px 113px, 127px 131px, 67px 71px, 83px 89px, 613px 487px, 743px 563px, 887px 641px, 100% 100%;
}
/*
 * Fieltro: paño verde de mesa de juego, con un círculo de luz en el centro, los bordes más oscuros y la pelusa del tejido. La pelusa NO son rayados cruzados
 * (a 1:1 dos rayados de 2 y de 3 px se veían como una malla o una pantalla) sino ruido: doce capas de motitas suaves, claras y oscuras, cada una con su
 * baldosa de medida prima (de 53 × 59 a 181 × 191 px), así que ninguna fila ni columna se repite a la vista. Son suaves a propósito (una motita dura de 1 px
 * se ve como un punto de una cuadrícula, y con las baldosas pequeñas de antes —de 29 a 43 px— se alineaban en filas; una de bordes difusos, como pelusa).
 * Encima, cinco manchas grandes (el pelo del paño no cae parejo: unas zonas más claras y otras más oscuras) y un brillo muy tenue en diagonal, como el sentido
 * del pelo.
 */
[data-mesa="fieltro"] {
  --cu-mesa-1: #2f6b4a;
  --cu-mesa-2: #1f4a33;
  --cu-sombra-mesa: rgba(0, 24, 10, .66);
  --cu-mesa-texto: #f1f8f1;
  --cu-mesa-texto-suave: #cfe6d6;
  --cu-mesa-vela: rgba(241, 248, 241, .13);
  --cu-mesa-titulo: #2a6045;
  --cu-mesa-imagen:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 20, 8, .45) 100%),
    radial-gradient(ellipse at 50% 26%, rgba(150, 235, 180, .18), transparent 58%),
    linear-gradient(112deg, rgba(0, 0, 0, 0) 18%, rgba(190, 255, 215, .045) 42%, rgba(0, 0, 0, 0) 64%, rgba(0, 20, 8, .06) 86%),
    radial-gradient(ellipse 70px 50px at 50% 50%, rgba(170, 240, 195, .05), transparent 70%),
    radial-gradient(ellipse 95px 62px at 50% 50%, rgba(0, 20, 8, .08), transparent 70%),
    radial-gradient(ellipse 120px 80px at 50% 50%, rgba(120, 220, 160, .05), transparent 70%),
    radial-gradient(ellipse 150px 100px at 50% 50%, rgba(170, 240, 195, .07), transparent 70%),
    radial-gradient(ellipse 190px 120px at 50% 50%, rgba(0, 20, 8, .1), transparent 70%),
    radial-gradient(circle at 84% 77%, rgba(200, 255, 220, .11) 0, rgba(200, 255, 220, .06) 1.07px, transparent 2.14px),
    radial-gradient(circle at 35% 17%, rgba(0, 25, 10, .22) 0, rgba(0, 25, 10, .11) 1.08px, transparent 2.16px),
    radial-gradient(circle at 80% 43%, rgba(200, 255, 220, .12) 0, rgba(200, 255, 220, .06) 1.45px, transparent 2.9px),
    radial-gradient(circle at 78% 41%, rgba(0, 25, 10, .22) 0, rgba(0, 25, 10, .11) 1.33px, transparent 2.67px),
    radial-gradient(circle at 80% 59%, rgba(200, 255, 220, .16) 0, rgba(200, 255, 220, .08) .96px, transparent 1.92px),
    radial-gradient(circle at 58% 76%, rgba(0, 25, 10, .24) 0, rgba(0, 25, 10, .12) 1.07px, transparent 2.14px),
    radial-gradient(circle at 42% 54%, rgba(200, 255, 220, .15) 0, rgba(200, 255, 220, .08) 1px, transparent 1.99px),
    radial-gradient(circle at 46% 46%, rgba(0, 25, 10, .22) 0, rgba(0, 25, 10, .11) 1.19px, transparent 2.38px),
    radial-gradient(circle at 32% 35%, rgba(200, 255, 220, .15) 0, rgba(200, 255, 220, .08) 1.23px, transparent 2.47px),
    radial-gradient(circle at 75% 71%, rgba(0, 25, 10, .22) 0, rgba(0, 25, 10, .11) 1.3px, transparent 2.61px),
    radial-gradient(circle at 54% 53%, rgba(200, 255, 220, .11) 0, rgba(200, 255, 220, .06) 1.34px, transparent 2.68px),
    radial-gradient(circle at 25% 41%, rgba(0, 25, 10, .23) 0, rgba(0, 25, 10, .12) 1.47px, transparent 2.94px),
    radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: 100% 100%, 100% 100%, 100% 100%, 157px 137px, 241px 199px, 311px 233px, 431px 337px, 577px 389px, 53px 59px, 61px 67px, 71px 73px, 79px 83px, 89px 97px, 101px 103px, 109px 113px, 127px 131px, 139px 149px, 151px 157px, 163px 167px, 181px 191px, 100% 100%;
}

/*
 * Mármol: blanco con vetas grises que cruzan en distintos ángulos, nubes suaves, un brillo y granitos. Las vetas NO se repiten como baldosa: cada una es una
 * sola capa del tamaño de la mesa («100% 100%»), así se estira con la ventana y no hay ninguna unión donde se corten en seco (antes eran baldosas de
 * 900 × 640 px y, en cuanto la mesa pasaba de ese tamaño, las vetas acababan en líneas rectas y se veía la copia). Cada vena es un anillo de una elipse enorme
 * visto de lado: un núcleo fino de ~1 px (0,2 a 0,3 % del radio, nunca menos o se rompe en puntos al dibujarse) con un halo suave a cada lado. Como la elipse es
 * alargada, el mismo ancho en % se ve más grueso por un tramo que por otro, y las venas se cruzan y se juntan a poco ángulo, como las ramificaciones de una veta
 * de verdad. Antes eran tres cintas de ~40 px muy borrosas, que se leían como pliegues de satén o humo. Solo los dos granitos (de 53 × 59 y 89 × 83 px) son
 * baldosa: son puntitos centrados que no tocan los bordes, así que no tienen unión (antes eran de 7 × 7 px y formaban una matriz de puntos).
 */
[data-mesa="marmol"] {
  --cu-mesa-1: #eceef0;
  --cu-mesa-2: #cfd4da;
  --cu-sombra-mesa: rgba(40, 46, 60, .46);
  --cu-mesa-texto: #1f2630;
  --cu-mesa-texto-suave: #465062;
  --cu-mesa-vela: rgba(31, 38, 48, .09);
  --cu-mesa-titulo: #e3e6e9;
  --cu-mesa-imagen:
    radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0) 55%, rgba(70, 78, 92, .2) 100%),
    radial-gradient(ellipse 190% 80% at -10% 118%, transparent 0 60.6%, rgba(112, 118, 132, .035) 62.13%, rgba(112, 118, 132, .08) 63.52%, rgba(72, 78, 94, .18) 63.84%, rgba(72, 78, 94, .5) 64%, rgba(72, 78, 94, .18) 64.16%, rgba(112, 118, 132, .08) 64.48%, rgba(112, 118, 132, .035) 65.87%, transparent 67.4%),
    radial-gradient(ellipse 150% 76% at 6% 124%, transparent 0 65.6%, rgba(112, 118, 132, .035) 66.68%, rgba(112, 118, 132, .08) 67.61%, rgba(72, 78, 94, .12) 67.87%, rgba(72, 78, 94, .34) 68%, rgba(72, 78, 94, .12) 68.13%, rgba(112, 118, 132, .08) 68.39%, rgba(112, 118, 132, .035) 69.32%, transparent 70.4%),
    radial-gradient(ellipse 170% 96% at 118% -20%, transparent 0 66.8%, rgba(112, 118, 132, .035) 68.24%, rgba(112, 118, 132, .08) 69.58%, rgba(72, 78, 94, .16) 69.86%, rgba(72, 78, 94, .46) 70%, rgba(72, 78, 94, .16) 70.14%, rgba(112, 118, 132, .08) 70.42%, rgba(112, 118, 132, .035) 71.76%, transparent 73.2%),
    radial-gradient(ellipse 90% 150% at 36% 142%, transparent 0 77%, rgba(112, 118, 132, .035) 77.9%, rgba(112, 118, 132, .08) 78.58%, rgba(72, 78, 94, .11) 78.86%, rgba(72, 78, 94, .3) 79%, rgba(72, 78, 94, .11) 79.14%, rgba(112, 118, 132, .08) 79.42%, rgba(112, 118, 132, .035) 80.1%, transparent 81%),
    radial-gradient(ellipse 120% 64% at 82% -30%, transparent 0 81.2%, rgba(112, 118, 132, .035) 82.01%, rgba(112, 118, 132, .08) 82.58%, rgba(72, 78, 94, .11) 82.86%, rgba(72, 78, 94, .3) 83%, rgba(72, 78, 94, .11) 83.14%, rgba(112, 118, 132, .08) 83.42%, rgba(112, 118, 132, .035) 83.99%, transparent 84.8%),
    radial-gradient(ellipse 260% 150% at 132% 142%, transparent 0 73.4%, rgba(112, 118, 132, .035) 74.12%, rgba(112, 118, 132, .08) 74.64%, rgba(72, 78, 94, .09) 74.88%, rgba(72, 78, 94, .26) 75%, rgba(72, 78, 94, .09) 75.12%, rgba(112, 118, 132, .08) 75.36%, rgba(112, 118, 132, .035) 75.88%, transparent 76.6%),
    radial-gradient(ellipse 150% 110% at -34% 36%, transparent 0 74.4%, rgba(112, 118, 132, .035) 75.12%, rgba(112, 118, 132, .08) 75.64%, rgba(72, 78, 94, .08) 75.88%, rgba(72, 78, 94, .22) 76%, rgba(72, 78, 94, .08) 76.12%, rgba(112, 118, 132, .08) 76.36%, rgba(112, 118, 132, .035) 76.88%, transparent 77.6%),
    radial-gradient(ellipse 100% 56% at 60% 132%, transparent 0 84.4%, rgba(112, 118, 132, .035) 85.12%, rgba(112, 118, 132, .08) 85.58%, rgba(72, 78, 94, .06) 85.86%, rgba(72, 78, 94, .17) 86%, rgba(72, 78, 94, .06) 86.14%, rgba(112, 118, 132, .08) 86.42%, rgba(112, 118, 132, .035) 86.88%, transparent 87.6%),
    radial-gradient(ellipse 64% 36% at 36% 38%, rgba(116, 122, 136, .09), transparent 70%),
    radial-gradient(ellipse 46% 30% at 82% 28%, rgba(110, 116, 132, .07), transparent 70%),
    radial-gradient(ellipse 52% 26% at 20% 82%, rgba(110, 116, 132, .08), transparent 70%),
    radial-gradient(ellipse 30% 22% at 34% 40%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(ellipse 26% 20% at 74% 70%, rgba(255, 255, 255, .36), transparent 70%),
    radial-gradient(circle at 36% 62%, rgba(120, 126, 140, .1) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 68% 27%, rgba(120, 126, 140, .08) 0 .7px, transparent 1.3px),
    radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 53px 59px, 89px 83px, 100% 100%;
}
/*
 * Pizarra: piedra gris oscura con las vetas de la laminación (casi horizontales, nunca iguales) y granos de brillo. Antes los granos eran baldosas de
 * 5 × 5 y 7 × 7 px y a 1:1 formaban una matriz de puntos; ahora son nueve capas de granos suaves en baldosas primas de 53 a 149 px y tres manchas grandes. Las
 * vetas son tres rayados de ángulo y periodo primos entre sí (41, 59 y 83 px, a 171°, 176° y 168°), con la raya difuminada en 3 px: se cruzan muy abiertos y
 * se leen como láminas de piedra, no como una rejilla ni como arañazos.
 */
[data-mesa="pizarra"] {
  --cu-mesa-1: #3a3f48;
  --cu-mesa-2: #22262d;
  --cu-sombra-mesa: rgba(0, 0, 0, .74);
  --cu-mesa-texto: #eef1f6;
  --cu-mesa-texto-suave: #bcc4d2;
  --cu-mesa-vela: rgba(238, 241, 246, .12);
  --cu-mesa-titulo: #333842;
  --cu-mesa-imagen:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .4) 100%),
    radial-gradient(ellipse at 50% 26%, rgba(255, 255, 255, .08), transparent 60%),
    repeating-linear-gradient(171deg, transparent 0 13px, rgba(255, 255, 255, .026) 15px, transparent 18px 25px, rgba(0, 0, 0, .08) 27px, transparent 30px 41px),
    repeating-linear-gradient(176deg, transparent 0 25px, rgba(255, 255, 255, .02) 28px, transparent 31px 44px, rgba(0, 0, 0, .065) 46px, transparent 49px 59px),
    repeating-linear-gradient(168deg, transparent 0 37px, rgba(0, 0, 0, .07) 40px, transparent 43px 66px, rgba(255, 255, 255, .018) 69px, transparent 73px 83px),
    radial-gradient(ellipse 100px 70px at 50% 50%, rgba(0, 0, 0, .09), transparent 70%),
    radial-gradient(ellipse 170px 100px at 50% 50%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(ellipse 210px 120px at 50% 50%, rgba(0, 0, 0, .12), transparent 70%),
    radial-gradient(circle at 34% 53%, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, .04) 1.16px, transparent 2.33px),
    radial-gradient(circle at 29% 52%, rgba(0, 0, 0, .24) 0, rgba(0, 0, 0, .12) .98px, transparent 1.96px),
    radial-gradient(circle at 16% 66%, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 1.14px, transparent 2.27px),
    radial-gradient(circle at 28% 56%, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .13) 1.1px, transparent 2.2px),
    radial-gradient(circle at 49% 42%, rgba(255, 255, 255, .09) 0, rgba(255, 255, 255, .05) 1.39px, transparent 2.78px),
    radial-gradient(circle at 76% 17%, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .12) 1.3px, transparent 2.61px),
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .03) 1.25px, transparent 2.5px),
    radial-gradient(circle at 61% 56%, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .13) 1.41px, transparent 2.82px),
    radial-gradient(circle at 21% 56%, rgba(255, 255, 255, .09) 0, rgba(255, 255, 255, .05) 1.25px, transparent 2.5px),
    radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: 100% 100%, 100% 100%, auto, auto, auto, 211px 173px, 411px 307px, 503px 349px, 53px 59px, 61px 67px, 71px 73px, 79px 83px, 89px 97px, 101px 103px, 109px 113px, 127px 131px, 139px 149px, 100% 100%;
}

/* Lino: tela clara y suave de hilos cruzados; es la mesa de siempre (mismos colores de base). */
[data-mesa="lino"] {
  --cu-mesa-1: #e1dccf;
  --cu-mesa-2: #c9c2af;
  --cu-sombra-mesa: rgba(40, 28, 8, .42);
  --cu-mesa-texto: #1f2430;
  --cu-mesa-texto-suave: #454f60;
  --cu-mesa-vela: rgba(31, 36, 48, .09);
  --cu-mesa-titulo: #d9d3c4;
  --cu-mesa-imagen:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(90, 70, 30, .16) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110, 90, 55, .1) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(110, 90, 55, .07) 11px 12px, transparent 12px 19px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .12) 14px 15px, transparent 15px 23px),
    radial-gradient(ellipse at 50% 28%, var(--cu-mesa-1), var(--cu-mesa-2) 85%);
  --cu-mesa-tamano: 100% 100%, auto, auto, auto, auto, 100% 100%;
}

/* ───────────────────────────────────────────── 3. Tapas ([data-tapa]) ───────────────────────────────────────────── */

/*
 * Amarilla: la de siempre (cartulina amarilla con el título estampado). Idéntica al respaldo de :root de cuaderno.css (una prueba lo comprueba). Lo único que cambió
 * es el color del estampado del título: era un dorado claro que sobre la cartulina amarilla daba 1,6 : 1 (solo se leía por sus sombras) y ahora es un bronce que
 * conserva el brillo y se lee a más de 3 : 1 (en la versión de antes de «Aspecto» el título era marrón oscuro liso).
 */
[data-tapa="amarilla"] {
  --cu-tapa-color: #ffd94a;
  --cu-tapa-fondo: linear-gradient(140deg, #ffe27a 0%, #ffd94a 42%, #f4c21a 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(60, 38, 0, .32) 0, rgba(60, 38, 0, .08) 4%, rgba(255, 255, 255, 0) 9%), radial-gradient(ellipse at 38% 22%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 55%), radial-gradient(ellipse at 50% 55%, rgba(120, 78, 0, 0) 55%, rgba(120, 78, 0, .32) 100%), radial-gradient(rgba(110, 70, 0, .07) 1px, transparent 1.6px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 4px 4px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #ecd98f, #e3c871);
  --cu-tapa-marco-color: rgba(110, 72, 0, .42);
  --cu-tapa-marco-estilo: dashed;
  --cu-tapa-marco-grosor: 4;
  --cu-tapa-marco-radio: 16;
  --cu-tapa-marco-brillo: 0 0 0 0 transparent;
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #b87810 0%, #96600a 34%, #6a4200 52%, #4d3000 62%, #8c5a00 100%);
  --cu-tapa-foil-c1: rgba(255, 255, 255, .6);
  --cu-tapa-foil-y1: 3;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(70, 40, 0, .55);
  --cu-tapa-foil-y2: -2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(122, 80, 0, .55) 18%, rgba(122, 80, 0, .55) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(255, 255, 255, .5);
  --cu-tapa-estado: #4d3200;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #fffdf3, #f6efd6);
  --cu-tapa-etiqueta-color: #f6efd6;
  --cu-tapa-etiqueta-borde: rgba(110, 72, 0, .5);
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #27303f;
  --cu-tapa-etiqueta-raya: rgba(86, 134, 201, .55);
  --cu-tapa-etiqueta-sombra: rgba(70, 40, 0, .35);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: -1.4deg;
  --cu-tapa-goma: linear-gradient(90deg, #2c2218, #5b4630 38%, #3a2d1d 70%, #241b12);
  --cu-tapa-goma-sombra-1: rgba(60, 38, 0, .45);
  --cu-tapa-goma-sombra-2: rgba(60, 38, 0, .25);
  --cu-anilla-metal: linear-gradient(180deg, #fbfbfb 0%, #c2c5cb 38%, #8a8e96 56%, #d6d9de 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(20, 20, 25, 0), rgba(20, 20, 25, .5));
  --cu-anilla-sombra: rgba(0, 0, 0, .4);
  --cu-anilla-borde: rgba(60, 65, 75, .28);
  --cu-cinta: #d63d3d;
  --cu-cinta-oscura: #a82727;
}

/* Cuero: marrón con grano de piel, costura punteada crema, título dorado estampado, etiqueta de cuero oscuro, goma negra y anillas de latón. */
[data-tapa="cuero"] {
  --cu-tapa-color: #7a4a2b;
  --cu-tapa-fondo: linear-gradient(145deg, #9a6844 0%, #7a4a2b 46%, #5c371d 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(20, 8, 0, .58) 0, rgba(20, 8, 0, .2) 3.5%, rgba(255, 230, 190, .1) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 226, 180, .16) 0, rgba(255, 226, 180, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(30, 12, 0, 0) 48%, rgba(30, 12, 0, .58) 100%), radial-gradient(rgba(25, 10, 0, .3) .9px, transparent 1.5px), radial-gradient(circle at 60% 40%, rgba(255, 224, 176, .13) .9px, transparent 1.4px), radial-gradient(circle at 30% 70%, rgba(0, 0, 0, .22) 1.2px, transparent 2px), radial-gradient(circle at 50% 50%, rgba(255, 230, 190, .1) 1.6px, transparent 2.6px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 5px 5px, 7px 7px, 11px 13px, 17px 15px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #6a4126, #55331d);
  --cu-tapa-marco-color: #ead3a4;
  --cu-tapa-marco-estilo: dashed;
  --cu-tapa-marco-grosor: 4;
  --cu-tapa-marco-radio: 14;
  --cu-tapa-marco-brillo: 0 1px 0 rgba(20, 8, 0, .6), inset 0 1px 0 rgba(20, 8, 0, .35);
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #fff6c8 0%, #f6dc84 24%, #e8bf55 50%, #fff6c8 62%, #f6dc84 82%, #e8bf55 100%);
  --cu-tapa-foil-c1: rgba(20, 8, 0, .65);
  --cu-tapa-foil-y1: -1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 226, 160, .32);
  --cu-tapa-foil-y2: 2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(226, 184, 79, .85) 18%, rgba(226, 184, 79, .85) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(20, 8, 0, .5);
  --cu-tapa-estado: #f6e3b8;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #4b2c19, #331d10);
  --cu-tapa-etiqueta-color: #4b2c19;
  --cu-tapa-etiqueta-borde: #e8cf9c;
  --cu-tapa-etiqueta-borde-estilo: dashed;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #f5e2b4;
  --cu-tapa-etiqueta-raya: rgba(232, 207, 156, .5);
  --cu-tapa-etiqueta-sombra: rgba(15, 6, 0, .6);
  --cu-tapa-etiqueta-brillo: inset 0 1px 0 rgba(255, 226, 170, .2);
  --cu-tapa-etiqueta-giro: -1.4deg;
  --cu-tapa-goma: linear-gradient(90deg, #0b0b0d, #2e2e33 38%, #161618 70%, #050506);
  --cu-tapa-goma-sombra-1: rgba(10, 4, 0, .6);
  --cu-tapa-goma-sombra-2: rgba(10, 4, 0, .35);
  --cu-anilla-metal: linear-gradient(180deg, #fff0b3 0%, #dcae48 36%, #8d6418 56%, #ecc866 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(60, 36, 0, 0), rgba(60, 36, 0, .5));
  --cu-anilla-sombra: rgba(20, 8, 0, .5);
  --cu-anilla-borde: rgba(90, 60, 10, .4);
  --cu-cinta: #9b2c2c;
  --cu-cinta-oscura: #6f1818;
}

/*
 * Azul marino: tela de lino con hilos cruzados, título plateado, anillas plateadas, marco de esquina casi recta con un filete liso de plata y etiqueta crema
 * rectangular. Es la sobria de las tres «de tela» (marino, bosque y burdeos): las otras dos no repiten su composición (ver sus bloques).
 */
[data-tapa="marino"] {
  --cu-tapa-color: #1f3a68;
  --cu-tapa-fondo: linear-gradient(150deg, #2c4d86 0%, #1f3a68 48%, #152a4f 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(5, 10, 30, .58) 0, rgba(5, 10, 30, .2) 3.5%, rgba(255, 255, 255, .06) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(190, 210, 255, .22) 0, rgba(190, 210, 255, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(0, 5, 25, 0) 50%, rgba(0, 5, 25, .52) 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 20, .11) 1px 2px, transparent 2px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .055) 0 1px, rgba(0, 0, 20, .1) 1px 2px, transparent 2px 3px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(0, 0, 20, .09) 13px 15px, transparent 15px 26px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, auto, auto, auto;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #1a3057, #142748);
  --cu-tapa-marco-color: #b8c3d6;
  --cu-tapa-marco-estilo: solid;
  --cu-tapa-marco-grosor: 3;
  --cu-tapa-marco-radio: 8;
  --cu-tapa-marco-brillo: 0 0 0 1px rgba(0, 5, 25, .4);
  --cu-tapa-filete-color: rgba(184, 195, 214, .62);
  --cu-tapa-filete-grosor: 2;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #ffffff 0%, #e1e6ee 24%, #aeb8c8 50%, #ffffff 62%, #e1e6ee 82%, #aeb8c8 100%);
  --cu-tapa-foil-c1: rgba(0, 5, 25, .65);
  --cu-tapa-foil-y1: -1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 255, 255, .2);
  --cu-tapa-foil-y2: 2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(205, 213, 226, .85) 18%, rgba(205, 213, 226, .85) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(0, 5, 25, .5);
  --cu-tapa-estado: #e4e9f2;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #faf4e2, #efe6c9);
  --cu-tapa-etiqueta-color: #efe6c9;
  --cu-tapa-etiqueta-borde: #9aa6bb;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 5;
  --cu-tapa-etiqueta-texto: #1d2a47;
  --cu-tapa-etiqueta-raya: rgba(31, 58, 104, .45);
  --cu-tapa-etiqueta-sombra: rgba(0, 5, 25, .55);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: .9deg;
  --cu-tapa-goma: linear-gradient(90deg, #0a1731, #1f3566 38%, #10204a 70%, #060f26);
  --cu-tapa-goma-sombra-1: rgba(0, 5, 25, .55);
  --cu-tapa-goma-sombra-2: rgba(0, 5, 25, .3);
  --cu-anilla-metal: linear-gradient(180deg, #ffffff 0%, #cdd2db 36%, #8790a0 56%, #e1e5ec 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(10, 18, 40, 0), rgba(10, 18, 40, .5));
  --cu-anilla-sombra: rgba(0, 5, 25, .5);
  --cu-anilla-borde: rgba(50, 60, 85, .35);
  --cu-cinta: #9a7209;
  --cu-cinta-oscura: #6e5006;
}

/*
 * Verde bosque: tela con sarga en diagonal y título en oro viejo. Lleva la «costura»: un filete PUNTEADO de oro dentro del marco y una etiqueta marfil con el
 * borde a trazos, como cosida a la tapa. Con luz baja (la luz de arriba, 12 %) para que el oro se lea sobre el verde (el degradado del estampado es más claro
 * que antes por la misma razón).
 */
[data-tapa="bosque"] {
  --cu-tapa-color: #2f5d46;
  --cu-tapa-fondo: linear-gradient(150deg, #3b7156 0%, #2f5d46 48%, #214332 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(0, 18, 8, .58) 0, rgba(0, 18, 8, .2) 3.5%, rgba(255, 255, 255, .05) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(190, 255, 215, .12) 0, rgba(190, 255, 215, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(0, 20, 8, 0) 50%, rgba(0, 20, 8, .52) 100%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 2px, rgba(0, 20, 10, .11) 2px 4px), radial-gradient(rgba(0, 20, 10, .2) .8px, transparent 1.4px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, auto, 3px 3px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #254a38, #1e3d2e);
  --cu-tapa-marco-color: #cdb26a;
  --cu-tapa-marco-estilo: solid;
  --cu-tapa-marco-grosor: 3;
  --cu-tapa-marco-radio: 10;
  --cu-tapa-marco-brillo: 0 1px 0 rgba(0, 20, 10, .55);
  --cu-tapa-filete-color: rgba(205, 178, 106, .85);
  --cu-tapa-filete-grosor: 3;
  --cu-tapa-filete-estilo: dotted;
  --cu-tapa-foil: linear-gradient(180deg, #fff1b4 0%, #ead77e 24%, #d4b858 50%, #fff1b4 62%, #ead77e 82%, #d4b858 100%);
  --cu-tapa-foil-c1: rgba(0, 20, 10, .65);
  --cu-tapa-foil-y1: -1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 240, 180, .22);
  --cu-tapa-foil-y2: 2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(214, 184, 98, .85) 18%, rgba(214, 184, 98, .85) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(0, 20, 10, .5);
  --cu-tapa-estado: #e8f0e4;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #faf6e4, #f0e9cc);
  --cu-tapa-etiqueta-color: #f0e9cc;
  --cu-tapa-etiqueta-borde: #b89b4f;
  --cu-tapa-etiqueta-borde-estilo: dashed;
  --cu-tapa-etiqueta-radio: 3;
  --cu-tapa-etiqueta-texto: #1d3a2b;
  --cu-tapa-etiqueta-raya: rgba(47, 93, 70, .5);
  --cu-tapa-etiqueta-sombra: rgba(0, 20, 10, .55);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: -1.1deg;
  --cu-tapa-goma: linear-gradient(90deg, #10261a, #2a4d3a 38%, #173325 70%, #0b1c13);
  --cu-tapa-goma-sombra-1: rgba(0, 20, 10, .55);
  --cu-tapa-goma-sombra-2: rgba(0, 20, 10, .3);
  --cu-anilla-metal: linear-gradient(180deg, #f3e3a6 0%, #c2a24f 36%, #7d5f1b 56%, #d9bf74 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(40, 28, 0, 0), rgba(40, 28, 0, .5));
  --cu-anilla-sombra: rgba(0, 20, 10, .5);
  --cu-anilla-borde: rgba(80, 60, 10, .4);
  --cu-cinta: #9c2f2f;
  --cu-cinta-oscura: #6e1c1c;
}

/*
 * Burdeos: terciopelo color vino con brillo suave, título dorado y goma dorada. Es la «de lujo»: el marco de esquinas muy redondeadas (24) lleva un filete dorado
 * liso que lo acompaña (doble marco), y en vez de la etiqueta crema lleva una PLACA dorada de esquina redonda con letra vino.
 */
[data-tapa="burdeos"] {
  --cu-tapa-color: #7a2236;
  --cu-tapa-fondo: linear-gradient(150deg, #8f2c43 0%, #7a2236 48%, #5a1727 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(30, 0, 8, .58) 0, rgba(30, 0, 8, .2) 3.5%, rgba(255, 170, 190, .08) 6%, rgba(255, 255, 255, 0) 10%), linear-gradient(115deg, rgba(255, 150, 175, 0) 18%, rgba(255, 150, 175, .2) 34%, rgba(255, 150, 175, 0) 52%), radial-gradient(ellipse at 36% 18%, rgba(255, 180, 200, .2) 0, rgba(255, 180, 200, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(30, 0, 8, 0) 48%, rgba(30, 0, 8, .56) 100%), radial-gradient(rgba(255, 170, 190, .09) .7px, transparent 1.2px), radial-gradient(circle at 60% 60%, rgba(0, 0, 0, .15) .8px, transparent 1.3px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 3px 3px, 4px 4px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #641a2c, #4e1422);
  --cu-tapa-marco-color: #e0bf6a;
  --cu-tapa-marco-estilo: solid;
  --cu-tapa-marco-grosor: 3;
  --cu-tapa-marco-radio: 24;
  --cu-tapa-marco-brillo: 0 1px 0 rgba(30, 0, 8, .55);
  --cu-tapa-filete-color: rgba(224, 191, 106, .8);
  --cu-tapa-filete-grosor: 2;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #fff3bc 0%, #f1d578 24%, #deb54a 50%, #fff3bc 62%, #f1d578 82%, #deb54a 100%);
  --cu-tapa-foil-c1: rgba(30, 0, 8, .7);
  --cu-tapa-foil-y1: -1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 224, 140, .28);
  --cu-tapa-foil-y2: 2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(236, 208, 108, .85) 18%, rgba(236, 208, 108, .85) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(30, 0, 8, .5);
  --cu-tapa-estado: #f6e6c4;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #f6e19a, #dcb85c);
  --cu-tapa-etiqueta-color: #dcb85c;
  --cu-tapa-etiqueta-borde: #8a6414;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 16;
  --cu-tapa-etiqueta-texto: #4a1120;
  --cu-tapa-etiqueta-raya: rgba(74, 17, 32, .5);
  --cu-tapa-etiqueta-sombra: rgba(30, 0, 8, .6);
  --cu-tapa-etiqueta-brillo: inset 0 1px 0 rgba(255, 246, 206, .75), inset 0 -1px 0 rgba(122, 82, 12, .35);
  --cu-tapa-etiqueta-giro: -1.4deg;
  --cu-tapa-goma: linear-gradient(90deg, #8a6414, #f0d070 38%, #b9892b 70%, #6b4a10);
  --cu-tapa-goma-sombra-1: rgba(30, 0, 8, .6);
  --cu-tapa-goma-sombra-2: rgba(30, 0, 8, .35);
  --cu-anilla-metal: linear-gradient(180deg, #fff6c8 0%, #f0c95a 36%, #a87f1f 56%, #f6dc84 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(60, 36, 0, 0), rgba(60, 36, 0, .5));
  --cu-anilla-sombra: rgba(30, 0, 8, .5);
  --cu-anilla-borde: rgba(90, 60, 10, .4);
  --cu-cinta: #1e6a50;
  --cu-cinta-oscura: #124a38;
}

/* Negra: negro mate de libreta clásica, banda elástica roja bien visible, título plata discreto y anillas negras. */
[data-tapa="negra"] {
  --cu-tapa-color: #242427;
  --cu-tapa-fondo: linear-gradient(150deg, #303034 0%, #242427 48%, #18181a 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(0, 0, 0, .66) 0, rgba(0, 0, 0, .24) 3.5%, rgba(255, 255, 255, .05) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 0) 50%), radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .46) 100%), radial-gradient(rgba(255, 255, 255, .055) .8px, transparent 1.4px), radial-gradient(circle at 60% 60%, rgba(0, 0, 0, .3) 1px, transparent 1.6px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 4px 4px, 6px 6px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #1d1d20, #151517);
  --cu-tapa-marco-color: rgba(255, 255, 255, .13);
  --cu-tapa-marco-estilo: solid;
  --cu-tapa-marco-grosor: 3;
  --cu-tapa-marco-radio: 6;
  --cu-tapa-marco-brillo: 0 1px 0 rgba(0, 0, 0, .65), inset 0 1px 0 rgba(0, 0, 0, .55);
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #f2f2f6 0%, #cbcbd3 24%, #9c9ca6 50%, #f2f2f6 62%, #cbcbd3 82%, #9c9ca6 100%);
  --cu-tapa-foil-c1: rgba(0, 0, 0, .75);
  --cu-tapa-foil-y1: -1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 255, 255, .1);
  --cu-tapa-foil-y2: 2;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(180, 180, 190, .55) 18%, rgba(180, 180, 190, .55) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(0, 0, 0, .55);
  --cu-tapa-estado: #d6d6dc;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #f4f4f2, #e4e4e0);
  --cu-tapa-etiqueta-color: #e4e4e0;
  --cu-tapa-etiqueta-borde: #9b9ba4;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #202024;
  --cu-tapa-etiqueta-raya: rgba(60, 60, 70, .4);
  --cu-tapa-etiqueta-sombra: rgba(0, 0, 0, .65);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: 1deg;
  --cu-tapa-goma: linear-gradient(90deg, #6e0f14, #cf2f37 38%, #a4181f 70%, #5e0b10);
  --cu-tapa-goma-sombra-1: rgba(0, 0, 0, .6);
  --cu-tapa-goma-sombra-2: rgba(0, 0, 0, .35);
  --cu-anilla-metal: linear-gradient(180deg, #6a6a70 0%, #34343a 36%, #0d0d0f 56%, #44444a 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
  --cu-anilla-sombra: rgba(0, 0, 0, .55);
  --cu-anilla-borde: rgba(255, 255, 255, .12);
  --cu-cinta: #d12f2f;
  --cu-cinta-oscura: #8f1c1c;
}

/* Rosa: rosa suave con lunares sutiles, título blanco con sombra rosa fuerte y etiqueta blanca. */
[data-tapa="rosa"] {
  --cu-tapa-color: #d44c86;
  --cu-tapa-fondo: linear-gradient(170deg, #d94f88 0%, #d44c86 40%, #f0a0be 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(120, 10, 60, .4) 0, rgba(120, 10, 60, .14) 3.5%, rgba(255, 255, 255, .08) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(120, 10, 60, 0) 55%, rgba(120, 10, 60, .24) 100%), radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .26) 0 calc(5px * var(--cu-esc, 1)), transparent calc(5.8px * var(--cu-esc, 1))), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, .16) 0 calc(3.6px * var(--cu-esc, 1)), transparent calc(4.4px * var(--cu-esc, 1)));
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, calc(34px * var(--cu-esc, 1)) calc(34px * var(--cu-esc, 1)), calc(34px * var(--cu-esc, 1)) calc(34px * var(--cu-esc, 1));
  --cu-tapa-dorso: linear-gradient(90deg, rgba(120, 10, 60, .3), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #e68cb0, #db7ba2);
  --cu-tapa-marco-color: rgba(255, 255, 255, .78);
  --cu-tapa-marco-estilo: dotted;
  --cu-tapa-marco-grosor: 5;
  --cu-tapa-marco-radio: 24;
  --cu-tapa-marco-brillo: 0 0 0 0 transparent;
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #ffffff 0%, #fff6fa 60%, #ffe6f0 100%);
  --cu-tapa-foil-c1: #a41f58;
  --cu-tapa-foil-y1: 3.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(164, 31, 88, .6);
  --cu-tapa-foil-y2: 0;
  --cu-tapa-foil-d2: 4;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 18%, rgba(255, 255, 255, .95) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(164, 31, 88, .55);
  --cu-tapa-estado: #3f0a22;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #ffffff, #fff0f5);
  --cu-tapa-etiqueta-color: #fff0f5;
  --cu-tapa-etiqueta-borde: #e8a1bd;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #8c1c4d;
  --cu-tapa-etiqueta-raya: rgba(212, 86, 138, .45);
  --cu-tapa-etiqueta-sombra: rgba(150, 30, 80, .42);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: -2deg;
  --cu-tapa-goma: linear-gradient(90deg, #8c1d4e, #c43a73 38%, #a82a5e 70%, #761340);
  --cu-tapa-goma-sombra-1: rgba(120, 10, 60, .5);
  --cu-tapa-goma-sombra-2: rgba(120, 10, 60, .28);
  --cu-anilla-metal: linear-gradient(180deg, #fff0f3 0%, #ecaabb 36%, #a95c75 56%, #f6c3d0 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(100, 20, 50, 0), rgba(100, 20, 50, .45));
  --cu-anilla-sombra: rgba(120, 10, 60, .45);
  --cu-anilla-borde: rgba(140, 50, 90, .32);
  --cu-cinta: #a21d55;
  --cu-cinta-oscura: #72103a;
}

/* Kraft: cartón reciclado con fibras y motas, título estampado en tinta oscura, etiqueta blanca y cordel natural. */
[data-tapa="kraft"] {
  --cu-tapa-color: #c8a266;
  --cu-tapa-fondo: linear-gradient(150deg, #d6b17a 0%, #c8a266 48%, #bb9458 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(60, 36, 8, .5) 0, rgba(60, 36, 8, .16) 3.5%, rgba(255, 236, 190, .1) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 236, 190, .24) 0, rgba(255, 236, 190, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(70, 40, 8, 0) 52%, rgba(70, 40, 8, .26) 100%), repeating-linear-gradient(82deg, rgba(90, 58, 20, .06) 0 1px, transparent 1px 7px, rgba(255, 235, 190, .08) 7px 8px, transparent 8px 19px), radial-gradient(circle at 30% 40%, rgba(70, 42, 12, .4) 0 .8px, transparent 1.4px), radial-gradient(circle at 70% 60%, rgba(70, 42, 12, .32) 0 1.1px, transparent 1.8px), radial-gradient(circle at 50% 50%, rgba(255, 240, 205, .4) 0 .9px, transparent 1.6px), radial-gradient(circle at 20% 80%, rgba(90, 56, 20, .3) 0 .7px, transparent 1.3px), radial-gradient(circle at 80% 20%, rgba(255, 240, 205, .32) 0 .7px, transparent 1.3px), radial-gradient(ellipse 120px 80px at 40% 40%, rgba(120, 80, 30, .11), transparent 70%);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, auto, 43px 53px, 67px 61px, 31px 47px, 19px 23px, 97px 83px, 277px 233px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #b99358, #a98448);
  --cu-tapa-marco-color: rgba(60, 40, 15, .6);
  --cu-tapa-marco-estilo: dashed;
  --cu-tapa-marco-grosor: 3.5;
  --cu-tapa-marco-radio: 4;
  --cu-tapa-marco-brillo: 0 0 0 0 transparent;
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #4a3418 0%, #37250f 55%, #2a1b08 100%);
  --cu-tapa-foil-c1: rgba(255, 236, 196, .5);
  --cu-tapa-foil-y1: 1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(30, 18, 4, .25);
  --cu-tapa-foil-y2: -1;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(58, 40, 16, .75) 18%, rgba(58, 40, 16, .75) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(255, 236, 196, .4);
  --cu-tapa-estado: #1d1205;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #fdfbf4, #f3eee0);
  --cu-tapa-etiqueta-color: #f3eee0;
  --cu-tapa-etiqueta-borde: #7a6038;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #2b2418;
  --cu-tapa-etiqueta-raya: rgba(70, 50, 20, .4);
  --cu-tapa-etiqueta-sombra: rgba(50, 30, 5, .5);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: 1.8deg;
  --cu-tapa-goma: repeating-linear-gradient(155deg, #ecdcb2 0 2.5px, #a98a55 2.5px 5px), linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .3));
  --cu-tapa-goma-sombra-1: rgba(60, 36, 8, .5);
  --cu-tapa-goma-sombra-2: rgba(60, 36, 8, .3);
  --cu-anilla-metal: linear-gradient(180deg, #e6d6b4 0%, #a8966f 36%, #5f4e32 56%, #c4b28c 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(40, 28, 10, 0), rgba(40, 28, 10, .5));
  --cu-anilla-sombra: rgba(50, 30, 5, .45);
  --cu-anilla-borde: rgba(70, 52, 25, .4);
  --cu-cinta: #2f6f60;
  --cu-cinta-oscura: #1d4a40;
}

/* Galaxia: violeta noche con nebulosas y estrellas (degradados dispersos), título en oro brillante y etiqueta con borde dorado. */
[data-tapa="galaxia"] {
  --cu-tapa-color: #2a1d5c;
  --cu-tapa-fondo: radial-gradient(ellipse 62% 36% at 72% 22%, rgba(196, 96, 236, .5) 0, rgba(196, 96, 236, 0) 72%), radial-gradient(ellipse 58% 32% at 22% 62%, rgba(60, 150, 232, .38) 0, rgba(60, 150, 232, 0) 72%), radial-gradient(ellipse 48% 28% at 64% 84%, rgba(255, 110, 170, .28) 0, rgba(255, 110, 170, 0) 72%), linear-gradient(160deg, #3a2a7c 0%, #2a1d5c 40%, #150f33 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(4, 0, 24, .6) 0, rgba(4, 0, 24, .22) 3.5%, rgba(255, 255, 255, .05) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 50% 55%, rgba(4, 0, 24, 0) 50%, rgba(4, 0, 24, .5) 100%), radial-gradient(circle at 80% 12%, #ffffff 0 1.6px, rgba(255, 255, 255, .28) 2.6px, transparent 6px), radial-gradient(circle at 18% 22%, #fff4d6 0 1.4px, rgba(255, 244, 214, .26) 2.4px, transparent 5.5px), radial-gradient(circle at 88% 58%, #ffffff 0 1.3px, rgba(255, 255, 255, .24) 2.3px, transparent 5px), radial-gradient(circle at 34% 90%, #dff0ff 0 1.5px, rgba(223, 240, 255, .26) 2.5px, transparent 5.6px), radial-gradient(circle at 58% 44%, rgba(255, 255, 255, .9) 0 1.1px, transparent 3px), radial-gradient(circle at 21% 33%, #ffffff 0 .8px, transparent 1.5px), radial-gradient(circle at 73% 61%, rgba(255, 255, 255, .85) 0 .7px, transparent 1.4px), radial-gradient(circle at 47% 17%, rgba(200, 220, 255, .9) 0 1px, transparent 1.8px), radial-gradient(circle at 12% 77%, rgba(255, 240, 200, .9) 0 1.2px, transparent 2.1px), radial-gradient(circle at 88% 27%, rgba(255, 255, 255, .8) 0 .7px, transparent 1.4px), radial-gradient(circle at 36% 54%, rgba(190, 210, 255, .75) 0 .6px, transparent 1.3px), radial-gradient(circle at 64% 83%, rgba(255, 255, 255, .7) 0 .6px, transparent 1.2px), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .45) 0 .5px, transparent 1.1px), radial-gradient(circle at 25% 75%, rgba(255, 255, 255, .4) 0 .5px, transparent 1.1px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, calc(137px * var(--cu-esc, 1)) calc(191px * var(--cu-esc, 1)), calc(173px * var(--cu-esc, 1)) calc(149px * var(--cu-esc, 1)), calc(211px * var(--cu-esc, 1)) calc(233px * var(--cu-esc, 1)), calc(251px * var(--cu-esc, 1)) calc(181px * var(--cu-esc, 1)), calc(113px * var(--cu-esc, 1)) calc(157px * var(--cu-esc, 1)), calc(89px * var(--cu-esc, 1)) calc(127px * var(--cu-esc, 1)), calc(71px * var(--cu-esc, 1)) calc(101px * var(--cu-esc, 1)), calc(31px * var(--cu-esc, 1)) calc(37px * var(--cu-esc, 1)), calc(43px * var(--cu-esc, 1)) calc(29px * var(--cu-esc, 1));
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #221650, #181040);
  --cu-tapa-marco-color: rgba(240, 215, 140, .75);
  --cu-tapa-marco-estilo: dotted;
  --cu-tapa-marco-grosor: 5;
  --cu-tapa-marco-radio: 18;
  --cu-tapa-marco-brillo: 0 0 0 0 transparent;
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #ffffff 0%, #fff0b8 22%, #f3c64e 46%, #ffffff 62%, #fff0b8 80%, #f3c64e 100%);
  --cu-tapa-foil-c1: rgba(10, 5, 40, .85);
  --cu-tapa-foil-y1: -1.5;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 220, 120, .5);
  --cu-tapa-foil-y2: 0;
  --cu-tapa-foil-d2: 9;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(255, 226, 140, .9) 18%, rgba(255, 226, 140, .9) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(160, 110, 255, .5);
  --cu-tapa-estado: #e8defa;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #2b2060, #1b1345);
  --cu-tapa-etiqueta-color: #2b2060;
  --cu-tapa-etiqueta-borde: #e6c36a;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #f4eaff;
  --cu-tapa-etiqueta-raya: rgba(230, 195, 106, .5);
  --cu-tapa-etiqueta-sombra: rgba(150, 110, 255, .55);
  --cu-tapa-etiqueta-brillo: inset 0 0 0 1px rgba(255, 255, 255, .1);
  --cu-tapa-etiqueta-giro: -1.4deg;
  --cu-tapa-goma: linear-gradient(90deg, #241a5c, #5d46c4 38%, #382a8a 70%, #1a1244);
  --cu-tapa-goma-sombra-1: rgba(4, 0, 30, .6);
  --cu-tapa-goma-sombra-2: rgba(4, 0, 30, .35);
  --cu-anilla-metal: linear-gradient(180deg, #ffffff 0%, #d3caf5 36%, #8d82c4 56%, #e6e0fb 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(20, 10, 60, 0), rgba(20, 10, 60, .5));
  --cu-anilla-sombra: rgba(4, 0, 30, .55);
  --cu-anilla-borde: rgba(80, 60, 140, .4);
  --cu-cinta: #b3267a;
  --cu-cinta-oscura: #801a58;
}

/* Océano: turquesa que se oscurece hacia abajo, con olas sutiles, título blanco espuma y etiqueta de arena clara. */
[data-tapa="oceano"] {
  --cu-tapa-color: #187b8a;
  --cu-tapa-fondo: linear-gradient(175deg, #1f97a6 0%, #187b8a 40%, #106070 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(0, 30, 45, .5) 0, rgba(0, 30, 45, .18) 3.5%, rgba(255, 255, 255, .06) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(0, 40, 60, 0) 52%, rgba(0, 40, 60, .42) 100%), radial-gradient(circle at 50% 100%, transparent 0 30%, rgba(255, 255, 255, .17) 31% 34%, transparent 35% 47%, rgba(255, 255, 255, .12) 48% 51%, transparent 52% 63%, rgba(255, 255, 255, .08) 64% 67%, transparent 68%), radial-gradient(circle at 0 100%, transparent 0 30%, rgba(255, 255, 255, .1) 31% 34%, transparent 35% 47%, rgba(255, 255, 255, .07) 48% 51%, transparent 52%), radial-gradient(circle at 100% 100%, transparent 0 30%, rgba(255, 255, 255, .1) 31% 34%, transparent 35% 47%, rgba(255, 255, 255, .07) 48% 51%, transparent 52%);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, calc(64px * var(--cu-esc, 1)) calc(32px * var(--cu-esc, 1)), calc(64px * var(--cu-esc, 1)) calc(32px * var(--cu-esc, 1)), calc(64px * var(--cu-esc, 1)) calc(32px * var(--cu-esc, 1));
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #187a88, #136674);
  --cu-tapa-marco-color: rgba(255, 255, 255, .72);
  --cu-tapa-marco-estilo: dotted;
  --cu-tapa-marco-grosor: 5;
  --cu-tapa-marco-radio: 20;
  --cu-tapa-marco-brillo: 0 0 0 0 transparent;
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #ffffff 0%, #f1fcff 55%, #cdf1f6 100%);
  --cu-tapa-foil-c1: rgba(0, 50, 70, .6);
  --cu-tapa-foil-y1: 3;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(0, 50, 70, .38);
  --cu-tapa-foil-y2: 5;
  --cu-tapa-foil-d2: 5;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 18%, rgba(255, 255, 255, .9) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(0, 50, 70, .45);
  --cu-tapa-estado: #ffffff;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #f9fdfd, #e6f3f4);
  --cu-tapa-etiqueta-color: #e6f3f4;
  --cu-tapa-etiqueta-borde: #8fc6cc;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #0b4651;
  --cu-tapa-etiqueta-raya: rgba(19, 102, 116, .5);
  --cu-tapa-etiqueta-sombra: rgba(0, 40, 55, .5);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: -1.2deg;
  --cu-tapa-goma: linear-gradient(90deg, #0a3f4d, #1d7584 38%, #115363 70%, #08303b);
  --cu-tapa-goma-sombra-1: rgba(0, 40, 55, .55);
  --cu-tapa-goma-sombra-2: rgba(0, 40, 55, .3);
  --cu-anilla-metal: linear-gradient(180deg, #f4ffff 0%, #bfe0e4 36%, #6f9aa1 56%, #d9eef0 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(0, 40, 55, 0), rgba(0, 40, 55, .45));
  --cu-anilla-sombra: rgba(0, 40, 55, .5);
  --cu-anilla-borde: rgba(30, 90, 105, .38);
  --cu-cinta: #b8431f;
  --cu-cinta-oscura: #86300f;
}

/* Atardecer: cielo de violeta a rosa y naranja, un sol que se pone en el horizonte y mar oscuro donde se apoya la etiqueta. */
[data-tapa="atardecer"] {
  --cu-tapa-color: #5e2d83;
  --cu-tapa-fondo: radial-gradient(ellipse 52% 4% at 6% 52%, #2a1646 0 98%, transparent 100%), radial-gradient(ellipse 58% 3.4% at 98% 52%, #2a1646 0 98%, transparent 100%), radial-gradient(ellipse 9% 15% at 50% 62%, rgba(255, 182, 102, .42), rgba(255, 182, 102, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 52%, #3b2260 52.2%, #2a1748 100%), radial-gradient(circle closest-side at 50% 52%, #fff6d2 0 13%, #ffd978 14% 16%, rgba(255, 170, 90, .6) 17% 27%, rgba(255, 120, 100, .26) 28% 46%, rgba(255, 120, 100, 0) 62%), linear-gradient(180deg, #2f1d5e 0%, #5e2d83 16%, #a8467f 32%, #e86a7c 42%, #f69a5a 49%, #fcc57a 52%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(10, 0, 30, .55) 0, rgba(10, 0, 30, .2) 3.5%, rgba(255, 255, 255, .05) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 220, 200, .2) 0, rgba(255, 220, 200, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(20, 0, 40, 0) 52%, rgba(20, 0, 40, .38) 100%), radial-gradient(rgba(255, 255, 255, .05) .8px, transparent 1.4px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 5px 5px;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #4a2670, #36195a);
  --cu-tapa-marco-color: rgba(255, 224, 170, .75);
  --cu-tapa-marco-estilo: solid;
  --cu-tapa-marco-grosor: 3;
  --cu-tapa-marco-radio: 16;
  --cu-tapa-marco-brillo: 0 1px 0 rgba(30, 0, 40, .45);
  --cu-tapa-filete-color: rgba(255, 224, 170, .6);
  --cu-tapa-filete-grosor: 2;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #fffbe8 0%, #ffe9a8 24%, #ffc65a 50%, #fffbe8 62%, #ffe9a8 80%, #ffc65a 100%);
  --cu-tapa-foil-c1: rgba(50, 8, 64, .72);
  --cu-tapa-foil-y1: 3;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(255, 150, 80, .38);
  --cu-tapa-foil-y2: 0;
  --cu-tapa-foil-d2: 8;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(255, 214, 150, .9) 18%, rgba(255, 214, 150, .9) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(50, 8, 64, .5);
  --cu-tapa-estado: #fff1dc;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #fff6e6, #f9e3c2);
  --cu-tapa-etiqueta-color: #f9e3c2;
  --cu-tapa-etiqueta-borde: #e8a04a;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #4a1f3d;
  --cu-tapa-etiqueta-raya: rgba(180, 70, 100, .45);
  --cu-tapa-etiqueta-sombra: rgba(30, 10, 50, .6);
  --cu-tapa-etiqueta-brillo: 0 0 0 0 transparent;
  --cu-tapa-etiqueta-giro: -1.4deg;
  --cu-tapa-goma: linear-gradient(90deg, #341a4c, #6a3a86 38%, #46245f 70%, #2a1340);
  --cu-tapa-goma-sombra-1: rgba(20, 0, 40, .6);
  --cu-tapa-goma-sombra-2: rgba(20, 0, 40, .35);
  --cu-anilla-metal: linear-gradient(180deg, #ffe9dc 0%, #eeae92 36%, #b8664a 56%, #f8c9b2 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(80, 20, 20, 0), rgba(80, 20, 20, .45));
  --cu-anilla-sombra: rgba(30, 5, 40, .5);
  --cu-anilla-borde: rgba(120, 50, 40, .38);
  --cu-cinta: #7d2f95;
  --cu-cinta-oscura: #561e69;
}

/* Madera: nogal con veta vertical, un nudo y marco biselado; el título va quemado en oscuro y la etiqueta es una plaquita de madera clara. */
[data-tapa="madera"] {
  --cu-tapa-color: #8b5e3c;
  --cu-tapa-fondo: linear-gradient(145deg, #9c6c46 0%, #8b5e3c 46%, #6e4527 100%);
  --cu-tapa-fondo-tam: 100% 100%;
  --cu-tapa-capas: linear-gradient(90deg, rgba(20, 8, 0, .55) 0, rgba(20, 8, 0, .2) 3.5%, rgba(255, 224, 180, .08) 6%, rgba(255, 255, 255, 0) 10%), radial-gradient(ellipse at 36% 18%, rgba(255, 224, 180, .26) 0, rgba(255, 224, 180, 0) 52%), radial-gradient(ellipse at 50% 55%, rgba(24, 10, 0, 0) 50%, rgba(24, 10, 0, .52) 100%), radial-gradient(ellipse 3.8% 2.3% at 12% 62%, rgba(25, 10, 2, .6) 0 28%, rgba(25, 10, 2, .22) 58%, rgba(25, 10, 2, 0) 100%), repeating-radial-gradient(ellipse 150px 540px at 66% 38%, rgba(30, 14, 4, 0) 0 5px, rgba(30, 14, 4, .1) 5px 6.5px, rgba(30, 14, 4, 0) 6.5px 14px), repeating-linear-gradient(90deg, rgba(30, 14, 4, 0) 0 4px, rgba(30, 14, 4, .13) 4px 5px, rgba(30, 14, 4, 0) 5px 11px, rgba(255, 214, 160, .07) 11px 12px, rgba(30, 14, 4, 0) 12px 17px, rgba(30, 14, 4, .09) 17px 18px, rgba(30, 14, 4, 0) 18px 29px), repeating-linear-gradient(88deg, rgba(255, 220, 170, .05) 0 1px, transparent 1px 6px);
  --cu-tapa-capas-tam: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, auto, auto;
  --cu-tapa-dorso: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 14%), linear-gradient(180deg, #724728, #5e3a20);
  --cu-tapa-marco-color: #4d2f18;
  --cu-tapa-marco-estilo: solid;
  --cu-tapa-marco-grosor: 6;
  --cu-tapa-marco-radio: 8;
  --cu-tapa-marco-brillo: 0 1px 0 rgba(255, 222, 170, .32), inset 0 0 0 1px rgba(255, 222, 170, .28), inset 0 2px 3px rgba(0, 0, 0, .35);
  --cu-tapa-filete-color: transparent;
  --cu-tapa-filete-grosor: 0;
  --cu-tapa-filete-estilo: solid;
  --cu-tapa-foil: linear-gradient(180deg, #3a210e 0%, #251204 55%, #1b0d03 100%);
  --cu-tapa-foil-c1: rgba(255, 226, 176, .34);
  --cu-tapa-foil-y1: 2;
  --cu-tapa-foil-d1: 0;
  --cu-tapa-foil-c2: rgba(20, 8, 0, .5);
  --cu-tapa-foil-y2: -1;
  --cu-tapa-foil-d2: 0;
  --cu-tapa-adorno: linear-gradient(90deg, transparent, rgba(27, 13, 3, .8) 18%, rgba(27, 13, 3, .8) 82%, transparent);
  --cu-tapa-adorno-brillo: rgba(255, 226, 176, .3);
  --cu-tapa-estado: #fff3dc;
  --cu-tapa-etiqueta-fondo: linear-gradient(180deg, #ecd0a0, #d9b67c);
  --cu-tapa-etiqueta-color: #d9b67c;
  --cu-tapa-etiqueta-borde: #5a3a1d;
  --cu-tapa-etiqueta-borde-estilo: solid;
  --cu-tapa-etiqueta-radio: 8;
  --cu-tapa-etiqueta-texto: #2a1608;
  --cu-tapa-etiqueta-raya: rgba(90, 58, 29, .45);
  --cu-tapa-etiqueta-sombra: rgba(25, 10, 0, .55);
  --cu-tapa-etiqueta-brillo: inset 0 1px 0 rgba(255, 244, 220, .5), inset 0 -1px 0 rgba(90, 58, 29, .3);
  --cu-tapa-etiqueta-giro: -1deg;
  --cu-tapa-goma: linear-gradient(90deg, #1a0f08, #3f2a1a 38%, #26170d 70%, #120a05);
  --cu-tapa-goma-sombra-1: rgba(20, 8, 0, .6);
  --cu-tapa-goma-sombra-2: rgba(20, 8, 0, .35);
  --cu-anilla-metal: linear-gradient(180deg, #e0b87a 0%, #a67a3a 36%, #5c3d14 56%, #c9a063 100%);
  --cu-anilla-fin: linear-gradient(90deg, rgba(40, 20, 0, 0), rgba(40, 20, 0, .5));
  --cu-anilla-sombra: rgba(20, 8, 0, .5);
  --cu-anilla-borde: rgba(70, 40, 10, .4);
  --cu-cinta: #a02f22;
  --cu-cinta-oscura: #741d14;
}

/* ───────────────────────────────────────────── 4. Vistas previas del selector (.as-prev-tapa, .as-prev-tono, .as-prev-mesa) ───────────────────────────────────────────── */

/* Tapa: la tapa entera a escala pequeña, con los mismos tokens. --cu-esc encoge las tramas grandes (lunares, olas, estrellas). */
.as-prev.as-prev-tapa {
  --cu-esc: .3;
  background-color: var(--cu-tapa-color);
  background-image: var(--cu-tapa-fondo);
  background-size: var(--cu-tapa-fondo-tam);
}
.as-prev-tapa::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--cu-tapa-capas);
  background-size: var(--cu-tapa-capas-tam);
  opacity: var(--e, 1); /* igual que la portada de verdad (cuaderno.css): las luces siguen a los efectos (1, .5 y 0) */
}
.as-tapa-lomo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 15%;
  min-width: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
.as-compacto .as-tapa-lomo { min-width: 12px; }
.as-tapa-anilla {
  position: relative;
  display: block;
  width: 17px;
  height: 5px;
  margin-left: 2px;
  border-radius: 3px;
  background-image: var(--cu-anilla-metal);
  box-shadow: 0 1px 2px var(--cu-anilla-sombra), inset 0 0 0 1px var(--cu-anilla-borde);
}
.as-compacto .as-tapa-anilla { width: 14px; height: 4px; }
.as-tapa-marco {
  position: absolute;
  left: 22%;
  right: 25%;
  top: 9%;
  bottom: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 4px 0;
  border: 1px var(--cu-tapa-marco-estilo) var(--cu-tapa-marco-color);
  border-radius: calc(var(--cu-tapa-marco-radio) * .25px);
  box-shadow: var(--cu-tapa-marco-brillo);
}
/* el filete de la miniatura: una línea de 1 px a 3 px del marco (la tapa de verdad lo escala con --k; aquí las medidas son fijas) */
.as-tapa-marco::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px var(--cu-tapa-filete-estilo) var(--cu-tapa-filete-color);
  border-radius: calc(var(--cu-tapa-marco-radio) * .12px);
  pointer-events: none;
}
.as-compacto .as-tapa-marco { gap: 4px; padding-top: 6px; }
.as-tapa-titulo {
  display: block;
  width: 86%;
  height: 7px;
  border-radius: 2px;
  background-image: var(--cu-tapa-foil);
  box-shadow: 0 1px 0 var(--cu-tapa-foil-c1), 0 2px 0 var(--cu-tapa-foil-c2);
}
.as-compacto .as-tapa-titulo { height: 5px; }
.as-tapa-etiqueta {
  display: block;
  width: 70%;
  height: 13px;
  border: 1px var(--cu-tapa-etiqueta-borde-estilo) var(--cu-tapa-etiqueta-borde);
  border-radius: calc(var(--cu-tapa-etiqueta-radio) * .25px);
  background-color: var(--cu-tapa-etiqueta-color);
  background-image: var(--cu-tapa-etiqueta-fondo);
  box-shadow: 0 2px 3px var(--cu-tapa-etiqueta-sombra), var(--cu-tapa-etiqueta-brillo);
  transform: rotate(var(--cu-tapa-etiqueta-giro));
}
.as-compacto .as-tapa-etiqueta { height: 10px; }
.as-tapa-goma {
  position: absolute;
  right: 12%;
  top: 0;
  bottom: 0;
  width: 5px;
  background-image: var(--cu-tapa-goma);
  box-shadow: 1px 0 2px var(--cu-tapa-goma-sombra-1), -1px 0 2px var(--cu-tapa-goma-sombra-2);
}
.as-tapa-cinta {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 6px;
  height: 11px;
  background-image: linear-gradient(90deg, var(--cu-cinta-oscura), var(--cu-cinta) 35%, var(--cu-cinta) 65%, var(--cu-cinta-oscura));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* Tono: una hoja de ese color (con su margen y sus renglones) sobre un fondo neutro, cortada por abajo. */
.as-prev.as-prev-tono { --cu-esc: .3; }
.as-hoja-mini {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 11%;
  bottom: -12%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 0 0;
  border-radius: 2px 2px 0 0;
  background-color: var(--cu-papel);
  background-image: radial-gradient(ellipse at 52% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  box-shadow: 0 1px 2px rgb(var(--cu-tinte-lomo) / .4), 0 5px 10px -3px rgb(var(--cu-tinte-lomo) / .38), inset 4px 0 5px -3px rgb(var(--cu-tinte-lomo) / .35);
}
.as-compacto .as-hoja-mini { gap: 4px; padding-top: 8px; }
.as-hoja-margen {
  position: absolute;
  left: 22%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--cu-margen);
}
.as-hoja-renglon {
  display: block;
  height: 1px;
  margin-left: 8%;
  margin-right: 6%;
  background-color: var(--cu-raya);
}

/* Mesa: la textura de la mesa, un cuaderno que se apoya (su sombra) y una hoja del tono que tengas puesto. */
.as-prev.as-prev-mesa {
  --cu-esc: .3;
  background-color: var(--cu-mesa-2);
  background-image: var(--cu-mesa-imagen);
  background-size: var(--cu-mesa-tamano);
}
.as-mesa-sombra {
  position: absolute;
  left: 26%;
  right: 26%;
  top: 15%;
  bottom: -14%;
  border-radius: 2px 5px 0 0;
  box-shadow: 0 2px 3px var(--cu-sombra-mesa), 0 8px 14px var(--cu-sombra-mesa);
}
.as-mesa-hoja {
  position: absolute;
  left: 26%;
  right: 26%;
  top: 15%;
  bottom: -14%;
  border-radius: 2px 5px 0 0;
  background-color: var(--cu-papel);
  background-image: repeating-linear-gradient(180deg, transparent 0 7px, var(--cu-raya) 7px 8px), radial-gradient(ellipse at 52% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%);
  box-shadow: 3px 0 0 var(--cu-canto-papel), 4px 0 0 var(--cu-canto-linea);
}

/* ───────────────────────────────────────────── 5. «Relieve: ninguno» ───────────────────────────────────────────── */

/* Sin relieve la mesa queda de color liso y la tapa sin luces ni textura (los colores de base no cambian). Van al final: ganan a los bloques de arriba. */
[data-efectos="ninguno"] .cu-escritorio,
[data-efectos="ninguno"] .cu-indice {
  background-color: var(--cu-mesa-1);
  background-image: none;
}
[data-efectos="ninguno"] .cu-tapa-boton::before {
  display: none;
}
/* Las vistas previas del selector de Ajustes enseñan lo mismo que vas a obtener: la mesa lisa y la tapa sin luces ni trama. */
[data-efectos="ninguno"] .as-prev-tapa::before {
  display: none;
}
[data-efectos="ninguno"] .as-prev-mesa {
  background-color: var(--cu-mesa-1);
  background-image: none;
}
/* Y las fichas del índice vuelven a ser planas: un borde fino, sin pila de hojas ni sombras largas. (Las pastillas de filtro y la sombra de la libreta
   siguen a --e en cuaderno.css: con «ninguno» valen cero.) */
[data-efectos="ninguno"] .cu-ficha,
[data-efectos="ninguno"] .cu-ficha:active {
  transform: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}
@media (hover: hover) {
  [data-efectos="ninguno"] .cu-ficha:hover {
    transform: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
  }
}

/* ───────────────────────────────────────────── 6. «Relieve: suaves» ───────────────────────────────────────────── */

/* Con «suaves» las fichas conservan su pila de hojas (es estructura, no sombra) pero con sombras más cortas y con menos luz: más o menos la mitad del relieve. */
[data-efectos="suaves"] .cu-ficha {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 -1px var(--cu-canto-papel), 0 3px 0 -1px var(--cu-canto-linea), 0 1px 1px var(--cu-sombra-mesa), 0 3px 6px -4px var(--cu-sombra-mesa);
}
[data-efectos="suaves"] .cu-ficha:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 1px 1px var(--cu-sombra-mesa);
}
/* (el :hover va dentro de @media (hover: hover) para que no se quede pegado en el iPhone; ver cuaderno.css) */
@media (hover: hover) {
  [data-efectos="suaves"] .cu-ficha:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 -1px var(--cu-canto-papel), 0 3px 0 -1px var(--cu-canto-linea), 0 2px 2px var(--cu-sombra-mesa), 0 6px 9px -5px var(--cu-sombra-mesa);
  }
}