@import url('p-finish/responsive.css');

/* Navegación horizontal táctil para que todos los accesos sigan siendo utilizables en Android. */
.top-nav-scroll {
  display: flex !important;
  flex-wrap: nowrap !important;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.top-nav-scroll::-webkit-scrollbar { display: none; }
.top-nav-scroll > a { flex: 0 0 auto; white-space: nowrap; }

html.android-device body .top-nav-scroll {
  width: 100%;
  flex: 0 0 100%;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding-bottom: 2px;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain;
}

html.android-device body .top-header > .container {
  flex-wrap: wrap !important;
}

html.android-device body .top-header .top-nav-scroll {
  display: flex !important;
  flex: 0 0 100% !important;
  width: calc(100vw - 2rem) !important;
  max-width: calc(100vw - 2rem) !important;
  min-width: 0 !important;
  height: 3.25rem;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
}

html.android-device body .top-header .top-nav-scroll > a {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: none !important;
}

@media (max-width: 768px) and (pointer: coarse) {
  .top-nav-scroll {
    overflow-x: auto !important;
    touch-action: pan-x !important;
  }
}

/* Refuerzo global de contraste para texto en ambos temas. */
:root:not([data-theme="light"]) body :where(h1, h2, h3, h4, h5, h6, p, a, button, label, li, td, th, strong, small, span) {
  text-shadow: none !important;
  -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] body :where(h1, h2, h3, h4, h5, h6, p, a, button, label, li, td, th, strong, small, span) {
  text-shadow: none !important;
  -webkit-text-stroke: 0.2px rgba(15, 23, 42, 0.7);
}

/* Animación compartida de hojas, visible únicamente en tema claro. */
.leaves-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  display: none;
}

:root[data-theme="light"] .leaves-layer { display: block; }

.leaf {
  position: absolute;
  top: -10vh;
  left: 0;
  width: var(--leaf-size, 18px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
  animation: leaf-fall var(--leaf-duration, 7s) linear 1;
  transform: translateX(var(--leaf-x, 0)) rotate(var(--leaf-rot, 0deg));
}

@keyframes leaf-fall {
  0% { transform: translateX(var(--leaf-x, 0)) translateY(-10vh) rotate(var(--leaf-rot, 0deg)); }
  100% {
    transform: translateX(calc(var(--leaf-x, 0) + var(--leaf-drift, 40px))) translateY(110vh) rotate(calc(var(--leaf-rot, 0deg) + 220deg));
    opacity: 0.25;
  }
}