/* HORIZONTE / Bitácora alpina. Carga y exportación sin dependencias adicionales. */
#alpine-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 65% 20%, #34595caa, transparent 55%), #102421ee;
  backdrop-filter: blur(24px);
  transition:
    opacity 0.8s,
    filter 0.8s,
    visibility 0.8s;
  overflow: hidden;
}
#alpine-loader.departed {
  opacity: 0;
  filter: blur(20px);
  visibility: hidden;
  pointer-events: none;
}
.load-inner {
  width: min(580px, 88vw);
  text-align: center;
  position: relative;
}
.load-inner svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 36px #04161377);
}
.load-inner h2 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin: 15px 0;
  color: #f6f0e2;
}
.load-inner p {
  color: #c4d7cc;
}
.load-eyebrow {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #ffb77d;
  text-transform: uppercase;
}
.load-trail {
  stroke-dasharray: 10 10;
  animation: trailFlow 1.3s linear infinite;
}
.load-cloud {
  animation: cloudDrift 5s ease-in-out infinite alternate;
}
.load-sun {
  transform-origin: 430px 78px;
  animation: sunPulse 3s ease-in-out infinite;
}
.load-line {
  height: 3px;
  width: 180px;
  margin: 24px auto;
  background: #ffffff20;
  overflow: hidden;
  border-radius: 5px;
}
.load-line:after {
  content: "";
  display: block;
  width: 65%;
  height: 100%;
  background: #ffb77d;
  animation: loadSweep 1.4s ease-in-out infinite;
}
.load-skip {
  margin: 15px 0;
  background: transparent;
  border: 1px solid #ffffff40;
  border-radius: 99px;
  padding: 8px 16px;
  color: #d8e7df;
  font-size: 12px;
}
.load-status {
  min-height: 24px;
  font-size: 12px !important;
}
@keyframes trailFlow {
  to {
    stroke-dashoffset: -40;
  }
}
@keyframes cloudDrift {
  to {
    transform: translateX(18px);
  }
}
@keyframes sunPulse {
  50% {
    opacity: 0.65;
    transform: scale(0.94);
  }
}
@keyframes loadSweep {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(160%);
  }
}
#plandialog {
  width: min(1000px, calc(100% - 24px));
  background: radial-gradient(ellipse at top right, #33545040, transparent 45%), var(--bg);
}
.journal-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border: 1px solid #ffffff20;
  border-radius: 18px;
  background: linear-gradient(110deg, #244b40, #203f4d);
  margin-bottom: 18px;
}
.journal-banner svg {
  width: 160px;
  flex-shrink: 0;
  height: 86px;
}
.journal-banner strong {
  font-size: 18px;
  display: block;
}
.journal-banner p {
  color: #c5dcd4;
  font-size: 12px;
  margin-top: 7px;
}
.journal-toolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0;
}
.journal-toolbar p {
  font-size: 12px;
}
.journal-toolbar button {
  font-size: 12px;
}
.journal-empty {
  border: 1px dashed #789d8b;
  border-radius: 18px;
  padding: 35px 25px;
  text-align: center;
  background: #31584418;
}
.journal-empty strong {
  display: block;
  font-size: 22px;
  color: #ffba87;
  margin-bottom: 12px;
}
.planitem.journal-card {
  display: block;
  position: relative;
  border: 1px solid #ffffff24;
  border-radius: 18px;
  padding: 22px;
  margin: 15px 0;
  background: linear-gradient(130deg, #31423840, #242824);
  overflow: hidden;
}
.journal-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--item-color, #fb975c);
}
.journal-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.journal-number {
  display: grid;
  place-items: center;
  background: var(--item-color, #fb975c);
  color: #15251f;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 13px;
  font-weight: 800;
}
.journal-title {
  flex: 1;
  min-width: 0;
}
.journal-title strong {
  font-size: 19px;
  line-height: 1.2;
}
.journal-card .remove-item {
  padding: 7px;
  color: #e7b6a2;
}
.journal-desc {
  font-size: 13px;
  margin: 15px 0;
  color: #bdcabc;
}
.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 17px 0;
}
.journal-grid label {
  font-size: 11px;
  color: #c8d5cd;
  display: block;
}
.journal-grid input,
.journal-note textarea {
  width: 100%;
  margin-top: 5px;
  border: 1px solid #ffffff30;
  border-radius: 10px;
  background: #17251f;
  color: #f5f1e8;
  padding: 11px;
  min-width: 0;
  color-scheme: dark;
}
.journal-note {
  font-size: 11px;
  color: #c8d5cd;
  display: block;
}
.journal-note textarea {
  resize: vertical;
  min-height: 72px;
  font-size: 13px;
}
.journal-tip {
  display: flex;
  gap: 10px;
  border-radius: 12px;
  background: #729f851b;
  padding: 13px;
  margin-top: 15px;
  color: #d5e4d8;
  font-size: 12px;
}
.journal-tip b {
  color: #f4c392;
  white-space: nowrap;
}
.journal-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
.journal-actions button {
  padding: 6px 11px;
  border: 1px solid #ffffff24 !important;
  border-radius: 7px;
  background: #ffffff05 !important;
}
.journal-warning {
  font-size: 12px;
  color: #ffc499 !important;
  margin: 12px 0;
}
.journal-export {
  position: sticky;
  bottom: -30px;
  padding: 20px 0;
  background: linear-gradient(0deg, var(--bg) 80%, transparent);
  z-index: 2;
}
.journal-export .btn {
  font-size: 12px;
}
.nature-ribbon {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(110deg, #254d40, #223b48);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 65px;
  margin-bottom: 20px;
  overflow: hidden;
}
.nature-ribbon svg {
  width: 220px;
  height: 120px;
  flex-shrink: 0;
}
.nature-ribbon h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 10px;
}
.nature-ribbon p {
  color: #c2d5cc;
  font-size: 13px;
  max-width: 630px;
}
.nature-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 17px;
}
.nature-tags span {
  font-size: 10px;
  border: 1px solid #8aafaa66;
  color: #e2ece7;
  padding: 6px 12px;
  border-radius: 99px;
}
@media (max-width: 600px) {
  .journal-card-head {
    gap: 9px;
  }
  .journal-title strong {
    font-size: 17px;
  }
  .planitem.journal-card {
    padding: 18px 15px;
  }
  .journal-banner {
    padding: 17px;
  }
  .journal-banner svg {
    width: 95px;
  }
  .journal-grid {
    gap: 10px;
  }
  .nature-ribbon {
    flex-direction: column;
    padding: 24px;
    gap: 15px;
    align-items: flex-start;
  }
  .nature-ribbon svg {
    width: 170px;
    height: 90px;
  }
  .journal-export {
    bottom: -24px;
  }
  .journal-export .btn {
    flex: 1;
    padding: 12px;
  }
  .journal-tip {
    display: block;
  }
  .journal-tip b {
    display: block;
    margin-bottom: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #alpine-loader,
  #alpine-loader * {
    animation: none !important;
    transition: none !important;
  }
  .journal-card,
  .load-sun,
  .load-cloud,
  .load-trail {
    animation: none !important;
  }
}