y le gana a la herencia del contenedor .day-notes (por eso el
body se veía en Inter, no en el serif del contenedor). Los quedan italic. */
.day-notes p, .subday-body p {
font-family: var(--font-read);
font-style: normal;
}
.day-notes em, .subday-body em { font-style: italic; }
/* v9.10 — body editorial de las notas del día en Lora (upright, lectura).
Sigue contigo con drop cap en :first-of-type::first-letter. */
.day-notes {
font-family: var(--font-read);
font-size: 1.18rem;
line-height: 1.7;
color: var(--text-soft);
}
.day-notes p { margin: 0 0 1.1em; }
.day-notes p:last-child { margin-bottom: 0; }
/* Quitar comillas decorativas en notas */
.day-notes::before, .day-notes::after { content: none !important; }
.hero-sub, .status-bar, [class*="-tag"]:not(.airbnb-tag):not(.week-tag),
.maps-link-btn, .dish-maps-link {
font-family: var(--font-mono);
letter-spacing: var(--tracking-wide);
}
/* === Theme toggle button === */
/* v9.7 — position:absolute (no fixed) para que scrollee con la página en
lugar de quedar pegado al viewport. El offset top/right sigue anclando
el botón al corner del page en scroll 0. */
.theme-toggle {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 200;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-soft);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-sm);
padding: 0;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.theme-toggle:hover {
border-color: var(--border-strong);
color: var(--text);
box-shadow: var(--shadow-md);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.theme-toggle svg {
position: absolute;
transition: opacity 0.25s ease, transform 0.35s ease;
}
:root[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun {
opacity: 0;
transform: rotate(90deg) scale(0);
}
:root[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon {
opacity: 1;
transform: rotate(0) scale(1);
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
opacity: 1;
transform: rotate(0) scale(1);
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
opacity: 0;
transform: rotate(-90deg) scale(0);
}
@media (max-width: 640px) {
.theme-toggle {
top: 0.85rem;
right: 0.85rem;
width: 36px;
height: 36px;
}
.theme-toggle svg { width: 18px; height: 18px; }
}
/* Refinos */
.day-card { border-radius: var(--radius-md); }
footer.site-footer { border-top-color: var(--border); }
@media (prefers-reduced-motion: reduce) {
html, body, .theme-toggle, .theme-toggle svg { transition: none !important; }
}
/* ============================================ */
/* v8.0 · CAPA DE REFINAMIENTO VISUAL · JOURNEY */
/* ============================================ */
/* === Tipografía base · alineada al UK plan === */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text);
}
h1 em, h2 em, h3 em {
font-style: normal;
color: var(--accent);
font-weight: 600;
}
/* === Links · burgundy refinado sin border-bottom decorativo === */
a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
border-bottom: none;
}
a:hover {
color: var(--accent-soft);
text-decoration-thickness: 1.5px;
}
a.maps-link-btn, a[class*="-btn"] { text-decoration: none; }
/* === v9.0 · Drop cap editorial inglés ===
Solo el PRIMER párrafo de las notas del día. Playfair semibold, 4.2em en
desktop, 3.5em en mobile. Burgundy. Es lo que diferencia un blog cuidado
de uno amateur — un solo drop cap, no en todos los párrafos. */
.day-notes > p:first-of-type::first-letter,
.day-content > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 4.2em;
font-weight: 600;
line-height: 0.85;
float: left;
margin: 0.05em 0.12em -0.05em 0;
color: var(--accent);
}
@media (max-width: 640px) {
.day-notes > p:first-of-type::first-letter,
.day-content > p:first-of-type::first-letter {
font-size: 3.5em;
}
}
/* Sin drop cap en place-note ni enrichment-notes (esos son fragments cortos) */
.place-note::first-letter,
.enrichment-notes::first-letter {
font-size: inherit !important;
color: inherit !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.day-notes::before, .day-notes::after,
.place-note::before, .place-note::after,
.enrichment-notes::before, .enrichment-notes::after {
content: '' !important;
display: none !important;
}
/* === v9.0 · Section divider ornamental ===
Línea horizontal con texto centrado en Cormorant italic + color brass.
Background del bg-elevated "corta" la línea para que el texto respire. */
.section-divider {
position: relative;
text-align: center;
margin: var(--space-7) 0 var(--space-5);
height: 1px;
}
.section-divider::before {
content: '';
position: absolute;
inset: 50% 0 auto 0;
height: 1px;
background: var(--border);
}
.section-divider-text {
position: relative;
display: inline-block;
padding: 0 1rem;
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--brass);
background: var(--bg-elevated);
}
.section-divider-text::before,
.section-divider-text::after {
content: '—';
margin: 0 0.5rem;
color: var(--brass);
opacity: 0.65;
}
/* === v9.0 · Place section header (Lugares que probamos / descubiertos) ===
Eyebrow mono uppercase centrado debajo del divider. */
.place-section-eyebrow {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
text-align: center;
margin: 0 0 var(--space-5);
}
/* v9.0 · Day cards del journey · article wrapper editorial */
.day-card {
background: var(--bg-elevated);
border: 1px solid var(--border-hairline);
border-radius: 2px;
box-shadow: var(--shadow-paper, var(--shadow-sm));
padding: var(--space-7) var(--space-6);
margin-bottom: var(--space-7);
}
.day-card:hover {
border-color: var(--border);
}
@media (max-width: 640px) {
.day-card {
padding: var(--space-5) var(--space-4);
margin-bottom: var(--space-5);
}
}
@media (max-width: 400px) {
.day-card { padding: var(--space-4); }
}
/* Eyebrow del day card · mono pequeño */
.day-card .day-card-num,
.day-card-meta-mono {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
}
/* Status bar · backdrop blur clean === */
.journey-status-bar,
.status-bar {
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 0.5px solid var(--border);
}
/* === v9.0 · Maps button outlined burgundy (cascade final) === */
.maps-link-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
padding: 0.45rem 0.85rem;
border: 1px solid var(--accent);
border-radius: 2px;
background: transparent;
font-weight: 500;
transition: background 0.2s ease;
min-height: 32px;
}
.maps-link-btn:hover {
background: var(--accent-bg);
color: var(--accent);
}
/* === Star ratings · brass === */
.track-stars, .place-rating, .star-display { color: var(--brass); }
/* === Theme toggle · alineado === */
.theme-toggle {
background: var(--bg-elevated);
border: 0.5px solid var(--border);
color: var(--text-soft);
box-shadow: var(--shadow-sm);
}
.theme-toggle:hover {
border-color: var(--accent);
color: var(--accent);
}
/* === Lightbox · negro casi puro === */
.lightbox-backdrop { background: rgba(12, 12, 13, 0.95); }
.lightbox-counter {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--text-muted);
}
/* v9.0 · Footer del journey · padding lateral consistente con .day-card
(antes era padding lateral 0, contenido pegado al borde en mobile). */
footer.site-footer {
margin-top: var(--space-section, 6rem);
padding: var(--space-7) var(--space-6) var(--space-6);
border-top: 0.5px solid var(--border);
text-align: center;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
color: var(--text-muted);
}
@media (max-width: 640px) {
footer.site-footer {
padding: var(--space-5) var(--space-4);
margin-top: var(--space-7);
}
}
/* === Transición universal === */
html, body, * {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
html, body, * { transition: none !important; }
}
/* ============================================ */
/* v8.0 · JOURNEY (CAMBIO 14) · classes reales */
/* ============================================ */
/* Hero del journey · editorial limpio (NO sticky, NO bg café) */
.hero {
position: static;
padding: var(--space-7, 2.5rem) var(--space-5) var(--space-6, 2rem);
max-width: 1100px;
margin: 0 auto;
text-align: left;
border-bottom: 0.5px solid var(--border);
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* === v9.0 · Masthead editorial inglés =================================
Cabecera tipo periódico clásico: eyebrow mono · título Playfair italic
con "Cami" en burgundy normal · subtítulo Cormorant italic ·
rule line con día del viaje en romanos + fecha · año en romanos.
Las clases legacy .hero-eyebrow / .hero-title / .hero-sub se mantienen
y se reescriben en estilo editorial. */
.hero-eyebrow,
.masthead-eyebrow {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
margin: 0 auto var(--space-3);
display: block;
}
/* Puntos centro en el eyebrow del masthead estilo periódico: · Diario · */
.masthead-eyebrow::before,
.masthead-eyebrow::after {
content: '·';
margin: 0 0.5em;
color: var(--brass);
opacity: 0.7;
}
.hero-title,
.masthead-title {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(2rem, 6vw, 3.2rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.005em;
color: var(--text);
margin: 0 0 var(--space-3);
}
.hero-title em,
.masthead-title em {
font-style: normal;
color: var(--accent);
font-weight: 600;
}
.hero-title strong,
.masthead-title strong { font-weight: 600; font-style: normal; color: var(--text); }
.masthead-subtitle {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.08rem;
color: var(--text-soft);
margin: 0 auto var(--space-5);
max-width: 38ch;
}
/* Rule line con día romano + fecha · año romanos. Líneas finas a los lados. */
.masthead-rule {
display: flex;
align-items: center;
gap: var(--space-3);
justify-content: center;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
margin: var(--space-4) auto 0;
max-width: 520px;
}
.masthead-rule-line {
flex: 1 1 60px;
max-width: 100px;
height: 1px;
background: var(--border);
}
.masthead-rule-text {
white-space: nowrap;
flex: 0 0 auto;
}
/* hero-sub queda como subline secundaria (Día N de N, x publicados) en
Cormorant italic más pequeño debajo del masthead-rule. Override
text-transform/letter-spacing del cascade legacy. */
.hero-sub,
.masthead .hero-sub {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.02rem;
letter-spacing: 0;
text-transform: none;
color: var(--text-soft);
opacity: 1;
margin: var(--space-3) auto 0;
max-width: 52ch;
}
/* v9.0 — Override del .hero (text-align: left legacy) para que TODO el
masthead se centre. Aplica al hero solo cuando lleva .masthead. */
.hero.masthead {
text-align: center;
padding: var(--space-8) var(--space-5) var(--space-7);
border-bottom: none;
}
.hero.masthead .journey-countdown {
justify-content: center;
border-top: 1px solid var(--border-hairline);
margin: var(--space-5) auto 0;
padding-top: var(--space-4);
max-width: 520px;
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: var(--text-soft);
}
.hero.masthead .countdown-label {
letter-spacing: 0;
text-transform: none;
font-family: var(--font-serif);
font-style: italic;
color: var(--text-muted);
font-size: 1rem;
}
.hero.masthead .countdown-value {
font-family: var(--font-display);
font-style: italic;
color: var(--accent);
font-size: 1.2rem;
letter-spacing: 0;
}
.hero.masthead .countdown-sub {
color: var(--text-muted);
font-size: 0.9rem;
font-family: var(--font-mono);
letter-spacing: 0.08em;
}
@media (max-width: 480px) {
.masthead-rule { gap: var(--space-2); font-size: 0.58rem; letter-spacing: 0.18em; }
.masthead-rule-line { max-width: 50px; }
.masthead-subtitle { font-size: 1rem; }
.hero.masthead { padding: var(--space-6) var(--space-4) var(--space-5); }
}
/* Override del dark mode override café del v7 (línea 723) */
:root[data-theme="dark"] .hero {
background: var(--bg);
}
/* Status v8.0 · texto inline plano, sin pills */
.status-pill {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
color: var(--text-soft);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.status-pill .pill-emoji { font-size: 0.95rem; opacity: 1; }
.status-pill .pill-label { color: var(--text-muted); }
/* v9.2 · Separador entre status-pills · · sutil en text-muted, ayuda a
diferenciar las zonas en una sola línea. Si las pills wrappean en
mobile, el sep queda con su pill siguiente (es flex sibling). */
.status-sep {
color: var(--text-muted);
opacity: 0.5;
font-family: var(--font-mono);
font-size: 0.78rem;
user-select: none;
}
/* v9.2 · Clock pill · banderas como zonas + colon parpadeante (LED-style).
Sin emoji de reloj 🕐 (se confundía con el ◷ del skeleton). El blink
del colon vía CSS keyframe da el feel de reloj digital. */
.status-pill.clock {
gap: 0.55rem;
}
.status-pill .clock-zone {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.status-pill .clock-flag {
font-size: 0.85rem;
line-height: 1;
}
.status-pill .clock-sep {
color: var(--text-muted);
opacity: 0.5;
}
.status-pill .clock-hh,
.status-pill .clock-mm {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
}
.status-pill .clock-colon {
display: inline-block;
margin: 0 0.05em;
font-weight: 600;
color: var(--text);
animation: clock-colon-blink 1.4s linear infinite;
}
@keyframes clock-colon-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.status-pill .clock-colon { animation: none; opacity: 1; }
}
/* v9.0 — Status bar editorial: banda centrada entre masthead y timeline.
Sin sticky. Padding generoso para que respire. Separadores · entre items. */
.status-bar {
margin: var(--space-5) auto var(--space-6);
padding: var(--space-4) var(--space-5);
max-width: 720px;
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
display: flex;
justify-content: center;
align-items: center;
/* v9.2 · gap menor porque ahora hay .status-sep entre las pills.
El · ya da la separación visual; el gap solo amortigua. */
gap: var(--space-3);
flex-wrap: wrap;
}
@media (max-width: 640px) {
.status-bar {
gap: 0.55rem;
padding: var(--space-3) var(--space-4);
margin: var(--space-4) auto var(--space-5);
}
.status-pill { font-size: 0.72rem; }
}
/* Day card header row: eyebrow + weather alineados */
.day-header-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-2);
}
.day-weather {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
color: var(--text-soft);
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.day-weather:empty { display: none; }
.day-weather .day-weather-emoji { font-size: 0.95rem; }
.day-weather .day-weather-temp { font-weight: 500; color: var(--text); }
.day-weather .day-weather-label { color: var(--text-muted); }
@media (max-width: 540px) {
.day-weather .day-weather-label { display: none; }
}
/* Day card eyebrow + subtitle */
.day-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
display: block;
margin-bottom: 0;
font-weight: 500;
}
/* v9.0 · Article header editorial · centrado con florón brass.
El title pasa a Playfair italic, el lodging baja como Cormorant italic
meta. El florón ❦ cierra la unidad y separa del body. */
.article-header {
text-align: center;
margin: var(--space-4) auto var(--space-5);
max-width: 38rem;
}
.day-title,
.article-title {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.75rem, 4.2vw, 2.4rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--text);
margin: 0;
}
.day-title em,
.article-title em { font-style: normal; color: var(--accent); font-weight: 600; }
.day-subtitle,
.article-subtitle {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--text-soft);
margin: var(--space-3) auto 0;
padding: 0;
border-bottom: none;
max-width: 38ch;
}
.article-ornament {
font-family: var(--font-display);
color: var(--brass);
font-size: 1.5rem;
line-height: 1;
margin-top: var(--space-4);
letter-spacing: 0.3em;
opacity: 0.75;
}
.article-ornament::before { content: '❦'; }
/* Pull quote · opcional, gestionada desde el admin.
Líneas hairline arriba y abajo, Playfair italic burgundy, comillas
decorativas brass a los costados. */
.pull-quote {
margin: var(--space-6) auto;
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem, 2vw, 1.4rem);
line-height: 1.4;
color: var(--accent);
max-width: 36rem;
}
.pull-quote::before,
.pull-quote::after {
content: '"';
color: var(--brass);
opacity: 0.5;
font-size: 1.4em;
margin: 0 0.2em;
vertical-align: -0.18em;
}
/* (Hero del día consolidado arriba con bleed margin + aspect 16/10.) */
/* Day notes block */
.day-notes {
font-family: var(--font-read); /* v9.10 · Lora (upright) — autoritativo para el body */
font-style: normal;
font-size: 1.15rem;
line-height: 1.6;
color: var(--text);
max-width: 65ch;
margin: 0 auto var(--space-6);
}
/* v9.10 — Hyphenation para texto largo en español (afinada de 8 4 4 → 6 3 2).
ya está seteado · auto activa el diccionario español del browser.
- hyphenate-limit-chars 6 3 2: hyphena palabras de 6+ letras, dejando ≥3 antes
y ≥2 después del guión. Más activa que el 8 4 4 anterior (que casi no cortaba
en desktop), para que se note el efecto sobre todo en mobile.
- hyphenate-limit-lines 2: máx 2 líneas seguidas terminando con guión
(evita la "escalerita" de un blog mal tipografiado).
- text-wrap: pretty: distribuye mejor los words por línea, evita huérfanos
(Safari 17.4+, Chrome 117+). En browsers viejos, fallback grácil.
Aplicado a body copy, place-note y pull-quote · NO a títulos (riesgo estético). */
.day-notes,
.day-notes p,
.subday-body,
.subday-body p,
.place-note,
.pull-quote {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 2;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;
hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
text-wrap: pretty;
}
/* Photo grid */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3);
margin: 0 0 var(--space-6);
}
.photo-grid img,
.photo-thumb img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-md); /* v8.5 — más suave que el sm legacy */
cursor: pointer;
transition: transform 0.3s ease, opacity 0.2s ease;
display: block;
}
/* v8.5 — radius en el botón también, por si el outline de focus dibuja sobre el borde */
.photo-thumb {
border-radius: var(--radius-md);
overflow: hidden;
}
.photo-grid img:hover,
.photo-thumb img:hover {
transform: scale(1.01);
opacity: 0.95;
}
/* Highlights */
.highlights {
list-style: none;
padding: var(--space-4) 0;
margin: 0 0 var(--space-6);
border-top: 0.5px solid var(--border);
border-bottom: 0.5px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.highlights li {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--text);
}
/* Enrichment section (— De nuestro plan —) */
.enrichment {
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 0.5px solid var(--border);
}
.enrichment-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted);
text-align: center;
margin-bottom: var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
justify-content: center;
}
.enrichment-eyebrow::before,
.enrichment-eyebrow::after {
content: '';
flex: 1;
height: 0.5px;
background: var(--border);
}
.enrich-block {
margin-bottom: var(--space-6);
}
.enrich-blockquote {
font-family: var(--font-display);
font-size: 1rem;
font-style: italic;
line-height: 1.55;
color: var(--text-soft);
margin: 0;
border-left: 2px solid var(--accent);
padding-left: var(--space-4);
}
/* Place row dentro de enrichment */
.place-row {
padding: var(--space-4) 0;
border-bottom: 0.5px solid var(--border);
}
.place-row:last-child { border-bottom: none; }
.place-row strong {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
}
.place-row .pill-label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
}
.place-note {
font-family: var(--font-read); /* v9.10 · Lora (antes Playfair italic) para leer mejor la cita */
font-style: normal;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-soft);
margin: var(--space-2) 0 var(--space-3);
}
.place-note em { font-style: italic; }
/* v9.0 fix · place-photo-grid con tamaño FIJO por thumb
(auto-fit, 110px). El override anterior usaba auto-fit con minmax 1fr,
lo que hacía que 1 foto se estire a 360px y 2 fotos a 170px (size
variable según count). Ahora todas son 110×110px sin importar
cuántas haya: 1 foto = una thumb chica, 4 fotos = grid uniforme. */
.place-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 110px);
gap: 0.5rem;
margin: var(--space-3) 0;
max-width: 100%;
}
@media (max-width: 480px) {
.place-photo-grid {
grid-template-columns: repeat(auto-fill, 92px);
gap: 0.4rem;
}
}
/* Share row */
.share-row {
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--border-hairline);
text-align: center;
}
.share-btn {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-soft);
background: transparent;
border: 1px solid var(--border-strong);
padding: 0.55rem 1.1rem;
border-radius: 2px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
min-height: 36px;
}
.share-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-bg);
}
/* Toast */
.toast {
background: var(--text);
color: var(--bg);
font-family: var(--font-body);
font-size: 0.9rem;
}
/* ============================================ */
/* v8.2 · EMPTY-STATE HÍBRIDO · skeleton cards + */
/* countdown + footer empty-state */
/* ============================================ */
/* Countdown sutil debajo del hero-sub */
.journey-countdown {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 0.5px solid var(--border);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--text-soft);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.6rem;
}
.journey-countdown[hidden] { display: none !important; }
.countdown-label {
color: var(--text-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.65rem;
}
.countdown-value {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
font-style: italic;
color: var(--accent);
letter-spacing: -0.01em;
}
.countdown-sub {
color: var(--text-muted);
font-size: 0.72rem;
}
@media (max-width: 480px) {
.journey-countdown { gap: 0.35rem; }
.countdown-sub { width: 100%; margin-top: 0.1rem; }
}
/* Header "Lo que viene" antes del primer día publicado */
.upcoming-header {
max-width: 800px;
margin: 0 auto;
padding: var(--space-7) var(--space-5) var(--space-4);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
display: flex;
align-items: center;
gap: var(--space-4);
}
.upcoming-header::after {
content: '';
flex: 1;
height: 0.5px;
background: var(--border);
}
/* Skeleton base — hereda del .day-card (background, border, fade-in) */
.day-card-skeleton {
position: relative;
}
/* Línea decorativa lateral — dashed para futuras/pasadas, sólida burgundy
para hoy. La pinto sobre el border-left existente del .day-card. */
.day-card-skeleton::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
width: 3px;
border-radius: 0;
z-index: 1;
}
.day-card-skeleton.is-future::before,
.day-card-skeleton.is-past::before {
background: repeating-linear-gradient(
to bottom,
var(--border-strong) 0,
var(--border-strong) 5px,
transparent 5px,
transparent 10px
);
}
.day-card-skeleton.is-today::before {
background: var(--accent);
}
/* Día actual — eyebrow en acento */
.day-card-skeleton.is-today .day-eyebrow {
color: var(--accent);
}
/* Meta de la skeleton — separadores · entre spans */
.day-card-skeleton .day-card-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--text-muted);
margin: 0 0 var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 0.5px solid var(--border);
}
.day-card-skeleton .day-card-meta > span:not(:last-child)::after {
content: '·';
margin-left: var(--space-3);
opacity: 0.5;
}
/* Bloque "pending" / "pronto" */
.day-card-skeleton .day-pending {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--bg);
border: 0.5px dashed var(--border-strong);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--text-soft);
line-height: 1.4;
}
.day-card-skeleton.is-today .day-pending {
background: var(--accent-bg);
border-style: solid;
border-color: var(--accent);
}
.day-pending-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-soft);
}
/* v9.2 · SVG Lucide inline · hereda color del container via currentColor */
.day-pending-icon svg {
width: 16px;
height: 16px;
display: block;
}
.day-card-skeleton.is-today .day-pending-icon {
background: var(--accent);
color: var(--bg);
}
.day-pending-text {
flex: 1;
}
.day-pending-text strong {
display: block;
color: var(--text);
font-family: var(--font-display);
font-weight: 500;
font-style: italic;
font-size: 1rem;
letter-spacing: -0.005em;
margin-bottom: 0.1rem;
}
.day-card-skeleton.is-today .day-pending-text strong {
color: var(--accent);
}
/* Día pasado vacío — más tenue, sube al hover */
.day-card-skeleton.is-past {
opacity: 0.72;
}
.day-card-skeleton.is-past:hover {
opacity: 1;
}
/* === v8.2.1 — Skeleton genérico (placeholder bars + fade progresivo) === */
/* Visibles desde el inicio (sin fade-in del observer) para que el efecto de
desvanecimiento descendente se aprecie todo junto. Opacidad inline por JS
via --fade-opacity. */
.day-card-skeleton.is-generic {
pointer-events: none;
user-select: none;
opacity: var(--fade-opacity, 0.5);
transform: none;
transition: none;
}
.day-card-skeleton.is-generic.is-visible {
opacity: var(--fade-opacity, 0.5);
transform: none;
}
.day-card-skeleton.is-generic::before { display: none; }
/* Placeholder bars */
.day-card-skeleton.is-generic .skel-line {
display: block;
height: 0.7rem;
background: var(--border);
border-radius: 2px;
margin: 0 0 0.7rem;
}
.day-card-skeleton.is-generic .skel-line-eyebrow {
width: 5.5rem;
height: 0.55rem;
margin-bottom: 1rem;
}
.day-card-skeleton.is-generic .skel-line-title {
height: 1.5rem;
width: 62%;
margin-bottom: 1rem;
}
.day-card-skeleton.is-generic .skel-line-meta {
width: 40%;
height: 0.55rem;
margin-bottom: 1.4rem;
padding-bottom: 0;
border-bottom: none;
}
.day-card-skeleton.is-generic .skel-block {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.85rem 1rem;
background: var(--bg);
border: 0.5px dashed var(--border-strong);
border-radius: var(--radius-sm);
}
.day-card-skeleton.is-generic .skel-dot {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
}
.day-card-skeleton.is-generic .skel-block-lines {
flex: 1;
min-width: 0;
}
.day-card-skeleton.is-generic .skel-line-text {
height: 0.65rem;
width: 75%;
margin-bottom: 0.4rem;
}
.day-card-skeleton.is-generic .skel-line-text-short {
width: 50%;
margin-bottom: 0;
}
/* === v8.2.2 — Paginación de timeline (máx 7 días por página) === */
.timeline-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin: var(--space-6) auto var(--space-5);
padding-top: var(--space-5);
border-top: 0.5px solid var(--border);
max-width: 800px;
}
.timeline-pagination .page-btn {
background: transparent;
border: 0.5px solid var(--border-strong);
color: var(--text-soft);
padding: 0.55rem 1.1rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
border-radius: var(--radius-sm);
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.timeline-pagination .page-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.timeline-pagination .page-btn:active:not(:disabled) {
background: var(--accent-bg);
}
.timeline-pagination .page-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.timeline-pagination .page-indicator {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
@media (max-width: 480px) {
.timeline-pagination { gap: var(--space-3); padding-top: var(--space-4); }
.timeline-pagination .page-btn { padding: 0.5rem 0.7rem; font-size: 0.68rem; }
.timeline-pagination .page-indicator { font-size: 0.7rem; }
}
/* Footer "El diario se actualiza solo" — solo en empty-state total */
.empty-state-footer {
max-width: 800px;
margin: var(--space-6) auto 0;
padding: var(--space-6) var(--space-5);
text-align: center;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--text-muted);
border-top: 0.5px solid var(--border);
line-height: 1.5;
}
.empty-state-footer strong {
display: block;
margin-bottom: var(--space-2);
color: var(--text);
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
letter-spacing: -0.005em;
text-transform: none;
}
@media (max-width: 640px) {
.day-card-skeleton .day-pending {
flex-direction: row;
align-items: flex-start;
padding: var(--space-3);
}
.upcoming-header { padding-top: var(--space-6); }
}
/* ============================================ */
/* v9.7 · TIMELINE TOOLBAR · order toggle */
/* ============================================ */
/* Toolbar inline arriba del timeline (NO sticky · scrollea con el contenido).
Aparece solo con ≥2 días publicados. Right-aligned, sutil — no compite
visualmente con las cards. */
.timeline-toolbar {
max-width: 800px;
margin: 0 auto;
padding: var(--space-6) var(--space-5) var(--space-3);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.order-segmented {
display: inline-flex;
border: 0.5px solid var(--border-strong);
border-radius: var(--radius-sm);
overflow: hidden;
}
.order-segmented-btn {
background: transparent;
border: none;
color: var(--text-muted);
padding: 0.45rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
}
.order-segmented-btn + .order-segmented-btn {
border-left: 0.5px solid var(--border-strong);
}
.order-segmented-btn:hover:not(.is-active) {
color: var(--text-soft);
background: var(--accent-bg);
}
.order-segmented-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.order-segmented-btn.is-active {
background: var(--accent-bg);
color: var(--accent);
}
@media (max-width: 480px) {
.timeline-toolbar {
padding: var(--space-5) var(--space-4) var(--space-2);
gap: var(--space-2);
}
.order-segmented-btn {
padding: 0.4rem 0.6rem;
font-size: 0.62rem;
letter-spacing: 0.12em;
}
}
/* ============================================ */
/* v8.5 · MINI-MAPAS POR DÍA */
/* ============================================ */
/* v9.0 · Map section · header con líneas decorativas brass a los costados.
"—— 3 lugares · East London ——" centrado en mono uppercase brass. */
.day-map-block {
margin: var(--space-5) 0 var(--space-6);
}
.day-map-header {
display: flex;
align-items: center;
gap: 0.85rem;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: var(--space-4);
justify-content: center;
}
.day-map-header::before,
.day-map-header::after {
content: '';
flex: 1 1 auto;
max-width: 80px;
height: 1px;
background: var(--border);
}
.day-map-icon { font-size: 0.85rem; }
.day-map-label { white-space: nowrap; }
.day-map-container {
height: 280px;
width: 100%;
border-radius: 2px;
border: 1px solid var(--border-hairline);
background: var(--bg-subtle);
overflow: hidden;
position: relative;
z-index: 0;
}
/* Loading skeleton mientras el observer aún no inicializó el mapa */
.day-map-container:not([data-map-initialized="true"])::before {
content: 'Cargando mapa…';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.2em;
color: var(--text-muted);
background: var(--bg-subtle);
}
/* Custom pin styles · sobreescribir defaults de Leaflet */
.custom-map-pin {
background: transparent !important;
border: none !important;
}
/* v9.0 · Pins burgundy con border en bg-elevated (no white) para que
se integre con el papel cremoso del journey en vez de chocar. */
.map-pin {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
color: var(--bg-elevated);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
border: 2.5px solid var(--bg-elevated);
box-shadow: 0 2px 6px rgba(26, 22, 18, 0.25);
transition: transform 0.2s ease;
}
.map-pin:hover { transform: scale(1.15); }
.map-pin-transit,
.map-pin-highlight {
width: 16px;
height: 16px;
background: var(--text-muted) !important;
border-width: 1.5px;
}
/* Popup de Leaflet · paleta v8.0 */
.leaflet-popup-content-wrapper {
background: var(--bg-elevated) !important;
color: var(--text) !important;
border: 0.5px solid var(--border) !important;
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-md) !important;
padding: 0 !important;
}
.leaflet-popup-content {
margin: 0 !important;
padding: var(--space-3) var(--space-4) !important;
font-family: var(--font-body) !important;
}
.leaflet-popup-tip {
background: var(--bg-elevated) !important;
border-left: 0.5px solid var(--border);
border-bottom: 0.5px solid var(--border);
}
.leaflet-popup-close-button {
color: var(--text-muted) !important;
font-size: 18px !important;
padding: 4px 8px 0 0 !important;
}
.map-popup strong {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
display: block;
margin-bottom: 0.3rem;
}
.map-popup-rating {
color: var(--gold);
font-size: 0.85rem;
letter-spacing: 0.05em;
margin-bottom: 0.4rem;
}
.map-popup-notes {
font-family: var(--font-display);
font-style: italic;
font-size: 0.85rem;
line-height: 1.4;
color: var(--text-soft);
margin: 0 0 0.5rem;
}
.map-popup-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
padding: 0.3rem 0.55rem;
border: 0.5px solid var(--accent);
border-radius: var(--radius-sm);
}
.map-popup-link:hover {
background: var(--accent-bg);
}
/* Leaflet zoom controls · estilo nuestro */
.leaflet-control-zoom a {
background: var(--bg-elevated) !important;
color: var(--text) !important;
border: 0.5px solid var(--border) !important;
font-family: var(--font-mono) !important;
font-weight: 500 !important;
}
.leaflet-control-zoom a:hover {
background: var(--bg-subtle) !important;
color: var(--accent) !important;
}
/* Attribution más sutil */
.leaflet-control-attribution {
font-family: var(--font-mono) !important;
font-size: 0.55rem !important;
letter-spacing: 0.05em !important;
background: rgba(250, 250, 248, 0.85) !important;
color: var(--text-muted) !important;
}
:root[data-theme="dark"] .leaflet-control-attribution {
background: rgba(12, 12, 13, 0.85) !important;
}
/* v8.5 — Levantar Dark Matter un poco para que no se pierda contra el bg
casi negro del modo oscuro. Solo afecta el tile pane (base raster), NO los
marker/overlay/popup panes, así que pins burgundy + polyline conservan su
color exacto. */
:root[data-theme="dark"] .leaflet-tile-pane {
filter: brightness(1.22) contrast(0.94);
}
/* v8.5 — respetar prefers-reduced-motion en las animaciones del mapa.
Sin transiciones: pin hover, polyline draw y tile pane filter (que
también es subjeto de la media query si pasáramos por keyframes; el
filter estático no necesita override). */
@media (prefers-reduced-motion: reduce) {
.map-pin { transition: none; }
.leaflet-overlay-pane svg path { transition: none !important; }
}
/* v8.5 — hora de visita visible en place-row del journey */
.visit-time {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--text-muted);
padding: 0.15rem 0.45rem;
margin-left: 0.4rem;
border: 0.5px solid var(--border);
border-radius: 3px;
background: var(--bg-subtle);
vertical-align: middle;
}
@media (max-width: 640px) {
.day-map-container { height: 220px; }
}
/* ============================================ */
/* v8.6 · FLIGHT TRACKER */
/* ============================================ */
.flight-tracker {
margin: var(--space-3) 0 var(--space-4);
border-radius: var(--radius-sm);
overflow: visible;
transition: background-color 0.2s ease;
}
/* v9.1 · Vista SLIM (default) · letterpress sutil
En light queremos diferenciación suave del card contenedor sin que
se sienta "bloque chocolate". Usamos --bg (el papel base, casi
imperceptiblemente más oscuro que el --bg-elevated del card). Dark
mantiene su tratamiento más oscuro vía override más abajo. */
.flight-tracker-slim {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 44px; /* touch target WCAG / iOS HIG */
padding: var(--space-3) var(--space-4);
background: var(--bg);
border: 1px solid var(--border-hairline);
border-radius: 2px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
color: var(--text-soft);
transition: background-color 0.2s ease, border-color 0.2s ease;
text-align: left;
}
.flight-tracker-slim:hover {
background: var(--bg-subtle);
border-color: var(--border);
}
/* v9.1 · Dark mantiene el bg-deep original (carbón muy oscuro) que se
veía bien contraste sobre el cuero del .day-card en dark. */
:root[data-theme="dark"] .flight-tracker-slim {
background: var(--bg-deep);
}
:root[data-theme="dark"] .flight-tracker-slim:hover {
background: var(--bg-subtle);
}
.flight-tracker-slim:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ft-airport {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.08em;
flex-shrink: 0;
}
.ft-line {
flex: 1;
position: relative;
height: 22px; /* v8.6.2 — más aire para el avión emoji */
display: flex;
align-items: center;
min-width: 60px;
/* v9.2 · margin lateral para que el avión/check en posiciones extremas
(0% scheduled, 100% landed) no queden pegados a los códigos IATA.
Suma 8px al gap del flex parent (space-3 = 12px) → 20px total de aire
entre IATA y el icono cuando está en el borde. */
margin: 0 8px;
}
.ft-line::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 0;
border-top: 1.5px dashed var(--border-strong);
transform: translateY(-50%);
}
.ft-progress {
position: absolute;
top: 50%;
left: 0;
height: 1.5px;
background: var(--accent);
transform: translateY(-50%);
transition: width 0.5s ease;
z-index: 1;
}
.ft-plane {
position: absolute;
top: 50%;
/* v8.6.6 — el rotate del emoji vive en .ft-plane-emoji (hijo) para que
el SVG circle-check del estado landed no herede la rotación. */
transform: translate(-50%, -50%);
background: transparent;
padding: 0;
z-index: 2;
font-size: 1rem;
color: var(--accent);
transition: left 0.5s ease, color 0.3s ease;
line-height: 1;
}
/* v8.6.6 — emoji ✈️ rotado 45° para apuntar horizontal hacia destino */
.ft-plane-emoji,
.ft-detail-plane .ft-plane-emoji {
display: inline-block;
transform: rotate(45deg);
line-height: 1;
}
/* v8.6.7 — SVG circle-check para estado landed: círculo relleno con
--success + check en color contrastante (blanco en light, dark en dark).
Sin outlines · alta legibilidad sobre el bg de la day card. */
.ft-plane-check {
width: 1.25em;
height: 1.25em;
display: block;
}
.ft-plane-check-bg {
fill: var(--success);
stroke: none;
}
.ft-plane-check-tick {
stroke: #fff;
}
:root[data-theme="dark"] .ft-plane-check-tick {
stroke: #0a0a0a;
}
.flight-tracker.landed-recent .ft-plane,
.flight-tracker.landed .ft-plane { color: var(--success); }
.flight-tracker.landed-recent .ft-line::before,
.flight-tracker.landed .ft-line::before {
border-top-style: solid;
border-top-color: var(--accent);
opacity: 0.4;
}
.ft-status {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.flight-tracker.landed-recent .ft-status,
.flight-tracker.landed .ft-status { color: var(--success); }
.flight-tracker.flying .ft-status {
animation: pulse-status 2s ease-in-out infinite;
}
@keyframes pulse-status {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.ft-toggle-hint {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: var(--space-1);
width: 14px;
height: 14px;
}
.ft-toggle-hint svg {
width: 14px;
height: 14px;
display: block;
}
.flight-tracker.expanded .ft-toggle-hint { transform: rotate(180deg); }
/* v9.1 · Vista EXPANDIDA · misma estética letterpress (light: --bg) */
.flight-tracker-detail {
margin-top: var(--space-2);
padding: var(--space-4) var(--space-5);
background: var(--bg);
border: 1px solid var(--border-hairline);
border-radius: 2px;
animation: ft-expand 0.25s ease;
}
/* Dark mantiene bg-deep (carbón muy oscuro) sobre el cuero del card */
:root[data-theme="dark"] .flight-tracker-detail {
background: var(--bg-deep);
}
@keyframes ft-expand {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ft-detail-route {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 0.5px solid var(--border);
}
.ft-detail-airport {
text-align: center;
flex-shrink: 0;
min-width: 64px;
}
.ft-detail-iata {
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.05em;
line-height: 1;
}
.ft-detail-name {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--text-soft);
margin-top: 0.2rem;
}
.ft-detail-time {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-top: 0.3rem;
}
.ft-detail-line {
flex: 1;
position: relative;
height: 28px; /* v8.6.2 — más aire para el avión emoji */
display: flex;
align-items: center;
min-width: 80px;
/* v9.2 · margin lateral para que el avión/check en extremos no queden
pegados a los blocks de IATA/Santiago/Heathrow. */
margin: 0 12px;
}
.ft-detail-line::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 0;
border-top: 1.5px dashed var(--border-strong);
transform: translateY(-50%);
}
.ft-detail-progress {
position: absolute;
top: 50%;
left: 0;
height: 1.5px;
background: var(--accent);
transform: translateY(-50%);
transition: width 0.5s ease;
z-index: 1;
}
.ft-detail-plane {
position: absolute;
top: 50%;
/* v8.6.6 — translate solo aquí · rotate del emoji vive en .ft-plane-emoji */
transform: translate(-50%, -50%);
background: transparent;
padding: 0;
z-index: 2;
font-size: 1.25rem;
color: var(--accent);
transition: left 0.5s ease, color 0.3s ease;
line-height: 1;
}
.flight-tracker.landed-recent .ft-detail-plane,
.flight-tracker.landed .ft-detail-plane { color: var(--success); }
.ft-detail-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.ft-detail-status-label {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
font-weight: 500;
display: block;
}
.flight-tracker.landed-recent .ft-detail-status-label,
.flight-tracker.landed .ft-detail-status-label { color: var(--success); }
.ft-detail-status-sublabel {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-top: 0.15rem;
display: block;
}
.ft-external-link {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-soft);
text-decoration: none;
padding: 0.4rem 0.7rem;
border: 0.5px solid var(--border-strong);
border-radius: var(--radius-sm);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
white-space: nowrap;
}
.ft-external-link:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-bg);
}
/* v8.6 — prefers-reduced-motion: cortar pulso del status y transiciones */
@media (prefers-reduced-motion: reduce) {
.flight-tracker.flying .ft-status { animation: none; }
.ft-progress, .ft-detail-progress,
.ft-plane, .ft-detail-plane,
.ft-toggle-hint { transition: none; }
.flight-tracker-detail { animation: none; }
}
/* ============================================ */
/* v8.7 · INSTAGRAM BLOCK */
/* ============================================ */
/* v9.0 · IG block · vive antes del site-footer como cierre/CTA. Reskineado
con bg-elevated + hairlines + label en brass uppercase. Mantiene el
gradiente Instagram nativo cuando algún handle tiene historias. */
.ig-block {
margin: var(--space-7) auto var(--space-5);
padding: var(--space-4) var(--space-5);
max-width: 720px;
border-radius: 2px;
background: var(--bg-elevated);
border-top: 1px solid var(--border-hairline);
border-bottom: 1px solid var(--border-hairline);
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Estado activo · al menos uno tiene historias hoy */
.ig-block[data-active="true"] {
background: linear-gradient(135deg,
rgba(225, 48, 108, 0.04) 0%,
rgba(247, 119, 55, 0.04) 100%);
border-color: rgba(225, 48, 108, 0.25);
}
:root[data-theme="dark"] .ig-block[data-active="true"] {
background: linear-gradient(135deg,
rgba(225, 48, 108, 0.08) 0%,
rgba(247, 119, 55, 0.08) 100%);
border-color: rgba(225, 48, 108, 0.3);
}
.ig-block-label {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brass);
}
.ig-links-row {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.ig-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
/* v8.7 — min-height fijo para que el botón mantenga el mismo alto entre
estados (default vs has-stories). Sin esto, el wrap del logo crecía de
20px a 24px y el flex estiraba la pill, generando filas irregulares. */
min-height: 2.25rem;
/* Left padding generoso para que el logo no quede pegado al borde de
la pill (sobre todo en estado default, sin anillo). */
padding: 0.25rem 0.85rem 0.25rem 0.6rem;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-soft);
text-decoration: none;
background: var(--bg-elevated);
border: 0.5px solid var(--border);
border-radius: 999px;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ig-link:hover {
border-color: #c13584;
color: #c13584;
}
/* v8.7 — focus ring consistente con el resto del sitio (.photo-thumb,
.flight-tracker-slim, .place-photo-thumb usan el mismo pattern). */
.ig-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* v9.1.1 · IG ring + halo pulse — rediseño
Wrap base 28px (era 24px) para que el anillo conic de 2.5px no se
coma el área del logo. El logo sigue en 16px (sin cambio): respira
más adentro del anillo, como en Instagram nativo. */
.ig-logo-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
position: relative;
border-radius: 50%;
}
.ig-logo {
width: 16px;
height: 16px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
/* Estado activo individual · pill border + texto coral cuando hay historias */
.ig-link.has-stories {
border-color: rgba(225, 48, 108, 0.45);
color: #c13584;
}
:root[data-theme="dark"] .ig-link.has-stories {
color: #e89ac5;
}
/* v9.1.1 · Anillo conic con disco interior fijo (ya NO escala con pulse).
- padding 2.5px: aumenta el grosor del anillo visible (era 2px).
- from 215deg: alinea el degradé Instagram con la convención nativa
(warm naranja arriba-izquierda, púrpura abajo-derecha).
- stop final repetido en 100%: cierra el círculo sin costura visible
entre #f09433 (start) y #bc1888 (end). Antes había un "salto" del
púrpura al naranja porque conic-gradient no cierra solo. */
.ig-link.has-stories .ig-logo-wrap {
padding: 2.5px;
background: conic-gradient(
from 215deg,
#f09433 0%,
#e6683c 18%,
#dc2743 40%,
#cc2366 65%,
#bc1888 85%,
#f09433 100%
);
}
/* Disco interior del color de la pill · sella la unión visual del anillo
con el bg de la pill (no del bg-elevated del card, que difiere). */
.ig-link.has-stories .ig-logo-wrap::before {
content: '';
position: absolute;
inset: 2.5px;
background: var(--bg-elevated);
border-radius: 50%;
z-index: 1;
}
/* v9.1.1 · Halo pulse · ::after que se expande hacia afuera y se desvanece.
ANTES escalaba el wrap entero (incluyendo logo y anillo, que se sentía
como "globo inflándose"). Ahora el wrap queda fijo y solo el halo
emana, tipo Apple Watch ping. */
.ig-link.has-stories .ig-logo-wrap::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(220, 39, 67, 0.5);
pointer-events: none;
animation: ig-ring-pulse 2.6s ease-out infinite;
}
@keyframes ig-ring-pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
85% {
opacity: 0;
}
100% {
transform: scale(1.55);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ig-link.has-stories .ig-logo-wrap::after { animation: none; opacity: 0; }
}
/* v8.7 — dentro del showcase del demo el bloque se renderea stacked
dentro de .ft-showcase-state. Reset del margin/max-width que el live
usa como cierre del journey · acá no aplica. */
.ft-showcase-state .ig-block {
margin: 0;
max-width: none;
}
@media (max-width: 480px) {
.ig-block {
padding: var(--space-3);
gap: var(--space-2);
}
.ig-block-label {
width: 100%;
margin-bottom: 0.1rem;
}
.ig-link {
font-size: 0.75rem;
padding: 0.3rem 0.75rem 0.3rem 0.5rem;
/* v8.7 — alto consistente Y touch target ≥ 40px (cerca de WCAG 2.5.5).
Antes era 2rem (32px), por debajo del recomendado para mobile thumbs. */
min-height: 2.5rem;
}
/* v9.1.1 · wrap y logo escalan proporcionalmente en mobile.
Wrap 26px (era 22px) para que el anillo conic de 2.5px no se vea
diminuto. Logo se mantiene en 14px. */
.ig-logo-wrap { width: 26px; height: 26px; }
.ig-logo { width: 14px; height: 14px; }
}
/* ============================================ */
/* v9.7 · MINI IG BLOCK · footer por day-card */
/* ============================================ */
/* Versión mínima del bloque IG global: vive al final de cada day-card
para que los visitantes accedan a los IG sin scrollear al final del
sitio. Sin label "También en", sin card background, sin pill border.
Comparte el estado has-stories con el bloque global via data-handle. */
.day-ig-row {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 0.5px solid var(--border-hairline);
}
.day-ig-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.day-ig-link:hover { color: #c13584; }
:root[data-theme="dark"] .day-ig-link:hover { color: #e89ac5; }
.day-ig-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
.day-ig-link .day-ig-logo-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
position: relative;
border-radius: 50%;
flex-shrink: 0;
}
.day-ig-link .day-ig-logo {
width: 13px;
height: 13px;
position: relative;
z-index: 2;
flex-shrink: 0;
}
/* Has-stories: anillo gradient Instagram + halo pulse (igual que el bloque
global pero más chico). */
.day-ig-link.has-stories { color: #c13584; }
:root[data-theme="dark"] .day-ig-link.has-stories { color: #e89ac5; }
.day-ig-link.has-stories .day-ig-logo-wrap {
padding: 2px;
background: conic-gradient(
from 215deg,
#f09433 0%,
#e6683c 18%,
#dc2743 40%,
#cc2366 65%,
#bc1888 85%,
#f09433 100%
);
}
.day-ig-link.has-stories .day-ig-logo-wrap::before {
content: '';
position: absolute;
inset: 2px;
background: var(--bg-elevated);
border-radius: 50%;
z-index: 1;
}
.day-ig-link.has-stories .day-ig-logo-wrap::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(220, 39, 67, 0.5);
pointer-events: none;
animation: ig-ring-pulse 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.day-ig-link.has-stories .day-ig-logo-wrap::after { animation: none; opacity: 0; }
}
@media (max-width: 480px) {
.day-ig-row { gap: var(--space-4); }
.day-ig-link { font-size: 0.65rem; }
}
/* === v8.6.5 · Showcase de estados (solo ?preview=demo) === */
.ft-showcase {
margin: 0 0 var(--space-8);
padding: var(--space-6);
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elevated);
}
.ft-showcase-header {
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 0.5px dashed var(--border);
}
.ft-showcase-title {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 500;
margin: 0 0 var(--space-2);
color: var(--text);
}
.ft-showcase-intro {
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-soft);
margin: 0;
max-width: 65ch;
}
.ft-showcase-state {
margin-bottom: var(--space-5);
}
.ft-showcase-state:last-child { margin-bottom: 0; }
.ft-showcase-label {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-2);
}
.ft-showcase-name {
color: var(--accent);
font-weight: 500;
}
.ft-showcase-sub {
text-transform: none;
letter-spacing: 0.05em;
font-family: var(--font-display);
font-style: italic;
color: var(--text-soft);
font-size: 0.78rem;
}
/* En showcase el detail debe arrancar colapsado igual que el slim normal */
.ft-showcase .flight-tracker-detail { /* sin override */ }
/* === Mobile (480px y abajo) === */
@media (max-width: 480px) {
.ft-showcase { padding: var(--space-4); }
.ft-showcase-title { font-size: 1.3rem; }
/* v9.2 · slim queda en UNA línea en mobile · ANTES wrappeaba con
ft-status width: 100% lo que rompía visualmente el card. Ahora:
ft-line se achica más, fuentes bajan, ft-status queda inline. */
.flight-tracker-slim {
gap: var(--space-2);
padding: var(--space-3);
}
.ft-airport { font-size: 0.72rem; letter-spacing: 0.05em; }
.ft-status {
font-size: 0.55rem;
letter-spacing: 0.1em;
}
.ft-line { min-width: 30px; }
.ft-detail-route {
flex-direction: column;
gap: var(--space-3);
}
.ft-detail-line {
width: 100%;
min-width: 0;
}
.ft-detail-footer {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.ft-external-link { text-align: center; }
}
/* ==========================================================================
v9.3 · Status bar pinned al top con gradient fade
Mismo patrón que .save-footer del admin (linear-gradient sin
backdrop-filter), invertido porque acá el sticky es top: el bg queda
opaco arriba y se desvanece a transparent abajo, así el contenido
que scrollea por debajo se funde naturalmente con el fondo.
========================================================================== */
.status-bar {
position: sticky;
top: 0;
z-index: 50;
/* Full-bleed: el gradient cubre todo el ancho del viewport. Las pills
siguen centradas vía justify-content: center heredado. */
max-width: none;
margin: 0 0 var(--space-5);
/* Más padding bottom: le da aire al fade del gradient. */
padding: var(--space-4) var(--space-5) var(--space-6);
/* Sin bordes ni blur: el gradient da toda la integración visual. */
border-top: none;
border-bottom: none;
background: linear-gradient(
to bottom,
var(--bg) 0%,
var(--bg) 55%,
transparent 100%
);
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* El espacio transparente inferior no debe bloquear clicks; solo las
pills (hijos directos) reciben pointer events. */
pointer-events: none;
}
.status-bar > * { pointer-events: auto; }
@media (max-width: 640px) {
.status-bar {
padding: var(--space-3) var(--space-4) var(--space-5);
margin: 0 0 var(--space-4);
}
}
/* ==========================================================================
v9.5 · Badge "Actualizado" en day-card eyebrow
Aparece inline después de "DÍA NN · DOM 30 may" cuando un día publicado
recibió ediciones posteriores. Sutil pero notorio: usa --success (verde
editorial) con dot pulsante para captar la mirada sin gritar. Auto-decae
tras 7 días vía JS (shouldShowUpdatedBadge en journey/index.html).
========================================================================== */
.day-updated-badge {
display: inline-flex;
align-items: center;
gap: 0.42em;
margin-left: 0.45em;
/* Hereda font-family, font-size y letter-spacing del eyebrow para
mantener el ritmo tipográfico editorial. */
color: var(--success);
font-weight: 500;
}
.day-updated-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
display: inline-block;
flex-shrink: 0;
animation: day-updated-pulse 2.4s ease-in-out infinite;
}
/* Halo pulsante alrededor del dot · sutil, captura la mirada en
peripheral vision sin distraer. */
@keyframes day-updated-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.day-updated-dot { animation: none; }
}
/* ============================================================
v9.6 — Sub-días dentro del article (solo d02 y d05).
Cada sub-día renderiza como una sub-sección con un separador
sutil (línea + fecha mono brass uppercase), notas más livianas
que el body principal (tono ligeramente más suave, sin drop
cap), y pull-quote más chico. Las fotos usan el mismo
.photo-grid pero con un margin top sutil propio.
============================================================ */
.subdays-section {
margin-top: 2rem;
}
.subday-block {
margin-bottom: 2rem;
/* v9.11 — offset para que la ancla (#subday-FECHA, desde los day-chips) no
quede tapada por el hero/status-bar sticky (ambos top:0, z-index 50). */
scroll-margin-top: 96px;
}
.subday-block:last-child {
margin-bottom: 0;
}
/* v9.11 — el divisor de sub-día sin agrupar en card: el mismo separador
centrado, pero pasa de línea fina a un bloque con relleno claro y sutil
(no fuerte) y más margen arriba/abajo para darle aire y separar los días. */
.subday-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 0.9rem;
margin: 3rem 0 1.75rem;
}
/* Líneas a los lados que llegan a los bordes del artículo (flex: 1, sin tope),
flanqueando el bloque relleno del centro para que el divisor se note más. */
.subday-separator-line {
flex: 1;
height: 1px;
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.subday-separator-date {
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
background: color-mix(in srgb, var(--accent) 9%, var(--paper));
padding: 0.5rem 1.1rem;
border-radius: var(--radius-md);
}
/* Body del sub-día · misma familia/estilo que .day-notes pero un punto
más chico y con color ligeramente más suave. Sin drop cap (ese efecto
queda reservado al primer párrafo del nivel semana). */
.subday-body {
font-family: var(--font-read);
font-size: 1.1rem;
line-height: 1.65;
font-style: normal;
color: var(--ink-soft, var(--text-soft));
margin-bottom: 1rem;
}
.subday-body > p:first-child::first-letter {
font-size: inherit;
font-weight: inherit;
float: none;
margin: 0;
color: inherit;
line-height: inherit;
}
.subday-body p { margin: 0 0 0.85rem; }
.subday-body p:last-child { margin-bottom: 0; }
/* Pull quote de sub-día · más chico que el principal para no robarle
protagonismo a la cita del nivel semana. */
.subday-pull-quote {
font-size: 1.15rem;
margin: 1.25rem auto;
padding: 0.75rem 1.25rem;
}
.subday-photo-grid {
margin: 1rem 0 !important;
}
@media (max-width: 600px) {
.subday-separator { margin: 2.25rem 0 1.5rem; }
.subday-separator-date {
font-size: 0.68rem;
letter-spacing: 0.18em;
padding: 0.45rem 0.95rem;
}
.subday-body { font-size: 1.05rem; }
}
/* ==========================================================================
v9.16 · AUTORÍA POR AUTOR (tratamiento C: dots + chip)
Render en uk/journey/index.html (renderAuthoredNotes). Tokens --author-*
arriba. Cuando un día/sub-día no tiene autores conocidos (todo 'legacy'),
el renderer emite prosa plana sin estas clases → se ve igual que siempre.
========================================================================== */
/* v9.16 — "Escrito por:" queda como label suelto (sin borde); el pill/tag
envuelve a cada autor por separado (avatar + nombre). */
.author-summary-chip {
display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-soft);
margin: 0 0 1rem;
}
.author-summary-name {
display: inline-flex; align-items: center; gap: 0.35rem;
background: none; font: inherit; cursor: pointer;
text-transform: none; letter-spacing: normal;
border: 1px solid var(--border-strong); border-radius: 999px;
padding: 0.28rem 0.6rem 0.28rem 0.4rem;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.author-summary-name[data-author="javo"] { color: var(--author-javo); }
.author-summary-name[data-author="cami"] { color: var(--author-cami); }
/* Selected = filled como el disco/avatar fallback: color sólido del autor +
texto blanco (en vez del underline). */
.author-summary-name[aria-pressed="true"] { color: #fff; border-color: transparent; }
.author-summary-name[data-author="javo"][aria-pressed="true"] { background-color: var(--author-javo); }
.author-summary-name[data-author="cami"][aria-pressed="true"] { background-color: var(--author-cami); }
.chip-av {
display: inline-flex; width: 1rem; height: 1rem; border-radius: 999px;
align-items: center; justify-content: center; font-family: var(--font-mono);
font-size: 0.55rem; color: #fff; overflow: hidden; text-decoration: none;
background-size: cover; background-position: center;
}
/* background-color (no shorthand): el shorthand reseteaba background-size/
position y la foto subida quedaba a tamaño natural, descentrada (v9.16 fix). */
.chip-av[data-author="javo"] { background-color: var(--author-javo); }
.chip-av[data-author="cami"] { background-color: var(--author-cami); }
.author-dot {
display: inline-flex; width: 1.2rem; height: 1.2rem; border-radius: 999px;
align-items: center; justify-content: center; font-family: var(--font-mono);
font-size: 0.6rem; color: #fff; vertical-align: -0.14em; margin-right: 0.45rem;
text-decoration: none; border: 0; overflow: hidden;
background-size: cover; background-position: center;
}
.author-dot[data-author="javo"] { background-color: var(--author-javo); }
.author-dot[data-author="cami"] { background-color: var(--author-cami); }
.author-dot.has-img { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
/* Highlight de los párrafos de un autor al hover/tap de su nombre en el chip */
.day-notes.dots p, .subday-body.dots p {
transition: opacity 0.2s ease, background 0.2s ease;
padding: 0.05rem 0.3rem; margin-left: -0.3rem; border-radius: 4px;
}
/* El 1er párrafo del cuerpo principal queda flush: si no, el -0.3rem corre el
drop cap fuera de la columna y desalinea los días con autoría vs los planos. */
.day-notes.dots > p:first-of-type { margin-left: 0; padding-left: 0; }
.day-notes.dots.hl-javo p[data-author="cami"], .day-notes.dots.hl-javo p[data-author="legacy"],
.day-notes.dots.hl-cami p[data-author="javo"], .day-notes.dots.hl-cami p[data-author="legacy"],
.subday-body.dots.hl-javo p[data-author="cami"], .subday-body.dots.hl-javo p[data-author="legacy"],
.subday-body.dots.hl-cami p[data-author="javo"], .subday-body.dots.hl-cami p[data-author="legacy"] { opacity: 0.4; }
.day-notes.dots.hl-javo p[data-author="javo"], .subday-body.dots.hl-javo p[data-author="javo"] { background: var(--author-javo-bg); }
.day-notes.dots.hl-cami p[data-author="cami"], .subday-body.dots.hl-cami p[data-author="cami"] { background: var(--author-cami-bg); }
/* v9.16 — disuadir el guardado casual de fotos: bloquea el arrastrar y el
menú long-press de iOS/Android. El clic derecho lo cancela el JS (delegado
sobre ). NO impide screenshots ni DevTools. Los avatares usan
background-image, así que esto solo afecta a las fotos y al lightbox. */
img {
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
}
/* v9.16 — Scroll-to-top FAB (igual al de uk/index.html). Aparece tras
scrollear; z-index 150 queda por debajo del lightbox (999). */
.scroll-top-fab {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent);
color: #fff;
border: 1px solid var(--accent-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 150;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
opacity: 0;
pointer-events: none;
padding: 0;
}
.scroll-top-fab.is-visible { opacity: 1; pointer-events: auto; }
/* En dark --accent es coral claro: el chevron blanco quedaba con poco contraste.
Lo oscurecemos (icono oscuro sobre coral) para que se lea bien. */
:root[data-theme="dark"] .scroll-top-fab { color: var(--bg); }
.scroll-top-fab:hover { background: var(--accent-soft); transform: translateY(-2px); }
.scroll-top-fab:active { transform: translateY(0) scale(0.95); }
.scroll-top-fab svg {
width: 22px; height: 22px;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 600px) {
.scroll-top-fab { bottom: 1.25rem; right: 1rem; width: 44px; height: 44px; }
}