/* * Ficha + lector. Se carga unicamente en /relatos/:slug. * * Dos modos, mismo HTML: * * sin JS la historia entera en una pagina, con anclas por capitulo. * con JS : se lee de a un capitulo, con progreso, * navegacion y cierre. Lo unico que cambia es que sobra visibilidad. * * Nada de lo de aca abajo es imprescindible para leer: si el CSS no cargara, el * documento sigue siendo un articulo con titulos y parrafos. */ /* ====================================================== barra del lector ==== * * Todo lo de este bloque existe solo con JS y se enciende desde prefs.js y * reader.js. Sin JS no hay barra, ni paneles, ni botonera: hay un articulo * completo con su indice, su salida arriba y su navegacion en el pie. * * Un solo punto de corte para todo el lector: 64rem. Por debajo, los controles * viven en la botonera de abajo —donde llega el pulgar— y arriba queda la marca * y el progreso. Por encima, todo sube a la barra y los capitulos pasan a ser * una columna al costado del texto. Ningun control esta en los dos lugares. * ========================================================================== */ :root { /* Lo usan la barra (alto minimo), el scroll-margin de los capitulos y la posicion de los paneles. Un solo valor para las tres cosas: si la barra crece, el titulo del capitulo sigue quedando debajo de ella. */ --reader-bar-height: 3.5rem; --reader-tabs-height: 3.75rem; } /* * La barra esta mientras se lee, y no aparece y desaparece con el scroll. * * Cuando era solo una salida tenia sentido que se escondiera. Ahora tambien es * el tamano de la letra y la apariencia, y un control que hay que descubrir con * un gesto es un control que no existe. Es delgada y opaca: ocupa una linea, y * el texto pasa por debajo. * * Opaca y no translucida: sin desenfoque de por medio, el texto de abajo se * transparenta y se lee doble. */ .reader-bar { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "back home tools" "progress progress progress"; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--reader-bar-height); padding: var(--space-2) var(--space-4); background: var(--color-bg); border-bottom: 1px solid var(--color-border); transition: opacity var(--transition-base), transform var(--transition-base); } /* Entra y sale deslizando hacia arriba; con prefers-reduced-motion aparece y desaparece sin mas (la regla global anula la transicion). */ .reader-bar[data-visible="false"] { opacity: 0; transform: translateY(-100%); } .reader-bar-home { grid-area: home; justify-self: center; display: flex; } .reader-bar-home .site-logo { height: 1.25rem; } .reader-bar-back { grid-area: back; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .reader-bar-back:hover { color: var(--color-accent); } /* En telefono la flecha sola alcanza: la etiqueta se comeria el ancho que necesita el logo para quedar centrado. */ .reader-bar-back-label { display: none; } .reader-bar-progress { grid-area: progress; display: flex; align-items: center; gap: var(--space-3); } /* * El progreso. * * Una linea de 3 px y el numero al lado. El numero antes no estaba —la barra * decia lo suficiente— pero con capitulos de once minutos "cuanto falta" es una * pregunta concreta, y una barra a medias no la contesta. */ .reading-progress { flex: 1 1 auto; height: 3px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; } .reading-progress-bar { height: 100%; width: 0; background: var(--color-accent); /* Lento a proposito: el progreso debe insinuarse, no perseguir al scroll. */ transition: width 240ms ease-out; } .reader-bar-percent { flex: none; min-width: 2.75rem; text-align: right; font-size: var(--size-micro); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* --- los controles de arriba (solo en pantalla ancha) --------------------- */ .reader-tools { grid-area: tools; justify-self: end; display: none; align-items: center; gap: var(--space-1); } .reader-tool { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-2); color: var(--color-text-muted); font-family: inherit; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); } .reader-tool:hover, .reader-tool[aria-expanded="true"] { color: var(--color-text); background: var(--color-surface-sunken); } /* En la barra el icono habla solo; la etiqueta queda para lectores de pantalla y para el `title` del navegador. En la botonera de abajo si se ve. */ .reader-tool .reader-tool-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* "Aa": no es un icono, es tipografia. */ .text-size-a { font-family: var(--font-display); font-size: 1rem; line-height: 1; } .text-size-a--big { font-size: 1.5rem; } /* --- la botonera de abajo (solo en telefono) ------------------------------ */ .reader-tabs { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 20; display: flex; align-items: stretch; min-height: var(--reader-tabs-height); background: var(--color-bg); border-top: 1px solid var(--color-border); /* El indicador de inicio del iPhone se come la ultima franja de la pantalla. */ padding-bottom: env(safe-area-inset-bottom, 0px); } .reader-tabs > * { flex: 1 1 0; display: flex; } .reader-tab { flex: 1 1 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); background: transparent; border: 0; color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--size-micro); line-height: 1.2; cursor: pointer; transition: color var(--transition-fast); } .reader-tab[aria-expanded="true"], .reader-tab:hover { color: var(--color-accent); } .reader-share { display: flex; } @media (min-width: 64rem) { .reader-bar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "home back progress tools"; gap: var(--space-5); padding-inline: var(--space-6); } .reader-bar-home { justify-self: start; } .reader-bar-back-label { display: inline; } .reader-tools { display: flex; } .reader-tabs { display: none; } } /* ------------------------------------------------------------- paneles ---- */ /* * Tamano del texto y apariencia. * * En telefono suben desde abajo, pegados a la botonera que los abrio; en * pantalla ancha cuelgan de la barra, alineados a la derecha con los botones. * Es el mismo elemento en los dos casos. * * No se cierran solos al elegir: en estos dos paneles se toca varias veces * seguidas (subir la letra dos pasos, probar sepia y volver a claro). Se * cierran al tocar afuera o con Escape, como cualquier menu. */ .reader-panel { position: fixed; z-index: 21; inset-inline: var(--space-3); inset-block-end: calc(var(--reader-tabs-height) + env(safe-area-inset-bottom, 0px) + var(--space-2)); padding: var(--space-4) var(--space-5) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2); box-shadow: var(--shadow-cover); } .reader-panel-title { font-size: var(--size-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); } @media (min-width: 64rem) { .reader-panel { inset-block: calc(var(--reader-bar-height) + var(--space-2)) auto; inset-inline: auto var(--space-6); min-width: 16rem; } } /* --- tamano del texto ----------------------------------------------------- */ .text-size { margin-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .text-size-step { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-2); color: var(--color-text); cursor: pointer; transition: border-color var(--transition-fast); } .text-size-step:hover { border-color: var(--color-accent); } /* * En el extremo el boton se apaga pero sigue siendo tabulable: un `disabled` de * verdad se cae del orden de tabulacion y el foco salta de golpe al otro lado * del panel justo cuando alguien esta ajustando el tamano con el teclado. */ .text-size-step[aria-disabled="true"] { opacity: 0.3; cursor: default; border-color: var(--color-border); } /* Cinco puntos: donde estoy y cuanto queda, sin un numero que no significa nada ("3" no es un tamano). */ .text-size-meter { display: flex; align-items: center; gap: var(--space-2); } .text-size-meter > span { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid var(--color-border-strong); transition: background-color var(--transition-fast); } .text-size-meter > span[data-on="true"] { background: var(--color-accent); border-color: var(--color-accent); } /* --- apariencia ----------------------------------------------------------- */ .theme-choices { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .theme-choice { padding: var(--space-3) var(--space-2); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-2); color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--size-small); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } .theme-choice:hover { border-color: var(--color-border-strong); color: var(--color-text); } .theme-choice[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-text); font-weight: 600; } /* ------------------------------------------------------------- portada ---- */ /* * Entrada del relato: la tapa del libro. Ocupa buena parte del primer viewport * en telefono y NO intenta meter el texto adentro de la imagen (eso obliga a * velos oscuros y arruina la portada). Imagen arriba, titulo debajo. */ .story-intro { max-width: var(--prose-width); margin-inline: auto; padding-block: var(--space-3) var(--space-7); text-align: center; scroll-margin-top: var(--space-4); } .story-intro-cover { width: min(16rem, 72%); margin-inline: auto; margin-bottom: var(--space-5); } .story-intro-cover .cover { box-shadow: var(--shadow-cover); } @media (min-width: 48rem) { .story-intro-cover { width: 17rem; } } .story-title { font-family: var(--font-display); font-size: var(--size-title); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; } .story-author { margin-top: var(--space-3); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); } .story-synopsis { margin-top: var(--space-4); margin-inline: auto; max-width: 32rem; font-family: var(--font-reading); font-size: var(--size-reading); line-height: var(--leading-body); color: var(--color-text-muted); text-wrap: pretty; } .story-facts { margin-top: var(--space-4); justify-content: center; font-size: var(--size-small); color: var(--color-text-muted); } .story-intro-actions { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } /* "Continuar leyendo / Capitulo 3 · 62 %" lo completa reader.js. Nunca hace auto-scroll: abrir un link compartido no puede mover la pagina sola. */ .story-resume { font-size: var(--size-small); color: var(--color-text-muted); } .story-resume-detail { display: block; font-size: var(--size-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* ------------------------------------------------------------- indice ----- */ /* *

nativo: accesible con teclado, plegable sin una linea de JS y * funciona aunque el script no cargue. */ .chapter-index { max-width: var(--reading-width); margin-inline: auto; border-block: 1px solid var(--color-border); } .chapter-index-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); font-size: var(--size-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; list-style: none; } .chapter-index-summary::-webkit-details-marker { display: none; } .chapter-index-summary::after { content: "+"; font-size: var(--size-body); line-height: 1; color: var(--color-border-strong); } .chapter-index[open] .chapter-index-summary::after { content: "−"; } .chapter-index-list { list-style: none; margin: 0; padding: 0 0 var(--space-3); counter-reset: chapter; } .chapter-index-list a { display: flex; gap: var(--space-4); align-items: baseline; padding-block: var(--space-2); font-family: var(--font-reading); text-decoration: none; } .chapter-index-list a:hover .chapter-index-name { text-decoration: underline; text-underline-offset: 0.2em; } .chapter-index-number { flex: 0 0 1.5rem; font-family: var(--font-ui); font-size: var(--size-micro); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .chapter-index-list a[aria-current="true"] .chapter-index-name { font-weight: 600; } .chapter-index-list a[aria-current="true"] .chapter-index-number { color: var(--color-accent); } /* ------------------------------------------------------------ capitulo ---- */ .chapters { max-width: var(--reading-width); margin-inline: auto; } /* * En pantalla ancha el texto deja de estar centrado en la pagina y pasa a estar * centrado en SU columna, con los capitulos al costado. El bloque de lectura no * se mueve de sitio al cambiar de capitulo, que es lo unico que no se le * perdona a una columna lateral. */ @media (min-width: 64rem) { .reading { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--space-8); align-items: start; } } .chapter { /* Suficiente para que un capitulo se sienta una pagina nueva y no el siguiente subtitulo de un documento; ni un milimetro mas. */ padding-block: var(--space-7) var(--space-6); scroll-margin-top: var(--space-4); } /* Con la barra fija puesta, el salto de capitulo tiene que caer DEBAJO de ella. Lo resuelve el navegador con scroll-margin: reader.js usa scrollIntoView y no calcula alturas a mano. */ .js-reader .chapter { scroll-margin-top: calc(var(--reader-bar-height) + var(--space-4)); } /* ------------------------------------------------- capitulos del lector --- */ /* * La lista de capitulos. * * Es UN solo elemento con dos formas: columna fija al costado del texto en * pantalla ancha, hoja que sube desde abajo en telefono. Quien decide cual —y * por lo tanto su `hidden`— es prefs.js, porque `[hidden]` es * `display: none !important` y ninguna media query le puede ganar. */ .reader-chapters { position: fixed; z-index: 21; inset-inline: var(--space-3); inset-block-end: calc(var(--reader-tabs-height) + env(safe-area-inset-bottom, 0px) + var(--space-2)); max-height: 60vh; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2); box-shadow: var(--shadow-cover); } .reader-chapters-title { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--size-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); } .reader-chapters-list { list-style: none; margin: 0; padding: var(--space-2) 0 0; } .reader-chapter { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); font-family: var(--font-reading); font-size: var(--size-small); line-height: var(--leading-snug); color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .reader-chapter:hover { color: var(--color-text); } .reader-chapter-n { flex: none; font-family: var(--font-ui); font-size: var(--size-micro); font-variant-numeric: tabular-nums; } .reader-chapter-name { flex: 1 1 auto; } /* * El tilde de "ya lei este". * * Ocupa su lugar siempre —opacidad, no display— para que la lista no se * reacomode capitulo a capitulo mientras se lee. Es decorativo: lo que dice * donde estoy es el aria-current del enlace. */ .reader-chapter-check { flex: none; opacity: 0; color: var(--color-text-muted); } .reader-chapter[data-read="true"] .reader-chapter-check { opacity: 1; } .reader-chapter[aria-current="true"] { color: var(--color-accent); font-weight: 600; } @media (min-width: 64rem) { .reader-chapters { position: sticky; inset-block-start: calc(var(--reader-bar-height) + var(--space-5)); inset-inline: auto; inset-block-end: auto; max-height: calc(100vh - var(--reader-bar-height) - var(--space-8)); padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } } /* * Salida de arriba. Va antes del numero de capitulo, en chico y en gris: sirve * cuando hace falta y no compite con el titulo. */ .chapter-back { margin-bottom: var(--space-5); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); } .chapter-back a { color: var(--color-text-muted); text-decoration: none; } .chapter-back a:hover { color: var(--color-text); } /* * La portadilla del capitulo: el nombre del relato, el numero, el titulo y el * adorno. Centrada, como la primera pagina de un capitulo impreso; el cuerpo * del texto sigue alineado a la izquierda. */ .chapter-opening { margin-bottom: var(--space-7); text-align: center; } .chapter-story { font-family: var(--font-ui); font-size: var(--size-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-gold); } .chapter-eyebrow { margin-top: var(--space-5); font-family: var(--font-ui); font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); } .chapter-title { margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--size-chapter); font-weight: 400; line-height: var(--leading-snug); text-wrap: balance; } /* El unico ornamento del sitio. En un libro, lo que separa el titulo del primer parrafo no es una regla de un pixel. */ .chapter-ornament { display: block; margin: var(--space-4) auto 0; color: var(--color-gold-line); } /* --- cuerpo del texto: la parte que mas importa --------------------------- */ .chapter-body { font-family: var(--font-reading); /* El unico tamano del sitio que el lector puede cambiar. --reading-scale vale 1 salvo que haya elegido otro paso desde la barra (ver tokens.css). Se multiplica en vez de reemplazar para no perder el clamp, que es lo que hace que el cuerpo siga creciendo con el ancho de la ventana. */ font-size: calc(var(--size-reading) * var(--reading-scale)); line-height: var(--leading-reading); /* Guiones y justificado NO: en pantallas angostas el rio blanco del justificado cansa mas de lo que ordena. */ text-align: left; text-wrap: pretty; hyphens: none; } .chapter-body > * + * { margin-top: var(--space-5); } .chapter-body p { margin: 0; } /* Sangria francesa entre parrafos consecutivos, como en un libro: separa sin agregar espacio, y el primero de cada bloque arranca al ras. */ .chapter-body p + p { margin-top: 0; text-indent: 1.4em; } /* * Capitular. * * Tres lineas de alto, en el rojo de la marca. Es `float` y no `initial-letter` * a proposito: `initial-letter` es la propiedad correcta y hace el calculo de * lineas solo, pero todavia no la implementan todos los navegadores, y donde * falta no degrada a "letra grande" sino a nada. Con float el resultado es el * mismo en todos lados y lo peor que puede pasar es que la letra quede media * linea corrida. * * El tamano esta en `em`, asi que sigue al tamano de texto que elija el lector. */ .chapter-body > p:first-of-type::first-letter { float: left; margin-inline-end: 0.07em; padding-top: 0.06em; font-family: var(--font-display); font-size: 3.4em; line-height: 0.82; color: var(--color-accent); } .chapter-body h2, .chapter-body h3, .chapter-body h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-snug); margin-top: var(--space-6); } .chapter-body h2 { font-size: 1.25em; } .chapter-body h3, .chapter-body h4 { font-size: 1.1em; } .chapter-body em { font-style: italic; } .chapter-body strong { font-weight: 600; } .chapter-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .chapter-body blockquote { margin-inline: 0; padding-left: var(--space-5); border-left: 2px solid var(--color-border-strong); font-style: italic; color: var(--color-text-muted); } .chapter-body blockquote p + p { text-indent: 0; margin-top: var(--space-4); } /* El separador de escena de toda la vida, no una linea gris de documento. */ .chapter-body hr { border: 0; margin-block: var(--space-6); text-align: center; } .chapter-body hr::before { content: "· · ·"; letter-spacing: 0.5em; color: var(--color-border-strong); } .chapter-body ul, .chapter-body ol { padding-left: var(--space-5); } .chapter-body li + li { margin-top: var(--space-2); } .chapter-body img { border-radius: var(--radius-2); } .chapter-body code { font-family: var(--font-mono); font-size: 0.88em; } .chapter-body pre { overflow-x: auto; padding: var(--space-4); background: var(--color-surface-sunken); border-radius: var(--radius-2); font-size: var(--size-small); } .chapter-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--size-small); } /* ----------------------------------------------------- fin de capitulo ---- */ .chapter-foot { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .chapter-foot > * + * { margin-top: var(--space-5); } /* * Anterior · donde estoy · siguiente. * * Tres columnas fijas, con el hueco vacio incluido cuando no hay a donde ir: * asi la posicion queda en el centro tambien en el primer y el ultimo capitulo. * * Esta en el flujo del documento y no pegada al borde de la pantalla. Una barra * fija con lo mismo se comeria una decima parte de un telefono durante toda la * lectura para repetir algo que hace falta exactamente una vez: al terminar el * capitulo. */ .chapter-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); } .chapter-nav-link { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--size-small); color: var(--color-text); text-decoration: none; } .chapter-nav-link--next { align-items: flex-end; text-align: right; } .chapter-nav-dir { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); transition: color var(--transition-fast); } .chapter-nav-name { font-family: var(--font-display); line-height: var(--leading-snug); } .chapter-nav-link:hover .chapter-nav-dir, .chapter-nav-link:hover .chapter-nav-name { color: var(--color-accent); } .chapter-nav-position { font-size: var(--size-micro); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Salida de abajo: al principio del relato y a la biblioteca. */ .chapter-foot-exits { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--size-micro); letter-spacing: var(--tracking-wide); } .chapter-foot-exits a { color: var(--color-text-muted); text-decoration: none; } .chapter-foot-exits a:hover { color: var(--color-text); } /* ----------------------------------------------------------- el final ----- */ .story-end { max-width: var(--prose-width); margin-inline: auto; padding-block: var(--space-7) var(--space-8); text-align: center; } .story-end-mark { font-family: var(--font-display); font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); } .story-end-title { margin-top: var(--space-3); font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); font-weight: 400; } .story-end-author { margin-top: var(--space-2); font-size: var(--size-small); color: var(--color-text-muted); } .story-end-block { margin-top: var(--space-7); } .story-end-question { font-family: var(--font-reading); font-size: var(--size-reading); color: var(--color-text-muted); } /* --- reacciones ---------------------------------------------------------- */ /* * Botones reales, con texto real debajo del emoji: el emoji solo no es una * etiqueta accesible y cada lector de pantalla lo lee distinto. */ .reactions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .reaction { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 4.5rem; padding: var(--space-3) var(--space-2); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-2); color: var(--color-text-muted); font-family: inherit; font-size: var(--size-micro); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); } .reaction:hover { border-color: var(--color-border-strong); color: var(--color-text); } .reaction-emoji { font-size: 1.5rem; line-height: 1; /* Los emoji son decorativos: la etiqueta de texto de al lado es la que nombra la reaccion. */ } .reaction[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-surface-sunken); color: var(--color-text); } .reaction-thanks { margin-top: var(--space-3); font-size: var(--size-small); color: var(--color-text-muted); } /* --- compartir ----------------------------------------------------------- */ .share { display: inline-flex; align-items: center; gap: var(--space-3); } .share-feedback { font-size: var(--size-small); color: var(--color-text-muted); } /* --- leer despues -------------------------------------------------------- */ .next-story { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); text-align: left; } .next-story-label { font-size: var(--size-micro); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); } .next-story-card { position: relative; margin-top: var(--space-4); display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-5); align-items: center; } .next-story-card .cover { box-shadow: var(--shadow-cover); } .next-story-title { font-family: var(--font-display); font-size: var(--size-card-title); font-weight: 400; } .next-story-title a { text-decoration: none; } .next-story-title a::after { content: ""; position: absolute; inset: 0; } .next-story-title a:focus-visible { outline: none; } .next-story-title a:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-2); } .next-story-meta { margin-top: var(--space-2); font-size: var(--size-small); color: var(--color-text-muted); } .story-end-back { margin-top: var(--space-7); font-size: var(--size-small); } /* ------------------------------------------------- modo lector (con JS) --- */ /* * Sin JS estas reglas no existen y todo se ve: la historia completa, el indice * abierto y el cierre al final. El script solo agrega la clase y decide que * capitulo se muestra. */ /* * Con la barra puesta, tres cosas del HTML pasan a estar dos veces y se apagan: * * .chapter-back el mismo "volver al relato" que ya esta en la barra. * .chapter-index el

de arriba: los capitulos estan en la * columna lateral o en la hoja de "Contenido". * .chapter-foot-exits la salida a la biblioteca, que es el logo de la barra. * * Sin JS son las unicas que hay, y por eso viven en el HTML y no las agrega * nadie. */ .js-reader .chapter-back, .js-reader .chapter-index, .js-reader .chapter-foot-exits { display: none; } /* Espacio para que la botonera de abajo no tape el final del capitulo. */ @media (max-width: 63.999rem) { .js-reader { padding-bottom: calc(var(--reader-tabs-height) + env(safe-area-inset-bottom, 0px)); } } /* El cierre solo aparece cuando se llego al final del ultimo capitulo. */ .js-reader .story-end { display: none; } .js-reader .story-end[data-reached="true"] { display: block; }