/* Navegación compartida: vistas del inicio y lecturas, siempre al alcance. */
.navegacion-principal {
  position: sticky !important; top: 0; left: auto !important; right: auto !important;
  z-index: 20; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px; padding: 12px 20px !important;
  background: #0f1d27 !important; color: #fff !important; border-bottom: 1px solid #2a3d4a;
}
.navegacion-principal .logo { flex: none; min-width: 76px; }
.pestanas-superiores { position: relative; min-width: 0; }
.pestanas-superiores::before, .pestanas-superiores::after {
  position: absolute; top: 0; bottom: 0; width: 24px; z-index: 1; pointer-events: none;
  display: flex; align-items: center; color: #8fd6ef; font-size: 20px; opacity: 0; transition: opacity .15s;
}
.pestanas-superiores::before { content: '‹'; left: 0; background: linear-gradient(90deg,#0f1d27 25%,transparent); }
.pestanas-superiores::after { content: '›'; right: 0; justify-content: flex-end; background: linear-gradient(270deg,#0f1d27 25%,transparent); }
.pestanas-superiores.hay-anterior::before, .pestanas-superiores.hay-siguiente::after { opacity: 1; }
.navegacion-principal nav {
  display: flex !important; gap: 4px !important; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 4px 12px;
  min-width: 0; -webkit-overflow-scrolling: touch;
}
.navegacion-principal nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.navegacion-principal nav a {
  flex: none; white-space: nowrap; padding: 10px 12px; border-radius: 999px;
  font: 600 14px/1.35 Inter, system-ui, sans-serif; opacity: 1 !important; color: #c3d2dc;
}
.navegacion-principal nav a:hover { background: #1b3445; color: #fff; }
.navegacion-principal nav a[aria-current="page"] { background: #007ea8; color: #fff; }
.navegacion-principal a:focus-visible, .continuacion button:focus-visible {
  outline: 2px solid #8fd6ef; outline-offset: 3px;
}
.navegacion-principal .derecha { display: flex !important; align-items: center; gap: 14px !important; }
.menu-utilidades { position: relative; }
.menu-utilidades summary { display: grid; place-items: center; list-style: none; width: 36px; height: 40px; cursor: pointer; border-radius: 8px; }
.menu-utilidades summary::-webkit-details-marker { display: none; }
.menu-utilidades summary:hover, .menu-utilidades[open] summary { background: #24394a; }
.menu-utilidades summary:focus-visible { outline: 2px solid #8fd6ef; }
.menu-utilidades svg { width: 22px; height: 22px; }
.menu-utilidades > div { position: absolute; right: 0; top: calc(100% + 8px); width: max-content; max-width: calc(100vw - 32px); padding: 8px; background: #1b2b36; border: 1px solid #3d5363; border-radius: 12px; box-shadow: 0 10px 30px #0005; }
.menu-utilidades a { display: block; padding: 12px; font: 500 14px/1.4 Inter,system-ui,sans-serif; }
.vista-oculta { display: none !important; }
html { scroll-padding-top: calc(var(--alto-navegacion, 110px) + 12px); }
.continuacion-articulo { border-top: 1px solid #2a3d4a; }
.continuacion-articulo .titulo-continuo {
  font-size: clamp(30px, 7.5vw, 44px); line-height: 1.12; letter-spacing: -.02em;
  margin: 10px 0 12px; color: #f1f5f7;
}
.continuacion .estado-lectura { text-align: center; padding: 24px 20px; color: #9caeb9; font-size: 15px; }
.continuacion .estado-lectura button {
  border: 1px solid #496575; border-radius: 999px; padding: 12px 24px;
  background: #007ea8; color: #fff; cursor: pointer; font: inherit;
}
.continuacion .leer-mas { padding-bottom: 36px; }
.continuacion .atajo-lectura { display: inline-block; color: #8fd6ef; font-size: 14px; margin-top: 12px; }
@media (max-width: 650px) {
  .navegacion-principal { gap: 8px 18px; padding: 12px 16px 7px !important; grid-template-columns: minmax(0,1fr) auto; }
  .navegacion-principal .logo { justify-self: start; min-width: 60px; }
  .navegacion-principal .derecha { grid-column: 2; grid-row: 1; }
  .pestanas-superiores { grid-column: 1 / -1; grid-row: 2; }
  .navegacion-principal .logo i { font-size: 11px; }
  .navegacion-principal .logo b { font-size: 19px; }
  .navegacion-principal .logo i:last-child { font-size: 14px; }
  .navegacion-principal nav a { padding: 11px 13px; font-size: 14px; }
  .navegacion-principal .tema-btn .riel { transform: scale(.9); transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }