@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');
/* IM Fell English (itálica): solo la cabecera de página de las lecturas
   FICTICIAS, que son minoría. display=swap para no bloquear el render. */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@1&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #1a1a18; --forest: #1a3a2a; --forest-mid: #0f6e56;
  --teal: #1d9e75; --teal-light: #9fd9c0;
  --cream: #f5f0e8; --cream-dark: #ede6d8; --parchment: #faf7f2;
  --muted: #9a948d; --route: #e8593c;
  --white: #ffffff; --paper: #f7f5f1; --line: #ece8e1;
  /* Naranja de destinos ficticios. Reservado en exclusiva para eso (ver
     CLAUDE.md); de momento solo lo usa la tarjeta de destino de comunidad,
     el resto del proyecto sigue con el literal #e8913c. */
  --fiction: #e8913c;
}
html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--white); }
.app { display: grid; grid-template-columns: 380px 1fr; height: 100vh; }

/* SIDEBAR */
.sidebar { background: var(--white); display: flex; flex-direction: column; height: 100vh; border-right: 0.5px solid var(--line); overflow: hidden; z-index: 10; }
.sidebar-header { background: var(--white); padding: 1.5rem 1.75rem 1rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; }
.logo { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.logo em { color: var(--teal); font-style: italic; }
.tagline { display: none; }
.stats-bar { background: var(--white); padding: 0 1.75rem 1rem; display: flex; gap: 0; flex-shrink: 0; border-bottom: 0.5px solid var(--line); }
.stat { flex: 1; padding: 0.6rem 0; border-left: 0.5px solid var(--line); padding-left: 0.85rem; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-val { font-size: 1.25rem; font-weight: 600; color: var(--ink); font-family: 'Inter', sans-serif; letter-spacing: -0.02em; line-height: 1; }
.stat-label { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.3rem; }
.sidebar-body { display: none; }

/* ORIGIN */
.origin-input-wrap { display: none; margin: 0.15rem 0 0.6rem; gap: 0.5rem; padding-left: 1.6rem; }
.origin-input-wrap.visible { display: flex; }
/* De texto, no sólido: el CTA es el único bloque teal de la pantalla. */
.origin-ok { flex-shrink: 0; padding: 0.4rem 0.7rem; background: none; color: var(--teal); border: 1px solid var(--teal); border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.78rem; cursor: pointer; }
.origin-ok:disabled { opacity: 0.55; cursor: default; }

/* FORM */
.section-title { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.6rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.section-title::after { content: ''; flex: 1; height: 0.5px; background: var(--line); }
input, textarea, select { width: 100%; padding: 0.55rem 0.75rem; border: 0.5px solid var(--line); border-radius: 6px; background: var(--white); font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--ink); transition: border-color 0.15s; outline: none; margin-bottom: 0.55rem; }
input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(29,158,117,0.1); }
input::placeholder, textarea::placeholder { color: #c4bfb8; }
textarea { resize: none; line-height: 1.5; }
input[type="date"] { width: auto; padding: 0.3rem 0.5rem; font-size: 0.78rem; margin-bottom: 0; }

/* FILAS DE CAMPO — el invariante del spotlight
   El recuadro del onboarding se dibuja sobre el rect de la fila. Todas
   llevan el MISMO padding vertical, simétrico, así que todos los recuadros
   guardan idéntica relación con su contenido por construcción y el motor no
   necesita offsets por paso.
   Dos reglas que sostienen el invariante y conviene no romper:
     · la separación entre campos va en el margin, que queda fuera del rect;
     · el filete inferior vive aquí, nunca en el input. */
/* COMPENSACIÓN ÓPTICA POR TIPOGRAFÍA
   El recuadro del onboarding se dibuja sobre el rect de la fila, pero lo que
   se ve es el TEXTO, y cada fuente se sienta a distinta altura dentro de su
   caja de línea. Con padding igual, el hueco óptico sale distinto.
   `text-box-trim` resolvería esto de raíz, pero NO aplica a controles de
   formulario (comprobado: recorta un div, no toca input ni textarea) y tres
   de las cuatro filas lo son. Así que se compensa con la métrica real.

   Para una caja de línea de altura L:
     desfase superior = (L − (asc + desc)) / 2 + (asc − alturaDeMayúscula)
     desfase inferior = (L − (asc + desc)) / 2 + desc

   Valores medidos con canvas TextMetrics sobre las fuentes ya cargadas, con
   L = 24px. Salen del archivo de fuente, no del motor, así que no cambian
   entre navegadores. Si se toca el cuerpo o la familia de un campo, ESTOS
   NÚMEROS DEJAN DE VALER: hay que volver a medirlos.
   El `line-height: 24px` es parte del cálculo, no decoración: no quitarlo. */
:root {
  --optica-gap: 12px;            /* distancia óptica objetivo, igual en las cuatro filas */
  --optica-top-serif-18: 5.04px; /* Instrument Serif itálica 18px */
  --optica-bot-serif-18: 6px;
  --optica-top-inter-15: 6.59px; /* Inter 15px — título y notas */
  --optica-bot-inter-15: 6.5px;
  --optica-top-inter-13: 7.54px; /* Inter 13px — meta-línea */
  --optica-bot-inter-13: 7px;
}
.field-row {
  position: relative;
  line-height: 24px;
  border-bottom: 1px solid var(--line);
  padding-top: calc(var(--optica-gap) - var(--optica-top));
  /* el filete cuenta: 2px en el destino, 1px en los demás, 0 en la meta */
  padding-bottom: calc(var(--optica-gap) - var(--optica-bot) - var(--optica-borde));
}
#row-destination { --optica-top: var(--optica-top-serif-18); --optica-bot: var(--optica-bot-serif-18); --optica-borde: 2px; }
#row-book, #row-note { --optica-top: var(--optica-top-inter-15); --optica-bot: var(--optica-bot-inter-15); --optica-borde: 1px; }
#row-meta { --optica-top: var(--optica-top-inter-13); --optica-bot: var(--optica-bot-inter-13); --optica-borde: 0px; }
#destination, #book-title, #book-note, .meta-line { line-height: 24px; }
.field-row + .field-row { margin-top: 20px; }
.field-row:focus-within { border-bottom-color: var(--teal); }
/* El único filete grueso del formulario: marca el campo que define el
   producto. Va en la fila, como el resto. */
#row-destination { border-bottom: 2px solid var(--teal); }
/* La meta-línea no lleva filete. */
.field-row-plain { border-bottom: none; }
/* position:relative sube a la fila para que el desplegable del
   autocompletado se ancle a la LÍNEA y no al input: si se queda en el
   wrapper, abre por encima del filete. */
.book-input-wrap { position: static; }

/* DESTINO PROTAGONISTA — sin etiqueta: el tamaño y el serif marcan la
   jerarquía. La línea inferior es de 2px (el resto de campos, 1px): es lo
   que lo señala como el campo que define el producto. */
/* 18px y no 16: a 16px la altura de x de Instrument Serif iguala la de Inter
   a 15px (8,3 frente a 8,2), y el destino se leía subordinado al título.
   Ver espec §4. */
#destination { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; padding: 0; border: none; border-radius: 0; margin-bottom: 0; color: var(--ink); }
/* El ✦ del placeholder es deliberado (ver espec §4): es la puerta de entrada
   que enseña que se puede escribir un lugar inventado. Fuera del placeholder
   el símbolo sigue reservado a destinos ficticios. */
#destination::placeholder { color: #c4bfb8; font-style: italic; }
#destination:focus { box-shadow: none; }

/* CAMPOS DEL FORM — mismo lenguaje de línea inferior */
#book-title, #book-note, #origin-input, #dep-other-input {
  border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 0.5rem 0; background: transparent;
}
#book-title:focus, #book-note:focus, #origin-input:focus, #dep-other-input:focus {
  box-shadow: none; border-bottom-color: var(--teal);
}
/* Ni padding ni filete: los dos viven en .field-row. El box-shadow:none de
   la regla de foco de arriba SÍ tiene que sobrevivir, o el input:focus
   global devuelve el halo teal alrededor del campo. */
#book-title, #book-note { font-size: 15px; padding: 0; border-bottom: none; }
#book-title::placeholder, #book-note::placeholder { color: #b8b2ab; }
/* Una línea en reposo; crece al escribir (autoGrowNote en entries.js).
   El hueco muerto de la caja fija era lo que hacía que el placeholder de
   una línea dentro de tres se leyera raro. */
#book-note { resize: none; overflow: hidden; }

/* NOTAS
   La línea inferior vive en .field-row, no en el textarea. */
.note-row { display: flex; align-items: baseline; }
.note-row #book-note { flex: 1; border-bottom: none; margin-bottom: 0; }

/* MARCA DE CAMPO OBLIGATORIO
   Un asterisco a la derecha de la fila, en el mismo hueco que ocupaba la
   marca «opcional». Se marcan los obligatorios (destino y título) y no el
   opcional: marcar los dos sería redundante. No va en la meta-línea — su
   estado vacío ya dice qué hacer.
   Persiste con el campo vacío o relleno: informa de qué hace falta, no del
   estado en que está.

   El margen negativo compensa la línea base, igual que hacía la marca
   anterior. Con align-items:baseline, dos cuerpos distintos dentro de la
   misma caja de 24px se sientan a distinta altura, y alinearlos estira la
   fila y descuadra el borde inferior del recuadro del onboarding.
     línea base = (24 − (asc + desc)) / 2 + asc
       Inter 15px            → (24 − 19)/2 + 15 = 17,5   (asterisco y título)
       Instrument Serif 18px → (24 − 24)/2 + 18 = 18     (destino)
   El asterisco iguala al título sin compensar; contra el destino le faltan
   0,5px. SI CAMBIA EL CUERPO DEL ASTERISCO O EL DE UN CAMPO, RECALCULAR. */
.field-line { display: flex; align-items: baseline; gap: 0.75rem; }
.field-line .book-input-wrap { flex: 1; }
.field-line > input { flex: 1; }
.req { flex-shrink: 0; font-size: 15px; line-height: 24px; color: var(--teal); transition: font-weight 0.12s; }
/* Compensación de línea base, una por pareja. El asterisco (Inter 15px) tiene
   la suya a 17,5px de su caja de 24; el margen lo desplaza hasta la del
   vecino, para que alinear no estire la fila y descuadre el recuadro del
   onboarding.
     destino   Instrument Serif 18px → 18,0  ·  baja 0,5
     título    Inter 15px            → 17,5  ·  coincide, no lleva nada
     origen    .meta-item            → 19,0  ·  baja 1,5

   OJO con el de origen: NO son los 17,0 del texto del enlace. `.meta-item` es
   un inline-flex cuyo primer hijo es el SVG del marcador, y un elemento
   reemplazado sin línea base propia aporta como tal su borde inferior. Con el
   icono de 14px centrado en la caja de 24, ese borde cae a (24+14)/2 = 19.
   Medido por barrido: 1,5px es el único valor que devuelve la línea a 24,00px
   exactos. Si cambia el TAMAÑO DEL ICONO o el cuerpo del asterisco, recalcular. */
#row-destination .req { margin-top: 0.5px; margin-bottom: -0.5px; }
#req-origin { margin-top: 1.5px; margin-bottom: -1.5px; }
/* Al pulsar el CTA con el campo vacío: sin texto, sin color nuevo, sin
   alert. Solo el asterisco engorda ~1,5s (ver pulseRequired en entries.js). */
.req.pulse { font-weight: 600; }

/* AUTOCOMPLETE */
.book-input-wrap { margin-bottom: 0; }
.book-input-wrap input { margin-bottom: 0; }
.ac-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: white; border: 1px solid var(--cream-dark); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 9999; overflow: hidden; display: none; }
.ac-dropdown.visible { display: block; }
.ac-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--cream-dark); transition: background 0.1s; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--parchment); }
.ac-cover { width: 32px; height: 44px; object-fit: cover; border-radius: 2px; flex-shrink: 0; background: var(--cream-dark); }
.ac-cover-placeholder { width: 32px; height: 44px; flex-shrink: 0; background: var(--cream-dark); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--muted); }
.ac-title { font-family: 'Instrument Serif', serif; font-size: 0.85rem; font-style: italic; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-author { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.ac-loading { padding: 0.75rem; text-align: center; font-size: 0.78rem; color: var(--muted); }

/* META-LÍNEA — el único sitio donde se menciona el origen */
/* Sin padding propio: el de la fila es el que cuenta para el recuadro. */
.meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 13px; color: var(--muted); }
/* baseline solo en el estado vacío, para sentar el asterisco en la línea del
   enlace. El estado lleno sigue centrado: ahí conviven iconos, texto y
   «editar», y centrarlos es lo correcto. */
.meta-line-empty { align-items: baseline; }
.meta-line-empty .req { margin-left: auto; }
.meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.meta-ico { width: 15px; height: 15px; flex-shrink: 0; }
/* El símbolo de origen es el marcador del mapa, no un icono de trazo: lleva
   sus colores dentro del SVG y no hereda currentColor. 14px para que su aro
   teal case con el texto de 13px sin pasarse del calendario, que es de 15.
   Idéntico en los dos estados de la meta-línea. */
.meta-ico-origen { width: 14px; height: 14px; }
.meta-val { color: var(--ink); font-weight: 500; }
.meta-sep { width: 1px; height: 13px; background: var(--line); }
/* margin-left:auto lo empuja a la derecha, y al partir en dos líneas en
   móvil estrecho cae solo al final sin romper la línea. */
/* line-height explícito en los dos botones: el navegador fuerza `normal` en
   <button> y eso NO hereda de .meta-line. Sin esto su caja mide 16,5px en vez
   de 24 y el símbolo de origen cambia de altura entre los dos estados de la
   meta-línea, que es justo lo que no debe pasar al fijar el origen. */
.meta-edit { margin-left: auto; font-size: 13px; line-height: 24px; color: var(--teal); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; padding: 0; cursor: pointer; font-family: 'Inter', sans-serif; }
.meta-set-origin { font-size: 13px; line-height: 24px; color: var(--teal); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; padding: 0; cursor: pointer; font-family: 'Inter', sans-serif; }

/* MICROTEXTO DE VALIDACIÓN
   Sin color de error: el rojo está reservado a "tus rutas". Si al verlo en
   uso el gris resulta insuficiente, añadir color es un cambio de minutos. */
/* Absoluto y anclado a la fila: así el microtexto cae en el hueco de abajo
   sin entrar en el rect del recuadro NI empujar la fila siguiente. Un
   elemento en flujo, aunque fuera hermano de .field-row, desplazaría todo
   lo que va debajo cada vez que se dispara. */
/* Ya NO se usa en el formulario: los campos obligatorios se marcan con el
   asterisco de .req. Sobrevive solo dentro del panel «editar», donde informa
   de fallos del geocodificador ("No encontré ese lugar") que el asterisco no
   cubre. En flujo normal, sin posición absoluta: dentro del panel no hay
   ningún rect de spotlight que respetar. */
.field-error { margin-top: 6px; font-size: 12px; line-height: 1.2; color: var(--muted); }
.field-error:empty { display: none; }

/* PANEL EDITAR — origen y fecha juntos */
.edit-panel { border-top: 1px solid var(--line); padding: 0.9rem 0 0.2rem; margin-top: 20px; margin-bottom: 1rem; animation: depSlide 0.22s ease; }
/* Únicas micro-etiquetas que sobreviven al rediseño: dentro del panel sí
   hay dos grupos que distinguir. */
.edit-panel-label { font-family: 'Instrument Serif', serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.edit-panel-label + .date-row { margin-bottom: 0.2rem; }
.dep-row { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; padding: 0.55rem 0.7rem; margin-bottom: 0.35rem; background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--ink); transition: border-color 0.15s; }
.dep-row:hover { border-color: var(--line); }
/* Seleccionada: borde y check. Sin fondo sólido — el CTA es el único. */
.dep-row.active { border-color: var(--teal); }
.dep-ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.dep-row-name { flex-shrink: 0; }
.dep-row-val { flex: 1; text-align: right; color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El subrayado va en el texto, no en la caja: si fuera borde, el flex lo
   estiraría de lado a lado. */
/* flex: 0 0 auto, NO flex: 1. Ahora convive con .dep-row-val —antes solo se
   veía uno de los dos— y con los dos a flex:1 se repartían el ancho a medias
   y la fila salía descuadrada. Encogido al texto, el nombre se queda el resto. */
.dep-row-define { flex: 0 0 auto; margin-left: 0.5rem; text-align: right; font-size: 0.78rem; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dep-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--teal); opacity: 0; margin-left: 0.35rem; }
.dep-row.active .dep-check { opacity: 1; }
.dep-other-wrap { padding-left: 1.6rem; margin-bottom: 0.7rem; animation: depSlide 0.22s ease; }
.dep-other-wrap #dep-other-input { margin: 0; }
@keyframes depSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* DATE ROW — dentro del panel */
.date-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; padding-left: 0.7rem; }
.date-input {
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500;
  color: var(--ink); background: none; border: none;
  border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 0 0 2px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%;
}
.date-input:hover { border-bottom-color: var(--teal); }
.date-input:focus { outline: none; border-bottom-color: var(--teal); }
.date-input::-webkit-calendar-picker-indicator { opacity: .45; padding-left: 4px; cursor: pointer; }
.date-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* ADD BUTTON */
/* Único bloque teal sólido del formulario. Si aparece un segundo, algo se
   ha colado: el CTA deja de ser el punto de mayor peso de la pantalla. */
.add-btn { width: 100%; margin-top: 20px; padding: 14px; background: var(--teal); color: white; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.add-btn:hover { background: var(--forest-mid); }
.add-btn:active { transform: scale(0.98); }

/* YEAR FILTER */
.year-filter { display: flex; margin-bottom: 0.75rem; border: 0.5px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.year-opt { flex: 1; padding: 0.4rem 0.3rem; font-size: 0.72rem; text-align: center; cursor: pointer; color: var(--muted); border: none; background: none; transition: all 0.15s; font-family: 'Inter', sans-serif; }
.year-opt:not(:last-child) { border-right: 0.5px solid var(--line); }
.year-opt.active { background: var(--teal); color: white; }

/* JOURNEY LIST */
.journey-list { display: flex; flex-direction: column; }
.journey-entry { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--cream-dark); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entry-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 4px; }
.entry-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--route); flex-shrink: 0; border: 2px solid white; box-shadow: 0 0 0 1.5px var(--route); }
.entry-dot.origin { background: var(--forest); box-shadow: 0 0 0 1.5px var(--forest); }
.entry-dot.fictional { background: #e8913c; box-shadow: 0 0 0 1.5px #e8913c; }
.entry-connector { flex: 1; width: 1.5px; background: linear-gradient(to bottom, var(--route), transparent); margin: 3px 0; min-height: 16px; }
.entry-content { flex: 1; min-width: 0; }
.entry-book { font-family: 'Inter', sans-serif; font-size: 0.78rem; color: var(--muted); font-style: italic; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.entry-route { font-size: 0.92rem; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-km { font-size: 0.7rem; color: var(--teal); font-weight: 500; margin-top: 2px; }
.entry-date { font-size: 0.68rem; color: var(--muted); margin-top: 1px; }
.entry-note { font-size: 0.72rem; color: var(--muted); font-style: italic; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-delete { background: none; border: none; cursor: pointer; color: #ccc; font-size: 0.75rem; padding: 2px 4px; align-self: flex-start; margin-top: 2px; transition: color 0.15s; flex-shrink: 0; }
.entry-delete:hover { color: #e06060; }
.entry-delete { font-size: 0.85rem; } /* iguala visualmente al ✏️: el glifo ✕ es más estrecho a igual font-size */
.entry-edit { background: none; border: none; cursor: pointer; color: #ccc; font-size: 0.75rem; padding: 2px 4px; align-self: flex-start; margin-top: 2px; transition: color 0.15s; flex-shrink: 0; }
.entry-edit:hover { color: var(--teal); }

/* EDICIÓN INLINE */
.entry-edit-form { margin-top: 0.6rem; background: var(--paper); border: 0.5px solid var(--line); border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.entry-edit-form input { border: 0.5px solid var(--line); border-radius: 5px; padding: 0.4rem 0.65rem; font-size: 0.78rem; font-family: 'Inter', sans-serif; color: var(--ink); background: var(--white); outline: none; width: 100%; }
.entry-edit-form input:focus { border-color: var(--teal); }
.entry-edit-actions { display: flex; gap: 0.5rem; }
.entry-edit-save { background: var(--teal); color: white; border: none; border-radius: 5px; padding: 0.4rem 0.85rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif; }
.entry-edit-cancel { background: none; border: 0.5px solid var(--line); border-radius: 5px; padding: 0.4rem 0.75rem; font-size: 0.75rem; color: var(--muted); cursor: pointer; font-family: 'Inter', sans-serif; }
.entry-edit-location { display: flex; gap: 0.4rem; }
.entry-edit-location input { flex: 1; }
.entry-edit-geo-btn { background: none; border: 0.5px solid var(--line); border-radius: 5px; padding: 0.4rem 0.65rem; font-size: 0.75rem; color: var(--muted); cursor: pointer; font-family: 'Inter', sans-serif; white-space: nowrap; flex-shrink: 0; }
.entry-edit-geo-btn:hover { border-color: var(--teal); color: var(--teal); }
.entry-edit-geo-status { font-size: 0.68rem; color: var(--muted); font-style: italic; margin-top: -0.2rem; min-height: 1em; }

.entry-edit-map-toggle {
  background: none; border: 1px dashed var(--line); border-radius: 6px;
  padding: 0.4rem 0.6rem; font-size: 0.72rem; color: var(--teal);
  font-family: 'Inter', sans-serif; cursor: pointer; text-align: left;
  margin-top: 0.4rem; align-self: flex-start;
}
.entry-edit-map-toggle:hover { background: rgba(29,158,117,0.06); }
.entry-edit-minimap { margin-top: 0.5rem; }
.entry-edit-minimap-canvas { width: 100%; height: 180px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.entry-edit-minimap-hint { font-size: 0.68rem; color: var(--muted); margin-top: 0.3rem; text-align: center; }
.confirm-delete { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; background: var(--white); border: 0.5px solid var(--line); border-radius: 8px; padding: 0.25rem 0.6rem; margin-left: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.confirm-delete span { color: var(--muted); }
.confirm-delete button { background: none; border: none; cursor: pointer; font-size: 0.7rem; font-family: 'Inter', sans-serif; padding: 0 0.25rem; transition: color 0.15s; }
.confirm-delete .confirm-yes { color: var(--route); font-weight: 600; }
.confirm-delete .confirm-no { color: var(--muted); }
.confirm-delete .confirm-no:hover { color: var(--ink); }
.empty-state { text-align: center; padding: 1.5rem 0.5rem; color: var(--muted); }
.empty-state .compass { font-size: 1.8rem; margin-bottom: 0.5rem; opacity: 0.4; }
.empty-state p { font-size: 0.8rem; line-height: 1.6; }
.empty-state em { font-family: 'Instrument Serif', serif; color: var(--teal); font-style: italic; }

/* MAP */
.map-wrap { position: relative; }
#map { width: 100%; height: 100vh; padding-bottom: 38px; }
.map-title { position: absolute; top: 1rem; right: 1rem; z-index: 1000; background: rgba(255,255,255,0.9); color: var(--muted); padding: 0.4rem 0.7rem; border-radius: 6px; border: 0.5px solid var(--line); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); font-family: 'Inter', sans-serif; }
.leaflet-popup-content { margin: 0.75rem 1rem; }
.popup-book { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 0.95rem; color: var(--ink); margin-bottom: 2px; }
.popup-place { font-size: 0.78rem; color: var(--muted); }
.popup-km { font-size: 0.72rem; color: var(--teal); margin-top: 3px; font-weight: 500; }

/* TARJETAS DE COMUNIDAD (destino y punto de partida)
   El chrome del popup —crema, radio, sombra, piquito y aspa— lo comparten
   las dos, 'dest-popup' y 'origin-popup', para que sean de la misma familia
   sin duplicar reglas. Los popups de rutas y de las lecturas propias siguen
   con el estilo de arriba, intactos. Crema y no blanco puro: el piquito y
   el wrapper se tiñen igual para que la pieza se lea como una sola. */
.dest-popup .leaflet-popup-content-wrapper, .origin-popup .leaflet-popup-content-wrapper, .entry-popup .leaflet-popup-content-wrapper, .start-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 12px; background: var(--paper); box-shadow: 0 6px 24px rgba(26,26,24,0.18); }
/* Sin !important en width: Leaflet fija el ancho inline a partir de
   minWidth/maxWidth y sobreescribirlo colapsa la tarjeta. */
.dest-popup .leaflet-popup-content, .origin-popup .leaflet-popup-content, .entry-popup .leaflet-popup-content, .start-popup .leaflet-popup-content { margin: 0; }
.dest-popup .leaflet-popup-tip, .origin-popup .leaflet-popup-tip, .entry-popup .leaflet-popup-tip, .start-popup .leaflet-popup-tip { background: var(--paper); box-shadow: none; }
.dest-card { animation: fadeIn 0.18s ease-out; max-width: 100%; background: var(--paper); }

/* 1. Cabecera: fragmento real del basemap centrado en el destino.
   El fondo crema hace de suelo mientras los tiles cargan, para que la
   franja nunca aparezca en blanco. */
.dest-card-header { position: relative; height: 100px; overflow: hidden; background: var(--cream); border-radius: 12px 12px 0 0; }
.dest-card-tiles { position: absolute; width: 768px; height: 768px; }
.dest-card-tile { position: absolute; width: 256px; height: 256px; display: block; filter: saturate(0.45) contrast(0.92) brightness(1.04); }
/* Teñido teal diluido en multiply: integra el mapa con la tarjeta sin
   borrar el dibujo. */
.dest-card-tint { position: absolute; inset: 0; background: var(--teal); mix-blend-mode: multiply; opacity: 0.14; pointer-events: none; }
/* Máscara inferior: la transición al cuerpo crema no puede ser un corte. */
.dest-card-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(to bottom, rgba(247,245,241,0), var(--paper)); pointer-events: none; }
/* Ficticios: constelación en vez de mapa. Sus coordenadas son inventadas.
   Fondo crema cálido = naranja de ficticios muy diluido sobre --cream. */
.dest-card.is-fictional .dest-card-header { background: linear-gradient(rgba(232,145,60,0.10), rgba(232,145,60,0.10)), var(--cream); }
.dest-card-sky { display: block; width: 100%; height: 100%; }
.dest-card-sky .dc-star circle { fill: var(--fiction); opacity: 0.7; }
.dest-card-sky .dc-link line { stroke: var(--fiction); stroke-width: 0.7; opacity: 0.4; }
.dest-card-sky .dc-dust circle { fill: var(--fiction); }
/* Marcador: anillo teal de centro blanco, no punto sólido */
.dest-card-pin { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--white); border: 3px solid var(--teal); box-shadow: 0 1px 5px rgba(26,26,24,0.28); }
.dest-card.is-fictional .dest-card-pin { border-color: var(--fiction); }

/* La X de Leaflet, sobre la cabecera y sin cápsula: solo el aspa, fina.
   El área táctil son 40x40 aunque el aspa se dibuje pequeña.
   En --ink y no en blanco porque la cabecera es crema claro: el blanco
   queda en 1,13:1 sobre el fondo y 1,60:1 sobre las curvas, ilegible. La
   sombra clara despega el trazo al pasar sobre una curva.
   El selector necesita .leaflet-container y a: Leaflet estila el aspa con
   `.leaflet-container a.leaflet-popup-close-button` (incluido un shorthand
   `font` que reimpone el grosor), y con menos especificidad gana él — el
   área se quedaba en 24px y el color en su gris. */
.leaflet-container .dest-popup a.leaflet-popup-close-button, .leaflet-container .origin-popup a.leaflet-popup-close-button, .leaflet-container .entry-popup a.leaflet-popup-close-button, .leaflet-container .start-popup a.leaflet-popup-close-button { top: 0; right: 0; width: 40px; height: 40px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font: 300 18px/40px 'Inter', sans-serif; text-align: center; text-shadow: 0 1px 2px rgba(255,255,255,0.75); }
.leaflet-container .dest-popup a.leaflet-popup-close-button:hover, .leaflet-container .origin-popup a.leaflet-popup-close-button:hover, .leaflet-container .entry-popup a.leaflet-popup-close-button:hover, .leaflet-container .start-popup a.leaflet-popup-close-button:hover { color: var(--ink); background: none; opacity: 0.6; }
.leaflet-container .dest-popup a.leaflet-popup-close-button:focus-visible, .leaflet-container .origin-popup a.leaflet-popup-close-button:focus-visible, .leaflet-container .entry-popup a.leaflet-popup-close-button:focus-visible, .leaflet-container .start-popup a.leaflet-popup-close-button:focus-visible { outline: 2px solid var(--teal); outline-offset: -10px; border-radius: 50%; }

/* 2. Título */
.dest-card-body { padding: 0.85rem 1rem 0.95rem; }
.dest-card-title { font-family: 'Instrument Serif', serif; font-size: 1.3rem; font-weight: 400; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.dest-card.is-fictional .dest-card-title { color: var(--fiction); }
.dest-card-geo { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.25rem; }

/* 3. Stats en dos cajas de igual ancho; se apilan si no caben */
.dest-card-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 8px; margin-top: 0.75rem; }
.dest-card-stat { background: var(--cream); border-radius: 8px; padding: 0.55rem 0.6rem; }
.dest-card-stat b { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.dest-card-stat span { display: block; font-size: 0.62rem; color: var(--muted); line-height: 1.3; margin-top: 0.25rem; text-wrap: balance; }
.dest-card.is-fictional .dest-card-stat b { color: var(--fiction); }

/* 4. Ranking */
.dest-card-section { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin: 0.85rem 0 0.5rem; }
.dest-card-rank { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.dest-card-badge { flex-shrink: 0; align-self: flex-start; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-dark); color: var(--muted); font-size: 0.65rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.dest-card-badge.is-first { background: var(--teal); color: var(--white); }
.dest-card.is-fictional .dest-card-badge.is-first { background: var(--fiction); }
.dest-card-rank-title { flex: 1; font-family: 'Instrument Serif', serif; font-size: 0.92rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.dest-card-rank-title em { font-style: italic; }
.dest-card-rank-n { flex-shrink: 0; font-size: 0.66rem; color: var(--muted); }
/* Solo la cifra del nº1 va en teal; el selector cuelga del badge destacado
   para no depender de la posición de la fila en el DOM. */
.dest-card-rank .dest-card-badge.is-first ~ .dest-card-rank-n { color: var(--teal); }
.dest-card.is-fictional .dest-card-rank .dest-card-badge.is-first ~ .dest-card-rank-n { color: var(--fiction); }
/* Filas ocultas tras el toggle */
.dest-card-more { display: none; }
/* Tope de altura con scroll propio: la tarjeta crece hacia arriba desde el
   marcador y, sin tope, a partir de ~14 títulos las primeras filas se salían
   por el borde superior sin forma de alcanzarlas, porque un popup no
   scrollea. Leaflet ya corta la propagación de la rueda sobre el contenido
   del popup, así que este scroll no hace zoom en el mapa.
   El tope va en vh y no en px porque lo que limita es la ventana: Leaflet
   encuadra la tarjeta cerrada al abrirla y lo que crezca después tiene que
   caber en el hueco que quede. Medido a 834px de alto, 18vh (=150px, unas
   5 filas) mantiene el reencuadre de toggleDestCardBooks en un pan corto. */
.dest-card.is-expanded .dest-card-more { display: block; max-height: 18vh; overflow-y: auto; }
.dest-card-toggle { margin-top: 0.5rem; background: none; border: none; padding: 0; font-family: 'Inter', sans-serif; font-size: 0.66rem; color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dest-card-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
/* Sin filete sobre el fallback: --line sobre --paper da 1,12:1, no se lee
   como regla sino como hueco. Se separa con espacio. El margin explícito le
   gana al `.leaflet-popup-content p` de Leaflet, igual que .origin-card-line. */
.dest-popup .dest-card-fallback { margin: 0.85rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.5; }

/* El destino que además es origen. Sin sección ni separador: cierra el
   cuerpo en voz baja. Prefijado para ganarle al `p` de Leaflet, igual que
   .dest-card-fallback. */
.dest-popup .dest-card-also { margin: 0.7rem 0 0; font-size: 0.66rem; color: var(--muted); line-height: 1.45; opacity: 0.9; }
/* La segunda línea va pegada a la primera: son un bloque, no dos párrafos. */
.dest-popup .dest-card-also.is-second { margin-top: 0; }

/* TARJETA DE PUNTO DE PARTIDA
   Misma familia que .dest-card (crema, radio 12px, sombra, piquito, aspa)
   pero a propósito más pobre y más estrecha: sin cabecera, sin cajas y sin
   ranking. Los destinos son el foco; los orígenes, contexto. */
.origin-card { animation: fadeIn 0.18s ease-out; max-width: 100%; background: var(--paper); padding: 0.75rem 1rem 0.8rem; }
/* Serif REDONDA, no cursiva: mismo tamaño y color que el título de destino.
   El padding derecho reserva el sitio del aspa, que aquí no tiene cabecera
   sobre la que apoyarse. */
.origin-card-title { font-family: 'Instrument Serif', serif; font-size: 1.3rem; font-style: normal; font-weight: 400; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; overflow-wrap: anywhere; padding-right: 26px; }
.origin-card.is-fictional .origin-card-title { color: var(--fiction); }
.origin-card-geo { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.25rem; }
/* Dos líneas de dato: viajes y km. La cifra en color, el texto en --muted,
   mismo criterio que las cajas de stats de la tarjeta de destino.
   Prefijado con .origin-popup a propósito: Leaflet trae
   `.leaflet-popup-content p{margin:1.3em 0}`, que con (0,1,1) gana a un
   `.origin-card-line` pelado (0,1,0) y colaba ~15px fantasma arriba y abajo
   de cada párrafo. */
.origin-popup .origin-card-line { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.45; }
/* Las dos líneas del dato van pegadas: son un bloque, no dos párrafos. */
.origin-popup .origin-card-line.is-second { margin-top: 0; }
.origin-card-line b { font-weight: 600; color: var(--teal); }
.origin-card.is-fictional .origin-card-line b { color: var(--fiction); }

/* TARJETA DE LECTURA PROPIA (popup de un destino del usuario)
   Comparte el chrome (crema, radio, piquito, aspa) pero tiene anatomía
   propia: aquí el sujeto es EL LIBRO, no el lugar, así que va de
   protagonista. Rojo --route para lo tuyo; naranja --fiction en ficticios. */
.entry-card { animation: fadeIn 0.18s ease-out; max-width: 100%; background: var(--paper); }
/* Cabecera: página de libro desenfocada. Cada familia tiene la suya —
   mapa real (comunidad), constelación (ficticios), página (tus lecturas).
   El texto es decorativo: no es el libro, evoca "una página".
   100px / 4 líneas para igualar la altura de la cabecera de comunidad (ver
   .dest-card-header); en móvil ambas bajan a 78px / 3 líneas. */
.entry-card-page { position: relative; height: 100px; overflow: hidden; border-radius: 12px 12px 0 0;
  background: linear-gradient(rgba(232,89,60,0.07), rgba(232,89,60,0.07)), var(--cream); }
.entry-card.is-fictional .entry-card-page { background: linear-gradient(rgba(232,145,60,0.09), rgba(232,145,60,0.09)), var(--cream); }
.entry-card-page p { position: absolute; left: 18px; right: 18px; top: 10px; margin: 0;
  color: var(--route); text-align: justify; user-select: none; pointer-events: none;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 13px; line-height: 1.45;
  filter: blur(1.8px); opacity: 0.42;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
/* Ficticios: imprenta antigua, para separarlos a la vista de las reales. */
.entry-card.is-fictional .entry-card-page p { color: var(--fiction); font-family: 'IM Fell English', serif; line-height: 1.4; }
.entry-card-page::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: linear-gradient(to bottom, rgba(247,245,241,0), var(--paper)); }
/* Cuerpo */
.entry-card-body { padding: 0.85rem 1rem 0.95rem; }
.entry-card-book { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.25rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; padding-right: 26px; }
.entry-card-author { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
.entry-card-geo { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.5rem; }
.entry-card-geo b { color: var(--route); font-weight: 600; }
.entry-card.is-fictional .entry-card-geo b { color: var(--fiction); }
.entry-card-km { font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; }
.entry-card-km b { color: var(--route); font-weight: 600; }
.entry-card.is-fictional .entry-card-km b { color: var(--fiction); }
/* El margin explícito le gana al `.leaflet-popup-content p` de Leaflet. */
.entry-popup .entry-card-note { margin: 0.65rem 0 0; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 0.85rem; color: var(--ink); line-height: 1.45; padding-left: 0.6rem; border-left: 2px solid var(--cream-dark); }
/* Pionera: sin relleno ni borde, para que el único elemento con fondo sea
   la acción. Solo se pinta si nadie más ha llegado (lo decide el JS). */
.entry-card-pioneer { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; font-size: 0.66rem; color: var(--teal); font-weight: 500; }
.entry-popup .entry-card-com { margin: 0.7rem 0 0; font-size: 0.66rem; color: var(--muted); line-height: 1.45; }
.entry-card-com b { color: var(--teal); font-weight: 600; }
/* Acción sin filete: en estas tarjetas se separa con espacio, no con líneas. */
.entry-card-action { margin-top: 0.9rem; }
.entry-card-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; color: var(--white); background: var(--teal); border: none; border-radius: 20px; padding: 0.4rem 0.85rem; cursor: pointer; }
.entry-card-btn:hover { background: var(--forest-mid); }
.entry-card-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.entry-card-hint { font-size: 0.66rem; color: var(--muted); font-style: italic; }

/* TARJETA DE PUNTO DE PARTIDA PROPIO
   El origen de una entrada de "otro lugar", que hasta ahora no se dibujaba y
   dejaba su ruta saliendo de la nada. Como la de origen de comunidad pero en
   rojo, porque es tuya. */
.start-card { animation: fadeIn 0.18s ease-out; max-width: 100%; background: var(--paper); padding: 0.75rem 1rem 0.8rem; }
.start-card-title { font-family: 'Instrument Serif', serif; font-size: 1.3rem; font-weight: 400; line-height: 1.15; color: var(--route); letter-spacing: -0.01em; overflow-wrap: anywhere; padding-right: 26px; }
.start-card-geo { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.25rem; }
.start-popup .start-card-line { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.45; }
.start-card-line b { color: var(--route); font-weight: 600; }

@media (max-width: 480px) {
  .dest-card-header { height: 78px; }
  /* Espejo de la cabecera de comunidad en móvil: 78px / 3 líneas. */
  .entry-card-page { height: 78px; }
  .entry-card-page p { -webkit-line-clamp: 3; line-clamp: 3; }
  .dest-card-title { font-size: 1.15rem; }
  .origin-card-title { font-size: 1.15rem; }
  .entry-card-book { font-size: 1.15rem; }
  .start-card-title { font-size: 1.15rem; }
}

/* FICTIONAL PLACE MODAL */
.fictional-overlay { position: fixed; inset: 0; background: rgba(26,26,24,0.55); z-index: 9000; display: none; align-items: center; justify-content: center; }
.fictional-overlay.visible { display: flex; }
.disambig-overlay { position: fixed; inset: 0; background: rgba(26,26,24,0.55); z-index: 9000; display: none; align-items: center; justify-content: center; }
.disambig-overlay.visible { display: flex; }
.disambig-modal { background: var(--white); border-radius: 12px; padding: 1.5rem 1.6rem; max-width: 400px; width: 92%; box-shadow: 0 12px 44px rgba(0,0,0,0.18); font-family: 'Inter', sans-serif; }
.disambig-modal h3 { font-family: 'Instrument Serif', serif; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.35rem; }
.disambig-modal p { font-size: 0.78rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.5; }
.disambig-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 0.5px solid var(--line); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--white); width: 100%; text-align: left; font-family: 'Inter', sans-serif; }
.disambig-option:hover { border-color: var(--teal); background: rgba(29,158,117,0.04); }
.disambig-option-name { font-size: 0.88rem; color: var(--ink); font-weight: 500; display: block; }
.disambig-option-detail { font-size: 0.72rem; color: var(--muted); display: block; margin-top: 1px; }
.disambig-cancel { margin-top: 0.5rem; width: 100%; padding: 0.55rem; background: none; border: 0.5px solid var(--line); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.disambig-cancel:hover { border-color: var(--ink); color: var(--ink); }
.fictional-modal { background: var(--white); border-radius: 12px; padding: 1.5rem 1.6rem; max-width: 400px; width: 92%; box-shadow: 0 12px 44px rgba(0,0,0,0.18); font-family: 'Inter', sans-serif; }
.fictional-modal h3 { font-family: 'Instrument Serif', serif; font-size: 1.2rem; color: var(--ink); margin-bottom: 1rem; }
.fictional-modal h3 span { color: #e8913c; }
#fictional-overlay .fictional-modal h3 { color: #e8913c; }
.community-block { background: rgba(232,145,60,0.07); border-left: 2.5px solid #e8913c; border-radius: 0 6px 6px 0; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; }
.community-block .c-votes { font-size: 0.82rem; color: #b06420; font-weight: 500; margin-bottom: 0.15rem; }
.community-block .c-place { font-size: 0.76rem; color: var(--muted); }
.fictional-modal .divider { display: flex; align-items: center; gap: 0.6rem; margin: 1.1rem 0 0.85rem; }
.fictional-modal .divider span { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.fictional-modal .divider::before, .fictional-modal .divider::after { content: ''; flex: 1; height: 0.5px; background: var(--line); }
.fictional-modal label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 500; display: block; margin-bottom: 0.4rem; }
.fictional-modal input { width: 100%; padding: 0.4rem 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--ink); outline: none; box-sizing: border-box; background: transparent; }
.fictional-modal input:focus { border-bottom-color: #e8913c; box-shadow: none; }
.fictional-modal .input-hint { font-size: 0.69rem; color: var(--muted); margin-top: 0.4rem; font-style: italic; }
.fictional-btns { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.fictional-btns button { flex: 1; padding: 0.6rem; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
.btn-use-community { background: var(--teal); color: white; }
.btn-use-community:hover { background: var(--forest-mid); }
.btn-use-custom { background: none; border: 0.5px solid #e8913c; color: #c4671e; }
.btn-use-custom:hover { background: rgba(232,145,60,0.08); }

/* X de esquina que cierra el modal ficticio sin cancelar el viaje */
.fic-close-x {
  position: absolute; top: 0.9rem; right: 1rem; background: none; border: none;
  font-size: 1.05rem; line-height: 1; color: var(--muted); cursor: pointer;
  padding: 0.2rem; transition: color 0.15s ease;
}
.fic-close-x:hover { color: var(--ink); }
.fic-btns-single { justify-content: center; }
.fic-btns-single .btn-use-custom {
  min-width: 60%; padding: 0.6rem 1.1rem; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer;
}

/* Pestañas "Escribir lugar" / "Señalar en el mapa" dentro del modal ficticio */
.fic-method-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.fic-method-tab {
  flex: 1; padding: 0.5rem 0.4rem; border-radius: 8px; border: 0.5px solid var(--line);
  background: var(--white); cursor: pointer; font-family: 'Inter', sans-serif;
  font-size: 0.76rem; color: var(--muted); text-align: center; transition: all 0.15s;
}
.fic-method-tab.active { border: 1.5px solid #e8913c; background: rgba(232,145,60,0.06); color: var(--ink); font-weight: 500; }

#fic-mini-map { width: 100%; height: 180px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 0.5rem; }

/* NAV TABS */
.sidebar-nav { display: flex; background: var(--white); border-bottom: 0.5px solid var(--line); flex-shrink: 0; padding: 0 1.75rem; }
.nav-tab { flex: 1; padding: 0.75rem 0.5rem; font-size: 0.78rem; text-align: center; cursor: pointer; color: var(--muted); border: none; background: none; font-family: 'Inter', sans-serif; letter-spacing: 0.01em; transition: color 0.15s; border-bottom: 2px solid transparent; margin-bottom: -0.5px; }
.nav-tab:hover { color: var(--ink); }
.nav-tab.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 500; }
.tab-panel { display: none; }
.tab-panel.active { display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.75rem 1.5rem; }
.tab-panel { scrollbar-width: none; }
.tab-panel::-webkit-scrollbar { display: none; }

/* DIARIO */
.diary-empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.diary-empty .diary-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.35; }
.diary-empty p { font-size: 0.8rem; line-height: 1.6; }
.diary-entry { padding: 0.9rem 0; border-bottom: 1px solid var(--cream-dark); animation: fadeIn 0.3s ease; }
.diary-entry:last-child { border-bottom: none; }
.diary-date { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.3rem; }
.diary-text { font-family: 'Instrument Serif', serif; font-size: 0.92rem; color: var(--ink); line-height: 1.5; font-style: italic; }
.diary-text .place { color: var(--teal); font-style: normal; font-weight: 600; }
.diary-text .place.fictional { color: #e8913c; }
.diary-text .book-ref { color: var(--muted); font-size: 0.78rem; display: block; margin-top: 0.2rem; font-style: normal; font-family: 'Inter', sans-serif; }
.diary-pioneer { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: var(--teal); background: rgba(29,158,117,0.08); border: 1px solid rgba(29,158,117,0.25); border-radius: 20px; padding: 0.2rem 0.55rem; margin-top: 0.4rem; font-weight: 500; }

/* LOGROS */
.badge-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 0.5px solid var(--line); position: relative; }
.badge-row:last-child { border-bottom: none; }
.badge-row-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(29,158,117,0.09); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.badge-row.locked .badge-row-icon { background: var(--cream-dark, #f1eee8); filter: grayscale(1); opacity: 0.75; }
/* El padding derecho reserva exactamente el glifo del check (12px) en TODOS
   los estados: el título dispone de idéntico ancho útil pendiente y
   conseguido, y nunca cambia de número de líneas al desbloquearse. Sin gap
   extra a propósito: cada px cuenta — con 12 caben a una línea books_5 (253px)
   y km_1k (252px); las líneas rompen por palabra, así que el margen real
   contra el check queda en 3-4px, no en 0. */
.badge-row-body { flex: 1; min-width: 0; padding-right: 12px; }
.badge-row-name { font-size: 0.92rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.badge-row.locked .badge-row-name { color: var(--muted); }
.badge-row-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin-top: 1px; }
/* Fuera del flujo horizontal: el check no roba ancho al título. */
.badge-row-check { color: var(--teal); font-size: 0.95rem; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.badge-row-track { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.badge-row-bar-bg { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.badge-row-bar { height: 100%; background: var(--teal); border-radius: 2px; }
.badge-row-frac { font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
.badge-row.badge-hidden .badge-row-icon { opacity: 0.45; filter: grayscale(1); }
.badge-row.badge-hidden .badge-row-name { color: var(--muted); font-style: italic; }
.badge-row.badge-hidden .badge-row-desc { color: var(--muted); }
.badges-section-title { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 1.25rem 0 0.6rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.badges-section-title:first-child { margin-top: 0; }
.badges-section-title::after { content: ''; flex: 1; height: 0.5px; background: var(--line); }

/* FAMILIA DE TOASTS — tarjeta base compartida (logro, pionero, viaje añadido) */
.lev-toast { position: fixed; top: 12vh; left: calc(50% + 190px); right: auto; z-index: 9998; border-radius: 10px; padding: 20px 18px; text-align: left; box-shadow: 0 8px 32px rgba(0,0,0,0.12); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; width: 300px; max-width: calc(100vw - 1.5rem); transform: translate(-50%, -20px); overflow: hidden; font-family: 'Inter', sans-serif; }
.lev-toast.show { transform: translate(-50%, 0); opacity: 1; }
.lev-toast .lt-kicker { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.lev-toast .lt-name { font-family: 'Instrument Serif', serif; font-size: 24px; font-weight: 400; color: #1a1a18; margin-top: 4px; }
.lev-toast .lt-desc { font-size: 13px; color: #9a948d; line-height: 1.5; margin-top: 4px; }
#pioneer-toast, #entry-added-toast { cursor: pointer; }
#pioneer-toast.show, #entry-added-toast.show { pointer-events: auto; }
#pioneer-toast.toast-real { background: #e1f5ee; }
#pioneer-toast.toast-real .lt-kicker { color: #0f6e56; }
#pioneer-toast.toast-real .lt-desc { color: #5f7a6e; }
#pioneer-toast.toast-fictional { background: #faf0e2; }
#pioneer-toast.toast-fictional .lt-kicker { color: #c4671e; }
#pioneer-toast.toast-fictional .lt-name { color: #e8913c; }
#pioneer-toast.toast-fictional .lt-desc { color: #8a6a4a; }
#entry-added-toast { background: #ffffff; }
#entry-added-toast.toast-real .lt-kicker { color: #1d9e75; }
#entry-added-toast.toast-fictional .lt-kicker { color: #e8913c; }
#entry-added-toast.toast-fictional .lt-name { color: #e8913c; }

/* CTA CUENTA (primer libro sin sesión) */
#auth-cta-toast { background: var(--white); cursor: default; }
#auth-cta-toast.show { pointer-events: auto; }
#auth-cta-toast .lt-kicker { color: var(--teal); }
#auth-cta-toast .lt-actions { display: flex; align-items: center; gap: 14px;
  border-top: 0.5px solid var(--line); padding-top: 12px; margin-top: 14px; }
#auth-cta-toast .lt-btn { background: var(--teal); color: var(--white); border: none;
  border-radius: 6px; padding: 8px 14px; font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; }
#auth-cta-toast .lt-dismiss { background: none; border: none; color: var(--muted);
  font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }

/* BADGE DESBLOQUEADO celebración (extras sobre .lev-toast) */
.badge-unlock-toast { background: #ffffff; }
.badge-unlock-toast.show { animation: lev-badge-flash 2.2s linear 1; }
.badge-unlock-toast .bu-kicker { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #1d9e75; }
.badge-unlock-toast .bu-name { font-family: 'Instrument Serif', serif; font-size: 24px; font-weight: 400; color: #1a1a18; margin-top: 4px; }
.badge-unlock-toast .bu-desc { font-size: 13px; color: #9a948d; line-height: 1.5; margin-top: 4px; }
.badge-unlock-toast .bu-footer { border-top: 0.5px solid #ece8e1; padding-top: 10px; margin-top: 12px; }
.badge-unlock-toast .bu-link { font-size: 12px; color: #1d9e75; text-decoration: none; pointer-events: auto; }
.badge-unlock-toast .bu-piece { position: absolute; animation: lev-badge-burst 2.2s cubic-bezier(.1,.6,.35,1) 1 both; }
.badge-unlock-toast .bu-piece.rect { width: 5px; height: 9px; border-radius: 1px; }
.badge-unlock-toast .bu-piece.dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-unlock-toast .bu-piece.dot-sm { width: 5px; height: 5px; border-radius: 50%; }
.badge-unlock-toast .bu-piece.c-teal { background: #1d9e75; }
.badge-unlock-toast .bu-piece.c-mint { background: #9fd9c0; }
.badge-unlock-toast .bu-piece.c-orange { background: #e8913c; }
.badge-unlock-toast .bu-piece.c-forest { background: #0f6e56; }
@keyframes lev-badge-flash {
  0%   { background: #ffffff; }
  6%   { background: #e1f5ee; }
  22%  { background: #ffffff; }
  100% { background: #ffffff; }
}
@keyframes lev-badge-burst {
  0%   { transform: translate(0,0) rotate(0deg) scale(0); opacity: 0; }
  10%  { opacity: 1; transform: translate(calc(var(--dx)*.5), calc(var(--dy)*.55)) rotate(120deg) scale(1.1); }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(360deg) scale(.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-unlock-toast.show { animation: none; }
  .badge-unlock-toast .bu-piece { display: none; }
}

/* EXPORT MODAL */
.export-overlay { position: fixed; inset: 0; background: rgba(26,26,24,0.7); z-index: 9100; display: none; align-items: center; justify-content: center; }
.export-overlay.visible { display: flex; }
.export-modal { background: var(--white); border-radius: 14px; width: 92%; max-width: 520px; box-shadow: 0 12px 48px rgba(0,0,0,0.25); font-family: 'Inter', sans-serif; overflow: hidden; }
.export-modal-header { background: var(--white); padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid var(--line); }
.export-modal-header h3 { font-family: 'Instrument Serif', serif; color: var(--ink); font-size: 1.05rem; font-weight: 400; }
.export-close { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0 0.25rem; transition: color 0.15s; }
.export-close:hover { color: var(--ink); }
.export-modal-body { padding: 1.25rem 1.5rem; }

/* Selector de modo */
.export-modes { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.export-mode-btn { flex: 1; padding: 0.6rem 0.4rem; border-radius: 8px; border: 0.5px solid var(--line); background: var(--white); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: var(--muted); text-align: center; transition: all 0.15s; line-height: 1.4; }
.export-mode-btn .em-icon { font-size: 1.2rem; display: block; margin-bottom: 0.2rem; }
.export-mode-btn.active { border: 1.5px solid var(--teal); background: rgba(29,158,117,0.06); color: var(--ink); }
.export-formats { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.export-fmt-btn { flex: 1; padding: 0.55rem 0.4rem; border-radius: 8px; border: 0.5px solid var(--line); background: var(--white); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; transition: all 0.15s; }
.export-fmt-btn .ef-ratio { border: 1.5px solid currentColor; border-radius: 2px; opacity: 0.6; }
.export-fmt-btn .ef-sub { font-size: 0.62rem; color: var(--muted); opacity: 0.75; }
.export-fmt-btn.active { border: 1.5px solid var(--teal); background: rgba(29,158,117,0.06); color: var(--ink); }
.export-fmt-btn.active .ef-ratio { color: var(--teal); opacity: 0.9; }
.export-fmt-btn.active .ef-sub { color: var(--teal); }
.export-group-label { font-family: 'Inter', sans-serif; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; margin-bottom: 0.4rem; }
.export-periods { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.export-period-btn { flex: 1; padding: 0.5rem 0.4rem; border-radius: 8px; border: 0.5px solid var(--line); background: var(--white); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: var(--muted); text-align: center; transition: all 0.15s; }
.export-period-btn.active { border: 1.5px solid var(--teal); background: rgba(29,158,117,0.06); color: var(--ink); }
.export-period-select { width: 100%; padding: 0.5rem 0.6rem; border: 0.5px solid var(--line); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.78rem; color: var(--ink); background: var(--white); margin-bottom: 1rem; outline: none; cursor: pointer; }
.export-period-select:focus { border-color: var(--teal); }

/* Preview canvas */
.export-preview-wrap { background: transparent; border: none; overflow: visible; margin: 0.15rem 0 1.1rem; position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 0.6rem 0; }
.export-preview-wrap canvas { max-width: 100%; display: block; border-radius: 9px; border: 0.5px solid var(--line); box-shadow: 0 10px 30px rgba(26,26,24,0.15), 0 2px 6px rgba(26,26,24,0.08); }
.export-preview-loading { color: var(--muted); font-size: 0.8rem; position: absolute; }

/* Frase editable (solo modo wrapped) */
.export-phrase-wrap { display: none; margin-bottom: 1rem; }
.export-phrase-wrap.visible { display: block; }
.export-phrase-wrap label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 500; display: block; margin-bottom: 0.35rem; }
.export-phrase-wrap textarea { width: 100%; padding: 0.35rem 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; font-family: 'Instrument Serif', serif; font-size: 1.05rem; font-style: italic; color: var(--ink); resize: none; line-height: 1.5; outline: none; background: transparent; }
.export-phrase-wrap textarea:focus { border-bottom-color: var(--teal); box-shadow: none; }
.export-phrase-regen { font-size: 0.7rem; color: var(--teal); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; margin-top: 0.4rem; display: block; }

/* Botones */
.export-actions { display: flex; gap: 0.6rem; }
.export-actions button { flex: 1; padding: 0.65rem; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s; }
.btn-export-download { background: var(--teal); color: white; }
.btn-export-download:hover { background: var(--forest-mid); }
.btn-export-cancel { background: none; border: 0.5px solid var(--line); color: var(--muted); flex: 0 0 auto; padding: 0.65rem 1rem; }
.btn-export-cancel:hover { background: var(--paper); }

/* Botón exportar en la UI */
.export-trigger { position: absolute; top: 3.2rem; right: 1rem; z-index: 1000; background: rgba(255,255,255,0.92); color: var(--ink); border: 0.5px solid var(--line); border-radius: 6px; padding: 0.45rem 0.75rem; font-size: 0.72rem; font-family: 'Inter', sans-serif; cursor: pointer; letter-spacing: 0.04em; transition: all 0.15s; display: flex; align-items: center; gap: 0.4rem; }
.export-trigger:hover { background: var(--teal); color: white; border-color: var(--teal); }

/* ONBOARDING */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
  display: none;
}
.onboarding-backdrop {
  position: absolute; inset: 0;
  background: rgba(26,26,24,0.5);
  transition: opacity 0.4s ease;
}
.onboarding-highlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 4000px rgba(26,26,24,0.45);
  border: 2px solid var(--teal);
  z-index: 8050;
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.onboarding-card {
  position: fixed;
  background: var(--white);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.3rem 1rem;
  max-width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  pointer-events: auto;
  z-index: 8100;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
  opacity: 0;
  top: -999px; left: -999px;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.onboarding-step {
  font-size: 0.62rem; color: var(--teal); opacity: 1;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 0.4rem; font-family: 'Inter', sans-serif; font-weight: 500;
}
.onboarding-text {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem; color: var(--ink);
  line-height: 1.55; font-style: italic;
  margin-bottom: 1rem;
}
.onboarding-text em {
  color: var(--teal); font-style: normal;
  font-family: 'Inter', sans-serif; font-weight: 500;
}
.onboarding-dots {
  display: flex; gap: 0.35rem; margin-bottom: 0.9rem;
}
.onboarding-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: background 0.2s;
}
.onboarding-dot.active { background: var(--teal); }
.onboarding-actions {
  display: flex; align-items: center; justify-content: space-between;
}
.onboarding-next {
  background: var(--teal); color: white; border: none;
  border-radius: 8px; padding: 0.5rem 1rem;
  font-family: 'Inter', sans-serif; font-size: 0.82rem;
  font-weight: 500; cursor: pointer; transition: background 0.15s;
}
.onboarding-next:hover { background: var(--forest-mid); }
.onboarding-skip {
  background: none; border: none; color: var(--muted);
  font-size: 0.72rem; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: color 0.15s; padding: 0;
}
.onboarding-skip:hover { color: var(--ink); }

/* FRANJA DE ACTIVIDAD */
.activity-strip {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
  padding: 0.55rem 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  border-top: 0.5px solid var(--line);
  overflow: hidden;
  height: 38px;
}
.activity-content {
  position: absolute;
  left: 380px; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  height: 38px; top: 0;
}
.activity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
  /* Acompaña al fundido del texto (.activity-msg, 0.6s): ui.js cambia la clase
     con la frase en opacidad 0, y el color entra a la vez que ella. */
  transition: background 0.6s ease;
}
/* Mensajes de temática ficticia. El naranja es SOLO del punto: el <em> del
   texto se queda en ink y en Instrument Serif en todos los casos. */
.activity-dot.fictional { background: var(--fiction); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}
.activity-msg {
  font-size: 0.72rem; color: var(--muted);
  font-family: 'Inter', sans-serif; letter-spacing: 0.02em;
  white-space: nowrap; opacity: 0;
  transition: opacity 0.6s ease;
}
.activity-msg.visible { opacity: 1; }
.activity-msg em {
  font-style: italic;
  font-family: 'Instrument Serif', serif;
  color: var(--ink);
}
.activity-sep {
  font-size: 0.65rem; color: var(--line);
  flex-shrink: 0; margin: 0 0.25rem;
}
/* Sin franja (capa de comunidad apagada, caché aún sin poblar o ningún mensaje
   por encima del umbral). Se oculta Y se recupera el hueco que #map le reserva
   al pie: ocultarla sola dejaba una banda blanca de 38px bajo el mapa. */
body.no-activity .activity-strip { display: none; }
body.no-activity #map { padding-bottom: 0; }

/* LEYENDA */
.map-legend {
  position: absolute; bottom: 52px; left: 1rem; z-index: 1000;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  border: 0.5px solid var(--line);
  border-radius: 8px; padding: 0.55rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.legend-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; color: var(--muted);
  font-family: 'Inter', sans-serif; letter-spacing: 0.02em; white-space: nowrap;
}
.legend-line {
  width: 22px; height: 2px; flex-shrink: 0;
}
.legend-line.own {
  background: #e8593c;
}
.legend-line.community {
  background: none;
  border-top: 2px dashed rgba(29,158,117,0.7);
}
.legend-line.fictional {
  background: none;
  border-top: 2px dashed rgba(232,145,60,0.7);
}

/* TOGGLE CAPA COMUNIDAD */
.community-toggle {
  position: absolute; right: 60px; bottom: 92px; z-index: 1000;
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  border: 0.5px solid var(--line); border-radius: 8px;
  padding: 0.45rem 0.7rem; cursor: pointer;
  font-size: 0.68rem; color: var(--teal);
  font-family: 'Inter', sans-serif; letter-spacing: 0.02em; white-space: nowrap;
  transition: opacity 0.18s ease;
}
/* Con una tarjeta abierta el chip cede el paso: en la esquina superior derecha
   se solapaba con la X del popup (z-index 1000 > popupPane) y la volvía no
   pulsable. Se apaga y deja de capturar clicks mientras hay un popup abierto. */
.community-toggle.popup-open { opacity: 0; pointer-events: none; }
.community-toggle.off { color: #9a948d; }
/* Icono ojo: hereda color vía currentColor (teal activo, gris apagado) */
.community-toggle .eye-open, .community-toggle .eye-off { vertical-align: middle; }
.community-toggle .eye-off { display: none; }
.community-toggle.off .eye-open { display: none; }
.community-toggle.off .eye-off { display: inline; }

/* TOOLTIP BIENVENIDA */
.welcome-tooltip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1001;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
  border: 0.5px solid var(--line);
  border-radius: 10px; padding: 0.75rem 1.1rem;
  max-width: 340px; width: max-content;
  display: flex; align-items: flex-start; gap: 0.65rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  animation: tooltip-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: auto;
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.welcome-tooltip .wt-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.welcome-tooltip .wt-text {
  font-size: 0.78rem; color: var(--ink);
  font-family: 'Inter', sans-serif; line-height: 1.5;
}
.welcome-tooltip .wt-text em {
  font-style: italic; font-family: 'Instrument Serif', serif; color: var(--teal);
}
.welcome-tooltip .wt-close {
  background: none; border: none; color: var(--muted);
  font-size: 0.8rem; cursor: pointer; flex-shrink: 0;
  margin-top: 1px; padding: 0; line-height: 1;
  transition: color 0.15s;
}
.welcome-tooltip .wt-close:hover { color: var(--ink); }
.popup-community { margin-top: 6px; padding-top: 6px; border-top: 1px solid #eee; font-size: 0.72rem; color: var(--muted); }
.popup-community strong { color: var(--teal); font-weight: 600; }

/* POSTAL MODAL */
.postal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(26,26,24,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; }
.postal-overlay.open { display: flex; }
.postal-modal {
  background: var(--parchment); border-radius: 14px; width: 660px; max-width: 95vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3); position: relative;
  padding: 1.75rem 1.75rem 1.15rem;
}
.postal-close {
  position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none;
  font-size: 1.25rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.25rem;
}
.postal-close:hover { color: var(--ink); }

.postal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.postal-left-title { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--teal); }
.postal-place-name {
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.6rem;
  color: var(--ink); line-height: 1.15; margin-top: 0.3rem;
}
.postal-place-name span {
  font-family: 'Inter', sans-serif; font-style: normal; font-size: 0.72rem;
  color: var(--muted); display: block; margin-top: 0.35rem;
}

.postal-marks { position: relative; flex-shrink: 0; width: 158px; height: 100px; margin-right: 0.75rem; }
.postal-stamp {
  position: absolute; top: 0; right: 0; width: 72px; height: 90px;
  background: var(--white); border: 1px dashed #c9c4b8; border-radius: 3px; padding: 5px;
}
.postal-stamp-inner {
  width: 100%; height: 100%; background: #e8f0eb; border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.postal-modal.is-fictional .postal-stamp-inner { background: #f9eedd; }
.stamp-symbol-real {
  width: 22px; height: 22px; border: 2px solid var(--teal); border-radius: 50%;
  background: var(--white); display: flex; align-items: center; justify-content: center;
}
.stamp-dot { width: 11px; height: 11px; background: var(--teal); border-radius: 50%; }
.stamp-symbol-fictional { display: none; font-size: 1.3rem; color: #e8913c; line-height: 1; }
.postal-modal.is-fictional .stamp-symbol-real { display: none; }
.postal-modal.is-fictional .stamp-symbol-fictional { display: block; }
.postal-stamp-brand {
  font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--forest-mid); text-align: center; line-height: 1.6; padding-left: 1px;
}
.postal-modal.is-fictional .postal-stamp-brand { color: #9c5a17; }

.postal-cancel-mark { position: absolute; top: 4px; left: 0; width: 94px; height: 94px; transform: rotate(-8deg); }
.postal-cancel-svg { width: 100%; height: 100%; }
.postal-cancel-svg circle { fill: none; stroke: #5f5d55; stroke-width: 1; opacity: 0.75; }
.postal-cancel-svg circle:first-of-type { stroke-width: 1.4; }
.postal-arc-text {
  font-size: 10px; letter-spacing: 2.5px; fill: #5f5d55; opacity: 0.85;
  font-family: 'Instrument Serif', serif; text-transform: uppercase;
}
.postal-arc-dots { font-size: 9px; letter-spacing: 4px; fill: #5f5d55; opacity: 0.7; }
.postal-stamp-date {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px; font-family: 'Instrument Serif', serif;
  font-size: 0.6rem; line-height: 1.45; color: #5f5d55;
}

.postal-body { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; }
.postal-columns { display: flex; gap: 1.25rem; }
.postal-write { flex: 1.3; display: flex; flex-direction: column; }
.postal-write textarea {
  width: 100%; height: 112px; border: none; outline: none; background: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 27px, #e4dfd3 27px, #e4dfd3 28px);
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.05rem;
  line-height: 28px; color: var(--ink); resize: none; padding: 0;
}
.postal-write textarea::placeholder { color: var(--muted); opacity: 0.8; }
.postal-sign { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.75rem; font-family: 'Instrument Serif', serif; font-style: italic; color: var(--ink); }
.postal-sign input {
  flex: 1; border: none; border-bottom: 1px solid #d6d1c4; border-radius: 0; background: transparent; outline: none;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1rem;
  color: var(--ink); padding: 0.2rem 0; transition: border-color 0.15s;
}
.postal-divider { width: 1px; background: #ded9cd; }
.postal-address { flex: 1; padding-top: 0.2rem; }
.postal-address-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 0.55rem; }
.postal-address input {
  width: 100%; border: none; border-bottom: 1px solid #d6d1c4; border-radius: 0; background: transparent; outline: none;
  color: var(--ink); padding: 0.45rem 0 0.3rem; transition: border-color 0.15s;
}
.postal-address input[type="text"] { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1rem; }
.postal-address input[type="email"] { font-family: 'Inter', sans-serif; font-size: 0.78rem; }
.postal-address-line { border-bottom: 1px solid #d6d1c4; height: 1.7rem; }
.postal-sign input:focus, .postal-address input:focus { border-bottom-color: var(--teal); }
.postal-sign input::placeholder, .postal-address input::placeholder { color: var(--muted); opacity: 0.8; }

.postal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.9rem; padding-top: 0.9rem; margin-top: 0.5rem; border-top: 0.5px solid var(--line); }
.postal-btn-send {
  background: var(--teal); color: white; border: none;
  border-radius: 8px; padding: 0.6rem 1.1rem; font-size: 0.82rem; font-weight: 500;
  font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.15s;
}
.postal-btn-send:hover { background: var(--forest-mid); }
.postal-btn-cancel {
  background: none; border: none; padding: 0.6rem 0.2rem;
  font-size: 0.8rem; color: var(--muted); font-family: 'Inter', sans-serif; cursor: pointer;
}
.postal-btn-cancel:hover { color: var(--ink); }
.postal-sent { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; padding: 2.25rem 1rem 1.5rem; }
.postal-sent .sent-icon { font-size: 2.5rem; }
.postal-sent p { font-family: 'Instrument Serif', serif; font-size: 1.05rem; color: var(--ink); font-style: italic; line-height: 1.5; }
.postal-sent small { font-size: 0.72rem; color: var(--muted); }

@media (max-width: 768px) {
  .postal-modal { padding: 1.25rem 1.1rem 0.9rem; }
  .postal-place-name { font-size: 1.3rem; }
  .postal-columns { flex-direction: column; gap: 1rem; }
  .postal-divider { display: none; }
  .postal-write textarea { height: 84px; }
  .postal-address { border-top: 1px dashed var(--line); padding-top: 0.9rem; }
}

/* BOTÓN POSTAL EN DIARIO */
.diary-postal-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; color: var(--teal); background: rgba(29,158,117,0.08);
  border: 1px solid rgba(29,158,117,0.25); border-radius: 20px;
  padding: 0.2rem 0.6rem; margin-top: 0.5rem; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: background 0.15s;
}
.diary-postal-btn:hover { background: rgba(29,158,117,0.15); }

/* ===================== MÓVIL · Opción B (pestañas) ===================== */
.mobile-tabbar { display: none; }

@media (max-width: 768px) {
  .app { display: block; height: auto; }

  /* Área táctil ampliada SIN cambiar el tamaño visual: el icono se ve igual
     de pequeño, pero un pseudo-elemento invisible amplía la zona que responde
     al toque hasta ~44px. Así se mantiene la proporción del resto de la UI. */
  .entry-edit, .entry-delete {
    position: relative;
    font-size: 0.75rem; /* igual que en escritorio */
    padding: 2px 4px; margin-top: 2px;
  }
  .entry-edit::after, .entry-delete::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; /* zona táctil, invisible */
  }
  .entry-delete { font-size: 0.85rem; } /* igual que en escritorio: iguala visualmente al ✏️ */

  .map-wrap { position: fixed; inset: 0; z-index: 1; }
  #map { width: 100%; height: 100%; }

  .sidebar {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 20; border-right: none; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; padding-bottom: 80px;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar-header { padding: 1.25rem 1.25rem 0.75rem; }
  .stats-bar { padding: 0 1.25rem 1rem; }
  .sidebar-nav { padding: 0 1.25rem; }
  .tab-panel.active { padding: 1.25rem 1.25rem 1.5rem; }
  .sidebar.mv-hidden { transform: translateY(100%); }
  .sidebar-nav { display: none; }   /* la reemplaza la barra inferior */

  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    height: 60px; z-index: 50;
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 0.5px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mtab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 500;
    color: var(--muted); background: none; border: none; padding: 0;
  }
  .mtab .mtab-ico { width: 21px; height: 21px; stroke: currentColor; fill: none; }
  .mtab.active { color: var(--teal); }
  .onboarding-card { max-width: calc(100vw - 2rem); }

  /* overlays sobre el mapa */
  .activity-strip { display: none; }
  #map { padding-bottom: 0; } /* la franja no está: sin ella el hueco era banda muerta */
  .map-legend { bottom: 76px; }
  .community-toggle { top: 3rem; right: 0.75rem; bottom: auto; } /* bajo la insignia "Mapa lector · 2026" */
  .map-title { top: 0.75rem; right: 0.75rem; }
  .export-trigger { top: 0.75rem; left: 0.75rem; right: auto; }
  .lev-toast { left: 50%; } /* el mapa ocupa todo el viewport, sin offset del sidebar */
}