/* --- Historial: la línea verde debe seguir el borde redondeado de la tarjeta --- */
/* Estas tarjetas se renderizan como <article class="card entry"> */
.card.entry {
  border-left: 3px solid rgba(107, 142, 110, 0.55);
  padding-left: var(--pad);
  /* anula el padding-left del .entry */
}

/* desactiva la línea "flotante" interna para evitar el corte recto */
.card.entry::before {
  content: none !important;
  display: none !important;
}

/* components.css */
.container {
  max-width: var(--maxw);
  margin: 0 auto;

  /* Safe areas (status bar / gesture nav) */
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom, 0px));
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out), border-color 220ms var(--ease-out);
  will-change: transform;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.30);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn:focus-visible {
  box-shadow: var(--ring);
  border-color: rgba(107, 142, 110, 0.55);
}

.progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.10);
  overflow: hidden;
}

.progress-bar>div {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 600ms var(--ease-out);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);

  /* Sit above gesture/nav bar */
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));

  height: var(--nav-h, 64px);

  /* Always fit the viewport */
  width: calc(100% - 16px);
  max-width: 560px;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;

  background: var(--nav-parchment, var(--nav-bg, rgba(244, 241, 236, 0.78)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--nav-border, var(--border));
  border-radius: 999px;
  box-shadow: var(--shadow-soft, 0 14px 40px rgba(46, 46, 46, 0.12));
  z-index: 999;
}


.bottom-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  height: calc(var(--nav-h, 64px) - 16px);
  width: var(--nav-w, 0px);
  transform: translateX(var(--nav-x, 0px));
  border-radius: 999px;

  /* PLANO: adiós 3D */
  background: rgba(107, 142, 110, 0.10);
  border: 1px solid rgba(107, 142, 110, 0.22);
  box-shadow: none;

  transition: transform 320ms var(--ease-out), width 320ms var(--ease-out), opacity 220ms var(--ease-out);
  pointer-events: none;
  opacity: var(--nav-o, 0);
}



.bottom-nav a {
  position: relative;

  /* center text perfectly */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 70px;
  padding: 0 16px;
  line-height: 1;

  border-radius: 999px;
  color: var(--ink-soft, var(--muted));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 0.95rem;
  font-weight: 500;

  transition: color 220ms var(--ease-out), transform 170ms var(--ease-out), filter 220ms var(--ease-out);
  z-index: 1;
  /* above indicator */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav a:hover {
  color: var(--ink-strong, var(--text));
}

.bottom-nav a:active {
  transform: scale(0.98);
}

/* Estado activo del menú */
.bottom-nav a.active{
  position: relative;
  font-weight: 600;

  /* color ya lo tienes, lo respetamos */
}

/* Halo sutil */
.bottom-nav a.active::before{
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 999px;

  background: radial-gradient(
    circle,
    rgba(107, 142, 110, 0.18) 0%,
    rgba(107, 142, 110, 0.10) 40%,
    rgba(107, 142, 110, 0.00) 70%
  );

  z-index: -1;
}

.bottom-nav a.active::after{
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -6px;

  height: 2px;
  border-radius: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(107,142,110,0.6),
    transparent
  );
}

body.act-4 .bottom-nav a.active::before,
body[data-mordor="1"] .bottom-nav a.active::before{
  background: radial-gradient(
    circle,
    rgba(127,143,132,0.22) 0%,
    rgba(127,143,132,0.12) 40%,
    rgba(127,143,132,0.00) 70%
  );
}

body.act-4 .bottom-nav a.active::after,
body[data-mordor="1"] .bottom-nav a.active::after{
  background: linear-gradient(
    90deg,
    transparent,
    rgba(127,143,132,0.7),
    transparent
  );
}

/* Más presencia del texto activo en fondos claros */
body.act-1 .bottom-nav a.active,
body.act-2 .bottom-nav a.active,
body.act-3 .bottom-nav a.active{
  color: #435e48;   /* verde más oscuro, elegante */
}


/* Modal sobrio */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.modal {
  width: min(520px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.modal .title {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.modal .hito {
  margin-top: 6px;
  font-size: 1.25rem;
  color: var(--text);
}

.modal .meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.modal .actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

/* Inputs sobrios para modales */
.field {
  margin-top: 14px;
}

.label {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px 12px;
  background: rgba(255, 255, 255, 0.40);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 1rem;
}

.input:focus {
  outline: none;
  border-color: rgba(107, 142, 110, 0.9);
  box-shadow: 0 0 0 3px rgba(107, 142, 110, 0.18);
}

/* ---- C3: Historial estilo diario ---- */
.section-title {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--muted);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 6px 2px 8px;
}

.entry {
  position: relative;
  padding-left: 16px;
}

.entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: rgba(107, 142, 110, 0.55);
}

.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.35);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.entry-img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-top: 12px;
  display: block;
}

.entry-long {
  display: none;
  margin-top: 10px;
  color: var(--text);
}

/* Botonera unificada en el historial (Ver imagen + Leer más) */
.entry-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Pergamino narrativo (fallback cuando no hay imagen en el hito actual) */
.parchment {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background:
    radial-gradient(800px 420px at 20% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(245, 238, 220, 0.95) 0%, rgba(233, 216, 175, 0.65) 100%);
  box-shadow: 0 14px 34px rgba(46, 46, 46, 0.10);
}

.parchment-kicker {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: rgba(37, 34, 29, 0.75);
  margin-bottom: 8px;
}

.parchment-text {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.parchment-text::first-letter {
  float: left;
  font-size: 3.0rem;
  line-height: 0.9;
  padding-right: 10px;
  padding-top: 4px;
  color: rgba(107, 142, 110, 0.95);
}


/* --- Epílogo silencioso --- */
body.epilogo .progress,
body.epilogo .bottom-nav,
body.epilogo #btnSumarKm,
body.epilogo #btnReiniciar,
body.epilogo #kmNextTxt,
body.epilogo .progress-bar {
  display: none !important;
}

.btn-cerrar-libro {
  margin: 28px auto 10px;
  display: block;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
}


/* --- Mapa --- */
.map-wrap {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  aspect-ratio: 2048 / 1152;
}

.map-img,
.map-svg,
.map-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-img {
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05);
  opacity: 0.92;
}

.map-svg {
  pointer-events: none;
}

.map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

#routePath {
  display: none !important;
}


/* --- Calibración mapa --- */
.map-cal .select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
}

.map-cal .select:focus {
  border-color: rgba(34, 211, 238, 0.6);
}


/* Page enter (subtle) */
.container {
  animation: pageIn 380ms var(--ease-out) both;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page leave (nav transition) */
body.page-leave .container {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .container {
    animation: none;
  }

  .btn,
  .bottom-nav a,
  .progress-bar>div,
  .bottom-nav::before,
  body.page-leave .container {
    transition: none !important;
  }
}

/* ===== HERO: Tu viaje ===== */
.journey-hero{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.65),
    rgba(245,238,224,0.65)
  );
  border: 1px solid rgba(120, 95, 60, 0.35);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  margin-top: 10px;
}

.journey-head{
  font-variant: small-caps;
  letter-spacing: .08em;
  color: #6b7f6e;
  margin-bottom: 8px;
}

.journey-main{
  text-align: center;
  margin: 6px 0 10px;
}

.journey-km{
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
  color: #556f5c; /* verde más marcado pero sobrio */
}

.journey-km-sub{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7a6a50;
}

.journey-meta{
  display: grid;
  gap: 6px;
  font-size: .9rem;
  color: #5f5a4f;
}

/* =========================================================
   FIX CONTRASTE: pergamino en actos oscuros
   (texto del pergamino debe ser oscuro sobre fondo claro)
   ========================================================= */
body.act-4 .parchment,
body.act-epilogo .parchment,
body[data-mordor="1"] .parchment{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.85),
    rgba(245,238,224,0.85)
  );
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

body.act-4 .parchment-text,
body.act-epilogo .parchment-text,
body[data-mordor="1"] .parchment-text{
  color: rgba(28, 24, 18, 0.92);
  text-shadow: none;
}

body.act-4 .parchment-kicker,
body.act-epilogo .parchment-kicker,
body[data-mordor="1"] .parchment-kicker{
  color: rgba(70, 56, 38, 0.85);
}
body.act-4 #textoCorto,
body.act-epilogo #textoCorto,
body[data-mordor="1"] #textoCorto{
  color: rgba(235, 232, 225, 0.92);
}



/* ================= SPLASH SCREEN ================= */
.splash{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(600px 400px at 50% 30%, rgba(107,142,110,0.25), transparent 60%),
    linear-gradient(180deg, #141518, #2b2c30);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 600ms ease, visibility 600ms ease;
}

.splash.hide{
  opacity: 0;
  visibility: hidden;
}

.splash-inner{
  text-align: center;
  color: #efeae3;
}

.splash-logo{
  width: 120px;
  height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
}

.splash-title{
  font-size: 1.4rem;
  letter-spacing: .12em;
  font-variant: small-caps;
}

.splash-sub{
  margin-top: 6px;
  font-size: .95rem;
  opacity: .85;
}

/* dots animation */
.splash-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}

.splash-dots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bfa66b;
  opacity: .4;
  animation: splashDot 1.4s infinite both;
}

.splash-dots span:nth-child(2){ animation-delay: .2s; }
.splash-dots span:nth-child(3){ animation-delay: .4s; }

@keyframes splashDot{
  0%{opacity:.3}
  50%{opacity:1}
  100%{opacity:.3}
}



/* Velo para transiciones entre pantallas */
#page-fade{
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 1;
  transition: opacity 180ms ease;
  z-index: 9999;
  pointer-events: none;
}
#page-fade.hide{ opacity: 0; }


/* SPA screens */
main.screen{ display:none; }
main.screen.is-active{ display:block; }


/* Ring progress (total) */
.ring-wrap{ display:flex; justify-content:center; align-items:center; }
.ring{ position:relative; width:190px; height:190px; }
.ring-svg{ width:190px; height:190px; display:block; transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: rgba(0,0,0,0.10); stroke-width:10; }
.ring-progress{
  fill:none;
  stroke: var(--accent);
  stroke-width:10;
  stroke-linecap: round;
  stroke-dasharray: 327; /* overwritten by JS */
  stroke-dashoffset: 327; /* overwritten by JS */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.10));
}
.ring-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
}
.ring-pct{ font-size: 42px; letter-spacing: -0.02em; }

.progress-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat-card{
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px;
  text-align:center;
}
.stat-val{ font-size: 22px; margin-top: 6px; }

/* Bottom nav icons */
.bottom-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.bottom-nav .nav-ico{ font-size: 18px; line-height: 1; }
.bottom-nav .nav-label{ font-size: 12px; line-height: 1.1; }

/* Ajustes responsive */
@media (max-width: 420px){
  .progress-grid{ grid-template-columns: 1fr; }
  .ring{ width: 170px; height: 170px; }
  .ring-svg{ width: 170px; height: 170px; }
  .ring-pct{ font-size: 38px; }
}